Merge pull request #18 from PnEcrins/offline

Offline
PnEcrins · Jul 8, 2024 · 8ab793f · 8ab793f
2 parents 53e9101 + 6a286c1
commit 8ab793f
Show file tree

Hide file tree

Showing 29 changed files with 897 additions and 3,640 deletions.
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
diff --git a/front-end/package.json b/front-end/package.json
@@ -30,12 +30,15 @@
     "@angular/ssr": "^18.0.6",
     "@turf/helpers": "^7.0.0",
     "express": "^4.18.2",
+    "idb": "^8.0.0",
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.81.1",
     "leaflet.markercluster": "^1.5.3",
+    "leaflet.offline": "^3.0.1",
     "rxjs": "~7.8.0",
     "slugify": "^1.6.6",
     "tslib": "^2.3.0",
+    "uuid": "^10.0.0",
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
@@ -48,6 +51,7 @@
     "@types/leaflet.locatecontrol": "^0.74.5",
     "@types/leaflet.markercluster": "^1.5.4",
     "@types/node": "^18.18.0",
+    "@types/uuid": "^10.0.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

diff --git a/front-end/src/app/app.component.html b/front-end/src/app/app.component.html
@@ -1,19 +1,23 @@
 <mat-toolbar>
-  <button *ngIf="backButton" (click)="handleBackButton()" mat-icon-button>
-    <mat-icon>arrow_back</mat-icon>
-  </button>
-  <a *ngIf="!backButton" routerLink="/" class="logo-container">
+  <a routerLink="/" class="logo-container">
     <img src="favicon.ico" />
   </a>
-  <span>{{ title }}</span>
+  <span>Regard d'altitude</span>
   <span class="toolbar-spacer"></span>
-  <button *ngIf="accountButton" mat-icon-button (click)="sidenav.toggle()">
-    <mat-icon aria-hidden="false" [matBadge]="observationsPending"
+  <button mat-icon-button (click)="sidenav.toggle()">
+    <mat-icon
+      aria-hidden="false"
+      [matBadge]="this.offlineService.observationsPending | async"
       >account_circle</mat-icon
     >
   </button>
 </mat-toolbar>
-
+<mat-toolbar *ngIf="backButton">
+  <button (click)="handleBackButton()" mat-icon-button>
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+  <span>{{ title }}</span>
+</mat-toolbar>
 <mat-sidenav-container [style.marginTop.px]="0">
   <mat-sidenav
     #sidenav
@@ -35,7 +39,13 @@
             !currentSideNavItem.routerLink ? currentSideNavItem.click() : null
           "
         >
-          <div [matBadge]="currentSideNavItem.observationsPending">
+          <div
+            [matBadge]="
+              currentSideNavItem.observationsPending
+                ? (this.offlineService.observationsPending | async)
+                : null
+            "
+          >
             {{ currentSideNavItem.text }}
           </div>
         </a>

diff --git a/front-end/src/app/app.component.ts b/front-end/src/app/app.component.ts
@@ -1,5 +1,11 @@
 import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, PLATFORM_ID, ViewChild, inject } from '@angular/core';
+import {
+  Component,
+  PLATFORM_ID,
+  ViewChild,
+  afterNextRender,
+  inject,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -16,6 +22,7 @@ import { AuthService } from './services/auth.service';
 import { Platform } from '@angular/cdk/platform';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatDividerModule } from '@angular/material/divider';
+import { OfflineService } from './services/offline.service';
 
 @Component({
   selector: 'app-root',
@@ -44,54 +51,69 @@ export class AppComponent {
   router = inject(Router);
   location = inject(Location);
   authService = inject(AuthService);
+  offlineService = inject(OfflineService);
 
   @ViewChild('sidenav') private sidenav!: MatSidenav;
 
-  observationsPending = '2';
-
   sideNavItems = [
     {
       id: 1,
       text: 'Se connecter',
       routerLink: 'se-connecter',
       authenficated: false,
       click: () => null,
-      observationsPending: null,
+      observationsPending: false,
     },
     {
       id: 2,
       text: 'Mon compte',
       routerLink: 'mon-compte',
       authenficated: true,
       click: () => null,
-      observationsPending: null,
+      observationsPending: false,
     },
     {
       id: 3,
+      text: 'Saisir une nouvelle observation',
+      routerLink: 'nouvelle-observation',
+      authenficated: true,
+      click: () => null,
+      observationsPending: false,
+    },
+    {
+      id: 4,
+      text: 'Interface de synthèse',
+      routerLink: 'interface-de-synthese',
+      authenficated: null,
+      click: () => null,
+      observationsPending: false,
+    },
+    {
+      id: 5,
       text: 'Mes observations',
       routerLink: 'mes-observations',
       authenficated: true,
       click: () => null,
-      observationsPending: this.observationsPending,
+      observationsPending: true,
     },
     {
-      id: 4,
+      id: 6,
       text: 'Mes données hors ligne',
       routerLink: 'mes-donnees-hors-ligne',
       authenficated: true,
       click: () => null,
-      observationsPending: null,
+      observationsPending: false,
     },
     {
-      id: 5,
+      id: 7,
       text: 'Me déconnecter',
       routerLink: null,
       authenficated: true,
       click: () => {
         this.authService.logout();
         this.sidenav.close();
       },
-      observationsPending: null,
+      observationsPending: false,
     },
   ];
 
@@ -102,7 +124,9 @@ export class AppComponent {
 
   handleAuthentification(value: any) {
     this.currentSideNavItems = this.sideNavItems.filter(
-      (sideNavItem) => sideNavItem.authenficated === value,
+      (sideNavItem) =>
+        sideNavItem.authenficated === value ||
+        sideNavItem.authenficated === null,
     );
   }
 
@@ -113,6 +137,9 @@ export class AppComponent {
     if (this.isPlatformBrowser) {
       this.authService.checkAuth();
     }
+    afterNextRender(() => {
+      this.offlineService.handleObservationsPending();
+    });
   }
 
   ngOnInit() {

diff --git a/front-end/src/app/pages/home/home.component.html b/front-end/src/app/pages/home/home.component.html
@@ -1,6 +1,6 @@
 <section class="new-observation-container">
   <button
-    *ngIf="authService.isAuth | async"
+    [disabled]="!(authService.isAuth | async)"
     routerLink="/nouvelle-observation"
     mat-fab
     extended

diff --git a/front-end/src/app/pages/home/home.component.scss b/front-end/src/app/pages/home/home.component.scss
@@ -8,6 +8,7 @@
   button {
     width: 240px;
     border-radius: 0%;
+    background-color: var(--mdc-fab-container-color);
   }
 }
 

diff --git a/front-end/src/app/pages/my-observations/my-observations.component.html b/front-end/src/app/pages/my-observations/my-observations.component.html
@@ -0,0 +1,68 @@
+<div
+  *ngIf="myOfflineObservations.length > 0"
+  class="offline-observations-container"
+>
+  <div class="mat-title-medium">Mes observations à envoyer</div>
+  <div class="send-observations-container">
+    <button mat-flat-button color="primary" (click)="sendObservations()">
+      Envoyer toutes mes observations
+    </button>
+  </div>
+  <mat-list class="mat-expansion-panel-body-visible">
+    @for (observation of myOfflineObservations; track observation.uuid) {
+      <mat-list-item>
+        <span matListItemTitle>{{
+          observation.name && observation.name !== ""
+            ? observation.name
+            : getEventType(observation.category)!.label
+        }}</span>
+        <span matListItemLine>{{
+          observation.event_date | date: "dd/MM/yyyy"
+        }}</span>
+        <span matListItemMeta>
+          <button
+            mat-icon-button
+            class="mt-16"
+            (click)="sendObservation(observation)"
+          >
+            <mat-icon>send</mat-icon>
+          </button>
+        </span>
+      </mat-list-item>
+    }
+  </mat-list>
+</div>
+
+<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.uuid) {
+      <mat-list-item>
+        <span matListItemTitle>{{
+          observation.name && observation.name !== ""
+            ? observation.name
+            : getEventType(observation.category)!.label
+        }}</span>
+        <span matListItemLine>{{
+          observation.event_date | date: "dd/MM/yyyy"
+        }}</span>
+        <span matListItemMeta>
+          <button
+            mat-icon-button
+            class="mt-16"
+            [routerLink]="[
+              '/detail-d-une-observation',
+              slugify(
+                observation.uuid
+                  .toString()
+                  .concat(observation.name ? '-'.concat(observation.name) : '')
+              ),
+            ]"
+          >
+            <mat-icon>arrow_forward</mat-icon>
+          </button>
+        </span>
+      </mat-list-item>
+    }
+  </mat-list>
+</div>
diff --git a/front-end/src/app/pages/my-observations/my-observations.component.scss b/front-end/src/app/pages/my-observations/my-observations.component.scss
@@ -0,0 +1,11 @@
+.offline-observations-container,
+.observations-container {
+  padding: 0px 16px 16px 16px;
+}
+
+.send-observations-container {
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}