edit types

front-end/src/app/pages/my-observations/my-observations.component.html

@@ -9,15 +9,15 @@
     </button>
   </div>
   <mat-list class="mat-expansion-panel-body-visible">
-    @for (observation of myOfflineObservations; track observation.id_event) {
+    @for (observation of myOfflineObservations; track observation.uuid) {
       <mat-list-item>
         <span matListItemTitle>{{
-          observation.name_event && observation.name_event !== ""
-            ? observation.name_event
-            : getEventType(observation.id_event_type)!.name
+          observation.name && observation.name !== ""
+            ? observation.name
+            : getEventType(observation.category)!.label
         }}</span>
         <span matListItemLine>{{
-          observation.date_event | date: "dd/MM/yyyy"
+          observation.event_date | date: "dd/MM/yyyy"
         }}</span>
         <span matListItemMeta>
           <button
@@ -36,11 +36,15 @@
 <div *ngIf="myObservations.length > 0" class="observations-container">
   <div class="mat-title-medium">Mes observations</div>
   <mat-list class="mat-expansion-panel-body-visible">
-    @for (observation of myObservations; track observation.id_event) {
+    @for (observation of myObservations; track observation.uuid) {
       <mat-list-item>
-        <span matListItemTitle>{{ observation.name_event }}</span>
+        <span matListItemTitle>{{
+          observation.name && observation.name !== ""
+            ? observation.name
+            : getEventType(observation.category)!.label
+        }}</span>
         <span matListItemLine>{{
-          observation.date_event | date: "dd/MM/yyyy"
+          observation.event_date | date: "dd/MM/yyyy"
         }}</span>
         <span matListItemMeta>
           <button
@@ -49,13 +53,9 @@
             [routerLink]="[
               '/detail-d-une-observation',
               slugify(
-                observation.id_event
+                observation.uuid
                   .toString()
-                  .concat(
-                    observation.name_event
-                      ? '-'.concat(observation.name_event)
-                      : ''
-                  )
+                  .concat(observation.name ? '-'.concat(observation.name) : '')
               ),
             ]"
           >

front-end/src/app/pages/my-observations/my-observations.component.ts

@@ -44,16 +44,18 @@ export class MyObservationsComponent {
   }
 
   async sendObservation(observation: Observation, refreshObservations = true) {
-    this.offlineService.deleteDataInStore('observations', [
-      observation.id_event,
-    ]);
+    this.offlineService.deleteDataInStore('observations', [observation.uuid]);
     if (refreshObservations) {
       await this.refreshObservations();
     }
   }
 
   getEventType(eventTypeId: number) {
-    return observationTypes.find(
+    const eventTypes = [
+      ...observationTypes.map((type) => type),
+      ...observationTypes.map((type) => type.children).flat(),
+    ];
+    return eventTypes.find(
       (observationType) => observationType.id === eventTypeId,
     );
   }

front-end/src/app/pages/my-offline-data/my-offline-data.component.ts

@@ -1,4 +1,4 @@
-import { afterNextRender, Component, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatCardModule } from '@angular/material/card';
@@ -132,7 +132,7 @@ export class MyOfflineDataComponent {
         );
 
         await this.offlineService.writeOrUpdateDataInStore('offline-areas', [
-          { id: area.id },
+          area,
         ]);
 
         area.offline = !area.offline;

front-end/src/app/pages/new-observation/new-observation.component.html

@@ -14,7 +14,7 @@
           Retour
         </button>
       </div>
-      <div class="mat-title-large mt-16">{{ observationTypeParent.name }}</div>
+      <div class="mat-title-large mt-16">{{ observationTypeParent.label }}</div>
     </div>
     <form [formGroup]="typeForm">
       <mat-grid-list #grid [cols]="columns" rowHeight="120px" gutterSize="20px">
@@ -26,7 +26,7 @@
             <div class="observation-type-tooltip-container">
               <button
                 mat-icon-button
-                matTooltip="{{ observationsType.tooltip }}"
+                matTooltip="{{ observationsType.description }}"
                 class="observation-type-tooltip"
                 #tooltip="matTooltip"
                 (click)="tooltip.show()"
@@ -46,9 +46,9 @@
               }"
             >
               <mat-icon class="observation-type-icon">
-                {{ observationsType.icon }}
+                {{ observationsType.pictogram }}
               </mat-icon>
-              <mat-card-footer> {{ observationsType.name }}</mat-card-footer>
+              <mat-card-footer> {{ observationsType.label }}</mat-card-footer>
             </mat-card>
           </mat-grid-tile>
         }
@@ -153,9 +153,9 @@
       Type d'observation
       <div>
         <span *ngIf="observationTypeParent"
-          >{{ observationTypeParent.name }} -
+          >{{ observationTypeParent.label }} -
         </span>
-        {{ typeForm.value.type.name }}
+        {{ typeForm.value.type.label }}
       </div>
     </div>
     <div *ngIf="photoForm.value.photo" class="mt-16 photo-container">

front-end/src/app/pages/new-observation/new-observation.component.ts

@@ -31,7 +31,7 @@ import * as _moment from 'moment';
 import { default as _rollupMoment } from 'moment';
 import { round } from '@turf/helpers';
 
-import observations from '../../../data/types.json';
+import observationTypes from '../../../data/types.json';
 import {
   Observation,
   ObservationType,
@@ -66,7 +66,7 @@ const moment = _rollupMoment || _moment;
   styleUrl: './new-observation.component.scss',
 })
 export class NewObservationComponent {
-  observationsTypes: ObservationTypes = observations;
+  observationsTypes: ObservationTypes = observationTypes;
   observationTypeParent: ObservationType | null = null;
   columns: number = 2;
   breakpoints = {
@@ -85,12 +85,9 @@ export class NewObservationComponent {
   @ViewChild('fileInput') private fileInput!: ElementRef<HTMLInputElement>;
 
   typeForm: FormGroup<{
-    type: FormControl<{ id: number; name: ''; icon: string } | null>;
+    type: FormControl<ObservationType | null>;
   }> = new FormGroup({
-    type: new FormControl<{ id: number; name: ''; icon: string } | null>(
-      null,
-      Validators.required,
-    ),
+    type: new FormControl<ObservationType | null>(null, Validators.required),
   });
 
   photoForm: FormGroup<{
@@ -193,13 +190,13 @@ export class NewObservationComponent {
     }).addTo(this.map);
   }
 
-  observationClick(value: any) {
-    if (value.observationTypes.length === 0) {
+  observationClick(value: ObservationType) {
+    if (value.children.length === 0) {
       this.typeForm.setValue({ type: value });
     } else {
       this.typeForm.setValue({ type: null });
       this.observationTypeParent = value;
-      this.observationsTypes = value.observationTypes;
+      this.observationsTypes = value.children;
     }
   }
 
@@ -222,25 +219,17 @@ export class NewObservationComponent {
   backToPreviousObservations() {
     this.observationTypeParent = null;
     this.typeForm.setValue({ type: null });
-    this.observationsTypes = observations;
+    this.observationsTypes = observationTypes;
   }
 
   saveAsDraft() {
     const newObservation: Observation = {
-      id_event: uuidv4(),
-      name_event: this.moreDataForm.value.name!,
-      date_event: this.moreDataForm.value.date!.toDate().toString(),
-      observers: 'Observateur',
-      description: this.moreDataForm.value.comment!,
-      direct_observation: true,
-      id_event_type: this.typeForm.value.type!.id,
-      author: 'Auteur',
-      date_create: moment().toDate().toString(),
-      picture_legend: 'Légende de la photo',
-      picture_author: 'Auteur de la photo',
-      picture_date: moment().toDate().toString(),
-      picture_licence: 'Licence de la photo',
-      picture_path: 'Chemin de la photo',
+      uuid: uuidv4(),
+      name: this.moreDataForm.value.name!,
+      event_date: this.moreDataForm.value.date!.toDate().toString(),
+      comments: this.moreDataForm.value.comment!,
+      category: this.typeForm.value.type!.id,
+      source: 'Source',
     };
     this.offlineService.writeOrUpdateDataInStore('observations', [
       newObservation,
@@ -252,4 +241,14 @@ export class NewObservationComponent {
   sendObservation() {
     this.router.navigate(['/']);
   }
+
+  getEventType(eventTypeId: number) {
+    const eventTypes = [
+      ...observationTypes.map((type) => type),
+      ...observationTypes.map((type) => type.children).flat(),
+    ];
+    return eventTypes.find(
+      (observationType) => observationType.id === eventTypeId,
+    );
+  }
 }

front-end/src/app/pages/observation-detail/observation-detail.component.html

@@ -1,20 +1,30 @@
 <div class="photo-container">
-  <img [src]="observationData.properties.picture_path" />
+  <img
+    *ngIf="
+      observationData.properties.medias &&
+      observationData.properties.medias.length > 0
+    "
+    [src]="observationData.properties.medias[0].thumbnails.large"
+  />
 </div>
 <div class="name-container mat-title-large">
-  {{ observationData.properties.name_event }}
+  {{
+    observationData.properties.name && observationData.properties.name !== ""
+      ? observationData.properties.name
+      : observationType.label
+  }}
 </div>
 <div class="type-name-container mat-body-large">
-  {{ observationType.name }}
+  {{ observationType.label }}
 </div>
 <div class="date-container mat-body-medium">
   <span class="mat-title-medium">Date : </span
-  ><span>{{ observationData.properties.date_event }}</span>
+  ><span>{{ observationData.properties.event_date }}</span>
 </div>
-<div class="observers-container mat-body-medium">
-  <span class="mat-title-medium">Observateur : </span
-  ><span>{{ observationData.properties.observers }}</span>
+<div class="source-container mat-body-medium">
+  <span class="mat-title-medium">Source : </span
+  ><span>{{ observationData.properties.source }}</span>
 </div>
-<div class="description-container mat-body-medium">
-  {{ observationData.properties.description }}
+<div class="comments-container mat-body-medium">
+  {{ observationData.properties.comments }}
 </div>

front-end/src/app/pages/observation-detail/observation-detail.component.scss

@@ -8,10 +8,10 @@
     object-fit: contain;
   }
 }
-.date-container {
+.source-container {
   padding: 8px 16px;
 }
-.observers-container {
+.date-container {
   padding: 8px 16px;
 }
 .type-name-container {
@@ -20,6 +20,6 @@
 .name-container {
   padding: 8px 16px;
 }
-.description-container {
+.comments-container {
   padding: 8px 16px;
 }

front-end/src/app/pages/observation-detail/observation-detail.component.ts

@@ -3,11 +3,12 @@ import { Component, Input } from '@angular/core';
 import evenementsRemarquables from '../../../data/evenements_remarquables.json';
 import observationTypes from '../../../data/types.json';
 import { Observation, ObservationType } from '../../types/types';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-observation-detail',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './observation-detail.component.html',
   styleUrl: './observation-detail.component.scss',
 })
@@ -19,11 +20,20 @@ export class ObservationDetailComponent {
   ngOnInit() {
     const observationId = Number(this.observation.split('-')[0]);
     this.observationData = (evenementsRemarquables.features as any).find(
-      (feature: any) => feature.properties.id_event === observationId,
+      (feature: any) => feature.properties.uuid === observationId,
     );
-    this.observationType = observationTypes.find(
-      (observationType) =>
-        observationType.id === this.observationData!.properties.id_event_type,
+    this.observationType = this.getEventType(
+      this.observationData!.properties.category,
     )!;
   }
+
+  getEventType(eventTypeId: number) {
+    const eventTypes = [
+      ...observationTypes.map((type) => type),
+      ...observationTypes.map((type) => type.children).flat(),
+    ];
+    return eventTypes.find(
+      (observationType) => observationType.id === eventTypeId,
+    );
+  }
 }

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

@@ -25,7 +25,7 @@
     <mat-list class="mat-expansion-panel-body-visible">
       @for (
         observation of currentObservationsFeatureCollection.features;
-        track observation.properties.id_event
+        track observation.properties.uuid
       ) {
         <mat-list-item>
           <span matListItemIcon
@@ -37,9 +37,13 @@
             </button></span
           >
 
-          <span matListItemTitle>{{ observation.properties.name_event }}</span>
+          <span matListItemTitle>{{
+            observation.properties.name && observation.properties.name !== ""
+              ? observation.properties.name
+              : getEventType(observation.properties.category)!.label
+          }}</span>
           <span matListItemLine>{{
-            observation.properties.date_event | date: "dd/MM/yyyy"
+            observation.properties.event_date | date: "dd/MM/yyyy"
           }}</span>
           <span matListItemMeta>
             <button
@@ -48,11 +52,11 @@
               [routerLink]="[
                 '/detail-d-une-observation',
                 slugify(
-                  observation.properties.id_event
+                  observation.properties.uuid
                     .toString()
                     .concat(
-                      observation.properties.name_event
-                        ? '-'.concat(observation.properties.name_event)
+                      observation.properties.name
+                        ? '-'.concat(observation.properties.name)
                         : ''
                     )
                 ),