Mise à jours et ajout de fonctionnalités

src/app/components/calculator/calculator.component.html

@@ -1,3 +1,110 @@
+<div class="calculator-page content">
+    <mat-card class="calculator">
+        <mat-card-header class="bg-warn rounded-top py-3 px-4">
+            <mat-card-title>Calcul de taille de voile</mat-card-title>
+            <mat-card-subtitle>DT48 - 13 mars 2020</mat-card-subtitle>
+            <span class="flex-spacer"></span>
+            <button mat-icon-button [matMenuTriggerFor]="menuCalculator" aria-label="Menu Calculator">
+                <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #menuCalculator="matMenu">
+                <button mat-menu-item>
+                    <mat-icon>search</mat-icon>
+                    <span>Recherche avancée</span>
+                </button>
+                <button mat-menu-item>
+                    <mat-icon>person_search</mat-icon>
+                    <span>Recherche par participant</span>
+                </button>
+                <button mat-menu-item>
+                    <mat-icon>display_settings</mat-icon>
+                    <span>Paramètre d'affichage</span>
+                </button>
+                <button mat-menu-item disabled>
+                    <mat-icon>upload_file</mat-icon>
+                    <span>Import CSV</span>
+                </button>
+            </mat-menu>
+        </mat-card-header>
+        <mat-card-content class="my-4 mx-2">
+            <form #searchFormData="ngForm" class="inputs-form">
+                <mat-form-field class="bg-crystal me-3">
+                    <mat-label>Nombre de sauts</mat-label>
+                    <input matInput [(ngModel)]="inputs.jumps" (change)="refreshActive()" type="number" min="0" name="jumps">
+                </mat-form-field>
+                <mat-form-field class="bg-crystal me-3">
+                    <mat-label>Poids nu</mat-label>
+                    <input matInput [(ngModel)]="inputs.weight" (change)="refreshActive()" type="number" min="60" max="110" name="weight">
+                </mat-form-field>
+                <mat-form-field class="bg-crystal me-3">
+                    <mat-label>Poids équipement</mat-label>
+                    <input matInput [(ngModel)]="inputs.gear" type="number" min="0" name="gear">
+                </mat-form-field>
+                <mat-form-field class="bg-crystal me-3">
+                    <mat-label>Taille actuelle</mat-label>
+                    <input matInput [(ngModel)]="inputs.current" type="number" min="0" name="current" id="current" placeholder="Taille actuelle" >
+                </mat-form-field>
+            </form>
+            <table mat-table [dataSource]="canopy_size_table" matSort class="table table-striped table-dark table-hover mat-elevation-z2">
+                <!-- Numero Column -->
+                <ng-container matColumnDef="weight">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header class="{{tableHeader[0].active}}"> {{tableHeader[0].name}} </th>
+                    <th mat-cell *matCellDef="let element;" class="text-right pl-3 pr-3">{{element.weight}}</th>
+                </ng-container>
+                <!-- range_ Column -->
+                <ng-container matColumnDef="range_1">
+                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[1].active}}"> {{tableHeader[1].name}} </th>
+                    <td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[0].active}}">{{element.ranges[0].value}}</td>
+                </ng-container>
+                <!-- range_ Column -->
+                <ng-container matColumnDef="range_2">
+                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[2].active}}"> {{tableHeader[2].name}} </th>
+                    <td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[1].active}}">{{element.ranges[1].value}}</td>
+                </ng-container>
+                <!-- range_ Column -->
+                <ng-container matColumnDef="range_3">
+                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[3].active}}"> {{tableHeader[3].name}} </th>
+                    <td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[2].active}}">{{element.ranges[2].value}}</td>
+                </ng-container>
+                <!-- range_ Column -->
+                <ng-container matColumnDef="range_4">
+                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[4].active}}"> {{tableHeader[4].name}} </th>
+                    <td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[3].active}}">{{element.ranges[3].value}}</td>
+                </ng-container>
+                <!-- range_ Column -->
+                <ng-container matColumnDef="range_5">
+                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[5].active}}"> {{tableHeader[5].name}} </th>
+                    <td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[4].active}}">{{element.ranges[4].value}}</td>
+                </ng-container>
+                <!-- range_ Column -->
+                <ng-container matColumnDef="range_6">
+                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[6].active}}"> {{tableHeader[6].name}} </th>
+                    <td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[5].active}}">{{element.ranges[5].value}}</td>
+                </ng-container>
+                <!-- range_ Column -->
+                <ng-container matColumnDef="range_7">
+                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[7].active}}"> {{tableHeader[7].name}} </th>
+                    <td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[6].active}}">{{element.ranges[6].value}}</td>
+                </ng-container>
+                <!-- range_ Column -->
+                <ng-container matColumnDef="range_8">
+                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[8].active}}"> {{tableHeader[8].name}} </th>
+                    <td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[7].active}}">{{element.ranges[7].value}}</td>
+                </ng-container>
+                <!-- range_ Column -->
+                <ng-container matColumnDef="range_9">
+                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[9].active}}"> {{tableHeader[9].name}} </th>
+                    <td mat-cell *matCellDef="let element;" class="pl-3 text-nowrap {{element.ranges[8].active}}">{{element.ranges[8].value}}</td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="warn"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="text-middle warn {{row.active}}" id="weight_{{row.weight}}"></tr>
+            </table>
+            <div class="clearfix">
+                <mat-paginator [pageSize]="50" [pageSizeOptions]="[5, 10, 15, 25, 50]" showFirstLastButtons class="pull-right mb-1 mt-2"></mat-paginator>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</div>
 <div class="content">
     <h1>{{title}}</h1>
     <div class="col-xs-12">

src/app/components/calculator/calculator.component.scss

@@ -1,26 +1,41 @@
-section {
-    display: table;
-}
-.demo-label {
-    display: table-cell;
-    font-size: 14px;
-    margin-left: 8px;
-    min-width: 120px;
-}
-.demo-button-row {
-    display: table-cell;
-    max-width: 900px;
-}
-.demo-button-row .mat-mdc-button-base {
-    margin: 8px 8px 8px 0;
-}
-.demo-flex-container {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-.demo-button-container {
-    display: flex;
-    justify-content: center;
-    width: 120px;
+.calculator-page {
+    section {
+        display: table;
+    }
+    .demo-label {
+        display: table-cell;
+        font-size: 14px;
+        margin-left: 8px;
+        min-width: 120px;
+    }
+    .demo-button-row {
+        display: table-cell;
+        max-width: 900px;
+    }
+    .demo-button-row .mat-mdc-button-base {
+        margin: 8px 8px 8px 0;
+    }
+    .demo-flex-container {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+    .demo-button-container {
+        display: flex;
+        justify-content: center;
+        width: 120px;
+    }
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        appearance: none;
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    
+    /* Firefox */
+    input[type=number] {
+        appearance: textfield;
+        -moz-appearance: textfield;
+    }
 }

src/app/components/calculator/calculator.component.ts

@@ -1,28 +1,111 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+
+import { CalcResult, InputParams, Range, WeightSize, weightSizes } from 'src/app/core/models';
 
 @Component({
     standalone: true,
     imports: [
-        MatButtonModule, MatDividerModule, MatIconModule
+        FormsModule,
+        MatButtonModule, MatCardModule, MatDividerModule,
+        MatFormFieldModule, MatInputModule, MatIconModule, MatMenuModule,
+        MatPaginatorModule, MatSortModule, MatTableModule
     ],
     selector: 'huapp-calculator',
-    templateUrl: './calculator.component.html',
-    styleUrls: ['./calculator.component.scss']
+    styleUrls: ['./calculator.component.scss'],
+    templateUrl: './calculator.component.html'
 })
 export class CalculatorComponent implements OnInit, OnDestroy {
-    title = 'Taille de voile - DT48';
+    title = 'Calcul de taille de voile';
+    subtitle = 'DT48 - 13 mars 2020';
+    displayedColumns: string[] = [
+        "weight",
+        "range_1", "range_2", "range_3",
+        "range_4", "range_5", "range_6",
+        "range_7", "range_8", "range_9"
+    ];
+    tableHeader: {name: string, active: string}[] = [
+        {name: "Poids nu", active: ''},
+        {name: "0 à 99", active: ''},
+        {name: "100 à 249", active: ''},
+        {name: "250 à 399", active: ''},
+        {name: "400 à 599", active: ''},
+        {name: "600 à 799", active: ''},
+        {name: "800 à 999", active: ''},
+        {name: "1000 à 1399", active: ''},
+        {name: "1400 à 1799", active: ''},
+        {name: "1800 à 2000", active: ''},
+    ];;
 
+    @Input() canopy_size_table!: MatTableDataSource<WeightSize>;
+    @Input() inputs: InputParams = {
+        jumps: 0,
+        weight: 60,
+        gear: 10,
+        current: 175
+    } as InputParams;
+
+    @ViewChild(MatSort) sort!: MatSort;
+    @ViewChild(MatPaginator) paginator!: MatPaginator;
+    
     constructor() { }
 
     ngOnInit() {
-        //
+        return this.loadData();
     }
 
     ngOnDestroy() {
         //this._scavenger.unsubscribe();
     }
 
+    loadData():void {
+        this.refreshActive();
+        this.canopy_size_table = new MatTableDataSource<WeightSize>(weightSizes);
+    }
+
+    refreshActive():void {
+        weightSizes.forEach(element => {
+            element.active = '';
+            element.ranges.forEach(range => {
+                range.active = '';
+            });
+        });
+        this.tableHeader.forEach(element => {
+            element.active = '';
+        });
+        if (this.inputs.weight >= 60 && this.inputs.weight <= 110) {
+            weightSizes[(this.inputs.weight - 60)].active = 'active';
+        }
+        if (this.inputs.jumps >= 0) {
+            var num = this.getRangeNum();
+            this.tableHeader[num].active = 'active';
+            weightSizes.forEach(element => {
+                element.ranges[(num-1)].active = 'active';
+            });
+        }
+    }
+    
+    private getRangeNum(): number {
+        var data: Range[] = weightSizes[0].ranges;
+        var num: number = 1;
+        data.some((range: Range) => {
+            if (range.start <= this.inputs.jumps && range.end >= this.inputs.jumps) {
+                num = range.num;
+                return true;
+            }
+            return false;
+        });
+        return num;
+    }
+
 }

src/app/components/home/dashboard-components/aeronefs/aeronefs.component.ts

@@ -5,7 +5,7 @@ import { ChartistModule, Configuration } from 'ng-chartist';
 import { Observable, Subscription } from 'rxjs';
 
 import { BackendService, AeronefsService, UserService } from 'src/app/core/services';
-import { Aeronef, AeronefAggregate } from 'src/app/core/models';
+import { Aeronef, AeronefByImat } from 'src/app/core/models';
 
 @Component({
     standalone: true,
@@ -15,7 +15,7 @@ import { Aeronef, AeronefAggregate } from 'src/app/core/models';
 })
 export class AeronefsComponent implements OnInit {
     private _aeronefs: Subscription = new Subscription();
-    aggregate!: Array<AeronefAggregate>
+    aggregate!: Array<AeronefByImat>
     aeronefs!: Array<Aeronef>;
     aeronefsCount = 0;
     rows: Object[] = [] as Array<Object>;
@@ -103,8 +103,8 @@ export class AeronefsComponent implements OnInit {
     }
 
     loadAeronefs() {
-        const aeronefs$: Observable<Array<AeronefAggregate>> = this.aeronefsService.getAll();
-        this._aeronefs = aeronefs$.subscribe((aggregate: Array<AeronefAggregate>) => {
+        const aeronefs$: Observable<Array<AeronefByImat>> = this.aeronefsService.getAllByImat();
+        this._aeronefs = aeronefs$.subscribe((aggregate: Array<AeronefByImat>) => {
             this.aggregate = aggregate;
             this.aeronefsCount = aggregate.length;
             var labels: string[] = [];

src/app/components/home/dashboard-components/canopy-models/canopy-models.component.ts

@@ -7,7 +7,7 @@ import { Observable, Observer, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { BackendService, CanopiesService } from 'src/app/core/services';
-import { Canopy, CanopyAggregate, ReduceRow } from 'src/app/core/models';
+import { Canopy, CanopyBySize, ReduceRow } from 'src/app/core/models';
 
 @Component({
     standalone: true,
@@ -17,7 +17,7 @@ import { Canopy, CanopyAggregate, ReduceRow } from 'src/app/core/models';
 })
 export class CanopyModelsComponent implements OnInit {
     private _canopies: Subscription = new Subscription();
-    aggregate!: Array<CanopyAggregate>
+    aggregate!: Array<CanopyBySize>
     canopies!: Array<Canopy>;
     canopiesCount = 0;
     rows: Object[] = [] as Array<Object>;
@@ -101,8 +101,8 @@ export class CanopyModelsComponent implements OnInit {
     }
 
     loadCanopies() {
-        const canopies$: Observable<Array<CanopyAggregate>> = this.canopiesService.getAll();
-        this._canopies = canopies$.subscribe((aggregate: Array<CanopyAggregate>) => {
+        const canopies$: Observable<Array<CanopyBySize>> = this.canopiesService.getAllBySize();
+        this._canopies = canopies$.subscribe((aggregate: Array<CanopyBySize>) => {
             this.aggregate = aggregate;
             //this.canopies = canopies;
             this.canopiesCount = aggregate.length;

src/app/components/home/dashboard-components/drop-zones/drop-zones.component.ts

@@ -6,7 +6,7 @@ import { ChartistModule, Configuration } from 'ng-chartist';
 import { Observable, Observer, Subscription } from 'rxjs';
 
 import { BackendService, DropZonesService } from 'src/app/core/services';
-import { DropZone, DropZoneAggregate, ReduceRow} from 'src/app/core/models';
+import { DropZone, DropZoneByOaci, ReduceRow} from 'src/app/core/models';
 
 @Component({
     standalone: true,
@@ -16,7 +16,7 @@ import { DropZone, DropZoneAggregate, ReduceRow} from 'src/app/core/models';
 })
 export class DropZonesComponent implements OnInit {
     private _dropzones: Subscription = new Subscription();
-    aggregate!: Array<DropZoneAggregate>
+    aggregate!: Array<DropZoneByOaci>
     dropzones!: Array<DropZone>;
     dropzonesCount = 0;
     seriesName: string[] = [];//= ["Arcachon", "Béni-Mellal", "La Réole", "Royan", "Pamiers", "Soulac", "Sables d'Olonne", "Rochefort"];
@@ -155,8 +155,8 @@ export class DropZonesComponent implements OnInit {
     }
 
     loadDropZones() {
-        const dropzones$: Observable<Array<DropZoneAggregate>> = this.dropzonesService.getAll();
-        this._dropzones = dropzones$.subscribe((aggregate: Array<DropZoneAggregate>) => {
+        const dropzones$: Observable<Array<DropZoneByOaci>> = this.dropzonesService.getAllByOaci();
+        this._dropzones = dropzones$.subscribe((aggregate: Array<DropZoneByOaci>) => {
             this.aggregate = aggregate;
             //this.dropzones = dropzones;
             this.dropzonesCount = aggregate.length;

src/app/components/home/dashboard-components/index.ts

@@ -1,7 +1,7 @@
-//export * from './jumps-by-month/jumps-by-month.component';
-export * from './drop-zones/drop-zones.component';
-//export * from './drop-zones-bar/drop-zones-bar.component';
 export * from './aeronefs/aeronefs.component';
 //export * from './aeronefs-bar/aeronefs-bar.component';
+export * from './canopy-models/canopy-models.component';
 //export * from './canopy-sizes/canopy-sizes.component';
-export * from './canopy-models/canopy-models.component';
+export * from './drop-zones/drop-zones.component';
+//export * from './drop-zones-bar/drop-zones-bar.component';
+//export * from './jumps-by-month/jumps-by-month.component';

src/app/components/home/home.component.ts

@@ -5,7 +5,7 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Observable, Observer, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 
-import { User, Errors, Aeronef, AeronefAggregate, AeronefList, Canopy, CanopyAggregate, DropZone, DropZoneAggregate } from 'src/app/core/models';
+import { User, Errors, Aeronef, AeronefByImat, AeronefList, Canopy, CanopyBySize, DropZone, DropZoneByOaci } from 'src/app/core/models';
 import { AeronefsService, CanopiesService, DropZonesService, UserService } from 'src/app/core/services';
 import { ShowAuthedDirective } from 'src/app/components/shared/show-authed.directive';
 import { AeronefsComponent, DropZonesComponent, CanopyModelsComponent } from './dashboard-components';
@@ -32,13 +32,13 @@ export class HomeComponent implements OnInit, OnDestroy {
     errors!: Errors;
     isAuthenticated = false;
     canModify = false;
-    aeronefAggregate!: Array<AeronefAggregate>
+    aeronefAggregate!: Array<AeronefByImat>
     aeronefs!: Array<Aeronef>;
     aeronefsCount = 0;
-    canopyAggregate!: Array<CanopyAggregate>
+    canopyAggregate!: Array<CanopyBySize>
     canopies!: Array<Canopy>;
     canopiesCount = 0;
-    dropzoneAggregate!: Array<DropZoneAggregate>
+    dropzoneAggregate!: Array<DropZoneByOaci>
     dropzones!: Array<DropZone>;
     dropzonesCount = 0;
 
@@ -75,8 +75,8 @@ export class HomeComponent implements OnInit, OnDestroy {
     }
 
     loadAeronefs() {
-        const aeronefs$: Observable<Array<AeronefAggregate>> = this.aeronefsService.getAll();
-        this._aeronefs = aeronefs$.subscribe((aggregate: Array<AeronefAggregate>) => {
+        const aeronefs$: Observable<Array<AeronefByImat>> = this.aeronefsService.getAllByImat();
+        this._aeronefs = aeronefs$.subscribe((aggregate: Array<AeronefByImat>) => {
             this.aeronefAggregate = aggregate;
             this.aeronefsCount = aggregate.length;
             console.log(this.aeronefs);
@@ -84,8 +84,8 @@ export class HomeComponent implements OnInit, OnDestroy {
         });
     }
     loadCanopies() {
-        const canopies$: Observable<Array<CanopyAggregate>> = this.canopiesService.getAll();
-        this._canopies = canopies$.subscribe((aggregate: Array<CanopyAggregate>) => {
+        const canopies$: Observable<Array<CanopyBySize>> = this.canopiesService.getAllBySize();
+        this._canopies = canopies$.subscribe((aggregate: Array<CanopyBySize>) => {
             this.canopyAggregate = aggregate;
             this.canopiesCount = aggregate.length;
             // console.log(this.canopies);
@@ -93,8 +93,8 @@ export class HomeComponent implements OnInit, OnDestroy {
         });
     }
     loadDropzones() {
-        const dropzones$: Observable<Array<DropZoneAggregate>> = this.dropzonesService.getAll();
-        this._dropzones = dropzones$.subscribe((aggregate: Array<DropZoneAggregate>) => {
+        const dropzones$: Observable<Array<DropZoneByOaci>> = this.dropzonesService.getAllByOaci();
+        this._dropzones = dropzones$.subscribe((aggregate: Array<DropZoneByOaci>) => {
             this.dropzoneAggregate = aggregate;
             this.dropzonesCount = aggregate.length;
             // console.log(this.dropzones);

src/app/components/shared/index.ts

@@ -2,6 +2,8 @@ export * from './accordion';
 export * from './confirmed.validator';
 export * from './dialogs';
 export * from './helpers-jump';
+export * from './layout/header.component';
+export * from './layout/footer.component';
 export * from './layout/full.component';
 export * from './list-errors/list-errors.component';
 export * from './menu-items';

src/app/components/shared/layout/full.component.html

@@ -1,48 +1,4 @@
-
-<mat-toolbar color="primary" class="topbar">
-    <div class="navbar-header">
-        <a class="navbar-brand" href="index.html">
-            <span>
-                <img src="assets/images/logo-light-icon.svg" alt="homepage" class="light-logo">
-            </span>
-            <span>
-                <img src="assets/images/logo-light-text.svg" alt="homepage" class="light-logo">
-            </span>
-        </a>
-    </div>
-    <button mat-icon-button (click)="snav.toggle()" value="sidebarclosed">
-        <mat-icon fontIcon="menu"></mat-icon>
-    </button>
-    <span class="flex-spacer"></span>
-    <span *appShowAuthed="true" class="fw-light me-1">@{{ currentUser.username }}</span>
-    <div *appShowAuthed="true" class="position-relative">
-        <button [matMenuTriggerFor]="profile" mat-icon-button>
-            <img [src]="currentUser.image" alt="user" class="profile-pic">
-        </button>
-        <mat-menu #profile="matMenu">
-            <button mat-menu-item [routerLink]="['/profile', currentUser.username]" routerLinkActive="active">
-                <mat-icon fontIcon="account_circle" color="primary"></mat-icon> Mon compte
-            </button>
-            <button mat-menu-item routerLink="/settings" routerLinkActive="active">
-                <mat-icon fontIcon="settings" color="primary"></mat-icon> Paramètres
-            </button>
-            <button mat-menu-item (click)="goToGitHub()">
-                <mat-icon fontIcon="code" color="primary"></mat-icon> GitHub
-            </button>
-            <button mat-menu-item>
-                <mat-icon fontIcon="notifications_off" color="primary"></mat-icon> Désactiver les notifications
-            </button>
-            <hr class="my-0" />
-            <button mat-menu-item (click)="logout()">
-                <mat-icon fontIcon="logout" color="warn"></mat-icon> Se déconnecter
-            </button>
-        </mat-menu>
-    </div>
-    <span *appShowAuthed="false">
-        <button mat-button routerLink="/login" routerLinkActive="active">Se connecter</button>
-        <button mat-button routerLink="/register" routerLinkActive="active">Créer un compte</button>
-    </span>
-</mat-toolbar>
+<huapp-layout-header></huapp-layout-header>
 <mat-sidenav-container class="app-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 0 : 0">
     <mat-sidenav #snav id="snav" class="dark-sidebar pl-xs" [mode]="mobileQuery.matches ? 'side' : 'over'" fixedTopGap="0" [opened]="mobileQuery.matches" [disableClose]="mobileQuery.matches"  >
         <div *appShowAuthed="true">
@@ -123,14 +79,7 @@
                 </div>
             </mat-nav-list>
         </div>
-        <footer class="footer">
-            <div class="container-fluid text-end">
-                <a class="me-1" [href]="siteLink" target="_blank">{{ author }}</a>
-                <span class="copyright">
-                    &copy; {{ today | date: 'yyyy' }}
-                </span>
-            </div>
-        </footer>
+        <huapp-layout-footer></huapp-layout-footer>
     </mat-sidenav>
     <mat-sidenav-content class="page-wrapper">
         <div class="page-content">

src/app/components/shared/layout/full.component.ts

@@ -15,6 +15,7 @@ import { Observable, Subscription } from 'rxjs';
 import { User } from 'src/app/core/models';
 import { UserService } from 'src/app/core/services';
 import { MenuItems, ShowAuthedDirective, SpinnerComponent, AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from 'src/app/components/shared';
+import { HeaderComponent, FooterComponent } from 'src/app/components/shared/layout';
 
 
 /** @title Responsive sidenav */
@@ -24,7 +25,7 @@ import { MenuItems, ShowAuthedDirective, SpinnerComponent, AccordionAnchorDirect
     imports: [
         CommonModule, RouterModule, RouterOutlet,
         MatBadgeModule, MatButtonModule, MatIconModule, MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule,
-        ShowAuthedDirective, SpinnerComponent,
+        ShowAuthedDirective, SpinnerComponent, HeaderComponent, FooterComponent,
         AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective
     ],
     providers: [ MenuItems ],