Merge pull request #10 from PnEcrins/ui-developement

ui development

front-end/angular.json

@@ -35,7 +35,6 @@
               }
             ],
             "styles": [
-              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss",
               "./node_modules/leaflet/dist/leaflet.css",
               "./node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css",
@@ -111,7 +110,6 @@
               }
             ],
             "styles": [
-              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss",
               "./node_modules/leaflet/dist/leaflet.css",
               "./node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css",

front-end/m3-theme.scss

@@ -0,0 +1,146 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use "sass:map";
+@use "@angular/material" as mat;
+
+// Note: Color palettes are generated from primary: #F9CA24
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #241a00,
+    20: #3d2f00,
+    25: #4a3900,
+    30: #574500,
+    35: #655000,
+    40: #745c00,
+    50: #917400,
+    60: #b08d00,
+    70: #d0a600,
+    80: #efc117,
+    90: #ffe089,
+    95: #ffefcc,
+    98: #fff8f0,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #221b04,
+    20: #393016,
+    25: #443b1f,
+    30: #50462a,
+    35: #5c5234,
+    40: #695d3f,
+    50: #827656,
+    60: #9d906e,
+    70: #b8aa87,
+    80: #d5c5a1,
+    90: #f1e1bb,
+    95: #ffefcc,
+    98: #fff8f0,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #03210c,
+    20: #19371f,
+    25: #24422a,
+    30: #2f4d34,
+    35: #3b593f,
+    40: #46664b,
+    50: #5f7f62,
+    60: #78997b,
+    70: #92b494,
+    80: #adcfae,
+    90: #c8ecc9,
+    95: #d6fad7,
+    98: #eaffe8,
+    99: #f6fff2,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1e1b16,
+    20: #33302a,
+    25: #3e3b35,
+    30: #4a4640,
+    35: #56524b,
+    40: #625e57,
+    50: #7b766f,
+    60: #959088,
+    70: #b0aaa2,
+    80: #ccc6bd,
+    90: #e8e2d9,
+    95: #f7f0e7,
+    98: #fff8f0,
+    99: #fffbff,
+    100: #ffffff,
+    4: #100e09,
+    6: #15130e,
+    12: #221f1a,
+    17: #2c2a24,
+    22: #37342e,
+    24: #3c3933,
+    87: #e0d9d0,
+    92: #eee7de,
+    94: #f4ede4,
+    96: #faf3e9,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1f1b10,
+    20: #353024,
+    25: #403b2e,
+    30: #4c4639,
+    35: #585244,
+    40: #645e4f,
+    50: #7d7667,
+    60: #989080,
+    70: #b3aa99,
+    80: #cfc6b4,
+    90: #ebe1cf,
+    95: #faf0dd,
+    98: #fff8f0,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error),
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$light-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: $_primary,
+      tertiary: $_tertiary,
+    ),
+  )
+);

front-end/package.json

@@ -56,4 +56,4 @@
     "prettier": "3.3.1",
     "typescript": "~5.4.2"
   }
-}
+}

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

@@ -2,10 +2,15 @@
   <button *ngIf="backButton" (click)="handleBackButton()" mat-icon-button>
     <mat-icon>arrow_back</mat-icon>
   </button>
+  <a *ngIf="!backButton" routerLink="/" class="logo-container">
+    <img src="favicon.ico" />
+  </a>
   <span>{{ title }}</span>
   <span class="toolbar-spacer"></span>
   <button *ngIf="accountButton" mat-icon-button (click)="sidenav.toggle()">
-    <mat-icon>account_circle</mat-icon>
+    <mat-icon aria-hidden="false" [matBadge]="observationsPending"
+      >account_circle</mat-icon
+    >
   </button>
 </mat-toolbar>
 
@@ -20,16 +25,21 @@
     <mat-nav-list>
       @for (
         currentSideNavItem of currentSideNavItems;
-        track currentSideNavItem.id
+        track currentSideNavItem.id;
+        let last = $last
       ) {
         <a
           mat-list-item
           [routerLink]="currentSideNavItem.routerLink"
           (click)="
             !currentSideNavItem.routerLink ? currentSideNavItem.click() : null
           "
-          >{{ currentSideNavItem.text }}</a
         >
+          <div [matBadge]="currentSideNavItem.observationsPending">
+            {{ currentSideNavItem.text }}
+          </div>
+        </a>
+        <mat-divider *ngIf="!last"></mat-divider>
       }
     </mat-nav-list>
   </mat-sidenav>

front-end/src/app/app.component.scss

@@ -12,3 +12,8 @@ main {
 .toolbar-spacer {
   flex: 1 1 auto;
 }
+
+.logo-container {
+  height: calc(100% - 8px);
+  margin-right: 8px;
+}

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

@@ -14,6 +14,8 @@ import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
 import { Location } from '@angular/common';
 import { AuthService } from './services/auth.service';
 import { Platform } from '@angular/cdk/platform';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatDividerModule } from '@angular/material/divider';
 
 @Component({
   selector: 'app-root',
@@ -27,6 +29,8 @@ import { Platform } from '@angular/cdk/platform';
     MatButtonModule,
     MatSidenavModule,
     MatListModule,
+    MatBadgeModule,
+    MatDividerModule,
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
@@ -43,34 +47,40 @@ export class AppComponent {
 
   @ViewChild('sidenav') private sidenav!: MatSidenav;
 
+  observationsPending = '2';
+
   sideNavItems = [
     {
       id: 1,
       text: 'Se connecter',
       routerLink: 'se-connecter',
       authenficated: false,
       click: () => null,
+      observationsPending: null,
     },
     {
       id: 2,
       text: 'Mon compte',
       routerLink: 'mon-compte',
       authenficated: true,
       click: () => null,
+      observationsPending: null,
     },
     {
       id: 3,
       text: 'Mes observations',
       routerLink: 'mes-observations',
       authenficated: true,
       click: () => null,
+      observationsPending: this.observationsPending,
     },
     {
       id: 4,
       text: 'Mes données hors ligne',
       routerLink: 'mes-donnees-hors-ligne',
       authenficated: true,
       click: () => null,
+      observationsPending: null,
     },
     {
       id: 5,
@@ -81,6 +91,7 @@ export class AppComponent {
         this.authService.logout();
         this.sidenav.close();
       },
+      observationsPending: null,
     },
   ];
 

front-end/src/app/app.config.ts

@@ -1,17 +1,17 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
 import { provideMomentDateAdapter } from '@angular/material-moment-adapter';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
+    provideRouter(routes, withComponentInputBinding()),
     provideClientHydration(),
     provideAnimationsAsync('animations'),
     { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
@@ -26,6 +26,6 @@ export const appConfig: ApplicationConfig = {
         monthYearA11yLabel: 'MMMM YYYY',
       },
     }),
-    provideHttpClient(),
+    provideHttpClient(withFetch()),
   ],
 };

front-end/src/app/app.routes.ts

@@ -1,16 +1,16 @@
 import { Routes } from '@angular/router';
-import { HomeComponent } from './home/home.component';
-import { NewObservationComponent } from './new-observation/new-observation.component';
-import { SynthesisInterfaceComponent } from './synthesis-interface/synthesis-interface.component';
-import { MyOfflineDataComponent } from './my-offline-data/my-offline-data.component';
-import { MyObservationsComponent } from './my-observations/my-observations.component';
-import { MyAccountComponent } from './my-account/my-account.component';
-import { LoginComponent } from './login/login.component';
-import { CreateAccountComponent } from './create-account/create-account.component';
-import { ForgetPasswordComponent } from './forget-password/forget-password.component';
-import { ChangePasswordComponent } from './change-password/change-password.component';
+import { HomeComponent } from './pages/home/home.component';
+import { NewObservationComponent } from './pages/new-observation/new-observation.component';
+import { SynthesisInterfaceComponent } from './pages/synthesis-interface/synthesis-interface.component';
+import { MyOfflineDataComponent } from './pages/my-offline-data/my-offline-data.component';
+import { MyObservationsComponent } from './pages/my-observations/my-observations.component';
+import { MyAccountComponent } from './pages/my-account/my-account.component';
+import { LoginComponent } from './pages/login/login.component';
+import { CreateAccountComponent } from './pages/create-account/create-account.component';
+import { ForgetPasswordComponent } from './pages/forget-password/forget-password.component';
+import { ChangePasswordComponent } from './pages/change-password/change-password.component';
 import { authGuard } from './guards/auth.guard';
-import { ObservationDetailComponent } from './observation-detail/observation-detail.component';
+import { ObservationDetailComponent } from './pages/observation-detail/observation-detail.component';
 
 export const routes: Routes = [
   {
@@ -43,7 +43,6 @@ export const routes: Routes = [
       backButton: true,
       accountButton: false,
     },
-    canActivate: [authGuard],
   },
   {
     path: 'interface-de-synthese',
@@ -92,6 +91,7 @@ export const routes: Routes = [
       backButton: true,
       accountButton: false,
     },
+    canActivate: [authGuard],
   },
   {
     path: 'mon-compte',