Filtres test ok

src/app/card-resto/card-resto.component.html

@@ -85,8 +85,5 @@
             <button type="button" class="button">Réserver</button>
           </div>
         </div>
-
       </div>
-
-    
 </div>

src/app/card-resto/card-resto.component.ts

@@ -1,4 +1,5 @@
 import { Component,EventEmitter, Input, Output, OnInit } from '@angular/core';
+import { ApiBackService } from '../services/api-back.service';
 
 @Component({
   selector: 'app-card-resto',
@@ -13,7 +14,7 @@ export class CardRestoComponent implements OnInit {
   @Output() clickLike = new EventEmitter<boolean>();
   isLiked : boolean = false;
   
-  constructor() {
+  constructor(private apiBackService : ApiBackService) {
     this.distance = 0 ;
    }
 
@@ -22,7 +23,7 @@ export class CardRestoComponent implements OnInit {
     console.log(this.restaurant);
 
     this.distance = Math.round(
-      this.getDistanceFromLatLonInKm(
+      this.apiBackService.setDistance(
       48.86201110271593 , //latitude Simplon
       2.4361804827725417, //longitude Simplon
       this.restaurant.latitude,
@@ -39,23 +40,6 @@ export class CardRestoComponent implements OnInit {
     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)
-  }
 
 
 

src/app/filters/avis-bar/avis-bar.component.html

@@ -1,6 +1,6 @@
 <div (mouseleave)="onMouseLeave()">
   <app-icon *ngFor="let star of starStates; let starIndex = index"
-  [iconName]="star.stateHoverUser ? 'bi-star-fill' : 'bi-star'"
+  [iconName]="star.stateHoverUser ? 'star-fill' : 'star'"
   [iconSize]="2.5"
   [iconColor]="'#ffbf00'"
   style="padding: 6px;"

src/app/pages/filters-page/filters-page.component.html

@@ -17,14 +17,16 @@
       aria-labelledby="panelsStayOpen-headingOne">
       <div class="accordion-body">
         <div class="distance p-3">
-          <span>Veuillez sélectionner la distance souhaitée</span>
+          <span>Veuillez sélectionner la distance souhaitée (En Km) </span>
         </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>
+          <span>0</span>
+          <span>1</span>
+          <span>2</span>
+          <span>3</span>
+          <span>4</span>
         </div>
       </div>
     </div>
@@ -109,28 +111,10 @@
     </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" (click)="onSendFilters()" (click)="onSendRating()">LANCER LA
+<button class="btn-search btn-primary" type="button" (click)="onSendFilters()">LANCER LA
   RECHERCHE</button>

src/app/pages/filters-page/filters-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ApiBackService } from 'src/app/services/api-back.service';
 
@@ -9,100 +9,133 @@ import { ApiBackService } from 'src/app/services/api-back.service';
 })
 export class FiltersPageComponent implements OnInit {
 
- public minDistance : any;
- public maxDistance : 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 minPrice: any;
+  public maxPrice: any;
+  public selectPrice: any;
+  public selectDistance: any;
+  public selectPmr: any;
+  public selectSurPlace: any;
+  public selectEmporter: any;
   public selectRating: number;
 
+
+
+
   public listRestau: any[];
 
 
-  constructor(private apiBackService : ApiBackService, private route : Router, private activatedRoute : ActivatedRoute) {
+  constructor(private apiBackService: ApiBackService, private route: Router, private activatedRoute: ActivatedRoute) {
 
     this.minDistance = 0;
-    this.maxDistance = 4;
-    this.selectDistance = null;
+    this.maxDistance = 4000;
 
     this.minPrice = 1;
     this.maxPrice = 4;
-    this.selectPrice = 0;
 
+    this.selectPrice = null;
+    this.selectDistance = null;
     this.selectPmr = false;
     this.selectEmporter = false;
     this.selectSurPlace = false;
-  
     this.selectRating = 0;
 
     this.listRestau = [];
-    
 
   }
 
   ngOnInit(): void {
-      this.apiBackService.getRestaurants().subscribe((restaurants: any[]) => {
-        this.listRestau = restaurants;
-    });
 
+
+    this.apiBackService.getRestaurants().subscribe((restaurants: any[]) => {
+      this.listRestau = restaurants;
+    });
     console.log(this.listRestau);
-    
+
   }
 
 
-OnChangeValueDistance(valueDistance: any){
-  this.selectDistance = valueDistance.target.value;
-}
-
-OnChangeValuePrice(valuePrice: any){
-  this.selectPrice = valuePrice.target.value;
-}
-
-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);
-}
+  OnChangeValueDistance(valueDistance: any) {
+    this.selectDistance = valueDistance.target.value;
+  }
 
 
-onSendFilters() : void{
-  let restaus = this.listRestau;
+  OnChangeValuePrice(valuePrice: any) {
+    this.selectPrice = valuePrice.target.value;
+  }
 
-  restaus = restaus.filter((restau)=>
+  OnChangeValuePMR(valuePmr: any) {
+    this.selectPmr = (valuePmr.target.checked);
+  }
 
-    this.selectPrice <= restau.prix
+  OnChangeValueSurPlace(valuePlace: any) {
+    this.selectSurPlace = valuePlace.target.checked;
+  }
 
-  ), 
-  console.log( this.activatedRoute.snapshot.routeConfig?.path);
-  
-  this.apiBackService.setListRestau(restaus, this.activatedRoute.snapshot.routeConfig?.path);
+  OnChangeValueEmporter(valueEmporter: any) {
+    this.selectEmporter = valueEmporter.target.checked;
+  }
+
+  onSendFilters(): void {
+    let restaus = this.listRestau;
+
+
+    // ------------------------------------------------Filtre par Distance-------------------------------------------------------------------------
+
+    if (this.selectDistance != null) {
+      restaus = restaus.filter((restau) =>
+        this.selectDistance >= Math.round(
+          this.apiBackService.setDistance(
+          48.86201110271593 , //latitude Simplon
+          2.4361804827725417, //longitude Simplon
+          restau.latitude,
+          restau.longitude)
+          ))
+
+    }
+    // ------------------------------------------------Filtre par Prix-------------------------------------------------------------------------
+
+    if (this.selectPrice != null) {
+      restaus = restaus.filter((restau) =>
+        this.selectPrice == restau.prix
+      )
+    }
+
+    // ------------------------------------------------Filtre par Acces PMR---------------------------------------------------------------------
+
+    if (this.selectPmr === true) {
+      restaus = restaus.filter((restau) =>
+        this.selectPmr === restau.accesPMR
+      )
+    }
+
+    // ------------------------------------------------Filtre par A emporter--------------------------------------------------------------------
+
+    if (this.selectEmporter === true) {
+      restaus = restaus.filter((restau) =>
+        this.selectEmporter === restau.aEmporter
+      )
+    }
+
+    // ------------------------------------------------Filtre par Sur Place----------------------------------------------------------------------
+
+    if (this.selectSurPlace === true) {
+      restaus = restaus.filter((restau) =>
+        this.selectSurPlace === restau.surPlace
+      )
+    }
+
+    // -------------------------------------------------------------------------------------------------------------------------------------------
+
+    console.log(this.activatedRoute.snapshot.routeConfig?.path);
+    console.log(restaus);
+
+    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']);
-  
-}
-
+    this.route.navigate(['restaurants']);
+
+  }
 }
 

src/app/services/api-back.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Input } from '@angular/core';
 import { Observable, of, Subject } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { environment } from 'src/environments/environment';
@@ -12,6 +12,7 @@ export class ApiBackService {
   restoLiked$ = new Subject<any>();
   public restoFilter : any[];
   public routeParam ?: string;
+  @Input() restaurant : any;
 
   constructor(private httpClient: HttpClient) { 
     this.restoFilter = [];
@@ -36,6 +37,27 @@ export class ApiBackService {
     this.restoFilter =  listRestau;
     this.routeParam = routeParam;
     
-  }
+    }
+
+    setDistance(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)
+      }
+    }
+
+
 
-}