Service restoByCat + icone
This commit is contained in:
Thomas Cardon
parent
48d4b68b9b
commit
1b520593cd
@ -4,7 +4,7 @@
|
||||
<div class="card-body rounded-bottom">
|
||||
|
||||
|
||||
<a routerLink="../restaurants" class="btn">{{ categoryData.libelle }}</a>
|
||||
<a routerLink="../restaurants" class="btn" (click)="onClickCateg(categoryData.id)">{{ categoryData.libelle }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { ApiBackService } from '../services/api-back.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-card-category',
|
||||
@ -9,9 +11,20 @@ export class CardCategoryComponent implements OnInit {
|
||||
|
||||
@Input() categoryData : any;
|
||||
|
||||
constructor() { }
|
||||
constructor(private apiBackService : ApiBackService, private route : Router) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
onClickCateg(id : number){
|
||||
|
||||
|
||||
this.apiBackService.getRestaurantsByCateg(id);
|
||||
|
||||
this.route.navigate(['restaurants']);
|
||||
|
||||
//console.log('salut les copains');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,58 +1,69 @@
|
||||
<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded m-5 rounded-top " style="width: 19rem;" >
|
||||
<img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
|
||||
<div class="rond position-absolute">
|
||||
<i class="heart far fa-heart"></i>
|
||||
</div>
|
||||
<div class="card-body rounded-bottom">
|
||||
<h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">NOM RESTAURANT</h3>
|
||||
|
||||
<div class="accordion" id="accordionExample">
|
||||
|
||||
<h2 class="accordion-header pt-1" id="headingOne">
|
||||
<button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
PLUS D'INFOS
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class=" body accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong>
|
||||
<div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-2 ">
|
||||
<ul class="avis-star d-flex flex-row ps-1 pt-3 pe-0 pb-0 mb-0 ">
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star"><i class="bi bi-star-fill"></i></li>
|
||||
</ul>
|
||||
<span class="ps-3 mt-3 "style="font-size: 1.1em; color:#545454" >5/5</span>
|
||||
</div>
|
||||
<div class="infos ps-1 pt-2"style="color:#545454">
|
||||
<span class="categorie pe-4"style="font-style: italic;">Kebab</span>
|
||||
<i class="fas fa-walking ps-2 pe-1"style="color:#a8a8a8"></i><span class="categorie pe-4"style="font-weight: bold;">550m</span>
|
||||
<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 class="trait-rouge pt-3"></div>
|
||||
<p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454"><span class="description pe-1"style="font-style: italic;font-weight: bold;">Descriptif :</span> c’est le faux texte standard de l'imprimerie depuis
|
||||
les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
|
||||
réaliser un livre spécimen de polices de texte.</p>
|
||||
<div class="trait-rouge pt-2 pb-0"></div>
|
||||
<div class="critere ps-1 pt-3">
|
||||
<span class="sur-place pe-1" style="color:#545454">Sur place :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
|
||||
<span class="a-emporter ps-3 pe-1" style="color:#545454">A emporter :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
|
||||
</div>
|
||||
<div class="trait-rouge pt-3"></div>
|
||||
<div class="critere d-flex justify-content-center ps-1 pt-3 pb-3">
|
||||
<span class="acces-pmr pe-1" style="color:#545454">Accès PMR :</span><i class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"style="color:#ED2F2F"></i>
|
||||
</div>
|
||||
<div class="reserver pt-2">
|
||||
<button type="button" class="button">Réserver</button>
|
||||
</div>
|
||||
<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded m-5 rounded-top "
|
||||
style="width: 19rem;">
|
||||
<img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
|
||||
<div class="rond position-absolute">
|
||||
<i class="heart far fa-heart"></i>
|
||||
</div>
|
||||
<div class="card-body rounded-bottom">
|
||||
<h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">{{
|
||||
restaurant.nom }}</h3>
|
||||
|
||||
<div class="accordion" id="accordionExample">
|
||||
|
||||
<h2 class="accordion-header pt-1" id="headingOne">
|
||||
<button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
PLUS D'INFOS
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
|
||||
data-bs-parent="#accordionExample">
|
||||
<div class=" body accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong>
|
||||
<div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-2 ">
|
||||
<ul class="avis-star d-flex flex-row ps-1 pt-3 pe-0 pb-0 mb-0 ">
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star pe-2"><i class="bi bi-star-fill"></i></li>
|
||||
<li class="star"><i class="bi bi-star-fill"></i></li>
|
||||
</ul>
|
||||
<span class="ps-3 mt-3 " style="font-size: 1.1em; color:#545454">5/5</span>
|
||||
</div>
|
||||
|
||||
<div class="infos ps-1 pt-2" style="color:#545454">
|
||||
<span class="categorie pe-4" style="font-style: italic;">Kebab</span>
|
||||
<i class="fas fa-walking ps-2 pe-1" style="color:#a8a8a8"></i><span class="categorie pe-4"
|
||||
style="font-weight: bold;">550m</span>
|
||||
<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 class="trait-rouge pt-3"></div>
|
||||
<p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454"><span
|
||||
class="description pe-1" style="font-style: italic;font-weight: bold;">Descriptif :</span> c’est le faux
|
||||
texte standard de l'imprimerie depuis
|
||||
les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
|
||||
réaliser un livre spécimen de polices de texte.</p>
|
||||
<div class="trait-rouge pt-2 pb-0"></div>
|
||||
<div class="critere ps-1 pt-3">
|
||||
<span class="sur-place pe-1" style="color:#545454">Sur place :</span>
|
||||
<i *ngIf="restaurant.surPlace" class="fas fa-check-square"
|
||||
style="color:#4ECB71"></i>
|
||||
<i *ngIf="restaurant.surPlace === false " class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"></i>
|
||||
<span class="a-emporter ps-3 pe-1" style="color:#545454">A emporter :</span><i class="fas fa-check-square"
|
||||
style="color:#4ECB71"></i>
|
||||
</div>
|
||||
<div class="trait-rouge pt-3"></div>
|
||||
<div class="critere d-flex justify-content-center ps-1 pt-3 pb-3">
|
||||
<span class="acces-pmr pe-1" style="color:#545454">Accès PMR :</span><i
|
||||
class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"></i>
|
||||
</div>
|
||||
<div class="reserver pt-2">
|
||||
<button type="button" class="button">Réserver</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-card-resto',
|
||||
@ -7,9 +7,13 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class CardRestoComponent implements OnInit {
|
||||
|
||||
@Input() restaurant : any ;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
console.log(this.restaurant);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<h2 class="titre ">Résultats :</h2>
|
||||
<div class="separation"></div>
|
||||
<div class="parent d-flex justify-content-center align-items-center flex-wrap flex-row ">
|
||||
<div>
|
||||
<app-card-resto></app-card-resto>
|
||||
<div *ngFor="let restaurantData of listRestaurants">
|
||||
<app-card-resto [restaurant]= "restaurantData"></app-card-resto>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ApiBackService } from 'src/app/services/api-back.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-resto-page',
|
||||
@ -7,9 +8,20 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class RestoPageComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
public listRestaurants : any[];
|
||||
|
||||
constructor(private apiBackService : ApiBackService) {
|
||||
this.listRestaurants = [];
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this.apiBackService.restoByCat.subscribe((restaurants: any[]) => {
|
||||
|
||||
this.listRestaurants = restaurants;
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable, Subject } from 'rxjs';
|
||||
import { Observable, of, Subject } from 'rxjs';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@ -8,12 +8,19 @@ import { environment } from 'src/environments/environment';
|
||||
})
|
||||
export class ApiBackService {
|
||||
|
||||
constructor(private httpClient: HttpClient) { }
|
||||
public restoByCat : Observable<any[]> = of([]);
|
||||
|
||||
constructor(private httpClient: HttpClient) {
|
||||
}
|
||||
|
||||
getRestaurants(): Observable<any[]> {
|
||||
return this.httpClient.get<any[]>(`${environment.apiUrl}/restaurants`);
|
||||
}
|
||||
|
||||
getRestaurantsByCateg(id : number): void {
|
||||
this.restoByCat = this.httpClient.get<any[]>(`${environment.apiUrl}/restaurantbytype/${id}`);
|
||||
}
|
||||
|
||||
getCategories(): Observable<any[]>{
|
||||
return this.httpClient.get<any[]>(`${environment.apiUrl}/types`);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user