vincentRamiere
/
simpleat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modif card resto

This commit is contained in:
Your Name 2022-02-16 14:14:07 +01:00
parent db957edd2d 2170ef0f65
commit 0bb889bc40
19 changed files with 466 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app.module.ts
View File

@ -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]

10
src/app/card-category/card-category.component.ts
View File

@ -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');
} }
} }

37
src/app/card-resto/card-resto.component.html
View File

@ -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>
<div class="trait-rouge pt-2 pb-2 "></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 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

36
src/app/card-resto/card-resto.component.ts
View File

@ -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)
}
} }

9
src/app/filters/avis-bar/avis-bar.component.ts
View File

@ -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);
} }
} }

58
src/app/pages/filters-page/filters-page.component.html
View File

@ -8,16 +8,19 @@
<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"
data-bs-target="#panelsStayOpen-collapseOne">
<p style="font-family:'Roboto';font-size: 20px;">Distance</p> <p style="font-family:'Roboto';font-size: 20px;">Distance</p>
</button> </button>
</h2> </h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingOne"> <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body"> <div class="accordion-body">
<div class="distance p-3"> <div class="distance p-3">
<span>Veuillez sélectionner la distance souhaitée</span> <span>Veuillez sélectionner la distance souhaitée</span>
</div> </div>
<input type="range" class="form-range" min="{{minDistance}}" max="{{maxDistance}}" (change)="changeValueDistance($event)" > <input type="range" class="form-range" min="{{minDistance}}" max="{{maxDistance}}"
(change)="OnChangeValueDistance($event)">
<div class="valuesDistance d-flex d-flex justify-content-between"> <div class="valuesDistance d-flex d-flex justify-content-between">
<span>0 KM</span> <span>0 KM</span>
<span>2 KM</span> <span>2 KM</span>
@ -31,21 +34,25 @@
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo"> <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo"> <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> <p style="font-family:'Roboto'; font-size: 20px;">Prix</p>
</button> </button>
</h2> </h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo"> <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body"> <div class="accordion-body">
<div class="minMax p-3"> <div class="minMax p-3">
<span>Veuillez sélectionner le prix souhaité</span> <span>Veuillez sélectionner le prix souhaité</span>
</div> </div>
<input type="range" class="form-range" ng-model="valuePrix" min="{{minPrice}}" max="{{maxPrice}}" (change)="changeValuePrice($event)"> <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"> <div class="valuesPrix d-flex d-flex justify-content-between">
<span>0€</span> <span>1</span>
<span>10€</span> <span>2</span>
<span>20€</span> <span>3</span>
<span>4</span>
</div> </div>
</div> </div>
</div> </div>
@ -55,11 +62,13 @@
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree"> <h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree"> <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> <p style="font-family:'Roboto'; font-size: 20px;">Sur Place / A Emporter</p>
</button> </button>
</h2> </h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree"> <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingThree">
<div class="accordion-body"> <div class="accordion-body">
<div class="Titles m-3 d-flex justify-content-around"> <div class="Titles m-3 d-flex justify-content-around">
@ -67,8 +76,10 @@
<span>A Emporter</span> <span>A Emporter</span>
</div> </div>
<div class="PlaceEmporterCheck m-3 d-flex justify-content-around"> <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="surPlace-check-input" type="checkbox" value="surPlaceOption"
<input class="Emporter-check-input" type="checkbox" value="aEmporterOption" style="width: 25px; height: 25px;"> 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>
@ -78,18 +89,21 @@
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingFour"> <h2 class="accordion-header" id="panelsStayOpen-headingFour">
<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"
data-bs-target="#panelsStayOpen-collapseFour">
<p style="font-family:'Roboto'; font-size: 20px;">Accès PMR</p> <p style="font-family:'Roboto'; font-size: 20px;">Accès PMR</p>
</button> </button>
</h2> </h2>
<div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFour"> <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingFour">
<div class="accordion-body"> <div class="accordion-body">
<div class="titrePmr m-3 d-flex justify-content-around"> <div class="titrePmr m-3 d-flex justify-content-around">
<span>Accès PMR</span> <span>Accès PMR</span>
</div> </div>
<div class="pmr-check d-flex justify-content-center p-2"> <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;"> <input class="pmr-check-input mx-auto" type="checkbox" value="AccesPMR" style="width: 25px; height: 25px;"
(change)="OnChangeValuePMR($event)">
</div> </div>
</div> </div>
</div> </div>
@ -99,16 +113,18 @@
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingFive"> <h2 class="accordion-header" id="panelsStayOpen-headingFive">
<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"
data-bs-target="#panelsStayOpen-collapseFive">
<p style="font-family:'Roboto'; font-size: 20px;">Avis</p> <p style="font-family:'Roboto'; font-size: 20px;">Avis</p>
</button> </button>
</h2> </h2>
<div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingFive"> <div id="panelsStayOpen-collapseFive" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingFive">
<div class="accordion-body"> <div class="accordion-body">
<div class="titreAvis m-3 d-flex justify-content-around"> <div class="titreAvis m-3 d-flex justify-content-around">
<span>Choisissez parmi les avis déjà donnés</span> <span>Choisissez parmi les avis déjà donnés</span>
</div> </div>
<app-avis-bar></app-avis-bar> <app-avis-bar (stateNumber)="onStateNumberChange($event)"></app-avis-bar>
</div> </div>
</div> </div>
</div> </div>
@ -116,5 +132,5 @@
</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>

102
src/app/pages/filters-page/filters-page.component.ts
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({ @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;
this.selectRating = 0;
this.listRestau = [];
} }
ngOnInit(): void {} ngOnInit(): void {
this.apiBackService.getRestaurants().subscribe((restaurants: any[]) => {
this.listRestau = restaurants;
});
changeValueDistance(valueDistance: any){ console.log(this.listRestau);
}
OnChangeValueDistance(valueDistance: any){
this.selectDistance = valueDistance.target.value; this.selectDistance = valueDistance.target.value;
console.log(this.selectDistance);
} }
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']);
} }
} }

7
src/app/pages/home-page/home-page.component.ts
View File

@ -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) {

7
src/app/pages/models/user.ts Normal file
View File

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

16
src/app/pages/resto-page/resto-page.component.ts
View File

@ -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;
})
}
});
} }
} }

32
src/app/pages/signin/signin.component.html
View File

@ -1,13 +1,19 @@
<div class="signin-form text-center"> <div class="signin-form text-center">
<main class="form-signin"> <main class="form-signin">
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
<h5>Merci de vous connecter</h5>
<img src="../../../assets/images-header/logo.png"><br> <img src="../../../assets/images-header/logo.png"><br>
<br><h5>Le bon plan pour manger</h5> <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>

35
src/app/pages/signin/signin.component.scss
View File

@ -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;
}
.form-floating:focus-within {
z-index: 2;
}
input[type="email"] { input[type="email"] {
//margin-top: 10px; margin-top: 10px;
//border-bottom-right-radius: 0; margin-bottom: 5px;
//border-bottom-left-radius: 0; border-bottom-right-radius: 0;
border-radius: 10px; border-bottom-left-radius: 0;
margin-bottom: 10px;
border-color: red; border-color: red;
} }
input[type="password"] { input[type="password"] {
margin-bottom: 10px; margin-bottom: 10px;
//border-top-left-radius: 0; border-top-left-radius: 0;
//border-top-right-radius: 0; border-top-right-radius: 0;
margin-top: 10px;
border-radius: 10px;
border-color: red; border-color: red;
} }
button{
color: white;
background-color: red;
}
}

22
src/app/pages/signin/signin.component.ts
View File

@ -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;
} }
}
}

12
src/app/services/api-back.service.ts
View File

@ -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;
}
} }

16
src/app/services/auth.service.spec.ts Normal file
View File

@ -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();
});
});

67
src/app/services/auth.service.ts Normal file
View File

@ -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);
}
}

BIN
src/assets/fond_signin.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

3
src/environments/environment.prod.ts
View File

@ -1,4 +1,5 @@
export const environment = { export const environment = {
production: true, production: true,
apiUrl: "" apiUrl: "",
tokenKey: ""
}; };

1
src/environments/environment.ts
View File

@ -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"
}; };
/* /*