Mise en plave range TypeScript
This commit is contained in:
Romain
parent
05f04db32b
commit
16b5f51e26
3 changed files with 126 additions and 99 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue