add filter dialog

front-end/src/app/synthesis-interface/dialogs/filter-dialog.html

@@ -0,0 +1,42 @@
+<h2 mat-dialog-title>Filtrer</h2>
+<mat-dialog-content>
+  <div>
+    <mat-form-field>
+      <mat-label>Types d'observation</mat-label>
+      <mat-select [formControl]="observationTypesForm" multiple>
+        @for (observationType of observationTypes; track observationType.id) {
+        <mat-option [value]="observationType"
+          >{{observationType.name}}</mat-option
+        >
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div>
+    <mat-form-field>
+      <mat-label>Date</mat-label>
+      <mat-date-range-input
+        [formGroup]="observationsDates"
+        [rangePicker]="observationsDatesPicker"
+      >
+        <input
+          matStartDate
+          placeholder="Date de début"
+          formControlName="start"
+        />
+        <input matEndDate placeholder="Date de fin" formControlName="end" />
+      </mat-date-range-input>
+      <mat-datepicker-toggle
+        matIconSuffix
+        [for]="observationsDatesPicker"
+      ></mat-datepicker-toggle>
+      <mat-date-range-picker #observationsDatesPicker></mat-date-range-picker>
+    </mat-form-field>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="filterCancel()">Annuler</button>
+  <button mat-button (click)="filterConfirm()" cdkFocusInitial>
+    Confirmer
+  </button>
+</mat-dialog-actions>

front-end/src/app/synthesis-interface/dialogs/filter-dialog.scss

@@ -0,0 +1,3 @@
+.mat-mdc-form-field {
+  width: 100%;
+}

front-end/src/app/synthesis-interface/dialogs/filter-dialog.ts

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+
+import observationsTypes from './types.json';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+
+@Component({
+  selector: 'filter-dialog',
+  templateUrl: 'filter-dialog.html',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatDialogActions,
+    MatDialogClose,
+    MatDialogTitle,
+    MatDialogContent,
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatDatepickerModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrl: './filter-dialog.scss',
+})
+export class FilterDialog {
+  dialogRef = inject(MatDialogRef<FilterDialog>);
+  observationTypesForm = new FormControl('');
+  observationTypes: any = observationsTypes;
+  readonly observationsDates = new FormGroup({
+    start: new FormControl(null),
+    end: new FormControl(null),
+  });
+
+  filterCancel() {
+    this.dialogRef.close();
+  }
+  filterConfirm() {
+    this.dialogRef.close({ filter: true });
+  }
+}

front-end/src/app/synthesis-interface/dialogs/types.json

@@ -0,0 +1,50 @@
+[
+  {
+    "id": 1,
+    "name": "Avalanche"
+  },
+  {
+    "id": 2,
+    "name": "Chablis"
+  },
+  {
+    "id": 3,
+    "name": "Chute de blocs"
+  },
+  {
+    "id": 4,
+    "name": "Crue torrentielle"
+  },
+  {
+    "id": 5,
+    "name": "Incendie"
+  },
+  {
+    "id": 6,
+    "name": "Inondation"
+  },
+  {
+    "id": 7,
+    "name": "Lave torrentielle"
+  },
+  {
+    "id": 8,
+    "name": "Ravinement"
+  },
+  {
+    "id": 9,
+    "name": "Volis"
+  },
+  {
+    "id": 10,
+    "name": "Apparition d'un nouveau lac"
+  },
+  {
+    "id": 11,
+    "name": "Glissement de terrain"
+  },
+  {
+    "id": 12,
+    "name": "Phénomène glaciaire"
+  }
+]

front-end/src/app/synthesis-interface/synthesis-interface.component.html

@@ -1,6 +1,6 @@
 <div id="map"></div>
 <div class="tune-button-container">
-  <button mat-fab extended color="primary">
+  <button mat-fab extended color="primary" (click)="openFilterDialog()">
     <mat-icon>tune</mat-icon>
     Filtrer
   </button>

front-end/src/app/synthesis-interface/synthesis-interface.component.ts

@@ -6,6 +6,8 @@ import { Router, RouterLink } from '@angular/router';
 import slugify from 'slugify';
 
 import evenementsRemarquables from './evenements_remarquables.json';
+import { MatDialog } from '@angular/material/dialog';
+import { FilterDialog } from './dialogs/filter-dialog';
 
 @Component({
   selector: 'app-synthesis-interface',
@@ -15,6 +17,8 @@ import evenementsRemarquables from './evenements_remarquables.json';
   styleUrl: './synthesis-interface.component.scss',
 })
 export class SynthesisInterfaceComponent {
+  readonly dialog = inject(MatDialog);
+
   L: any;
   map: any;
   observationsFeatureCollection = evenementsRemarquables;
@@ -121,4 +125,19 @@ export class SynthesisInterfaceComponent {
     this.observationsClusterGroup.addLayer(this.observationsLayer);
     this.map.addLayer(this.observationsClusterGroup);
   }
+
+  openFilterDialog() {
+    const deleteDialogRef = this.dialog.open(FilterDialog, {
+      width: '100%',
+      maxWidth: '50vw',
+      height: '100%',
+      maxHeight: '50vh',
+    });
+
+    deleteDialogRef.afterClosed().subscribe((result) => {
+      if (result && result.filter) {
+        console.log(result.filter);
+      }
+    });
+  }
 }