modif card resto

This commit is contained in:
Your Name 2022-02-16 14:14:07 +01:00
commit 0bb889bc40
19 changed files with 466 additions and 194 deletions

View file

@ -4,117 +4,133 @@
<div class="accordion">
<!-------------------------------------------------------------------------- Accordéon Distance -------------------------------------------------------------------------->
<!-------------------------------------------------------------------------- Accordéon Distance -------------------------------------------------------------------------->
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne">
<p style="font-family:'Roboto';font-size: 20px;">Distance</p>
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<div class="distance p-3">
<span>Veuillez sélectionner la distance souhaitée</span>
</div>
<input type="range" class="form-range" min="{{minDistance}}" max="{{maxDistance}}" (change)="changeValueDistance($event)" >
<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 class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseOne">
<p style="font-family:'Roboto';font-size: 20px;">Distance</p>
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<div class="distance p-3">
<span>Veuillez sélectionner la distance souhaitée</span>
</div>
</div>
<!-------------------------------------------------------------------------- Accordéon Prix -------------------------------------------------------------------------->
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<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>
<input type="range" class="form-range" min="{{minDistance}}" max="{{maxDistance}}"
(change)="OnChangeValueDistance($event)">
<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>
<!-------------------------------------------------------------------------- Accordéon AccesPMR -------------------------------------------------------------------------->
<!-------------------------------------------------------------------------- Accordéon Prix -------------------------------------------------------------------------->
<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="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<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="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="" style="width: 25px; height: 25px;">
</div>
<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)="OnChangeValuePrice($event)">
<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>
<!-------------------------------------------------------------------------- Accordéon Avis -------------------------------------------------------------------------->
<!-------------------------------------------------------------------------- Accordéon Place/Emporter -------------------------------------------------------------------------->
<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></app-avis-bar>
<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;" (change)="OnChangeValueSurPlace($event)">
<input class="Emporter-check-input" type="checkbox" value="aEmporterOption" style="width: 25px; height: 25px;"
(change)="OnChangeValueEmporter($event)">
</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>
<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>

View file

@ -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({
selector: 'app-filters-page',
@ -7,39 +9,101 @@ import { Component, OnInit } from '@angular/core';
})
export class FiltersPageComponent implements OnInit {
minDistance : any;
maxDistance : any;
selectDistance : any;
public minDistance : any;
public maxDistance : 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[];
minPrice : any;
maxPrice: any;
selectPrice : any;
constructor() {
constructor(private apiBackService : ApiBackService, private route : Router, private activatedRoute : ActivatedRoute) {
this.minDistance = 0;
this.maxDistance = 4;
this.selectDistance = 0;
this.selectDistance = null;
this.minPrice = 0;
this.maxPrice = 20;
this.minPrice = 1;
this.maxPrice = 4;
this.selectPrice = 0;
}
this.selectPmr = false;
this.selectEmporter = false;
this.selectSurPlace = false;
this.selectRating = 0;
ngOnInit(): void {}
this.listRestau = [];
changeValueDistance(valueDistance: any){
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;
}
changeValuePrice(valuePrice: any){
OnChangeValuePrice(valuePrice: any){
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']);
}
}

View file

@ -18,16 +18,9 @@ export class HomePageComponent implements OnInit {
this.apiBackService.getCategories().subscribe((listCategories: any[]) => {
// console.log(listCategories);
// const listCategoriesLibelle = listCategories.map(
// (category) => category.libelle
// );
this.listCategories = listCategories;
});
// console.log(this.apiBackService);
});
}
onEventLike(isLiked : boolean) {

View file

@ -0,0 +1,7 @@
export interface User {
id?:number;
firstName: string;
lastName: string;
email: string;
password?: string;
}

View file

@ -16,12 +16,24 @@ export class RestoPageComponent implements OnInit {
ngOnInit(): void {
// 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;
})
}
}
}

View file

@ -1,13 +1,19 @@
<div class="signin-form text-center">
<main class="form-signin">
<img src="../../../assets/images-header/logo.png"><br>
<br><h5>Le bon plan pour manger</h5>
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
<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">
<input type="email"
class="form-control"
id="floatingInput"
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>
</div>
<div class="form-floating">
@ -15,13 +21,27 @@
class="form-control"
id="floatingPassword"
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>
</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>
</div>

View file

@ -1,42 +1,37 @@
.signin-form {
height: 50vh;
width: 80vh;
height: 100vh;
padding-top: 40px;
margin-bottom: 40px;
background-image: url(../../../assets/fond_signin.png);
background-position: center;
}
.form-signin {
width: 60%;
width: 500px;
//max-width: 330px;
padding: 15px;
margin: auto;
background-color: #f0f0f0;
border-radius: 15px;
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;
}
box-shadow: 10px 10px 10px grey;
margin-top: 25vh;
}
.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;
}

View file

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
@Component({
selector: 'app-signin',
@ -6,10 +7,27 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./signin.component.scss']
})
export class SigninComponent implements OnInit {
constructor() { }
public errorForm: boolean;
constructor(private authService: AuthService) {
this.errorForm = false;
}
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;
}
}
}