modif card resto
This commit is contained in:
Your Name
commit
0bb889bc40
|
|
@ -1,6 +1,6 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { NavBarComponent } from './header/components/nav-bar/nav-bar.component';
|
import { NavBarComponent } from './header/components/nav-bar/nav-bar.component';
|
||||||
|
|
@ -11,7 +11,7 @@ import { FooterComponent } from './footer/footer.component';
|
||||||
import { HomePageComponent } from './pages/home-page/home-page.component';
|
import { HomePageComponent } from './pages/home-page/home-page.component';
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
import { HttpClientModule } from '@angular/common/http';
|
||||||
import { ListCategoriesComponent } from './pages/list-categories/list-categories.component';
|
import { ListCategoriesComponent } from './pages/list-categories/list-categories.component';
|
||||||
|
import { SigninComponent } from './pages/signin/signin.component';
|
||||||
import { RestoPageComponent } from './pages/resto-page/resto-page.component';
|
import { RestoPageComponent } from './pages/resto-page/resto-page.component';
|
||||||
import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
|
import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
|
||||||
import { FiltersPageComponent } from './pages/filters-page/filters-page.component';
|
import { FiltersPageComponent } from './pages/filters-page/filters-page.component';
|
||||||
|
|
@ -34,12 +34,14 @@ import { TemplatePageComponent } from './components/template-page/template-page.
|
||||||
FiltersPageComponent,
|
FiltersPageComponent,
|
||||||
AvisBarComponent,
|
AvisBarComponent,
|
||||||
IconComponent,
|
IconComponent,
|
||||||
|
SigninComponent,
|
||||||
TemplatePageComponent
|
TemplatePageComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
HttpClientModule
|
HttpClientModule,
|
||||||
|
FormsModule,
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { Component, Input, OnInit } from '@angular/core';
|
import { Component, Input, OnInit } from '@angular/core';
|
||||||
import { Router } from '@angular/router';
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
import { ApiBackService } from '../services/api-back.service';
|
import { ApiBackService } from '../services/api-back.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
|
@ -11,20 +11,18 @@ export class CardCategoryComponent implements OnInit {
|
||||||
|
|
||||||
@Input() categoryData : any;
|
@Input() categoryData : any;
|
||||||
|
|
||||||
constructor(private apiBackService : ApiBackService, private route : Router) { }
|
constructor(private apiBackService : ApiBackService, private route : Router, private activatedRoute : ActivatedRoute) { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
onClickCateg(id : number){
|
onClickCateg(id : number){
|
||||||
|
|
||||||
|
this.apiBackService.getRestaurantsByCateg(id , this.activatedRoute.snapshot.routeConfig?.path);
|
||||||
this.apiBackService.getRestaurantsByCateg(id);
|
// on fait passer en second parametre le path de la route c'est a dire "home"(pour l'instant)
|
||||||
|
|
||||||
this.route.navigate(['restaurants']);
|
this.route.navigate(['restaurants']);
|
||||||
|
|
||||||
//console.log('salut les copains');
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -32,20 +32,35 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="infos ps-1 pt-2" style="color:#545454">
|
<div class="infos ps-1 pt-2" style="color:#545454">
|
||||||
<span class="categorie pe-4" style="font-style: italic;">Kebab</span>
|
<div>
|
||||||
|
<span class="categorie pe-4" style="font-style: italic;" *ngFor="let categorie of restaurant.typerestaus">{{ categorie.libelle }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<i class="fas fa-walking ps-2 pe-1" style="color:#a8a8a8"></i>
|
||||||
|
<span class="categorie pe-4" style="font-weight: bold;">{{distance}} mètres</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<i class="fas fa-euro-sign ps-2 pe-1" style="color:#a8a8a8"></i>
|
||||||
|
<span class="prix" style="font-weight: bold;">5-10€</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="trait-rouge pt-2 pb-2 "></div>
|
<div class="trait-rouge pt-3"></div>
|
||||||
|
|
||||||
<i class="fas fa-walking pt-3 ps-2 pe-2" style="color:#a8a8a8"></i><span class="categorie pe-3"
|
<div *ngIf="restaurant.website; else noWebsite">
|
||||||
style="font-weight: bold;">550m</span>
|
<p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454">
|
||||||
<i class="fas fa-euro-sign pt-3 ps-2 pe-2" style="color:#a8a8a8"></i><span class="prix pe-3"
|
<a href="{{restaurant.website}}" class="description pe-1" style="font-style: italic;font-weight: bold;">Site Web</a>
|
||||||
style="font-weight: bold;">5-10€</span>
|
|
||||||
<a href="{{restaurant.website}}" target="blank" class="description " style=" color:#000000"><i class="bi bi-globe2 pt-3 ps-2 pe-2" style="color:#a8a8a8"></i><span
|
|
||||||
class="description " style="font-style: italic; ">Site web</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="trait-rouge pt-2 pb-2"></div>
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- le else de notre *ngIf plus haut-->
|
||||||
|
<ng-template #noWebsite class="description pe-1" style="font-style: italic;font-weight: bold;">
|
||||||
|
<div>
|
||||||
|
<p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454"> Pas de site Web </p>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
<!-- ------------------------------------ -->
|
||||||
|
|
||||||
|
<div class="trait-rouge pt-2 pb-0"></div>
|
||||||
<div class="critere ps-1 pt-3">
|
<div class="critere ps-1 pt-3">
|
||||||
<span class="sur-place pe-3" style="color:#545454">Sur place :</span>
|
<span class="sur-place pe-3" style="color:#545454">Sur place :</span>
|
||||||
<app-icon
|
<app-icon
|
||||||
|
|
|
||||||
|
|
@ -8,15 +8,29 @@ import { Component,EventEmitter, Input, Output, OnInit } from '@angular/core';
|
||||||
export class CardRestoComponent implements OnInit {
|
export class CardRestoComponent implements OnInit {
|
||||||
|
|
||||||
@Input() restaurant : any ;
|
@Input() restaurant : any ;
|
||||||
|
distance : number;
|
||||||
@Input() likeResto: any;
|
@Input() likeResto: any;
|
||||||
@Output() clickLike = new EventEmitter<boolean>();
|
@Output() clickLike = new EventEmitter<boolean>();
|
||||||
isLiked : boolean = false;
|
isLiked : boolean = false;
|
||||||
|
|
||||||
constructor() { }
|
constructor() {
|
||||||
|
this.distance = 0 ;
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
|
||||||
// console.log(this.restaurant);
|
console.log(this.restaurant);
|
||||||
|
|
||||||
|
this.distance = Math.round(
|
||||||
|
this.getDistanceFromLatLonInKm(
|
||||||
|
48.86201110271593 , //latitude Simplon
|
||||||
|
2.4361804827725417, //longitude Simplon
|
||||||
|
this.restaurant.latitude,
|
||||||
|
this.restaurant.longitude)
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(this.distance);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
onClickLike() {
|
onClickLike() {
|
||||||
|
|
@ -25,6 +39,24 @@ export class CardRestoComponent implements OnInit {
|
||||||
this.clickLike.emit(this.isLiked);
|
this.clickLike.emit(this.isLiked);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getDistanceFromLatLonInKm(lat1 : number , lon1 : number, lat2 : number, lon2 : number) {
|
||||||
|
let R = 6371; // Radius of the earth in km
|
||||||
|
let dLat = this.deg2rad(lat2-lat1); // deg2rad below
|
||||||
|
let dLon = this.deg2rad(lon2-lon1);
|
||||||
|
let a =
|
||||||
|
Math.sin(dLat/2) * Math.sin(dLat/2) +
|
||||||
|
Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
|
||||||
|
Math.sin(dLon/2) * Math.sin(dLon/2)
|
||||||
|
;
|
||||||
|
let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
||||||
|
let d = R * c * 1000; // Distance in meters
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
|
||||||
|
deg2rad(deg : number) {
|
||||||
|
return deg * (Math.PI/180)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-avis-bar',
|
selector: 'app-avis-bar',
|
||||||
|
|
@ -8,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
|
||||||
export class AvisBarComponent implements OnInit {
|
export class AvisBarComponent implements OnInit {
|
||||||
|
|
||||||
starStates: {stateSelectedUser : boolean, stateHoverUser : boolean}[];
|
starStates: {stateSelectedUser : boolean, stateHoverUser : boolean}[];
|
||||||
|
@Output() stateNumber = new EventEmitter();
|
||||||
|
starStateNumber: number = 0;
|
||||||
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|
@ -29,7 +31,6 @@ export class AvisBarComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseOver(index: number) {
|
onMouseOver(index: number) {
|
||||||
console.log("star over", index);
|
|
||||||
for (let i = 0; i < this.starStates.length ; i++) {
|
for (let i = 0; i < this.starStates.length ; i++) {
|
||||||
if(i <= index) {
|
if(i <= index) {
|
||||||
this.starStates[i].stateHoverUser = true;
|
this.starStates[i].stateHoverUser = true;
|
||||||
|
|
@ -53,13 +54,17 @@ export class AvisBarComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
onClickStar(starIndex: number) {
|
onClickStar(starIndex: number) {
|
||||||
|
this.starStateNumber = 0;
|
||||||
for (let i = 0; i < this.starStates.length ; i++) {
|
for (let i = 0; i < this.starStates.length ; i++) {
|
||||||
if(i <= starIndex) {
|
if(i <= starIndex) {
|
||||||
this.starStates[i].stateSelectedUser = true;
|
this.starStates[i].stateSelectedUser = true;
|
||||||
|
this.starStateNumber++;
|
||||||
} else {
|
} else {
|
||||||
this.starStates[i].stateSelectedUser = false;
|
this.starStates[i].stateSelectedUser = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
//console.log(`Rating : ${this.starStateNumber}`);
|
||||||
|
this.stateNumber.emit(this.starStateNumber);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,117 +4,133 @@
|
||||||
|
|
||||||
<div class="accordion">
|
<div class="accordion">
|
||||||
|
|
||||||
<!-------------------------------------------------------------------------- Accordéon Distance -------------------------------------------------------------------------->
|
<!-------------------------------------------------------------------------- Accordéon Distance -------------------------------------------------------------------------->
|
||||||
|
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
|
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
|
||||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne">
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||||
<p style="font-family:'Roboto';font-size: 20px;">Distance</p>
|
data-bs-target="#panelsStayOpen-collapseOne">
|
||||||
</button>
|
<p style="font-family:'Roboto';font-size: 20px;">Distance</p>
|
||||||
</h2>
|
</button>
|
||||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
|
</h2>
|
||||||
<div class="accordion-body">
|
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse"
|
||||||
<div class="distance p-3">
|
aria-labelledby="panelsStayOpen-headingOne">
|
||||||
<span>Veuillez sélectionner la distance souhaitée</span>
|
<div class="accordion-body">
|
||||||
</div>
|
<div class="distance p-3">
|
||||||
<input type="range" class="form-range" min="{{minDistance}}" max="{{maxDistance}}" (change)="changeValueDistance($event)" >
|
<span>Veuillez sélectionner la distance souhaitée</span>
|
||||||
<div class="valuesDistance d-flex d-flex justify-content-between">
|
|
||||||
<span>0 KM</span>
|
|
||||||
<span>2 KM</span>
|
|
||||||
<span>4 KM</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<input type="range" class="form-range" min="{{minDistance}}" max="{{maxDistance}}"
|
||||||
|
(change)="OnChangeValueDistance($event)">
|
||||||
<!-------------------------------------------------------------------------- Accordéon Prix -------------------------------------------------------------------------->
|
<div class="valuesDistance d-flex d-flex justify-content-between">
|
||||||
|
<span>0 KM</span>
|
||||||
<div class="accordion-item">
|
<span>2 KM</span>
|
||||||
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
|
<span>4 KM</span>
|
||||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo">
|
|
||||||
<p style="font-family:'Roboto'; font-size: 20px;">Prix</p>
|
|
||||||
</button>
|
|
||||||
</h2>
|
|
||||||
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
|
|
||||||
<div class="accordion-body">
|
|
||||||
|
|
||||||
<div class="minMax p-3">
|
|
||||||
<span>Veuillez sélectionner le prix souhaité</span>
|
|
||||||
</div>
|
|
||||||
<input type="range" class="form-range" ng-model="valuePrix" min="{{minPrice}}" max="{{maxPrice}}" (change)="changeValuePrice($event)">
|
|
||||||
<div class="valuesPrix d-flex d-flex justify-content-between">
|
|
||||||
<span>0€</span>
|
|
||||||
<span>10€</span>
|
|
||||||
<span>20€</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-------------------------------------------------------------------------- Accordéon Place/Emporter -------------------------------------------------------------------------->
|
|
||||||
|
|
||||||
<div class="accordion-item">
|
|
||||||
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
|
|
||||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree">
|
|
||||||
<p style="font-family:'Roboto'; font-size: 20px;">Sur Place / A Emporter</p>
|
|
||||||
</button>
|
|
||||||
</h2>
|
|
||||||
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
|
|
||||||
<div class="accordion-body">
|
|
||||||
|
|
||||||
<div class="Titles m-3 d-flex justify-content-around">
|
|
||||||
<span>Sur Place</span>
|
|
||||||
<span>A Emporter</span>
|
|
||||||
</div>
|
|
||||||
<div class="PlaceEmporterCheck m-3 d-flex justify-content-around">
|
|
||||||
<input class="surPlace-check-input" type="checkbox" value="surPlaceOption" style="width: 25px; height: 25px; border-radius: 300px;">
|
|
||||||
<input class="Emporter-check-input" type="checkbox" value="aEmporterOption" style="width: 25px; height: 25px;">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-------------------------------------------------------------------------- Accordéon AccesPMR -------------------------------------------------------------------------->
|
<!-------------------------------------------------------------------------- Accordéon Prix -------------------------------------------------------------------------->
|
||||||
|
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header" id="panelsStayOpen-headingFour">
|
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
|
||||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFour">
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||||
<p style="font-family:'Roboto'; font-size: 20px;">Accès PMR</p>
|
data-bs-target="#panelsStayOpen-collapseTwo">
|
||||||
</button>
|
<p style="font-family:'Roboto'; font-size: 20px;">Prix</p>
|
||||||
</h2>
|
</button>
|
||||||
<div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFour">
|
</h2>
|
||||||
<div class="accordion-body">
|
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
|
||||||
|
aria-labelledby="panelsStayOpen-headingTwo">
|
||||||
|
<div class="accordion-body">
|
||||||
|
|
||||||
<div class="titrePmr m-3 d-flex justify-content-around">
|
<div class="minMax p-3">
|
||||||
<span>Accès PMR</span>
|
<span>Veuillez sélectionner le prix souhaité</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="pmr-check d-flex justify-content-center p-2">
|
<input type="range" class="form-range" ng-model="valuePrix" min="{{minPrice}}" max="{{maxPrice}}"
|
||||||
<input class="pmr-check-input mx-auto" type="checkbox" value="" style="width: 25px; height: 25px;">
|
(change)="OnChangeValuePrice($event)">
|
||||||
</div>
|
<div class="valuesPrix d-flex d-flex justify-content-between">
|
||||||
|
<span>1</span>
|
||||||
|
<span>2</span>
|
||||||
|
<span>3</span>
|
||||||
|
<span>4</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-------------------------------------------------------------------------- Accordéon Avis -------------------------------------------------------------------------->
|
<!-------------------------------------------------------------------------- Accordéon Place/Emporter -------------------------------------------------------------------------->
|
||||||
|
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
<h2 class="accordion-header" id="panelsStayOpen-headingFive">
|
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
|
||||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseFive">
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||||
<p style="font-family:'Roboto'; font-size: 20px;">Avis</p>
|
data-bs-target="#panelsStayOpen-collapseThree">
|
||||||
</button>
|
<p style="font-family:'Roboto'; font-size: 20px;">Sur Place / A Emporter</p>
|
||||||
</h2>
|
</button>
|
||||||
<div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFive">
|
</h2>
|
||||||
<div class="accordion-body">
|
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
|
||||||
<div class="titreAvis m-3 d-flex justify-content-around">
|
aria-labelledby="panelsStayOpen-headingThree">
|
||||||
<span>Choisissez parmi les avis déjà donnés</span>
|
<div class="accordion-body">
|
||||||
</div>
|
|
||||||
<app-avis-bar></app-avis-bar>
|
<div class="Titles m-3 d-flex justify-content-around">
|
||||||
|
<span>Sur Place</span>
|
||||||
|
<span>A Emporter</span>
|
||||||
|
</div>
|
||||||
|
<div class="PlaceEmporterCheck m-3 d-flex justify-content-around">
|
||||||
|
<input class="surPlace-check-input" type="checkbox" value="surPlaceOption"
|
||||||
|
style="width: 25px; height: 25px; border-radius: 300px;" (change)="OnChangeValueSurPlace($event)">
|
||||||
|
<input class="Emporter-check-input" type="checkbox" value="aEmporterOption" style="width: 25px; height: 25px;"
|
||||||
|
(change)="OnChangeValueEmporter($event)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-------------------------------------------------------------------------- Accordéon AccesPMR -------------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="panelsStayOpen-headingFour">
|
||||||
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#panelsStayOpen-collapseFour">
|
||||||
|
<p style="font-family:'Roboto'; font-size: 20px;">Accès PMR</p>
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
|
||||||
|
aria-labelledby="panelsStayOpen-headingFour">
|
||||||
|
<div class="accordion-body">
|
||||||
|
|
||||||
|
<div class="titrePmr m-3 d-flex justify-content-around">
|
||||||
|
<span>Accès PMR</span>
|
||||||
|
</div>
|
||||||
|
<div class="pmr-check d-flex justify-content-center p-2">
|
||||||
|
<input class="pmr-check-input mx-auto" type="checkbox" value="AccesPMR" style="width: 25px; height: 25px;"
|
||||||
|
(change)="OnChangeValuePMR($event)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-------------------------------------------------------------------------- Accordéon Avis -------------------------------------------------------------------------->
|
||||||
|
|
||||||
|
<div class="accordion-item">
|
||||||
|
<h2 class="accordion-header" id="panelsStayOpen-headingFive">
|
||||||
|
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#panelsStayOpen-collapseFive">
|
||||||
|
<p style="font-family:'Roboto'; font-size: 20px;">Avis</p>
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
<div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse"
|
||||||
|
aria-labelledby="panelsStayOpen-headingFive">
|
||||||
|
<div class="accordion-body">
|
||||||
|
<div class="titreAvis m-3 d-flex justify-content-around">
|
||||||
|
<span>Choisissez parmi les avis déjà donnés</span>
|
||||||
|
</div>
|
||||||
|
<app-avis-bar (stateNumber)="onStateNumberChange($event)"></app-avis-bar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="btn-search btn-primary" type="button">LANCER LA RECHERCHE</button>
|
<button class="btn-search btn-primary" type="button" (click)="onSendFilters()" (click)="onSendRating()">LANCER LA
|
||||||
|
RECHERCHE</button>
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
|
||||||
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
|
import { ApiBackService } from 'src/app/services/api-back.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-filters-page',
|
selector: 'app-filters-page',
|
||||||
|
|
@ -7,39 +9,101 @@ import { Component, OnInit } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class FiltersPageComponent implements OnInit {
|
export class FiltersPageComponent implements OnInit {
|
||||||
|
|
||||||
minDistance : any;
|
public minDistance : any;
|
||||||
maxDistance : any;
|
public maxDistance : any;
|
||||||
selectDistance : any;
|
|
||||||
|
public minPrice : any;
|
||||||
|
public maxPrice: any;
|
||||||
|
public selectPrice : number;
|
||||||
|
public selectDistance : any;
|
||||||
|
public selectPmr :any;
|
||||||
|
public selectSurPlace : any;
|
||||||
|
public selectEmporter : any;
|
||||||
|
|
||||||
|
@Output() stateNumber = new EventEmitter();
|
||||||
|
@Output() rangeNumber = new EventEmitter();
|
||||||
|
public selectRating: number;
|
||||||
|
|
||||||
|
public listRestau: any[];
|
||||||
|
|
||||||
|
|
||||||
|
constructor(private apiBackService : ApiBackService, private route : Router, private activatedRoute : ActivatedRoute) {
|
||||||
minPrice : any;
|
|
||||||
maxPrice: any;
|
|
||||||
selectPrice : any;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
|
|
||||||
this.minDistance = 0;
|
this.minDistance = 0;
|
||||||
this.maxDistance = 4;
|
this.maxDistance = 4;
|
||||||
this.selectDistance = 0;
|
this.selectDistance = null;
|
||||||
|
|
||||||
this.minPrice = 0;
|
this.minPrice = 1;
|
||||||
this.maxPrice = 20;
|
this.maxPrice = 4;
|
||||||
this.selectPrice = 0;
|
this.selectPrice = 0;
|
||||||
|
|
||||||
}
|
this.selectPmr = false;
|
||||||
|
this.selectEmporter = false;
|
||||||
|
this.selectSurPlace = false;
|
||||||
|
|
||||||
ngOnInit(): void {}
|
this.selectRating = 0;
|
||||||
|
|
||||||
changeValueDistance(valueDistance: any){
|
this.listRestau = [];
|
||||||
this.selectDistance = valueDistance.target.value;
|
|
||||||
console.log(this.selectDistance);
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.apiBackService.getRestaurants().subscribe((restaurants: any[]) => {
|
||||||
|
this.listRestau = restaurants;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(this.listRestau);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
OnChangeValueDistance(valueDistance: any){
|
||||||
|
this.selectDistance = valueDistance.target.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
OnChangeValuePrice(valuePrice: any){
|
||||||
changeValuePrice(valuePrice: any){
|
|
||||||
this.selectPrice = valuePrice.target.value;
|
this.selectPrice = valuePrice.target.value;
|
||||||
console.log(this.selectPrice);
|
}
|
||||||
|
|
||||||
|
OnChangeValuePMR(valuePmr : any){
|
||||||
|
this.selectPmr = (valuePmr.target.checked);
|
||||||
|
}
|
||||||
|
|
||||||
|
OnChangeValueSurPlace(valuePlace : any){
|
||||||
|
this.selectSurPlace = valuePlace.target.checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
OnChangeValueEmporter(valueEmporter : any){
|
||||||
|
this.selectEmporter = valueEmporter.target.checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
onStateNumberChange(stateNumber: number): void {
|
||||||
|
this.selectRating = stateNumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
onSendRating() {
|
||||||
|
this.stateNumber.emit(this.selectRating);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onSendFilters() : void{
|
||||||
|
let restaus = this.listRestau;
|
||||||
|
|
||||||
|
restaus = restaus.filter((restau)=>
|
||||||
|
|
||||||
|
this.selectPrice == restau.prix
|
||||||
|
|
||||||
|
),
|
||||||
|
console.log( this.activatedRoute.snapshot.routeConfig?.path);
|
||||||
|
|
||||||
|
|
||||||
|
this.apiBackService.setListRestau(restaus, this.activatedRoute.snapshot.routeConfig?.path);
|
||||||
|
// on fait passer en second parametre le path de la route c'est a dire "filtres"
|
||||||
|
|
||||||
|
this.route.navigate(['restaurants']);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,16 +18,9 @@ export class HomePageComponent implements OnInit {
|
||||||
this.apiBackService.getCategories().subscribe((listCategories: any[]) => {
|
this.apiBackService.getCategories().subscribe((listCategories: any[]) => {
|
||||||
// console.log(listCategories);
|
// console.log(listCategories);
|
||||||
|
|
||||||
// const listCategoriesLibelle = listCategories.map(
|
|
||||||
// (category) => category.libelle
|
|
||||||
// );
|
|
||||||
|
|
||||||
this.listCategories = listCategories;
|
this.listCategories = listCategories;
|
||||||
|
|
||||||
});
|
});
|
||||||
// console.log(this.apiBackService);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
onEventLike(isLiked : boolean) {
|
onEventLike(isLiked : boolean) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
export interface User {
|
||||||
|
id?:number;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
email: string;
|
||||||
|
password?: string;
|
||||||
|
}
|
||||||
|
|
@ -16,12 +16,24 @@ export class RestoPageComponent implements OnInit {
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
|
||||||
this.apiBackService.restoByCat.subscribe((restaurants: any[]) => {
|
// arrivée sur la restau-page depuis filtres ou home(catégories) : appel a une méthode différente du service
|
||||||
|
if(this.apiBackService.routeParam === "filtres"){
|
||||||
|
this.listRestaurants = this.apiBackService.restoFilter;
|
||||||
|
|
||||||
|
}else if(this.apiBackService.routeParam === "home"){
|
||||||
|
this.apiBackService.restoByCat.subscribe((restaurants: any[]) => {
|
||||||
|
this.listRestaurants = restaurants;
|
||||||
|
});
|
||||||
|
}else{ // si on arrive sur l'url /restaurants directement = tous les restau affichés
|
||||||
|
|
||||||
|
this.apiBackService.getRestaurants().subscribe((restaurants: any[]) => {
|
||||||
this.listRestaurants = restaurants;
|
this.listRestaurants = restaurants;
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,19 @@
|
||||||
<div class="signin-form text-center">
|
<div class="signin-form text-center">
|
||||||
<main class="form-signin">
|
<main class="form-signin">
|
||||||
<img src="../../../assets/images-header/logo.png"><br>
|
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
|
||||||
<br><h5>Le bon plan pour manger</h5>
|
<h5>Merci de vous connecter</h5>
|
||||||
|
<img src="../../../assets/images-header/logo.png"><br>
|
||||||
|
<br>Le bon plan pour manger<br>
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
<input type="email"
|
<input type="email"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="floatingInput"
|
id="floatingInput"
|
||||||
placeholder=""
|
placeholder=""
|
||||||
name="email">
|
name="email"
|
||||||
|
ngModel
|
||||||
|
required
|
||||||
|
[ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
|
||||||
|
'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
|
||||||
<label for="floatingInput">Adresse email</label>
|
<label for="floatingInput">Adresse email</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-floating">
|
<div class="form-floating">
|
||||||
|
|
@ -15,13 +21,27 @@
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="floatingPassword"
|
id="floatingPassword"
|
||||||
placeholder=""
|
placeholder=""
|
||||||
name="password">
|
name="password"
|
||||||
|
ngModel
|
||||||
|
required
|
||||||
|
[ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
|
||||||
|
'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
|
||||||
<label for="floatingPassword">Mot de passe</label>
|
<label for="floatingPassword">Mot de passe</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button type="submit">Connexion</button>
|
<button class="w-100 btn btn-lg btn-danger"
|
||||||
|
type="submit"
|
||||||
|
[disabled]="signinForm.invalid">Je me connecte !</button>
|
||||||
|
<p>
|
||||||
|
Form is dirty : {{ signinForm.form.dirty }}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Form is touched : {{ signinForm.form.touched }}
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div *ngIf="errorForm">
|
||||||
|
<p class="text-danger">Il manque des informations dans le formulaire...</p>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,37 @@
|
||||||
.signin-form {
|
.signin-form {
|
||||||
height: 50vh;
|
height: 100vh;
|
||||||
width: 80vh;
|
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
margin-bottom: 40px;
|
|
||||||
background-image: url(../../../assets/fond_signin.png);
|
background-image: url(../../../assets/fond_signin.png);
|
||||||
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-signin {
|
.form-signin {
|
||||||
width: 60%;
|
width: 500px;
|
||||||
//max-width: 330px;
|
//max-width: 330px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
box-shadow: 10px 10px 10px grey;
|
||||||
|
margin-top: 25vh;
|
||||||
|
|
||||||
input[type="email"] {
|
|
||||||
//margin-top: 10px;
|
|
||||||
//border-bottom-right-radius: 0;
|
|
||||||
//border-bottom-left-radius: 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="password"] {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
//border-top-left-radius: 0;
|
|
||||||
//border-top-right-radius: 0;
|
|
||||||
margin-top: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
button{
|
|
||||||
color: white;
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-floating:focus-within {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="email"] {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="password"] {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { AuthService } from '../../services/auth.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-signin',
|
selector: 'app-signin',
|
||||||
|
|
@ -6,10 +7,27 @@ import { Component, OnInit } from '@angular/core';
|
||||||
styleUrls: ['./signin.component.scss']
|
styleUrls: ['./signin.component.scss']
|
||||||
})
|
})
|
||||||
export class SigninComponent implements OnInit {
|
export class SigninComponent implements OnInit {
|
||||||
|
public errorForm: boolean;
|
||||||
constructor() { }
|
constructor(private authService: AuthService) {
|
||||||
|
this.errorForm = false;
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public onSubmit(submittedForm: any): void {
|
||||||
|
console.log(submittedForm.form.value);
|
||||||
|
const email = submittedForm.form.value['email'];
|
||||||
|
const password = submittedForm.form.value['password'];
|
||||||
|
if(email !== '' && password !== '') {
|
||||||
|
this.authService.signin(email, password).subscribe(
|
||||||
|
resp => console.log('Component Page Signin: ', resp)
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
// afficher une erreur à l'utilisateur
|
||||||
|
this.errorForm = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,22 +10,32 @@ export class ApiBackService {
|
||||||
|
|
||||||
public restoByCat : Observable<any[]> = of([]);
|
public restoByCat : Observable<any[]> = of([]);
|
||||||
restoLiked$ = new Subject<any>();
|
restoLiked$ = new Subject<any>();
|
||||||
|
public restoFilter : any[];
|
||||||
|
public routeParam ?: string;
|
||||||
|
|
||||||
constructor(private httpClient: HttpClient) {
|
constructor(private httpClient: HttpClient) {
|
||||||
|
this.restoFilter = [];
|
||||||
|
this.routeParam = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
getRestaurants(): Observable<any[]> {
|
getRestaurants(): Observable<any[]> {
|
||||||
return this.httpClient.get<any[]>(`${environment.apiUrl}/restaurants`);
|
return this.httpClient.get<any[]>(`${environment.apiUrl}/restaurants`);
|
||||||
}
|
}
|
||||||
|
|
||||||
getRestaurantsByCateg(id : number): void {
|
getRestaurantsByCateg(id : number, routeParam ?: string ): void {
|
||||||
this.restoByCat = this.httpClient.get<any[]>(`${environment.apiUrl}/restaurantbytype/${id}`);
|
this.restoByCat = this.httpClient.get<any[]>(`${environment.apiUrl}/restaurantbytype/${id}`);
|
||||||
|
this.routeParam = routeParam;
|
||||||
}
|
}
|
||||||
|
|
||||||
getCategories(): Observable<any[]>{
|
getCategories(): Observable<any[]>{
|
||||||
return this.httpClient.get<any[]>(`${environment.apiUrl}/types`);
|
return this.httpClient.get<any[]>(`${environment.apiUrl}/types`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setListRestau(listRestau : any[], routeParam ?: string ) : void{
|
||||||
|
|
||||||
|
this.restoFilter = listRestau;
|
||||||
|
this.routeParam = routeParam;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AuthService } from './auth.service';
|
||||||
|
|
||||||
|
describe('AuthService', () => {
|
||||||
|
let service: AuthService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(AuthService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { map, Observable } from 'rxjs';
|
||||||
|
import { environment } from 'src/environments/environment';
|
||||||
|
import { User } from 'src/app/pages/models/user';
|
||||||
|
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class AuthService {
|
||||||
|
private apiUrl: string;
|
||||||
|
private tokenKey: string;
|
||||||
|
|
||||||
|
constructor(private http: HttpClient) {
|
||||||
|
// On se sert des variables d'environnement de notre application
|
||||||
|
this.apiUrl = environment.apiUrl;
|
||||||
|
this.tokenKey = environment.tokenKey;
|
||||||
|
}
|
||||||
|
|
||||||
|
signup(newUser: User): Observable<any> {
|
||||||
|
// const body = {
|
||||||
|
// firstName: firstName,
|
||||||
|
// lastName: lastName,
|
||||||
|
// email: email,
|
||||||
|
// password: password
|
||||||
|
// };
|
||||||
|
|
||||||
|
console.log("Mon nouvel utilisateur : ", newUser);
|
||||||
|
|
||||||
|
return this.http.post(`${this.apiUrl}/register`, newUser);
|
||||||
|
}
|
||||||
|
|
||||||
|
signin(email: string, password: string): Observable<any> {
|
||||||
|
const body = {
|
||||||
|
email: email,
|
||||||
|
password: password
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("Mon body : ", body);
|
||||||
|
|
||||||
|
// Modifier cette partie ci-dessous :
|
||||||
|
// - pour pouvoir stocker dans le localstorage notre accesstoken
|
||||||
|
// - Sous la clé "TOKEN-LBP"
|
||||||
|
|
||||||
|
return this.http.post(`${this.apiUrl}/login`, body).pipe(
|
||||||
|
map((x: any) => {
|
||||||
|
console.log('Service : ', x.accessToken);
|
||||||
|
// Modification à faire ici
|
||||||
|
localStorage.setItem(this.tokenKey, x.accessToken);
|
||||||
|
return x; // permet de renvoyer la réponse à l'initiateur (page Signin) après le traitement du map
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
forgotPassword(email: string, password: string): Observable<any> {
|
||||||
|
const body = {
|
||||||
|
email: email,
|
||||||
|
password: password
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log("Mon body : ", body);
|
||||||
|
|
||||||
|
return this.http.post(`${this.apiUrl}/forgot-psw`, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.5 MiB |
|
|
@ -1,4 +1,5 @@
|
||||||
export const environment = {
|
export const environment = {
|
||||||
production: true,
|
production: true,
|
||||||
apiUrl: ""
|
apiUrl: "",
|
||||||
|
tokenKey: ""
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
export const environment = {
|
export const environment = {
|
||||||
production: false,
|
production: false,
|
||||||
apiUrl: "http://localhost:8080",
|
apiUrl: "http://localhost:8080",
|
||||||
|
tokenKey: "TOKEN-SIMPLEAT"
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue