isa44.74/brief-la-belle-plante2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Carte détail grossière

Browse Source
This commit is contained in:
HarmandI 2022-01-18 18:51:53 +01:00
parent 0936d942e0
commit 28aff74caf
4 changed files with 67 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/app/pages/page-accueil/page-accueil.component.html
View File

@ -1,27 +1,22 @@
<div class="d-flex align-items-stretch">
<app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
<app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
<div class="custom-main container p-3">
<input class="form-control"
type="text"
placeholder="Recherche ta belle plante"
aria-label="Input Recherche ta belle plante">
<div class="custom-main container p-3">
<input class="form-control" type="text" placeholder="Recherche ta belle plante"
aria-label="Input Recherche ta belle plante">
<div class="py-3">
Trier par :
<button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
<button class="btn btn-outline-success btn-sm me-2"(click)="onAlphaTri()">Ordre Alpha</button>
<button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
</div>
<div class="row">
<div class="col" *ngFor="let product of listData">
<app-card-plante [plant]="product"
[routerLink]="['/details/:productId']"
(clickLike)="onEventLike()">
</app-card-plante>
</div>
</div>
</div>
</div>
<div class="py-3">
Trier par :
<button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
<button class="btn btn-outline-success btn-sm me-2" (click)="onAlphaTri()">Ordre Alpha</button>
<button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
</div>
<div class="row">
<div class="col" *ngFor="let product of listData">
<app-card-plante [plant]="product" [routerLink]="['/details/:productId']" (clickLike)="onEventLike()">
</app-card-plante>
</div>
</div>
</div>
</div>

28
src/app/pages/page-details/page-details.component.html
View File

@ -1,3 +1,25 @@
<p (clickCardId) = "test($event)"></p>
<div class="container" *ngIf="detailsPlant">
<div class="row my-4">
<img src="{{detailsPlant.product_url_picture}}" class="col-sm-5" style="width: 30rem;"
alt="Image de {{ detailsPlant.product_name }}">
<div class="col-sm-6">
<h4 style=" color: green;">{{detailsPlant.product_breadcrumb_label}}</h4>
<h2 class="card-title" style="font-size: 30px;">{{ detailsPlant.product_name }}</h2>
<div>
</div>
<div class="card-content">
</div>
<div style="border-style: solid; border-color: green; margin: auto; text-align: center;">
<p>
Plante appréciant la chaleur et un bon réseau wifi,
interconnectée avec son propriétaire et détestant les chats.
Beaucoup de café et un peu d’eau. Ne pas sortir en extérieur, sauf en terrasse. Floraison totale au
mois de juin.
</p>
</div>
<div class="card-content" style="font-weight: bold">{{ detailsPlant.product_unitprice_ati }} €
</div>
<div>Quantité restante : {{detailsPlant.product_qty}}</div>
</div>
</div>
</div>

34
src/app/pages/page-details/page-details.component.ts
View File

@ -10,13 +10,13 @@ import { PlantouneService } from 'src/app/services/plantoune.service';
})
export class PageDetailsComponent implements OnInit {
product : any;
public listData : any[];
detailsPlant: any;
public listData: any[];
constructor(private route: ActivatedRoute, private plantouneService: PlantouneService) {
constructor(private route: ActivatedRoute, private plantouneService: PlantouneService) {
this.listData = [];
}
this.listData = [];
}
ngOnInit(): void {
@ -26,19 +26,23 @@ export class PageDetailsComponent implements OnInit {
this.listData = listPlant;
//ajoute le ProductId à l'url
const routeParams = this.route.snapshot.paramMap;
const productIdFromRoute = Number (routeParams.get('productId'));
//trouve le produit qui correspond à l'Id de la route
//ajoute le ProductId à l'url
const routeParams = this.route.snapshot.paramMap;
const productIdFromRoute = Number(routeParams.get('productId'));
this.product = this.listData.find (product => product.product_id === productIdFromRoute);
// Faire appel au service et récuperer et executer la requete http et lui fournir le productId
this.plantouneService.getPlantById(productIdFromRoute).subscribe
(plant => {
this.detailsPlant = plant[0];
console.log(this.detailsPlant);
})
})
}
test(id:any){
console.log(id);
})
}
test(id: any) {
console.log(id);
}
}

5
src/app/services/plantoune.service.ts
View File

@ -11,6 +11,11 @@ export class PlantouneService {
constructor(private httpClient: HttpClient) { }
getData(): Observable<any[]> {
return this.httpClient.get<any[]>('http://localhost:3000/list_products');
}
getPlantById(id : any): Observable<any[]> {
return this.httpClient.get<any[]>('http://localhost:3000/list_products?product_id=' + id);
}
}