Page filters améliorations + Composant Avis-bar

src/app/app-routing.module.ts

@@ -13,7 +13,7 @@ const routes: Routes = [
     { path: 'home', component: HomePageComponent },
     { path: 'categories', component: ListCategoriesComponent },
     { path: 'favoris', component: FavorisUserComponent },
-    { path: 'filters', component: FiltersPageComponent },
+    { path: 'filtres', component: FiltersPageComponent },
     { path: 'Deconnexion', redirectTo: 'home'},
     {path: 'restaurants',component: RestoPageComponent},
     {path: 'page-not-found',component: PageNotFoundComponent},

src/app/app.module.ts

@@ -15,6 +15,8 @@ import { ListCategoriesComponent } from './pages/list-categories/list-categories
 import { RestoPageComponent } from './pages/resto-page/resto-page.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 import { FiltersPageComponent } from './pages/filters-page/filters-page.component';
+import { AvisBarComponent } from './filters/avis-bar/avis-bar.component';
+import { IconComponent } from './filters/icon/icon.component';
 
 @NgModule({
   declarations: [
@@ -28,7 +30,9 @@ import { FiltersPageComponent } from './pages/filters-page/filters-page.componen
     ListCategoriesComponent,
     RestoPageComponent,
     PageNotFoundComponent,
-    FiltersPageComponent
+    FiltersPageComponent,
+    AvisBarComponent,
+    IconComponent
   ],
   imports: [
     BrowserModule,

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

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

src/app/filters/avis-bar/avis-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvisBarComponent } from './avis-bar.component';
+
+describe('AvisBarComponent', () => {
+  let component: AvisBarComponent;
+  let fixture: ComponentFixture<AvisBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AvisBarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AvisBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-avis-bar',
+  templateUrl: './avis-bar.component.html',
+  styleUrls: ['./avis-bar.component.scss']
+})
+export class AvisBarComponent implements OnInit {
+
+  starStates: {stateSelectedUser : boolean, stateHoverUser : boolean}[];
+
+
+  constructor() {
+
+    this.starStates = [];
+
+    for (let index = 0; index < 5; index++) {
+      this.starStates.push(
+        {
+          stateSelectedUser : false,
+          stateHoverUser : false
+        }
+      );
+    }
+
+  }
+
+  ngOnInit(): void {
+  }
+
+  onMouseOver(index: number) {
+    console.log("star over", index);
+    for (let i = 0; i < this.starStates.length ; i++) {
+      if(i <= index) {
+        this.starStates[i].stateHoverUser = true;
+      } else {
+        this.starStates[i].stateHoverUser = false;
+      }
+    }
+  }
+
+  onMouseLeave() {
+    const tempTab = [];
+    for (let index = 0; index < this.starStates.length; index++) {
+      tempTab.push(
+        {
+          stateSelectedUser : this.starStates[index].stateSelectedUser,
+          stateHoverUser : this.starStates[index].stateSelectedUser
+        }
+      );
+    }
+    this.starStates = [...tempTab];
+  }
+
+  onClickStar(starIndex: number) {
+    for (let i = 0; i < this.starStates.length ; i++) {
+      if(i <= starIndex) {
+        this.starStates[i].stateSelectedUser = true;
+      } else {
+        this.starStates[i].stateSelectedUser = false;
+      }
+    }
+  }
+
+}

src/app/filters/icon/icon.component.html

@@ -0,0 +1,3 @@
+<i class="bi-{{iconName}}"
+[ngStyle]="{'font-size.rem': iconSize, 'color': iconColor}"></i>
+

src/app/filters/icon/icon.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IconComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/filters/icon/icon.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Input } from '@angular/core';
+
+@Component({
+  selector: 'app-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss']
+})
+export class IconComponent implements OnInit {
+
+  @Input() iconName!: string;
+  @Input() iconSize!: number;
+  @Input() iconColor!: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+
+
+}

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

@@ -12,9 +12,17 @@
     </h2>
     <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
       <div class="accordion-body">
-        <label for="price-min">Price:</label>
-        <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
+        <div class="distance p-3">
+          <span>Veuillez sélectionner la distance souhaitée</span>
+        </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>
       </div>
+
     </div>
    </div>
 
@@ -26,6 +34,17 @@
     </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" min="0" max="20" id="customRange2">
+       <div class="valuesPrix d-flex d-flex justify-content-between">
+        <span>0€</span>
+        <span>10€</span>
+        <span>20€</span>
+      </div>
+
       </div>
     </div>
  </div>
@@ -38,6 +57,17 @@
   </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>
+
+
     </div>
   </div>
 </div>
@@ -50,6 +80,15 @@
   </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>
@@ -62,6 +101,10 @@
   </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>

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

@@ -12,6 +12,7 @@
   justify-content: flex-start;
   margin: 0 0 0.5em 8.2em;
   color: #CE0000;
+  margin-top: 100px;
 }
 
 
@@ -25,6 +26,7 @@ margin-bottom: 100px;
 
 .accordion-body{
   background-color: #F5F3F3;
+  text-align: center;
 
 }
 
@@ -51,3 +53,9 @@ filter: drop-shadow(0 0 0.2rem grey);
   font-size: 20px;
 
 }
+
+span{
+  font-weight: 500 ;
+}
+
+