From 16b5f51e26cf6a1ababd643466a552d2da8c0993 Mon Sep 17 00:00:00 2001
From: Romain <51331158+zylfu@users.noreply.github.com>
Date: Fri, 21 Jan 2022 15:07:18 +0100
Subject: [PATCH] Mise en plave range TypeScript

---
 .../filters-page/filters-page.component.html  | 186 +++++++++---------
 .../filters-page/filters-page.component.scss  |   3 +-
 .../filters-page/filters-page.component.ts    |  36 +++-
 3 files changed, 126 insertions(+), 99 deletions(-)

diff --git a/src/app/pages/filters-page/filters-page.component.html b/src/app/pages/filters-page/filters-page.component.html
index 8193459..bfd1eda 100644
--- a/src/app/pages/filters-page/filters-page.component.html
+++ b/src/app/pages/filters-page/filters-page.component.html
@@ -2,118 +2,116 @@
 <div class="separation"></div>
 
 
-
 <div class="accordion">
 
 <!-------------------------------------------------------------------------- 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-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 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-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>
-        <input type="range" class="form-range" min="0" max="4" id="customRange2">
-        <div class="valuesDistance d-flex d-flex justify-content-between">
-          <span>0 KM</span>
-          <span>2 KM</span>
-          <span>4 KM</span>
+      </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-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-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>
         </div>
       </div>
     </div>
-   </div>
 
-   <!-------------------------------------------------------------------------- Accordéon Prix -------------------------------------------------------------------------->
+    <!-------------------------------------------------------------------------- Accordéon AccesPMR -------------------------------------------------------------------------->
 
-  <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-size: 20px;">Prix</p>
-      </button>
-    </h2>
-    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
-      <div class="accordion-body">
+    <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-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="minMax p-3">
-         <span>Veuillez sélectionner le prix souhaité</span>
+          <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>
-       <input type="range" class="form-range" min="0" max="50" id="customRange2">
-       <div class="valuesPrix d-flex d-flex justify-content-between">
-        <span>0€</span>
-        <span>25€</span>
-        <span>50€</span>
-      </div>
       </div>
     </div>
- </div>
 
- <!-------------------------------------------------------------------------- Accordéon Place/Emporter -------------------------------------------------------------------------->
+    <!-------------------------------------------------------------------------- Accordéon Avis -------------------------------------------------------------------------->
 
- <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-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" id="inlineCheckbox1" value="surPlaceOption" style="width: 25px; height: 25px; border-radius: 300px;">
-        <input class="Emporter-check-input" type="checkbox" id="inlineCheckbox2" value="aEmporterOption" style="width: 25px; height: 25px;">
+    <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-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>
       </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-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="" id="pmrIndeterminate" style="width: 25px; height: 25px;">
-        <label class="pmr-check-label" for="pmrIndeterminate"></label>
-      </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-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>
-  </div>
-</div>
 
 
 </div>
diff --git a/src/app/pages/filters-page/filters-page.component.scss b/src/app/pages/filters-page/filters-page.component.scss
index 1e7ff47..2527ff7 100644
--- a/src/app/pages/filters-page/filters-page.component.scss
+++ b/src/app/pages/filters-page/filters-page.component.scss
@@ -28,12 +28,11 @@ margin-bottom: 100px;
 .accordion-body{
   background-color: #F5F3F3;
   text-align: center;
-
 }
 
 .accordion-item{
 
-  margin-bottom: 70px;
+  margin-bottom: 60px;
 }
 
  .accordion-button{
diff --git a/src/app/pages/filters-page/filters-page.component.ts b/src/app/pages/filters-page/filters-page.component.ts
index dbeba33..b2afa2a 100644
--- a/src/app/pages/filters-page/filters-page.component.ts
+++ b/src/app/pages/filters-page/filters-page.component.ts
@@ -7,9 +7,39 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FiltersPageComponent implements OnInit {
 
-  constructor() { }
+  minDistance : any;
+  maxDistance : any;
+  selectDistance : any;
 
-  ngOnInit(): void {
-  }
+
+
+  minPrice : any;
+  maxPrice: any;
+  selectPrice : any;
+
+  constructor() {
+
+    this.minDistance = 0;
+    this.maxDistance = 4;
+    this.selectDistance = 0;
+
+    this.minPrice = 0;
+    this.maxPrice = 20;
+    this.selectPrice = 0;
+
+   }
+
+  ngOnInit(): void {}
+
+  changeValueDistance(valueDistance: any){
+    this.selectDistance = valueDistance.target.value;
+    console.log(this.selectDistance);
+}
+
+
+changeValuePrice(valuePrice: any){
+  this.selectPrice = valuePrice.target.value;
+  console.log(this.selectPrice);
+}
 
 }