refactor(services): migrate user and applications services to auth domain

Update _apiDomain in UserService (/cms → /auth) and ApplicationsService
(/skydive → /auth) following the backend route reorganization.

fix(calculator): use nullish coalescing for currentUser.poids to preserve
default weight when no skydiver profile exists

docs: update README

.claude/settings.json

@@ -0,0 +1,17 @@
+{
+    "permissions": {
+        "allow": [
+            "Bash(grep \" FAILED$\")",
+            "Bash(grep -A2 \" FAILED$\")",
+            "Bash(grep -A3 \" FAILED$\")",
+            "Bash(grep -v \"Executed\\\\|^--$\")",
+            "Bash(grep -E \"TOTAL:|FAILED$\")",
+            "Bash(node -e \"const c = require\\('chart.js'\\); console.log\\(Object.keys\\(c\\).filter\\(k => k.includes\\('Doughnut'\\) || k.includes\\('Controller'\\)\\)\\)\")",
+            "Bash(npm list *)",
+            "Bash(ng update *)",
+            "Bash(npm run *)",
+            "Bash(nvm ls *)",
+            "Bash(grep -E \"\\\\.\\(js|ts\\)$\")"
+        ]
+    }
+}

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,43 @@
+{
+    "root": true,
+    "ignorePatterns": ["projects/**/*"],
+    "overrides": [
+        {
+            "files": ["*.ts"],
+            "extends": [
+                "eslint:recommended",
+                "plugin:@typescript-eslint/recommended",
+                "plugin:@angular-eslint/recommended",
+                "plugin:@angular-eslint/template/process-inline-templates",
+                "prettier"
+            ],
+            "rules": {
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+                ],
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": "app",
+                        "style": "camelCase"
+                    }
+                ],
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "type": "element",
+                        "prefix": "app",
+                        "style": "kebab-case"
+                    }
+                ]
+            }
+        },
+        {
+            "files": ["*.html"],
+            "extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
+            "rules": {}
+        }
+    ]
+}

.gitignore

@@ -53,3 +53,12 @@ sonar.properties
 **/*.copy.ts
 **/*.copy.scss
 **/*.copy.html
+
+# Next.js (legacy, removed)
+.next/
+next-env.d.ts
+next.config.js
+
+# Environment files (Angular uses src/environments/*.ts)
+.env
+.env.*

.husky/pre-commit

@@ -0,0 +1,5 @@
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+nvm use 20.19.6
+npm test -- --watch=false
+npx lint-staged

.nvmrc

@@ -0,0 +1 @@
+20.19.6

.prettierignore

@@ -0,0 +1,6 @@
+# Ignore artifacts:
+build
+coverage
+
+# auto generated files
+src/generated

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

CLAUDE.md

@@ -0,0 +1,72 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+- `npm start` — dev server (production config) on port 4200
+- `npm run dev` — dev server with `APP_ENV=development` on port 4300, uses `environment.development.ts`
+- `npm run local` — dev server with `APP_ENV=local` on port 4400, uses `environment.local.ts`
+- `npm run serve` — alias for local config on port 4201
+- `npm run build` — production build to `dist/adastra_angular/`
+- `npm run watch` — incremental build in development configuration
+- `npm run lint` — angular-eslint over `src/**/*.ts` and `src/**/*.html`
+- `npm test` — Karma + Jasmine (single spec: `ng test --include src/path/to/file.spec.ts`)
+
+Node engines: `^18.19.1 || ^20.11.1`. Angular 18, TypeScript 5.5, strict mode with `strictTemplates`.
+
+## Environments
+
+`src/environments/environment.ts` is the default (production). `environment.development.ts` and `environment.local.ts` are swapped in via `fileReplacements` in `angular.json` for their respective configurations. `environment.example.ts` documents the expected shape (`apiBaseUrl`, `apiKey`, `useApiKey`, `refreshInterval`, `googleMapApiKey`). Never commit real keys to the development/local files — the production `environment.ts` currently has real keys checked in; be mindful.
+
+## Architecture
+
+Standalone Angular 18 app (no NgModules) wired up in [src/app/app.config.ts](src/app/app.config.ts). It provides the router with `withViewTransitions()`, three HTTP interceptors, charts, French locale (`fr-FR`), and an `APP_INITIALIZER` that eagerly fetches the current user when a JWT is present in localStorage.
+
+### Routing split
+
+Routes are composed in [src/app/app.routes.ts](src/app/app.routes.ts) from two arrays:
+- [src/app/routes/auth.routes.ts](src/app/routes/auth.routes.ts) — `authGuard`-protected routes. Skydive admin sections (`aeronefs`, `canopies`, `dashboard`, `dropzones`, `jumps`) additionally require `adminGuard`.
+- [src/app/routes/noauth.routes.ts](src/app/routes/noauth.routes.ts) — public pages and auth-entry routes (`login`, `register`) gated by `noauthGuard` (blocks entry when already authenticated).
+
+Resolvers under [src/app/core/resolvers/](src/app/core/resolvers/) pre-fetch data for each route — new route components should generally follow this pattern rather than fetching in `ngOnInit`.
+
+### HTTP pipeline
+
+Three interceptors chained in order ([src/app/core/interceptors/](src/app/core/interceptors/)):
+1. `apiInterceptor` — prepends `environment.apiBaseUrl` to every request URL. **Consequence:** services call relative paths like `/cms/user`, never absolute URLs.
+2. `tokenInterceptor` — attaches `Authorization: Token <jwt>` when a token exists.
+3. `errorInterceptor` — unwraps `err.error` and rethrows.
+
+`ApiService` ([api.service.ts](src/app/core/services/api.service.ts)) is a thin `HttpClient` wrapper; most feature services call it with a versioned prefix (e.g., `_apiDomain = '/skydive'` or `/cms`). The API version is per-service, not global.
+
+### Auth flow
+
+`JwtService` stores the token in `localStorage['jwtToken']`. `UserService` exposes `currentUser` (BehaviorSubject) and `isAuthenticated` (ReplaySubject) observables consumed by guards and the layout. The `APP_INITIALIZER` in `app.config.ts` calls `userService.getCurrentUser()` if a token exists, so guards can rely on `isAuthenticated` being populated on first navigation. Admin role check is `currentUser.role === 'Admin'`.
+
+### Layout
+
+[AppComponent](src/app/app.component.ts) renders only `FullComponent` ([src/app/components/shared/layout/full.component.ts](src/app/components/shared/layout/full.component.ts)), which owns the Material sidenav + toolbar shell and swaps menu items between `MENUITEMS` and `MENUITEMSADMIN` defined in [src/app/components/shared/menu-items.ts](src/app/components/shared/menu-items.ts) based on role. Route changes render inside its `<router-outlet>`.
+
+### Feature areas
+
+The app spans four mostly-independent feature domains, mirroring the backend's route grouping:
+- **E-commerce** — `products`, `product/:slug`, `products/:category` (public + auth variants). Categories are baked into menu items, not dynamic. Backend counterpart: `/api/ecommerce/*`.
+- **CMS** — `pages`, `page/:slug`, `home`, profiles, articles. Backend counterpart: `/api/cms/*`.
+- **Skydive** — `skydive/*` routes, services in [src/app/core/services/skydive/](src/app/core/services/skydive/), QCM exam data in `src/app/components/qcm/*.json` and `src/qcm-bpa.json`. Backend counterpart: `/api/skydive/*`.
+- **Hero Wars** — analytics for a game guild, services in [src/app/core/services/herowars/](src/app/core/services/herowars/), weekly data snapshots in [src/files-data/](src/files-data/) (`Week_XX` folders and `hw-*.json` files are static data shipped as assets). Backend counterpart: `/api/herowars/*`.
+
+### Path aliases
+
+Configured in [tsconfig.json](tsconfig.json) and used everywhere — prefer them over relative paths:
+`@components`, `@services`, `@models`, `@guards`, `@interceptors`, `@resolvers`, `@viewmodels`, `@interfaces`, `@constants`, `@core/*`, `@environments/*`, `@data/*` (→ `src/files-data/*`), `@assets/*`, `@styles/*`.
+
+Each alias points at an `index.ts` barrel — when adding a new component/service/model, also export it from the appropriate barrel or it won't be importable via the alias.
+
+### Styling
+
+SCSS with `includePaths: ["src/styles"]` so imports like `@use 'variables'` resolve. Global Chartist styles are registered in `angular.json` build options. Material 18 with French date locale and `DD/MM/YYYY` format configured in `AppComponent`'s providers.
+
+## Related service
+
+The backend API lives in a sibling repo at `/Users/julien/Sites/adastra_api` (Express + Sequelize, additional working directory). Routes are grouped under `src/routes/api/` into the same four domains as the frontend: `skydive`, `cms`, `ecommerce`, `herowars`. The `v1`, `v2`, `v3` folders alongside them are legacy backups slated for removal — ignore them. When a task spans both repos (e.g., adding an endpoint + consumer), check there as well.

README.md

@@ -1,42 +1,97 @@
-# AdAstra_App
+# AdAstra App
 
-## Libraries and Frameworks
+Frontend of the AdAstra platform — a multi-domain Angular application covering e-commerce, CMS, skydive club management, and Hero Wars guild analytics.
 
-| Name                                          |                                    |
-| --------------------------------------------- | ---------------------------------- |
-| [TypeScript](https://www.typescriptlang.org/) | v5.5.x                             |
-| [Next.js](https://nextjs.org/)                | v15.x                              |
-| [React](https://react.dev/)                   | v18.x                              |
-| [Conform](https://conform.guide/)             | form validation library            |
-| [Zod](https://zod.dev/)                       | schema validation library          |
-| [unified](https://unifiedjs.com/)             | markdown to html converter         |
-| [OpenAPI TypeScript](https://openapi-ts.dev/) | type generator from OpenAPI schema |
+## Tech stack
 
-## Getting Started
+| Layer     | Choice                                                             |
+| --------- | ------------------------------------------------------------------ |
+| Framework | Angular 21 (standalone components, no NgModules)                   |
+| Language  | TypeScript 5.9 — strict mode + strictTemplates                     |
+| UI        | Angular Material 21, Bootstrap 5                                   |
+| Charts    | Chart.js 4 (ng2-charts), Chartist                                  |
+| HTTP      | Angular HttpClient with three interceptors (base URL, JWT, errors) |
+| Tests     | Karma + Jasmine                                                    |
+| Linting   | angular-eslint + Prettier (enforced via lint-staged)               |
+| Node      | `^20.19.0 \|\| ^22.12.0`                                           |
+
+## Related repository
+
+The backend API lives in [`adastra_api`](../adastra_api) — an Express + Sequelize stack, routes grouped under `/api/ecommerce`, `/api/cms`, `/api/skydive`, `/api/herowars`.
+
+## Getting started
 
 ```bash
-# copy env
-cp .env.example .env.local
-
-# set API_BASE_URL variable in .env.local to your backend api endpoint
-
-# run app
-npm run dev
+npm install
+npm run local    # dev server on :4400, uses environment.local.ts
 ```
 
-## Directory structure
+Copy and configure your local environment:
 
-```plaintext
-.
-├── api/                  # api schema
-├── public/               # static assets
-└── src/
-    ├── app/              # web routes
-    ├── config/           # global configuration and constants
-    ├── generated/        # automatically generated codes
-    ├── modules/
-    │   ├── common/       # common (feature-independent) components
-    │   └── features/     # feature-specific components
-    ├── styles/           # global style sheets
-    └── utils/            # utilities
+```bash
+cp src/environments/environment.example.ts src/environments/environment.local.ts
+# fill in: apiBaseUrl, apiKey, googleMapApiKey, …
 ```
+
+## Commands
+
+| Command         | Description                                           |
+| --------------- | ----------------------------------------------------- |
+| `npm start`     | Dev server on :4200 with production config            |
+| `npm run dev`   | Dev server on :4300 with `environment.development.ts` |
+| `npm run local` | Dev server on :4400 with `environment.local.ts`       |
+| `npm run build` | Production build → `dist/adastra_angular/`            |
+| `npm run watch` | Incremental build in development configuration        |
+| `npm run lint`  | angular-eslint on `**/*.ts` and `**/*.html`           |
+| `npm test`      | Karma + Jasmine unit tests                            |
+
+Run a single spec:
+
+```bash
+ng test --include src/path/to/file.spec.ts
+```
+
+## Architecture
+
+### Bootstrap
+
+`AppComponent` renders a single `FullComponent` shell (Material sidenav + toolbar). Routes are split into two arrays in `app.routes.ts`:
+
+- `auth.routes.ts` — protected by `authGuard`; admin sections additionally require `adminGuard`
+- `noauth.routes.ts` — public pages and auth entry points, blocked by `noauthGuard` when already authenticated
+
+Data is pre-fetched by resolvers under `src/app/core/resolvers/` — new route components should follow this pattern rather than fetching in `ngOnInit`.
+
+### HTTP pipeline
+
+Three interceptors applied in order:
+
+1. **`apiInterceptor`** — prepends `environment.apiBaseUrl` to every request. Services use relative paths (`/cms/user`, `/skydive/jumps`, …), never absolute URLs.
+2. **`tokenInterceptor`** — attaches `Authorization: Token <jwt>` when a token exists in `localStorage['jwtToken']`.
+3. **`errorInterceptor`** — unwraps `err.error` and rethrows.
+
+### Feature domains
+
+| Domain     | Routes                                                 | Backend prefix   |
+| ---------- | ------------------------------------------------------ | ---------------- |
+| E-commerce | `products`, `product/:slug`, `products/:category`      | `/api/ecommerce` |
+| CMS        | `pages`, `page/:slug`, `home`, profiles, articles      | `/api/cms`       |
+| Skydive    | `skydive/*` — aeronefs, canopies, dropzones, jumps     | `/api/skydive`   |
+| Hero Wars  | Guild analytics, weekly snapshots in `src/files-data/` | `/api/herowars`  |
+
+### Path aliases
+
+Defined in `tsconfig.json`; always prefer them over relative imports:
+
+```
+@components   @services    @models      @guards
+@interceptors @resolvers   @viewmodels  @interfaces
+@constants    @core/*      @environments/*
+@data/*       @assets/*    @styles/*
+```
+
+When adding a new file, export it from the appropriate `index.ts` barrel so the alias resolves correctly.
+
+### Styling
+
+SCSS with `includePaths: ["src/styles"]` — imports like `@use 'variables'` resolve globally. Material date locale is set to `fr-FR` with `DD/MM/YYYY` format.

angular.json

@@ -0,0 +1,184 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "cli": {
+        "packageManager": "npm",
+        "analytics": false,
+        "schematicCollections": ["@angular-eslint/schematics"]
+    },
+    "newProjectRoot": "projects",
+    "projects": {
+        "adastra_angular": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "i18n": {
+                "sourceLocale": "fr"
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:application",
+                    "options": {
+                        "outputPath": {
+                            "base": "dist/adastra_angular"
+                        },
+                        "index": "src/index.html",
+                        "tsConfig": "tsconfig.app.json",
+                        "polyfills": ["@angular/localize/init", "zone.js"],
+                        "inlineStyleLanguage": "scss",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets",
+                            "src/manifest.webmanifest",
+                            {
+                                "glob": "_redirects",
+                                "input": "src",
+                                "output": "/"
+                            }
+                        ],
+                        "styles": ["src/styles/styles.scss"],
+                        "stylePreprocessorOptions": {
+                            "includePaths": ["src/styles"],
+                            "sass": {
+                                "silenceDeprecations": ["import"]
+                            }
+                        },
+                        "scripts": [],
+                        "browser": "src/main.ts"
+                    },
+                    "configurations": {
+                        "production": {
+                            "extractLicenses": true,
+                            "namedChunks": false,
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "3mb",
+                                    "maximumError": "5mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "2kb",
+                                    "maximumError": "4kb"
+                                }
+                            ]
+                        },
+                        "development": {
+                            "extractLicenses": false,
+                            "namedChunks": true,
+                            "optimization": false,
+                            "sourceMap": true,
+                            "budgets": [
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
+                                }
+                            ],
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.development.ts"
+                                }
+                            ]
+                        },
+                        "local": {
+                            "extractLicenses": false,
+                            "namedChunks": true,
+                            "optimization": false,
+                            "sourceMap": true,
+                            "budgets": [
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb"
+                                }
+                            ],
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.local.ts"
+                                }
+                            ]
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "configurations": {
+                        "production": {
+                            "buildTarget": "adastra_angular:build:production"
+                        },
+                        "development": {
+                            "buildTarget": "adastra_angular:build:development"
+                        },
+                        "local": {
+                            "buildTarget": "adastra_angular:build:local"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "buildTarget": "adastra_angular:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "polyfills": ["zone.js", "zone.js/testing"],
+                        "tsConfig": "tsconfig.spec.json",
+                        "inlineStyleLanguage": "scss",
+                        "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
+                        "styles": ["src/styles/styles.scss"],
+                        "scripts": [],
+                        "stylePreprocessorOptions": {
+                            "includePaths": ["src/styles"]
+                        }
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-eslint/builder:lint",
+                    "options": {
+                        "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+                    }
+                }
+            }
+        }
+    },
+    "schematics": {
+        "@schematics/angular:component": {
+            "type": "component"
+        },
+        "@schematics/angular:directive": {
+            "type": "directive"
+        },
+        "@schematics/angular:service": {
+            "type": "service"
+        },
+        "@schematics/angular:guard": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:interceptor": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:module": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:pipe": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:resolver": {
+            "typeSeparator": "."
+        }
+    }
+}

docs/decisions/0001-migration-from-nextjs-to-angular.md

@@ -0,0 +1,47 @@
+# Migrate frontend from Next.js to Angular
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+The project was initially built with Next.js (React). The development team already maintained an existing Angular stack for other projects, creating a knowledge split between two frontend frameworks. Server-side rendering — Next.js's main differentiator — was not required: all data is user-specific and served via authenticated API calls.
+
+## Considered Options
+
+- Keep Next.js/React
+- Migrate to Angular
+- Migrate to Vue or Svelte
+
+## Decision Outcome
+
+Chosen option: "Migrate to Angular", because the team already maintained an Angular stack for other projects, making it the path of least resistance with no additional knowledge split.
+
+### Positive Consequences
+
+- Single frontend framework across projects — reuse of existing expertise, libraries, and patterns.
+- No SSR complexity; the app is a pure SPA, which fits Angular's model naturally.
+
+### Negative Consequences
+
+- Complete rewrite — no incremental migration path exists between React and Angular.
+- Next.js artifacts (`.next/`, `src/modules/`, `src/middleware.ts`, etc.) required a dedicated cleanup pass after the migration.
+
+## Pros and Cons of the Options
+
+### Keep Next.js/React
+
+- Good, because no rewrite cost.
+- Bad, because maintaining two frontend frameworks in parallel increases overhead.
+- Bad, because SSR provides no benefit for this authenticated, user-specific application.
+
+### Migrate to Angular
+
+- Good, because leverages existing team expertise.
+- Good, because consistent toolchain across projects.
+- Bad, because full rewrite required.
+
+### Migrate to Vue or Svelte
+
+- Good, because smaller bundle size.
+- Bad, because no existing team expertise — introduces a third framework.

docs/decisions/0002-standalone-components-no-ngmodules.md

@@ -0,0 +1,42 @@
+# Use Angular standalone components without NgModules
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+Angular historically required all components, directives, and pipes to be declared inside NgModules. Angular 14 introduced standalone components as an opt-in. Angular 17+ made them the recommended default and they are required for the esbuild-based application builder. How should the application be structured?
+
+## Considered Options
+
+- Standalone components (no NgModules)
+- NgModule-based architecture
+
+## Decision Outcome
+
+Chosen option: "Standalone components (no NgModules)", because they are the Angular-recommended default since v17, provide explicit per-component dependency declarations, and are required for the esbuild application builder.
+
+### Positive Consequences
+
+- Each component explicitly declares its own `imports` — dependencies are visible and not hidden in a shared module.
+- Better tree-shaking: unused imports in one component don't affect others.
+- Aligns with Angular's long-term direction.
+
+### Negative Consequences
+
+- Slightly more verbose component decorators — each component lists its own imports rather than inheriting from a module.
+
+## Pros and Cons of the Options
+
+### Standalone components (no NgModules)
+
+- Good, because explicit dependency declarations per component.
+- Good, because required for the esbuild application builder.
+- Good, because Angular-recommended default since v17.
+- Bad, because more verbose decorators.
+
+### NgModule-based architecture
+
+- Good, because familiar pattern for developers coming from Angular < 14.
+- Bad, because deprecated direction; incompatible with the modern application builder.
+- Bad, because shared module patterns hide dependencies.

docs/decisions/0003-dual-ui-library-progressive-migration.md

@@ -0,0 +1,56 @@
+# Coexist Angular Material and Bootstrap during UI library consolidation
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+The application currently uses two UI libraries: Angular Material (interactive components) and Bootstrap 5 (layout, spacing utilities). Bootstrap was the original styling layer; Angular Material was introduced incrementally. Maintaining both increases bundle size, creates styling inconsistencies, and adds cognitive overhead. Which strategy should be adopted?
+
+## Considered Options
+
+- Keep both libraries and consolidate later
+- Consolidate to Angular Material only
+- Consolidate to Bootstrap only
+- Migrate to a different library (PrimeNG, Spartan/shadcn-angular, etc.)
+
+## Decision Outcome
+
+Chosen option: "Keep both libraries and consolidate later", because a big-bang UI rewrite is not justified at this stage and the final target library has not yet been chosen.
+
+### Positive Consequences
+
+- No immediate rewrite required — development velocity is preserved.
+- Each library covers the other's gaps during the transition period.
+
+### Negative Consequences
+
+- Two styling systems in tension, leading to inconsistent UX.
+- Bootstrap's `@import`-based Sass is incompatible with the `@use` module system, requiring a deprecation workaround (see ADR 0012).
+- Larger CSS bundle than a single-library solution.
+
+## Pros and Cons of the Options
+
+### Keep both libraries and consolidate later
+
+- Good, because no rewrite cost now.
+- Bad, because styling inconsistency and larger bundle persist until consolidation.
+
+### Consolidate to Angular Material only
+
+- Good, because single coherent design system.
+- Bad, because Bootstrap layout utilities would need to be replaced.
+
+### Consolidate to Bootstrap only
+
+- Good, because removes Angular Material dependency.
+- Bad, because Angular Material components (dialogs, date pickers, etc.) would need rebuilding.
+
+### Migrate to a different library
+
+- Good, because could address limitations of both current libraries.
+- Bad, because highest rewrite cost; unknown tradeoffs until evaluated.
+
+## Links
+
+- Related to [ADR 0012](0012-scss-bootstrap-import-deprecation.md)

docs/decisions/0004-http-interceptors-pipeline.md

@@ -0,0 +1,46 @@
+# Handle API base URL, auth token, and errors via HTTP interceptors
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+Every API call requires three cross-cutting concerns: prepending the API base URL, attaching the JWT bearer token, and unwrapping error responses into a consistent shape. How should these be applied across all HTTP calls without duplicating logic in each service?
+
+## Considered Options
+
+- Three chained HTTP interceptors
+- Per-service base URL and token handling
+- Single utility wrapper function
+
+## Decision Outcome
+
+Chosen option: "Three chained HTTP interceptors", because they centralise cross-cutting concerns transparently and require no changes to individual services.
+
+### Positive Consequences
+
+- Services use relative paths (e.g. `/skydive/jumps`) — environment-agnostic.
+- Auth header injection is transparent to all services.
+- Uniform error payload shape across the entire application.
+
+### Negative Consequences
+
+- Services must always use relative paths starting with `/`. Passing an absolute URL would cause the base URL to be prepended twice.
+
+## Pros and Cons of the Options
+
+### Three chained HTTP interceptors
+
+- Good, because zero duplication — logic defined once, applied everywhere.
+- Good, because services remain unaware of environment or auth details.
+- Bad, because interceptors apply globally — opting out requires explicit handling.
+
+### Per-service base URL and token handling
+
+- Good, because each service controls its own behaviour explicitly.
+- Bad, because duplicates the same logic across every service.
+
+### Single utility wrapper function
+
+- Good, because more explicit than interceptors.
+- Bad, because all service calls must go through the wrapper — easy to bypass accidentally.

docs/decisions/0005-jwt-authentication-localstorage.md

@@ -0,0 +1,48 @@
+# Store JWT authentication token in localStorage
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+The application requires persistent authentication across browser sessions. Where should the JWT token be stored client-side?
+
+## Decision Drivers
+
+- Application is internal — used by a known, controlled user base; not publicly accessible.
+- Implementation simplicity.
+- Compatibility with Angular functional guards and the APP_INITIALIZER auth bootstrap.
+
+## Considered Options
+
+- Store JWT in localStorage
+- Store JWT in an httpOnly cookie
+
+## Decision Outcome
+
+Chosen option: "Store JWT in localStorage", because the application is internal with a controlled user base, making the XSS risk acceptable, and localStorage avoids the additional CSRF complexity of cookie-based auth.
+
+### Positive Consequences
+
+- Simple implementation — no server-side session management.
+- Token persists across browser restarts without requiring re-login.
+- Works seamlessly with Angular functional guards and `APP_INITIALIZER`.
+
+### Negative Consequences
+
+- Accessible to JavaScript — an XSS attack could exfiltrate the token.
+- If the application ever becomes publicly accessible or handles sensitive data, this decision must be revisited.
+
+## Pros and Cons of the Options
+
+### Store JWT in localStorage
+
+- Good, because simple to implement and operate.
+- Good, because survives browser restarts.
+- Bad, because XSS-vulnerable.
+
+### Store JWT in an httpOnly cookie
+
+- Good, because inaccessible to JavaScript — XSS-safe.
+- Bad, because requires CSRF protection (SameSite cookie policy or CSRF tokens).
+- Bad, because more complex server-side coordination.

docs/decisions/0006-data-loading-via-route-resolvers.md

@@ -0,0 +1,42 @@
+# Pre-fetch route data using Angular route resolvers
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+Route components need data to render. Should that data be fetched before the route activates (resolver) or after the component renders (in-component)?
+
+## Considered Options
+
+- Angular route resolvers
+- In-component fetching (ngOnInit)
+
+## Decision Outcome
+
+Chosen option: "Angular route resolvers", because components receive data immediately via `ActivatedRoute.data`, eliminating the need for per-component loading states on initial render.
+
+### Positive Consequences
+
+- No loading state needed in components for the initial data fetch.
+- Loading indication can be centralised at the router level via router events.
+- Data availability is guaranteed before any component lifecycle hook runs.
+
+### Negative Consequences
+
+- Navigation appears paused while the resolver fetches — there is no partial render before data arrives.
+- Resolver errors must be handled explicitly to avoid navigation hangs on API failure.
+
+## Pros and Cons of the Options
+
+### Angular route resolvers
+
+- Good, because data is available immediately in the component.
+- Good, because loading logic is centralised outside the component.
+- Bad, because navigation is blocked until the resolver completes.
+
+### In-component fetching (ngOnInit)
+
+- Good, because navigation is instant — component renders immediately.
+- Bad, because each component must manage its own loading and error states.
+- Bad, because inconsistent UX across routes if not implemented uniformly.

docs/decisions/0007-build-tool-angular-cli-esbuild.md

@@ -0,0 +1,43 @@
+# Use the esbuild-based Angular application builder
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+Angular 17 introduced a new application builder (`@angular/build:application`) based on esbuild and Vite, replacing the legacy webpack-based `@angular-devkit/build-angular:browser` builder. Which builder should be used for development and production builds?
+
+## Considered Options
+
+- `@angular/build:application` — esbuild-based (Angular 17+)
+- `@angular-devkit/build-angular:browser` — webpack-based (legacy)
+
+## Decision Outcome
+
+Chosen option: "`@angular/build:application`", because it is the Angular-recommended builder since v17, delivers significantly faster builds, and is required for certain schema-level features such as `stylePreprocessorOptions.sass.silenceDeprecations`.
+
+### Positive Consequences
+
+- Build times are 3–5× faster than the webpack builder for development and production.
+- Native ESM output with better code splitting.
+- Aligns with Angular's recommended toolchain for v17+.
+
+### Negative Consequences
+
+- Webpack-specific configuration options (custom plugins, loaders) no longer apply. Not an issue for this project.
+- The `sass` sub-option under `stylePreprocessorOptions` is specific to this builder's schema; the Karma test builder uses a stricter schema and does not support it.
+
+## Pros and Cons of the Options
+
+### `@angular/build:application` (esbuild)
+
+- Good, because significantly faster cold builds and incremental rebuilds.
+- Good, because Angular-recommended default since v17.
+- Good, because required for `sass.silenceDeprecations` support.
+- Bad, because webpack plugin ecosystem is not compatible.
+
+### `@angular-devkit/build-angular:browser` (webpack)
+
+- Good, because supports custom webpack configuration.
+- Bad, because deprecated direction; slower builds.
+- Bad, because does not support the `sass.silenceDeprecations` option.

docs/decisions/0008-testing-karma-jasmine.md

@@ -0,0 +1,51 @@
+# Keep Karma + Jasmine as the test stack
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+Angular's default test setup uses Karma as the test runner (executing tests in a real Chrome browser) and Jasmine as the spec framework. Faster alternatives exist. Should the test stack be replaced?
+
+## Considered Options
+
+- Karma + Jasmine (Angular default)
+- Jest (Node/jsdom, no real browser)
+- Vitest (ESM-native, no real browser)
+
+## Decision Outcome
+
+Chosen option: "Karma + Jasmine", because the test suite (54 specs) is small enough that Karma's startup overhead is not a bottleneck, and migration would require replacing test utilities and adjusting Angular `TestBed` setup with no functional gain at the current scale.
+
+### Positive Consequences
+
+- Zero migration effort — full compatibility with Angular's `TestBed` and `ComponentFixture` APIs.
+- Tests run in a real Chrome browser, catching browser-specific issues that jsdom misses.
+
+### Negative Consequences
+
+- Slower startup than Jest or Vitest due to Chrome launch. Acceptable at the current test suite size.
+
+## Pros and Cons of the Options
+
+### Karma + Jasmine
+
+- Good, because zero migration cost from the Angular default.
+- Good, because tests run in a real browser environment.
+- Bad, because slower startup than headless alternatives.
+
+### Jest
+
+- Good, because fast — runs in Node via jsdom with no browser launch.
+- Bad, because requires `jest-preset-angular`, removal of `zone.js/testing`, and test utility changes.
+- Bad, because jsdom is not a real browser — some browser-specific behaviours are not caught.
+
+### Vitest
+
+- Good, because ESM-native, fastest option.
+- Bad, because Angular `TestBed` integration requires additional configuration.
+- Bad, because jsdom limitation applies here too.
+
+## Links
+
+- Future consideration: if the test suite grows significantly or CI performance becomes a concern, evaluate migration to Jest with `jest-preset-angular`.

docs/decisions/0009-pre-commit-hooks-lint-staged-husky.md

@@ -0,0 +1,60 @@
+# Enforce quality gates at commit time with Husky and lint-staged
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+Without automated enforcement, code quality rules (linting, formatting, tests) are discovered late — in CI, or not at all. Should quality checks be enforced at commit time?
+
+## Decision Drivers
+
+- Issues should be caught before they enter the repository, not after.
+- Formatting should be applied automatically so developers don't need to run it manually.
+- The correct Node version must be active during hook execution regardless of the shell environment.
+
+## Considered Options
+
+- Husky + lint-staged pre-commit hook
+- CI-only enforcement (no local hooks)
+- No automated enforcement
+
+## Decision Outcome
+
+Chosen option: "Husky + lint-staged pre-commit hook", because it prevents lint errors and failing tests from entering the repository, and auto-fixes formatting on commit without developer intervention.
+
+The hook runs in order:
+
+1. Full test suite (`npm test -- --watch=false`) — blocks commit on any failing spec.
+2. `lint-staged` on staged files: `prettier --write` on `*.{ts,html,scss,json,md}`, then `eslint --max-warnings=0` on `*.ts` and `*.html`.
+
+nvm is initialised inside the hook script to ensure the correct Node version (pinned in `.nvmrc`) is active regardless of the shell environment that triggered the commit.
+
+### Positive Consequences
+
+- No lint errors or failing tests can enter the repository via a normal commit.
+- Prettier auto-fixes formatting on commit — developers don't need to run it manually.
+
+### Negative Consequences
+
+- Commits are slower (~10–20 s for the full test suite). Acceptable trade-off for a solo project.
+- Requires nvm to be installed on the developer's machine. The hook sources `$HOME/.nvm/nvm.sh` directly.
+
+## Pros and Cons of the Options
+
+### Husky + lint-staged
+
+- Good, because issues are caught before they enter the repository.
+- Good, because formatting is applied automatically.
+- Bad, because adds latency to every commit.
+- Bad, because requires nvm on the developer's machine.
+
+### CI-only enforcement
+
+- Good, because no local overhead.
+- Bad, because broken commits are discovered only after push.
+
+### No automated enforcement
+
+- Good, because zero overhead.
+- Bad, because quality degrades without consistent manual discipline.

docs/decisions/0010-node-version-management-nvm.md

@@ -0,0 +1,51 @@
+# Pin Node version with nvm and .nvmrc
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+Angular 18 requires Node.js `^18.19.1 || ^20.11.1`. The system Node version on a development machine may not meet this requirement, causing silent build failures or CLI errors. How should the required Node version be enforced?
+
+## Considered Options
+
+- nvm with `.nvmrc`
+- System Node (no version management)
+- Other version managers (fnm, volta)
+
+## Decision Outcome
+
+Chosen option: "nvm with `.nvmrc`", because it pins the version explicitly in the repository, is already in use on the development machine, and integrates directly with the Husky pre-commit hook.
+
+A `.nvmrc` file at the repository root pins Node to `20.19.6`. The Husky pre-commit hook explicitly calls `nvm use 20.19.6` before running tests to ensure the correct version is active in the hook's shell environment.
+
+### Positive Consequences
+
+- Consistent Node version across all commands: dev server, build, tests, pre-commit hook.
+- `.nvmrc` documents the required Node version explicitly in the repository.
+
+### Negative Consequences
+
+- Requires nvm. Developers using other version managers (fnm, volta) must align manually.
+
+## Pros and Cons of the Options
+
+### nvm with `.nvmrc`
+
+- Good, because explicit version pinning visible in the repository.
+- Good, because integrates with Husky hook via `nvm use`.
+- Bad, because tied to nvm — other version managers need manual alignment.
+
+### System Node
+
+- Good, because no tooling required.
+- Bad, because version is not pinned — any system upgrade can silently break the build.
+
+### Other version managers (fnm, volta)
+
+- Good, because faster and more ergonomic than nvm for some workflows.
+- Bad, because not the currently installed tool — switching would require migration.
+
+## Links
+
+- The `package.json` `engines` field (`^18.19.1 || ^20.11.1`) provides a secondary signal for tooling that reads it.

docs/decisions/0011-feature-domain-organisation.md

@@ -0,0 +1,46 @@
+# Organise code by functional domain
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+The application covers four independent functional areas with distinct data models, API backends, and user audiences: Skydive, CMS, E-commerce, and Hero Wars. Without explicit organisational boundaries, code from different domains would intermingle, making each area harder to reason about independently. How should the codebase be structured?
+
+## Considered Options
+
+- Domain-based organisation (one folder per functional area)
+- Flat feature-based organisation (one folder per component type)
+
+## Decision Outcome
+
+Chosen option: "Domain-based organisation", because it mirrors the backend's route grouping, making the full-stack data flow traceable, and allows each domain to be understood and modified independently.
+
+Services are placed under `src/app/core/services/<domain>/`, API prefixes are `/skydive`, `/cms`, `/ecommerce`, `/herowars`, and routes are composed from `auth.routes.ts` and `noauth.routes.ts` with domain-specific guards.
+
+### Positive Consequences
+
+- Each domain can be understood and modified independently.
+- Consistent mapping between frontend service paths and backend API routes simplifies debugging.
+
+### Negative Consequences
+
+- Cross-domain features (shared auth, user profile) must be placed in `core/` to avoid circular dependencies.
+
+## Pros and Cons of the Options
+
+### Domain-based organisation
+
+- Good, because domain boundaries are explicit and enforced by directory structure.
+- Good, because mirrors the backend route grouping — frontend `core/services/skydive/` maps to backend `src/routes/api/skydive/`.
+- Bad, because shared cross-domain concerns need a neutral `core/` layer.
+
+### Flat feature-based organisation
+
+- Good, because all components of the same type are co-located.
+- Bad, because domain boundaries are invisible — mixing domains is too easy.
+
+## Links
+
+- Hero Wars uses static JSON files (`src/files-data/`) rather than live API calls — weekly snapshots updated manually. This is intentional and not a gap in the domain structure.
+- Related to backend [ADR 0004](../../adastra_api/docs/decisions/0004-route-organisation-by-domain.md)

docs/decisions/0012-scss-bootstrap-import-deprecation.md

@@ -0,0 +1,57 @@
+# Silence the Sass @import deprecation for the Bootstrap import chain
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+Bootstrap 5 relies on Sass's `@import` rule and `!default` variable overrides: our custom `_variable.scss` must be loaded before Bootstrap's `variables.scss` so that Bootstrap picks up our values via the `!default` mechanism. Dart Sass 1.80+ deprecates `@import` in favour of the `@use` module system. How should the deprecation be addressed?
+
+## Decision Drivers
+
+- Bootstrap 5's `!default` override mechanism is incompatible with `@use` module scopes — variables loaded via `@use` do not flow into Bootstrap's module scope.
+- Other Dart Sass deprecations (`color.red/green/blue()`, global `if()`) were fixed properly.
+
+## Considered Options
+
+- Silence the `@import` deprecation via `angular.json`
+- Migrate to `@use` with `@use "bootstrap" with (...)`
+- Wait for Bootstrap 6
+
+## Decision Outcome
+
+Chosen option: "Silence the `@import` deprecation via `angular.json`", because the `@use` migration is blocked by Bootstrap 5's architecture and Bootstrap 6 (which adopts `@use` natively) is not yet released.
+
+The deprecation is suppressed in `angular.json` via `stylePreprocessorOptions.sass.silenceDeprecations: ["import"]`. The existing `@import`-based Bootstrap loading chain is kept intact. All other Dart Sass deprecations are fixed properly.
+
+### Positive Consequences
+
+- Bootstrap customisation works correctly with no behaviour change.
+- No risk of introducing regressions by attempting an incompatible migration now.
+
+### Negative Consequences
+
+- Deprecation is silenced rather than fixed. `@import` will be removed in Dart Sass 3.0.
+
+## Pros and Cons of the Options
+
+### Silence the `@import` deprecation
+
+- Good, because no behaviour change — existing variable overrides continue to work.
+- Bad, because the underlying issue is deferred, not resolved.
+
+### Migrate to `@use` with `@use "bootstrap" with (...)`
+
+- Good, because fully resolves the deprecation.
+- Bad, because requires rewriting all Bootstrap variable overrides using `with ()` syntax — significant effort.
+- Bad, because the `with ()` syntax has limitations compared to `!default` chaining.
+
+### Wait for Bootstrap 6
+
+- Good, because Bootstrap 6 adopts `@use` natively — migration path will be documented by the Bootstrap team.
+- Bad, because Bootstrap 6 release date is unknown; deferring means living with the silenced warning.
+
+## Links
+
+- Related to [ADR 0003](0003-dual-ui-library-progressive-migration.md)
+- Future action: when Bootstrap 6 is released with `@use` support, migrate the import chain, remove the `silenceDeprecations` entry, and supersede this ADR.

docs/decisions/0013-json-assets-httpclient-migration.md

@@ -0,0 +1,67 @@
+# Migrate HeroWars static JSON imports to HttpClient assets
+
+- Status: accepted
+- Date: 2026-04-26
+
+## Context and Problem Statement
+
+Six large JSON files (36 KB–3 MB) were statically imported directly into Angular components and services via TypeScript `import` statements. This bundled all the data into the main JavaScript bundle, inflating the initial download regardless of whether the user navigated to the HeroWars section. The largest file (`hw-guild-raids.json`, 3 MB) alone would significantly delay first contentful paint for all users.
+
+Additionally, a seventh file (`qcm-bpa.json`, 210 KB) was imported but never consumed — the component had switched to a route resolver but the dead import remained.
+
+## Decision Drivers
+
+- Static JSON imports are compiled into the bundle — they cannot be lazy-loaded or cached by the browser independently.
+- Updating the data files required a recompile and redeployment; serving them as assets allows hot-swapping without a rebuild.
+- The HeroWars section is used by a small subset of users; its data should not penalise all other users' load time.
+
+## Considered Options
+
+- Keep static imports
+- Move JSON to assets and load via `HttpClient`
+- Fetch data from the API backend
+
+## Decision Outcome
+
+Chosen option: "Move JSON to assets and load via HttpClient", because it removes the data from the bundle, enables browser-level HTTP caching, and requires no backend changes. The files are not secret (guild-internal analytics data) so serving them as static assets is appropriate.
+
+Structure:
+
+- JSON files moved from `src/files-data/` to `src/assets/files-data/`
+- `HWDataService` created at `src/app/core/services/herowars/hw-data.service.ts` — exposes one `readonly` observable per file, each piped through `shareReplay(1)` so the HTTP request fires at most once per app lifecycle
+- `HWClanService.loadClan()` and `HWMemberService.loadMembers()` converted from synchronous return values to `Observable<T>`
+- All consumer components inject `HWDataService` and subscribe in `ngOnInit()`; template-called methods that previously accessed `guildWarSlots.slots` inline now read from a `_slots` class property populated in the subscribe callback
+- Unused `import data from 'src/qcm-bpa.json'` and two dead import-helper methods removed from `qcm.component.ts`
+
+### Positive Consequences
+
+- HeroWars JSON (~4 MB total) no longer shipped in the initial bundle.
+- Each JSON file is independently cacheable by the browser with standard HTTP cache headers.
+- Data files can be updated without recompiling the Angular application.
+- `shareReplay(1)` ensures a single HTTP request per session even when multiple components subscribe to the same observable.
+
+### Negative Consequences
+
+- Components now initialize asynchronously — there is a brief render before data arrives (consistent with the rest of the app's HTTP-driven components).
+- `Object.entries()` on `any`-typed HTTP responses requires explicit `Record<string, T>` casts to satisfy strict TypeScript, adding minor verbosity.
+
+## Pros and Cons of the Options
+
+### Keep static imports
+
+- Good, because synchronous — no async lifecycle complexity.
+- Bad, because adds up to 4 MB to the initial bundle.
+- Bad, because data updates require a full rebuild and redeployment.
+
+### Move JSON to assets and load via HttpClient
+
+- Good, because removes data from the bundle entirely.
+- Good, because browser-cacheable independently of the app JS.
+- Good, because hot-swappable without a recompile.
+- Bad, because converts synchronous service methods to observables, requiring component updates.
+
+### Fetch from API backend
+
+- Good, because data could be managed dynamically via the admin interface.
+- Bad, because requires significant backend work (new endpoints, data model) for data that is currently managed as flat files.
+- Bad, because adds latency and a failure mode not present with local assets.

package.json

@@ -0,0 +1,80 @@
+{
+    "name": "adastra-app",
+    "version": "1.0.0",
+    "author": "Solide Apps <admin@unespace.com>",
+    "contributors": [
+        "Julien Gautier <julien.gautier@unespace.com>"
+    ],
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "watch": "ng build --watch --configuration development",
+        "serve": "ng serve --configuration local --port 4201",
+        "dev": "APP_ENV=development ng serve --port 4300 --configuration development",
+        "local": "APP_ENV=local ng serve --port 4400 --configuration local",
+        "lint": "ng lint",
+        "test": "ng test"
+    },
+    "engines": {
+        "node": "^20.19.0 || ^22.12.0"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "^21.2.10",
+        "@angular/cdk": "^21.2.8",
+        "@angular/common": "^21.2.10",
+        "@angular/compiler": "^21.2.10",
+        "@angular/core": "^21.2.10",
+        "@angular/forms": "^21.2.10",
+        "@angular/google-maps": "^21.2.8",
+        "@angular/localize": "^21.2.10",
+        "@angular/material": "^21.2.8",
+        "@angular/platform-browser": "^21.2.10",
+        "@angular/platform-browser-dynamic": "^21.2.10",
+        "@angular/router": "^21.2.10",
+        "bootstrap": "^5.3.7",
+        "chart.js": "^4.4.2",
+        "chartist": "^1.3.0",
+        "ng2-charts": "^6.0.1",
+        "ngx-skeleton-loader": "^9.0.0",
+        "rxjs": "~7.8.0",
+        "tslib": "^2.3.0",
+        "zone.js": "^0.15.1"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "^21.2.8",
+        "@angular-eslint/builder": "21.3.1",
+        "@angular-eslint/eslint-plugin": "21.3.1",
+        "@angular-eslint/eslint-plugin-template": "21.3.1",
+        "@angular-eslint/schematics": "21.3.1",
+        "@angular-eslint/template-parser": "21.3.1",
+        "@angular/cli": "^21.2.8",
+        "@angular/compiler-cli": "^21.2.10",
+        "@types/jasmine": "~5.1.0",
+        "@typescript-eslint/eslint-plugin": "7.2.0",
+        "@typescript-eslint/parser": "7.2.0",
+        "eslint": "^8.57.0",
+        "eslint-config-prettier": "^10.1.8",
+        "jasmine-core": "~5.1.0",
+        "karma": "~6.4.0",
+        "karma-chrome-launcher": "~3.2.0",
+        "karma-coverage": "~2.2.0",
+        "karma-jasmine": "~5.1.0",
+        "karma-jasmine-html-reporter": "~2.1.0",
+        "lint-staged": "^16.4.0",
+        "prettier": "^3.8.3",
+        "typescript": "~5.9.3"
+    },
+    "lint-staged": {
+        "*.{ts,html,scss,json,md}": [
+            "prettier --write"
+        ],
+        "*.ts": [
+            "eslint --max-warnings=0"
+        ],
+        "*.html": [
+            "eslint --max-warnings=0"
+        ]
+    }
+}

src/_redirects

@@ -0,0 +1 @@
+/*  /index.html 200

src/app/app.component.html

@@ -0,0 +1 @@
+<app-full-layout [class]="appClass"></app-full-layout>

src/app/app.component.scss

@@ -0,0 +1,8 @@
+.grayscale {
+    filter: grayscale(1);
+    transition: all 2s ease;
+}
+.colored {
+    filter: grayscale(0);
+    transition: all 5s ease;
+}

src/app/app.component.spec.ts

@@ -0,0 +1,39 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        provideNativeDateAdapter(),
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'Ad Astra' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('Ad Astra');
+  });
+
+  it('should render the full layout', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('app-full-layout')).toBeTruthy();
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit, AfterContentInit, inject } from '@angular/core';
+import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, provideNativeDateAdapter } from '@angular/material/core';
+import { Title } from '@angular/platform-browser';
+
+import { FullComponent } from '@components/shared/layout';
+import { UserService } from '@services';
+
+export const MY_FORMATS = {
+    parse: {
+        dateInput: 'DD/MM/YYYY',
+    },
+    display: {
+        dateInput: 'DD/MM/YYYY',
+        monthYearLabel: 'MMM YYYY',
+        dateA11yLabel: 'LL',
+        monthYearA11yLabel: 'MMMM-YYYY',
+    },
+};
+
+@Component({
+    selector: 'app-root',
+    imports: [FullComponent],
+    providers: [
+        { provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
+        { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
+        provideNativeDateAdapter(MY_FORMATS),
+    ],
+    templateUrl: './app.component.html',
+    styleUrl: './app.component.scss',
+})
+export class AppComponent implements OnInit, AfterContentInit {
+    private userService = inject(UserService);
+    private titleService = inject(Title);
+
+    public title = 'Ad Astra';
+    public appClass = 'grayscale';
+
+    ngOnInit() {
+        this.userService.populate();
+        this.titleService.setTitle(this.title);
+    }
+
+    ngAfterContentInit() {
+        this.appClass = 'colored';
+    }
+}

src/app/app.config.ts

@@ -0,0 +1,40 @@
+import { APP_INITIALIZER, ApplicationConfig, LOCALE_ID } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+//import { provideRouter, withComponentInputBinding, withDebugTracing } from '@angular/router';
+import { provideRouter, withViewTransitions } from '@angular/router';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
+import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
+import { EMPTY } from "rxjs";
+
+registerLocaleData(localeFr);
+
+import { routes } from './app.routes';
+import { apiInterceptor, tokenInterceptor, errorInterceptor } from "@interceptors";
+import { JwtService, UserService } from "@services";
+
+export function initAuth(jwtService: JwtService, userService: UserService) {
+    return () => (jwtService.getToken() ? userService.getCurrentUser() : EMPTY);
+}
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        //provideRouter(routes, withComponentInputBinding(), withDebugTracing()),
+        provideRouter(routes, withViewTransitions()),
+        provideHttpClient(
+            withInterceptors([apiInterceptor, tokenInterceptor, errorInterceptor])
+        ),
+        provideAnimations(),
+        provideCharts(withDefaultRegisterables()),
+        Title,
+        { provide: LOCALE_ID, useValue: 'fr-FR' },
+        {
+            provide: APP_INITIALIZER,
+            useFactory: initAuth,
+            deps: [JwtService, UserService],
+            multi: true,
+        }
+    ]
+};

src/app/app.routes.ts

@@ -0,0 +1,5 @@
+import { Routes } from '@angular/router';
+
+import { AUTH_ROUTES, NOAUTH_ROUTES } from 'src/app/routes';
+
+export const routes: Routes = [ ...AUTH_ROUTES, ...NOAUTH_ROUTES];

src/app/components/aeronefs/aeronefs.component.html

@@ -0,0 +1,49 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{title}}</h1>
+            <span [hidden]="!lastJump.numero" class="me-2 fs-6">
+                Dernier saut enregistré : <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: 'dd/MM/yyyy' }}</span>
+            </span>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2">
+            <button mat-icon-button [matMenuTriggerFor]="menuAeronef" aria-label="Menu Aeronef">
+                <mat-icon fontIcon="more_vert"></mat-icon>
+            </button>
+            <mat-menu #menuAeronef="matMenu">
+                @for (menuitem of menuItems.getMenuPanel(); track menuitem) {
+                <button mat-menu-item>
+                    <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
+                    <span>{{ menuitem.name }}</span>
+                </button>
+                }
+            </mat-menu>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <mat-card>
+        <mat-card-header>
+            <mat-card-title>{{ subtitle }}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="mt-4">
+            @if (displayCharts) {
+            <div class="row">
+                <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12">
+                    <app-pie-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [colors]="seriesColor"></app-pie-chart>
+                </div>
+                <div class="col-xl-8 col-lg-7 col-md-6 col-sm-12">
+                    <!--<app-bar-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [colors]="seriesColor" label="Nombre total de sauts" [legend]="false"></app-bar-chart>-->
+                    <app-bars-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesRow" [colors]="seriesColor" [legend]="false"></app-bars-chart>
+                </div>
+            </div>
+            }
+            <div class="d-flex">
+                <div class="flex-fill py-2">
+                    <mat-divider class="mt-3 mb-0"></mat-divider>
+                    <app-history-table [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [rows]="seriesRow" [colors]="seriesColorClass"></app-history-table>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</div>

src/app/components/aeronefs/aeronefs.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { MenuItems } from '@components/shared';
+import { AeronefsComponent } from './aeronefs.component';
+
+describe('AeronefsComponent', () => {
+  let component: AeronefsComponent;
+  let fixture: ComponentFixture<AeronefsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AeronefsComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        MenuItems,
+      ],
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AeronefsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/aeronefs/aeronefs.component.ts

@@ -0,0 +1,116 @@
+import { DatePipe } from '@angular/common';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { Observable, Subscription } from 'rxjs';
+
+import { MenuItems } from '@components/shared';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { BarsChartComponent, PieChartComponent } from '@components/shared/helpers-chart';
+import { Jump, AeronefsPageData } from '@models';
+import { UtilitiesService } from '@services';
+import { AeronefByImat, AeronefByYear } from '@models';
+
+@Component({
+    selector: 'app-aeronefs',
+    imports: [
+        DatePipe,
+        MatBadgeModule,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+        BarsChartComponent,
+        HistoryTableComponent,
+        PieChartComponent,
+    ],
+    templateUrl: './aeronefs.component.html',
+    styleUrl: './aeronefs.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateX(0)' })),
+            transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateX(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class AeronefsComponent implements OnInit, OnDestroy {
+    private route = inject(ActivatedRoute);
+    private _utilitiesService = inject(UtilitiesService);
+    menuItems = inject(MenuItems);
+
+    private _data: Subscription = new Subscription();
+    private _aeronefsByImat!: Array<AeronefByImat>;
+    private _aeronefsByYear!: Array<AeronefByYear>;
+    public lastJump: Jump = {} as Jump;
+    public title = 'Aéronefs';
+    public subtitle: string = 'Nombre total de sauts par aéronef';
+    public displayCharts = false;
+    public destroyRef = inject(DestroyRef);
+    public seriesHeader: string[] = [];
+    public seriesName: string[] = [];
+    public seriesValue: number[] = [];
+    public seriesRow: Array<Array<number>> = [];
+    public seriesColor: {
+        backgroundColor: string[];
+        borderColor: string[];
+    } = {
+        backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'all'),
+        borderColor: this._utilitiesService.getSeriesColors(1, 'all'),
+    };
+    public seriesColorClass: string[] = this._utilitiesService.getChartColors();
+
+    ngOnInit() {
+        const data$: Observable<{ aeronefsPageData: AeronefsPageData }> = this.route.data as Observable<{
+            aeronefsPageData: AeronefsPageData;
+        }>;
+        this._data = data$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((data: { aeronefsPageData: AeronefsPageData }) => {
+                const pageData: AeronefsPageData = data.aeronefsPageData;
+                this.lastJump = pageData.lastjump;
+                this._loadAeronefByImat(pageData);
+            });
+    }
+
+    ngOnDestroy() {
+        this._data.unsubscribe();
+    }
+
+    private _loadAeronefByImat(pageData: AeronefsPageData): void {
+        this._aeronefsByImat = pageData.aeronefsByImat.map((row: AeronefByImat) => {
+            this.seriesName.push(`${row.aeronef} ${row.imat}`);
+            this.seriesValue.push(row.count);
+            return row;
+        });
+        this._loadAeronefByYear(pageData);
+    }
+
+    private _loadAeronefByYear(pageData: AeronefsPageData): void {
+        this.seriesHeader = ['2018', '2019', '2020', '2021', '2022', '2023', '2024'];
+        const values: Array<number> = this.seriesHeader.map(() => 0);
+        this.seriesName.forEach(() => {
+            this.seriesRow.push([...values]);
+        });
+        this._aeronefsByYear = pageData.aeronefsByImatByYear.map((row: AeronefByYear) => {
+            const aeronef: string = row.aeronef;
+            const imat: string = row.imat;
+            const year: string = row.year.toString();
+            this.seriesRow[this.seriesName.indexOf(`${aeronef} ${imat}`)][this.seriesHeader.indexOf(year)] = row.count;
+            return row;
+        });
+        this.displayCharts = true;
+    }
+}

src/app/components/auth/auth.component.html

@@ -0,0 +1,113 @@
+<div class="container auth-page">
+  <div class="row">
+    <div class="col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 col-xs-12">
+      <h1 class="text-xs-center">{{ title }}</h1>
+      <p class="text-xs-center">
+        @if (authType === 'register') {
+          <a [routerLink]="['/login']">Vous avez déjà un compte ?</a>
+        }
+        @if (authType === 'login') {
+          <a [routerLink]="['/register']">Vous n'avez pas encore de compte ?</a>
+        }
+      </p>
+      <app-list-errors [errors]="errors"></app-list-errors>
+      <form [formGroup]="authForm" (ngSubmit)="submitForm()">
+        <fieldset [disabled]="isSubmitting" class="w-100">
+          <legend [hidden]="true">Informations personnelles</legend>
+          <div class="col-12">
+            <mat-form-field appearance="fill" class="w-100">
+              <input matInput type="text" placeholder="Votre adresse email" formControlName="email" required>
+              @if (this.authForm.controls['email'].status === 'INVALID') {
+                <mat-error>{{getErrorMessage('email')}}</mat-error>
+              }
+            </mat-form-field>
+          </div>
+          @if (authType === 'register') {
+            <div class="col-12">
+              <mat-form-field appearance="fill" class="w-100">
+                <input matInput type="text" placeholder="Votre nom" formControlName="lastname" required>
+                @if (this.authForm.controls['lastname'].status === 'INVALID') {
+                  <mat-error>{{getErrorMessage('lastname')}}</mat-error>
+                }
+              </mat-form-field>
+            </div>
+          }
+          @if (authType === 'register') {
+            <div class="col-12">
+              <mat-form-field appearance="fill" class="w-100">
+                <input matInput type="text" placeholder="Votre prénom" formControlName="firstname" required>
+                @if (this.authForm.controls['firstname'].status === 'INVALID') {
+                  <mat-error>{{getErrorMessage('firstname')}}</mat-error>
+                }
+              </mat-form-field>
+            </div>
+          }
+          @if (authType === 'register') {
+            <div class="col-12">
+              <mat-form-field appearance="fill" class="w-100">
+                <input matInput type="text" placeholder="Numéro de téléphone" formControlName="phone" required>
+                @if (this.authForm.controls['phone'].status === 'INVALID') {
+                  <mat-error>{{getErrorMessage('phone')}}</mat-error>
+                }
+              </mat-form-field>
+            </div>
+          }
+          @if (authType === 'register') {
+            <div class="col-12">
+              <mat-form-field appearance="fill" class="w-100">
+                <input matInput type="text" placeholder="Pseudo" formControlName="username">
+                @if (this.authForm.controls['username'].status === 'INVALID') {
+                  <mat-error>{{getErrorMessage('username')}}</mat-error>
+                }
+              </mat-form-field>
+            </div>
+          }
+          @if (authType === 'register') {
+            <div class="col-12">
+              <mat-form-field appearance="fill" class="w-100">
+                <input matInput type="text" placeholder="Numéro de licence FFP" formControlName="licence">
+                @if (this.authForm.controls['licence'].status === 'INVALID') {
+                  <mat-error>{{getErrorMessage('licence')}}</mat-error>
+                }
+              </mat-form-field>
+            </div>
+          }
+          @if (authType === 'register') {
+            <div class="col-12">
+              <mat-form-field appearance="fill" class="w-100">
+                <input matInput type="text" placeholder="Indiquez le poids en Kg" formControlName="poids">
+                @if (this.authForm.controls['poids'].status === 'INVALID') {
+                  <mat-error>{{getErrorMessage('poids')}}</mat-error>
+                }
+              </mat-form-field>
+            </div>
+          }
+        </fieldset>
+        <fieldset [disabled]="isSubmitting" class="w-100">
+          <legend [hidden]="true">Informations de connexion</legend>
+          <div class="col-12">
+            <mat-form-field appearance="fill" class="w-100">
+              <input matInput type="password" placeholder="Mot de passe" formControlName="password" required>
+              @if (this.authForm.controls['password'].status === 'INVALID') {
+                <mat-error>{{getErrorMessage('password')}}</mat-error>
+              }
+            </mat-form-field>
+          </div>
+          @if (authType === 'register') {
+            <div class="col-12">
+              <mat-form-field appearance="fill" class="w-100">
+                <input matInput type="password" placeholder="Confirmez votre nouveau mot de passe" formControlName="confirmPassword" required>
+                @if (this.authForm.controls['confirmPassword'].status === 'INVALID') {
+                  <mat-error>{{getErrorMessage('confirmPassword')}}</mat-error>
+                }
+              </mat-form-field>
+            </div>
+          }
+          <div class="col-12">
+            <button mat-raised-button color="primary" [disabled]="!authForm.valid" type="submit" class="float-sm-end">{{ btnTitle }}</button>
+          </div>
+        </fieldset>
+      </form>
+    </div>
+  </div>
+</div>

src/app/components/auth/auth.component.scss

@@ -0,0 +1,6 @@
+fieldset {
+    border-style: none;
+    border-width: 0;
+    margin: 0;
+    padding: 0;
+}

src/app/components/auth/auth.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { AuthComponent } from './auth.component';
+
+describe('AuthComponent', () => {
+  let component: AuthComponent;
+  let fixture: ComponentFixture<AuthComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AuthComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+      ],
+    });
+    fixture = TestBed.createComponent(AuthComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/auth/auth.component.ts

@@ -0,0 +1,175 @@
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+    UntypedFormBuilder,
+    UntypedFormGroup,
+    AbstractControl,
+    Validators,
+    ValidatorFn,
+    ValidationErrors,
+    FormsModule,
+    ReactiveFormsModule,
+} from '@angular/forms';
+import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { Errors } from '@models';
+import { UserService } from '@services';
+import { ListErrorsComponent } from '@components/shared';
+
+@Component({
+    imports: [
+        RouterLink,
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+        ListErrorsComponent,
+    ],
+    selector: 'app-auth',
+    templateUrl: './auth.component.html',
+    styleUrl: './auth.component.scss',
+})
+export class AuthComponent implements OnInit, OnDestroy {
+    private route = inject(ActivatedRoute);
+    private router = inject(Router);
+    private titleService = inject(Title);
+    private userService = inject(UserService);
+    private fb = inject(UntypedFormBuilder);
+
+    private _url: Subscription = new Subscription();
+    private _user: Subscription = new Subscription();
+    authType = '';
+    title = '';
+    btnTitle = '';
+    errors: Errors = { errors: {} };
+    isSubmitting = false;
+    authForm!: UntypedFormGroup;
+    destroyRef = inject(DestroyRef);
+
+    constructor() {
+        this._resetErrors();
+        // use FormBuilder to create a form group
+        const controlsConfig = {
+            email: ['', [Validators.required, Validators.email]],
+            username: '',
+            firstname: '',
+            lastname: '',
+            phone: '',
+            licence: '',
+            poids: '',
+            password: ['', Validators.required],
+            confirmPassword: '',
+        };
+        this.authForm = this.fb.group(controlsConfig, { validators: this.checkPasswords });
+    }
+
+    ngOnInit() {
+        // you would normally unsubscribe from this observable subscription
+        // the active route observables are exemptions from unsubribe always rule
+        // see notes on: https://angular.io/guide/router#observable-parammap-and-component-reuse
+        this.route.url.pipe(take(1)).subscribe((data) => {
+            // Get the last piece of the URL (it's either 'login' or 'register')
+            this.authType = data[data.length - 1].path;
+            // Set a title for the page accordingly
+            if (this.authType === 'register') {
+                this.title = 'Création de compte';
+                this.btnTitle = 'Créer le compte';
+                this.titleService.setTitle(`Ad Astra - Créer un compte`);
+            } else {
+                this.title = 'Se connecter';
+                this.btnTitle = 'Se connecter';
+                this.titleService.setTitle(`Ad Astra - Connexion`);
+            }
+            // add form control for username if this is the register page
+            if (this.authType === 'register') {
+                this.authForm.controls['firstname'].setValidators([Validators.required]);
+                this.authForm.controls['lastname'].setValidators([Validators.required]);
+                this.authForm.controls['phone'].setValidators([Validators.required]);
+                this.authForm.controls['confirmPassword'].setValidators([Validators.minLength(8), Validators.required]);
+            }
+        });
+    }
+
+    ngOnDestroy() {
+        this._user.unsubscribe();
+        //this._url.unsubscribe();
+    }
+
+    submitForm() {
+        this.isSubmitting = true;
+        this.errors = { errors: {} };
+
+        if (this.authForm.valid) {
+            this._resetErrors();
+            const credentials = this.authForm.value;
+            const user$ = this.userService
+                .attemptAuth(this.authType, credentials)
+                .pipe(takeUntilDestroyed(this.destroyRef));
+            this._user = user$.subscribe({
+                next: () => void this.router.navigateByUrl('/'),
+                error: (err) => {
+                    console.log(err);
+                    this.errors = err;
+                    this.isSubmitting = false;
+                },
+            });
+        }
+    }
+
+    getErrorMessage(name: string) {
+        switch (name) {
+            case 'email':
+                if (this.authForm.controls['email'].errors !== null) {
+                    return 'Indiquez votre adresse email';
+                }
+                break;
+            case 'firstname':
+                if (this.authForm.controls['firstname'].errors !== null) {
+                    return 'Vous devez indiquer votre prénnom';
+                }
+                break;
+            case 'lastname':
+                if (this.authForm.controls['lastname'].errors !== null) {
+                    return 'Vous devez indiquer votre nom';
+                }
+                break;
+            case 'phone':
+                if (this.authForm.controls['phone'].errors !== null) {
+                    return 'Vous devez indiquer votre numéro de téléphone';
+                }
+                break;
+            case 'password':
+                if (this.authForm.controls['password'].errors !== null) {
+                    return 'Un mot de passe est obligatoire';
+                }
+                break;
+            case 'confirmPassword':
+                if (this.authForm.controls['confirmPassword'].errors !== null) {
+                    return 'Une confirmation du mot de passe est obligatoire';
+                }
+                break;
+        }
+        return '';
+    }
+
+    checkPasswords: ValidatorFn = (group: AbstractControl): ValidationErrors | null => {
+        if (this.authType !== 'register') {
+            return null;
+        }
+        const pass = group.get('password')!.value;
+        const confirmPass = group.get('confirmPassword')!.value;
+        return pass === confirmPass && pass !== '' ? null : { notSame: true };
+    };
+
+    private _resetErrors(): void {
+        this.errors = { errors: {} };
+    }
+}

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

@@ -0,0 +1,257 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{title}}</h1>
+            <span class="me-2 fs-6"><span class="fs-5 mx-1">DT48</span> - 08 février 2024</span>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2">
+            <button mat-icon-button [matMenuTriggerFor]="menuCalculator" aria-label="Menu Calculator">
+                <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #menuCalculator="matMenu">
+                @for (menuitem of menuItems.getMenuCalculator(); track menuitem) {
+                @if (menuitem.type === 'link') {
+                <button mat-menu-item [routerLink]="['/', menuitem.state]">
+                    <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
+                    <span>{{ menuitem.name }}</span>
+                </button>
+                }
+                }
+            </mat-menu>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <mat-card class="calculator">
+        <mat-card-header class="bg-warn rounded-top pt-1 pb-2 px-2">
+            <form #searchFormData="ngForm" class="inputs-form">
+                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic" color="accent">
+                    <mat-label>Nombre de sauts</mat-label>
+                    <input matInput [(ngModel)]="inputs.jumps" (change)="refresh()" type="number" min="0" max="2000"
+                        step="1" name="jumps">
+                </mat-form-field>
+                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic" color="accent">
+                    <mat-label>Poids nu</mat-label>
+                    <input matInput [(ngModel)]="inputs.weight" (change)="refresh()" type="number" min="30"
+                        max="110" name="weight">
+                </mat-form-field>
+                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic" color="accent">
+                    <mat-label>Poids équipement</mat-label>
+                    <input matInput [(ngModel)]="inputs.gear" (change)="refresh()" type="number" min="0"
+                        name="gear">
+                </mat-form-field>
+                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic" color="accent">
+                    <mat-label>Taille actuelle</mat-label>
+                    <input matInput [(ngModel)]="inputs.current" (change)="refresh()" type="number" min="0"
+                        name="current" id="current" placeholder="Taille actuelle">
+                </mat-form-field>
+            </form>
+            <span class="flex-spacer"></span>
+            <div class="flex-fill"></div>
+        </mat-card-header>
+        <mat-card-content class="my-4">
+            <div class="row">
+                <div class="col-lg-6 col-md-8 col-sm-12">
+                    <table class="table table-striped table-dark table-hover mat-elevation-z2">
+                        <thead>
+                            <tr class="warn">
+                                <th class="text-nowrap pe-4"></th>
+                                <th class="text-nowrap">Taille actuelle</th>
+                                <th class="text-nowrap">Taille min</th>
+                                <th class="text-nowrap">Taille min -11%</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="warn">
+                                <th class="text-nowrap pe-4">Taille de voile en ft<sup>2</sup></th>
+                                <td class="font-monospace text-{{ info.state.color }}"> ●
+                                    {{ info.sizesFeet.current }} </td>
+                                <td class="font-monospace text-success"> ● {{ info.sizesFeet.min }} </td>
+                                <td class="font-monospace text-warning"> ● {{ info.sizesFeet.min11 }} </td>
+                            </tr>
+                            <tr class="warn">
+                                <th class="text-nowrap pe-4">Charge alaire</th>
+                                <td class="font-monospace">{{ info.charges.current | number : '1.2-3' }}</td>
+                                <td class="font-monospace">{{ info.charges.min | number : '1.2-3' }}</td>
+                                <td class="font-monospace">{{ info.charges.min11 | number : '1.2-3' }}</td>
+                            </tr>
+                            <tr class="warn">
+                                <th class="text-nowrap pe-4">Taille de voile en m<sup>2</sup></th>
+                                <td class="font-monospace">{{ info.sizesMeter.current | number : '1.2-3' }}</td>
+                                <td class="font-monospace">{{ info.sizesMeter.min | number : '1.2-3' }}</td>
+                                <td class="font-monospace">{{ info.sizesMeter.min11 | number : '1.2-3' }}</td>
+                            </tr>
+                            <tr class="warn">
+                                <th class="text-nowrap pe-4">Coefficient kilo/livres</th>
+                                <td colspan="3" class="font-monospace text-start">{{ coeffKgLbs }}</td>
+                            </tr>
+                            <tr class="warn">
+                                <th class="text-nowrap pe-4">Coefficient pied/mètre</th>
+                                <td colspan="3" class="font-monospace text-start">{{ coeffFtM }}</td>
+                            </tr>
+                            <tr class="warn">
+                                <th class="text-nowrap pe-4">Formule charge alaire</th>
+                                <td colspan="3" class="font-monospace text-start">
+                                    ( ( {{ inputs.weight }} + {{ inputs.gear }} ) * {{ coeffKgLbs }} ) /
+                                    {{ inputs.current }} = {{ info.charges.current | number : '1.5' }}<br />
+                                    ( ( poids nu en kg + poids equipement en kg ) * coefficient kg/lbs ) / taille de
+                                    voile en ft<sup>2</sup>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="col-lg-6 col-md-8 col-sm-12">
+                    @if (displayCharts) {
+                    <div class="linechart position-relative w-100 mt-3">
+                        <canvas baseChart class="mx-auto" width="800" height="280"
+                            [data]="chartConfig.lineChartData" [options]="chartConfig.lineChartOptions"
+                            [legend]="chartConfig.lineChartLegend" [type]="'line'">
+                        </canvas>
+                    </div>
+                    }
+                </div>
+            </div>
+            <mat-divider class="my-3"></mat-divider>
+            <h4 class="py-2 mb-0">Tailles de voile pour {{ inputs.weight }} kg</h4>
+            <div>
+                Prochain changement de valeurs dans {{ ((this.currentRange.end + 1) - inputs.jumps) }}
+                {{ ((this.currentRange.end + 1) - inputs.jumps) > 1 ? 'sauts' : 'saut'}}<br />
+            </div>
+            <div class="text-end">
+                {{ ((((inputs.jumps - this.currentRange.start) + 1) / ((this.currentRange.end - this.currentRange.start) + 1)) * 100) | number : '1.2-2' }}%
+                de la tranche actuelle ({{this.currentRange.start}} à {{this.currentRange.end}})
+            </div>
+            <mat-progress-bar mode="determinate"
+                [value]="((((inputs.jumps - this.currentRange.start) + 1) / ((this.currentRange.end - this.currentRange.start) + 1)) * 100)"
+                color="warn"></mat-progress-bar>
+            <table class="table table-striped table-dark table-hover mat-elevation-z2 mb-1">
+                <thead>
+                    <tr class="warn">
+                        <th class="text-nowrap pe-4"></th>
+                        @for (header of sizesHeader; track header; let index = $index) {
+                        <th class="pl-3 pr-3 {{ tableHeader[(index+1)].active }}">{{ header.name }}</th>
+                        }
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr class="warn">
+                        <th class="firtext-nowrap pe-4st">Taille de voile en ft<sup>2</sup></th>
+                        @for (value of sizesValuesFeet; track value; let index = $index) {
+                        <td class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">{{ value }}</td>
+                        }
+                    </tr>
+                    <tr class="warn">
+                        <th class="text-nowrap pe-4">Abbattement 11%</th>
+                        @for (value of sizesMinValuesFeet; track value; let index = $index) {
+                        <td class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">{{ value }}</td>
+                        }
+                    </tr>
+                    <tr class="warn">
+                        <th class="text-nowrap pe-4">Charge alaire</th>
+                        @for (charge of sizesCharges; track charge; let index = $index) {
+                        <td class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">
+                            {{ charge | number : '1.2-3' }}</td>
+                        }
+                    </tr>
+                    <tr class="warn">
+                        <th class="text-nowrap pe-4">Taille de voile en m<sup>2</sup></th>
+                        @for (value of sizesValuesMeter; track value; let index = $index) {
+                        <td class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">
+                            {{ value | number : '1.2-2' }}</td>
+                        }
+                    </tr>
+                </tbody>
+            </table>
+            <mat-divider class="my-3"></mat-divider>
+            <h4 class="py-2 mb-0">Tableau des tailles de voile par poids</h4>
+            <div class="text-end">
+                {{ ((inputs.jumps / 1600) * 100) | number : '1.2-2' }}% de la plage complète (0 à 1600)
+            </div>
+            <mat-progress-bar mode="determinate" [value]="((inputs.jumps / 1600) * 100)" color="warn">
+            </mat-progress-bar>
+            <table mat-table [dataSource]="canopy_size_table" matSort
+                class="table table-striped table-dark table-hover mat-elevation-z2">
+                <!-- weight column -->
+                <ng-container matColumnDef="weight">
+                    <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-nowrap pe-4 {{tableHeader[0].active}}">
+                        {{tableHeader[0].name}} </th>
+                    <th mat-cell *matCellDef="let element;" class="text-end ps-3 pe-4 fs-6" role="button"
+                        (click)="setCurrentWeight(element.weight)">
+                        <span class="text-warn d-block">{{element.weight}}</span>
+                    </th>
+                </ng-container>
+                <!-- range_1 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 fs-6 {{element.ranges[0].active}}">{{element.ranges[0].value}}</td>
+                </ng-container>
+                <!-- range_2 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 fs-6 {{element.ranges[1].active}}">{{element.ranges[1].value}}</td>
+                </ng-container>
+                <!-- range_3 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 fs-6 {{element.ranges[2].active}}">{{element.ranges[2].value}}</td>
+                </ng-container>
+                <!-- range_4 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 fs-6 {{element.ranges[3].active}}">{{element.ranges[3].value}}</td>
+                </ng-container>
+                <!-- range_5 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 fs-6 {{element.ranges[4].active}}">{{element.ranges[4].value}}</td>
+                </ng-container>
+                <!-- range_6 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 fs-6 {{element.ranges[5].active}}">{{element.ranges[5].value}}</td>
+                </ng-container>
+                <!-- range_7 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 fs-6 {{element.ranges[6].active}}">{{element.ranges[6].value}}</td>
+                </ng-container>
+                <!-- range_8 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 fs-6 {{element.ranges[7].active}}">{{element.ranges[7].value}}</td>
+                </ng-container>
+                <!-- range_9 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 fs-6 {{element.ranges[8].active}}">{{element.ranges[8].value}}</td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: false" class="warn"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+                    class="text-middle font-monospace 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>

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

@@ -0,0 +1,33 @@
+.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;
+    }
+    th {
+        &.first {
+            width: 180px;
+        }
+    }
+}

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

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement, LineElement, PointElement } from 'chart.js';
+Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement, LineElement, PointElement);
+
+import { MenuItems } from '@components/shared';
+import { CalculatorComponent } from './calculator.component';
+
+describe('CalculatorComponent', () => {
+  let component: CalculatorComponent;
+  let fixture: ComponentFixture<CalculatorComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [CalculatorComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        MenuItems,
+      ],
+    });
+    fixture = TestBed.createComponent(CalculatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,232 @@
+import { Component, Input, OnInit, OnDestroy, ViewChild, inject } from '@angular/core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+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 { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { BaseChartDirective } from 'ng2-charts';
+import { Observable, Subscription } from 'rxjs';
+
+import { MenuItems } from '@components/shared';
+import {
+    CalculatorInfo,
+    CalculatorResult,
+    CalculatorState,
+    InputParams,
+    Jump,
+    LineConfig,
+    WeightSizeRange,
+    TableHeader,
+    User,
+    WeightSize,
+    weightSizes,
+} from '@models';
+import { CalculatorService, JumpsService, UserService, UtilitiesService } from '@services';
+
+@Component({
+    selector: 'app-calculator',
+    imports: [
+        CommonModule,
+        FormsModule,
+        RouterModule,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatMenuModule,
+        MatPaginatorModule,
+        MatProgressBarModule,
+        MatSortModule,
+        MatTableModule,
+        BaseChartDirective,
+    ],
+    templateUrl: './calculator.component.html',
+    styleUrl: './calculator.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [style({ transform: 'translateY(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateY(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class CalculatorComponent implements OnInit, OnDestroy {
+    private _calculatorService = inject(CalculatorService);
+    private _jumpsService = inject(JumpsService);
+    private _userService = inject(UserService);
+    private _utilitiesService = inject(UtilitiesService);
+    menuItems = inject(MenuItems);
+
+    //private _lastjump!: Subscription; // = new Subscription();
+    //private _currentUser!: Subscription; // = new Subscription();
+    private _subscriptions: Array<Subscription> = [];
+    public title = 'Calcul de taille de voile';
+    public subtitle = 'DT48 - 08 février 2024';
+    public lastjump: Jump = {} as Jump;
+    public currentRange: WeightSizeRange = {} as WeightSizeRange;
+    public currentUser: User = {} as User;
+    public displayedColumns: Array<string> = ['weight'];
+    public tableHeader: Array<TableHeader> = [<TableHeader>{ name: 'Poids nu en kg', active: '' }];
+    public sizesHeader: Array<TableHeader> = [];
+    public sizesValuesFeet: Array<number> = [];
+    public sizesMinValuesFeet: Array<number> = [];
+    public sizesCharges: Array<number> = [];
+    public sizesValuesMeter: Array<number> = [];
+    public displayCharts = false;
+    public chartConfig: LineConfig = this._utilitiesService.getLineChartConfig();
+    public coeffKgLbs: number = this._utilitiesService.getCoeffKgLbs();
+    public coeffFtM: number = this._utilitiesService.getCoeffFtM();
+    public info: CalculatorInfo = {
+        charges: <CalculatorResult>{ current: 0, min: 0, min11: 0 },
+        sizesFeet: <CalculatorResult>{ current: 0, min: 0, min11: 0 },
+        sizesMeter: <CalculatorResult>{ current: 0, min: 0, min11: 0 },
+        state: <CalculatorState>{ color: 'danger' },
+    };
+
+    @Input() canopy_size_table!: MatTableDataSource<WeightSize>;
+    @Input() inputs: InputParams = (<InputParams>{
+        jumps: 0,
+        weight: 60,
+        gear: 10,
+        current: 190,
+    }) as InputParams;
+
+    @ViewChild(MatSort) sort!: MatSort;
+    @ViewChild(MatPaginator) paginator!: MatPaginator;
+
+    ngOnInit() {
+        const currentUser$: Observable<User> = this._userService.currentUser;
+        const lastjump$: Observable<Jump> = this._jumpsService.getLastJump();
+
+        weightSizes[0].ranges.forEach((range: WeightSizeRange) => {
+            const header: TableHeader = { name: range.label, active: range.active };
+            this.tableHeader.push(header);
+            this.sizesHeader.push(header);
+            this.displayedColumns.push(range.name);
+        });
+        this.chartConfig.lineChartData.labels = [...this.sizesHeader.map((data: TableHeader): string => data.name)];
+        this.chartConfig.lineChartData.datasets = [
+            {
+                label: 'Tailles min -11%',
+                data: this.sizesMinValuesFeet,
+                fill: true,
+                stepped: true,
+                pointStyle: false,
+                borderColor: 'rgba(241, 80, 80, 1)',
+                backgroundColor: 'rgba(241, 80, 80, 0.3)',
+            },
+            {
+                label: 'Tailles min',
+                data: this.sizesValuesFeet,
+                fill: true,
+                stepped: true,
+                pointStyle: false,
+                borderColor: 'rgba(32, 182, 252, 1)',
+                backgroundColor: 'rgba(32, 182, 252, 0.3)',
+            },
+        ];
+        this._subscriptions.push(
+            currentUser$.subscribe((userData: User) => {
+                this.currentUser = userData;
+                this._subscriptions.push(
+                    lastjump$.subscribe((jump) => {
+                        this.lastjump = jump;
+                        this.inputs.jumps = jump.numero;
+                        this.inputs.weight = this.currentUser.poids ?? this.inputs.weight;
+                        this.inputs.current = jump.taille!;
+                        this.canopy_size_table = new MatTableDataSource<WeightSize>(weightSizes);
+                        this.refresh();
+                    }),
+                );
+            }),
+        );
+    }
+
+    ngOnDestroy() {
+        this._subscriptions.forEach((sub: Subscription) => {
+            sub.unsubscribe();
+        });
+    }
+
+    public refresh(): void {
+        this._refreshActive();
+        this._refreshSizes();
+    }
+
+    private _refreshActive(): void {
+        let weight: number = this.inputs.weight;
+        if (this.inputs.weight < 60) {
+            weight = 60;
+        }
+        weightSizes.forEach((element) => {
+            element.active = '';
+            element.ranges.forEach((range) => {
+                range.active = '';
+            });
+        });
+        this.tableHeader.forEach((element) => {
+            element.active = '';
+        });
+        if (weight >= 60 && weight <= 110) {
+            weightSizes[weight - 60].active = 'active';
+        }
+        if (this.inputs.jumps >= 0) {
+            const num = this._calculatorService.getRangeNum(this.inputs.jumps);
+            this.tableHeader[num].active = 'active';
+            weightSizes.forEach((element) => {
+                element.ranges[num - 1].active = 'active';
+            });
+            this.currentRange = weightSizes[0].ranges[num - 1];
+        }
+    }
+
+    private _refreshSizes(): void {
+        let weight: number = this.inputs.weight;
+        if (this.inputs.weight < 60) {
+            weight = 60;
+        }
+        if (this.inputs.jumps > 2000) {
+            this.info.state.error = '2K+ Jumps';
+        }
+        this.sizesValuesFeet = this._calculatorService.getCanopySizes(weight);
+        this.sizesMinValuesFeet = this._calculatorService.getCanopySizes(weight, true);
+        this.sizesValuesMeter = this.sizesValuesFeet.map((value: number, index: number) => {
+            this.sizesCharges[index] = this._calculatorService.getCharge(value, this.inputs.weight, this.inputs.gear);
+            return this._calculatorService.convertFeet2Meters(value);
+        });
+        this.info.sizesFeet = this._calculatorService.canopySizeCalc(weight, this.inputs.jumps);
+        this.info.sizesFeet.current = this.inputs.current;
+        this.info.sizesMeter = {
+            current: this._calculatorService.convertFeet2Meters(this.inputs.current),
+            min: this._calculatorService.convertFeet2Meters(this.info.sizesFeet.min),
+            min11: this._calculatorService.convertFeet2Meters(this.info.sizesFeet.min11),
+        };
+        this.info.charges = {
+            current: this._calculatorService.getCharge(this.inputs.current, this.inputs.weight, this.inputs.gear),
+            min: this._calculatorService.getCharge(this.info.sizesFeet.min, this.inputs.weight, this.inputs.gear),
+            min11: this._calculatorService.getCharge(this.info.sizesFeet.min11, this.inputs.weight, this.inputs.gear),
+        };
+        this.info.state.color = this._calculatorService.getStateColor(this.info.sizesFeet);
+
+        this.chartConfig.lineChartData.datasets[0].data = this.sizesMinValuesFeet;
+        this.chartConfig.lineChartData.datasets[1].data = this.sizesValuesFeet;
+        this.displayCharts = true;
+    }
+
+    public setCurrentWeight(weight: number) {
+        this.inputs.weight = weight;
+        this.refresh();
+    }
+}

src/app/components/canopies/canopies.component.html

@@ -0,0 +1,56 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{title}}</h1>
+            <span [hidden]="!lastJump.numero" class="me-2 fs-6">
+                Dernier saut enregistré : <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: 'dd/MM/yyyy' }}</span>
+            </span>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2">
+            <button mat-icon-button [matMenuTriggerFor]="menuCanopyModel" aria-label="Menu Canopy Model">
+                <mat-icon fontIcon="more_vert"></mat-icon>
+            </button>
+            <mat-menu #menuCanopyModel="matMenu">
+                @for (menuitem of menuItems.getMenuPanel(); track menuitem) {
+                <button mat-menu-item>
+                    <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
+                    <span>{{ menuitem.name }}</span>
+                </button>
+                }
+            </mat-menu>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <mat-card>
+        <mat-card-header>
+            <mat-card-title>{{ subtitle }}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="mt-4">
+            @if (displayCharts) {
+            <div class="row">
+                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
+                    <app-pie-chart [headers]="seriesModelHeader" [names]="seriesModelName" [values]="seriesModelValue" [colors]="seriesColor"></app-pie-chart>
+                </div>
+                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
+                    <app-pie-chart [headers]="seriesSizeHeader" [names]="seriesSizeName" [values]="seriesSizeValue" [colors]="seriesColor"></app-pie-chart>
+                </div>
+                <div class="col-xl-6 col-lg-12 col-md-12">
+                    <!--<app-pie-chart [headers]="seriesSizeHeader" [names]="seriesSizeName" [values]="seriesSizeValue" [colors]="seriesColor"></app-pie-chart>-->
+                    <app-bars-chart [headers]="seriesSizeHeader" [names]="seriesSizeName" [values]="seriesSizeRow" [colors]="seriesColor" [legend]="false"></app-bars-chart>
+                </div>
+            </div>
+            }
+            <div class="row">
+                <div class="col-xl-6 col-lg-12">
+                    <mat-divider class="mt-3 mb-0"></mat-divider>
+                    <app-history-table [headers]="seriesModelHeader" [names]="seriesModelName" [values]="seriesModelValue" [rows]="seriesModelRow" [colors]="seriesColorClass"></app-history-table>
+                </div>
+                <div class="col-xl-6 col-lg-12">
+                    <mat-divider class="mt-3 mb-0"></mat-divider>
+                    <app-history-table [headers]="seriesSizeHeader" [names]="seriesSizeName" [values]="seriesSizeValue" [rows]="seriesSizeRow" [colors]="seriesColorClass"></app-history-table>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</div>

src/app/components/canopies/canopies.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { MenuItems } from '@components/shared';
+import { CanopiesComponent } from './canopies.component';
+
+describe('CanopiesComponent', () => {
+  let component: CanopiesComponent;
+  let fixture: ComponentFixture<CanopiesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CanopiesComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        MenuItems,
+      ],
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CanopiesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/canopies/canopies.component.ts

@@ -0,0 +1,146 @@
+import { DatePipe } from '@angular/common';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { Observable, Subscription } from 'rxjs';
+
+import { MenuItems } from '@components/shared';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { BarsChartComponent, PieChartComponent } from '@components/shared/helpers-chart';
+import { Jump, CanopiesPageData } from '@models';
+import { UtilitiesService } from '@services';
+import { CanopyBySize, CanopyByYear, CanopyModelBySize, CanopyModelByYear } from '@models';
+
+@Component({
+    selector: 'app-canopies',
+    imports: [
+        DatePipe,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+        HistoryTableComponent,
+        BarsChartComponent,
+        PieChartComponent,
+    ],
+    templateUrl: './canopies.component.html',
+    styleUrl: './canopies.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateX(0)' })),
+            transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateX(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class CanopiesComponent implements OnInit, OnDestroy {
+    private route = inject(ActivatedRoute);
+    private _utilitiesService = inject(UtilitiesService);
+    menuItems = inject(MenuItems);
+
+    private _data: Subscription = new Subscription();
+    private _canopiesModelBySize!: Array<CanopyModelBySize>;
+    private _canopiesModelByYear!: Array<CanopyModelByYear>;
+    private _canopiesSizeBySize!: Array<CanopyBySize>;
+    private _canopiesSizeByYear!: Array<CanopyByYear>;
+    public lastJump: Jump = {} as Jump;
+    public title = 'Voiles';
+    public subtitle: string = 'Nombre total de sauts par modèle et taille';
+    public displayCharts = false;
+    public destroyRef = inject(DestroyRef);
+    public seriesModelHeader: string[] = [];
+    public seriesModelName: string[] = [];
+    public seriesModelValue: number[] = [];
+    public seriesModelRow: Array<Array<number>> = [];
+    public seriesSizeHeader: string[] = [];
+    public seriesSizeName: string[] = [];
+    public seriesSizeValue: number[] = [];
+    public seriesSizeRow: Array<Array<number>> = [];
+    public seriesColor: {
+        backgroundColor: string[];
+        borderColor: string[];
+    } = {
+        backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'all'),
+        borderColor: this._utilitiesService.getSeriesColors(1, 'all'),
+    };
+    public seriesColorClass: string[] = this._utilitiesService.getChartColors();
+
+    ngOnInit() {
+        const data$: Observable<{ canopiesPageData: CanopiesPageData }> = this.route.data as Observable<{
+            canopiesPageData: CanopiesPageData;
+        }>;
+        this._data = data$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((data: { canopiesPageData: CanopiesPageData }) => {
+                const pageData: CanopiesPageData = data.canopiesPageData;
+                this.lastJump = pageData.lastjump;
+                this._loadCanopyBySize(pageData);
+                this._loadCanopyModelBySize(pageData);
+            });
+    }
+
+    ngOnDestroy() {
+        this._data.unsubscribe();
+    }
+
+    private _loadCanopyBySize(pageData: CanopiesPageData): void {
+        this._canopiesSizeBySize = pageData.canopiesBySize.map((row: CanopyBySize) => {
+            this.seriesSizeName.push(row.taille.toString());
+            this.seriesSizeValue.push(row.count);
+            return row;
+        });
+        this._loadCanopyByYear(pageData);
+    }
+
+    private _loadCanopyByYear(pageData: CanopiesPageData): void {
+        this.seriesSizeHeader = ['2018', '2019', '2020', '2021', '2022', '2023', '2024'];
+        const values: Array<number> = this.seriesSizeHeader.map(() => 0);
+        this.seriesSizeName.forEach(() => {
+            this.seriesSizeRow.push([...values]);
+        });
+        this._canopiesSizeByYear = pageData.canopiesBySizeByYear.map((row: CanopyByYear) => {
+            const taille: string = row.taille.toString();
+            const year: string = row.year.toString();
+            this.seriesSizeRow[this.seriesSizeName.indexOf(taille)][this.seriesSizeHeader.indexOf(year)] = row.count;
+            return row;
+        });
+    }
+
+    private _loadCanopyModelBySize(pageData: CanopiesPageData): void {
+        this._canopiesModelBySize = pageData.canopiesBySizeByModel.map((row: CanopyModelBySize) => {
+            this.seriesModelName.push(`${row.taille.toString()} - ${row.voile}`);
+            this.seriesModelValue.push(row.count);
+            return row;
+        });
+        this._loadCanopyModelByYear(pageData);
+    }
+
+    private _loadCanopyModelByYear(pageData: CanopiesPageData): void {
+        this.seriesModelHeader = ['2018', '2019', '2020', '2021', '2022', '2023', '2024'];
+        const values: Array<number> = this.seriesModelHeader.map(() => 0);
+        this.seriesModelName.forEach(() => {
+            this.seriesModelRow.push([...values]);
+        });
+        this._canopiesModelByYear = pageData.canopiesBySizeByModelByYear.map((row: CanopyModelByYear) => {
+            const voile: string = row.voile;
+            const taille: string = row.taille.toString();
+            const year: string = row.year.toString();
+            this.seriesModelRow[this.seriesModelName.indexOf(`${taille} - ${voile}`)][
+                this.seriesModelHeader.indexOf(year)
+            ] = row.count;
+            return row;
+        });
+        this.displayCharts = true;
+    }
+}

src/app/components/dashboard/dashboard.component.html

@@ -0,0 +1,36 @@
+<h1 class="mb-1">{{title}}</h1>
+<span [hidden]="!lastJump.numero" class="me-2 fst-italic0 fs-6">
+    Dernier saut enregistré : <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: 'dd/MM/yyyy' }}</span>
+</span>
+<mat-divider class="my-3"></mat-divider>
+<ng-container *appShowAuthed="true">
+    <div class="row">
+        <div class="col-xs-12">
+            <app-jumps-by-month></app-jumps-by-month>
+        </div>
+    </div>
+    <div class="row mt-sm-2 mt-lg-3">
+        <div class="col-md-4 col-sm-12">
+            <app-dropzones-pie></app-dropzones-pie>
+        </div>
+        <div class="col-md-8 col-sm-12">
+            <app-dropzones-bar></app-dropzones-bar>
+        </div>
+    </div>
+    <div class="row mt-sm-2 mt-lg-3">
+        <div class="col-md-4 col-sm-12">
+            <app-aeronefs-pie></app-aeronefs-pie>
+        </div>
+        <div class="col-md-8 col-sm-12">
+            <app-aeronefs-bar></app-aeronefs-bar>
+        </div>
+    </div>
+    <div class="row mt-sm-2 mt-lg-3">
+        <div class="col-md-6 col-sm-12">
+            <app-canopies-models></app-canopies-models>
+        </div>
+        <div class="col-md-6 col-sm-12">
+            <app-canopies-sizes></app-canopies-sizes>
+        </div>
+    </div>
+</ng-container>

src/app/components/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DashboardComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+      ],
+    });
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/dashboard/dashboard.component.ts

@@ -0,0 +1,158 @@
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { Title } from '@angular/platform-browser';
+import { MatDividerModule } from '@angular/material/divider';
+import { ActivatedRoute, Data, Router } from '@angular/router';
+
+import { Observable, Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import {
+    Aeronef,
+    AeronefByImat,
+    Canopy,
+    CanopyModelBySize,
+    DropZone,
+    DropZoneByYear,
+    Errors,
+    Jump,
+    User,
+} from '@models';
+//import { AeronefsService, CanopiesService, DropZonesService, UserService } from '@services';
+import { JumpsService, UserService } from '@services';
+import { ShowAuthedDirective } from '@components/shared/show-authed.directive';
+import {
+    AeronefsPieComponent,
+    AeronefsBarComponent,
+    CanopiesModelsComponent,
+    CanopiesSizesComponent,
+    DropzonesPieComponent,
+    DropzonesBarComponent,
+    JumpsByMonthComponent,
+} from '@components/shared/dashboard-components';
+
+@Component({
+    imports: [
+        DatePipe,
+        ShowAuthedDirective,
+        MatDividerModule,
+        AeronefsPieComponent,
+        AeronefsBarComponent,
+        CanopiesModelsComponent,
+        CanopiesSizesComponent,
+        DropzonesPieComponent,
+        DropzonesBarComponent,
+        JumpsByMonthComponent,
+    ],
+    selector: 'app-dashboard',
+    templateUrl: './dashboard.component.html',
+    styleUrl: './dashboard.component.scss',
+})
+export class DashboardComponent implements OnInit, OnDestroy {
+    private route = inject(ActivatedRoute);
+    private router = inject(Router);
+    private titleService = inject(Title);
+    private _userService = inject(UserService);
+    private _jumpsService = inject(JumpsService);
+
+    private _currentUser: Subscription = new Subscription();
+    private _data: Subscription = new Subscription();
+    private _lastjump: Subscription = new Subscription();
+    private _lastjump$: Observable<Jump> = new Observable();
+    /*
+    private _aeronefs: Subscription = new Subscription();
+    private _canopies: Subscription = new Subscription();
+    private _dropzones: Subscription = new Subscription();
+    */
+    public title = 'Dashboard';
+    public errors!: Errors;
+    public isAuthenticated = false;
+    public canModify = false;
+    public aeronefAggregate!: Array<AeronefByImat>;
+    public aeronefs!: Array<Aeronef>;
+    public aeronefsCount = 0;
+    public canopyAggregate!: Array<CanopyModelBySize>;
+    public canopies!: Array<Canopy>;
+    public canopiesCount = 0;
+    public dropzoneAggregate!: Array<DropZoneByYear>;
+    public dropzones!: Array<DropZone>;
+    public dropzonesCount = 0;
+    public lastJump: Jump = {} as Jump;
+
+    constructor() {
+        this._resetErrors();
+    }
+
+    ngOnInit() {
+        this.titleService.setTitle(this.title);
+        const data$: Observable<Data> = this.route.data.pipe(take(1));
+        this._data = data$.subscribe((data: Data) => {
+            this.isAuthenticated = data['isAuthenticated'];
+            if (!this.isAuthenticated) {
+                this.router.navigateByUrl('/login');
+                return;
+            }
+            const currentUser$: Observable<User> = this._userService.currentUser;
+            this._currentUser = currentUser$.subscribe((userData: User) => {
+                this.canModify = userData.role === 'Admin';
+            });
+
+            this._lastjump$ = this._jumpsService.getLastJump();
+            this._lastjump = this._lastjump$.subscribe((jump) => {
+                this.lastJump = jump;
+            });
+        });
+        /*
+        this._loadAeronefs();
+        this._loadCanopies();
+        this._loadDropzones();
+        */
+    }
+
+    ngOnDestroy() {
+        this._currentUser.unsubscribe();
+        this._data.unsubscribe();
+        this._lastjump.unsubscribe();
+        /*
+        this._aeronefs.unsubscribe();
+        this._canopies.unsubscribe();
+        this._dropzones.unsubscribe();
+        */
+    }
+
+    private _resetErrors(): void {
+        this.errors = { errors: {} };
+    }
+
+    /*
+    private _loadAeronefs(): void {
+        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.aeronefAggregate);
+            console.log(this.aeronefsCount);
+        });
+    }
+
+    private _loadCanopies(): void {
+        const canopies$: Observable<Array<CanopyModelBySize>> = this.canopiesService.getAllModelBySize();
+        this._canopies = canopies$.subscribe((aggregate: Array<CanopyModelBySize>) => {
+            this.canopyAggregate = aggregate;
+            this.canopiesCount = aggregate.length;
+            console.log(this.canopyAggregate);
+            console.log(this.canopiesCount);
+        });
+    }
+
+    private _loadDropzones(): void {
+        const dropzones$: Observable<Array<DropZoneByYear>> = this.dropzonesService.getAllByDate();
+        this._dropzones = dropzones$.subscribe((aggregate: Array<DropZoneByYear>) => {
+            this.dropzoneAggregate = aggregate;
+            this.dropzonesCount = aggregate.length;
+            console.log(this.dropzoneAggregate);
+            console.log(this.dropzonesCount);
+        });
+    }
+    */
+}

src/app/components/demo/demo.component.html

@@ -0,0 +1,295 @@
+<div class="banner mat-elevation-z2">
+    <div class="banner-content d-flex text-bg-accent bg-opacity-50">
+        <img [src]="user.image" class="user-img me-3" [alt]="user.username" />
+        <div class="flex-spacer">
+            <h3 class="mb-0">{{bannerTitle}}</h3>
+            <span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
+        </div>
+        <div class="align-self-center text-end">
+            <button mat-raised-button color="warn" routerLink="/settings">
+                <mat-icon aria-label="Modifier le compte" fontIcon="settings"></mat-icon> {{ btnSettingsTitle }}
+            </button>
+        </div>
+    </div>
+</div>
+<div class="demo-page">
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{title}}</h1>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2 text-end"></div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <app-list-errors [errors]="errors"></app-list-errors>
+</div>
+<div class="content mt-3">
+    <mat-card>
+        <mat-card-header class="d-flex text-bg-primary rounded-top py-2 px-3">
+            <div class="flex-fill">
+                <mat-card-title>
+                    Buttons variants
+                </mat-card-title>
+                <mat-card-subtitle class="fw-normal text-white">
+                    {{ getColors().length }} colors
+                </mat-card-subtitle>
+            </div>
+            <span class="flex-spacer"></span>
+            <div class="align-self-center">
+                <button mat-icon-button>
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+            </div>
+        </mat-card-header>
+        <mat-card-content>
+            <section class="mt-4">
+                <div class="mb-2">Links</div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color) {
+                        <div class="m-2">
+                            <a href="#" class="text-{{ color }}">{{ color }}</a>
+                        </div>
+                    }
+                </div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color) {
+                        <div class="m-2">
+                            <span class="text-{{ color }}">{{ color }}</span>
+                        </div>
+                    }
+                </div>
+            </section>
+            <mat-divider class="my-4"></mat-divider>
+            <section>
+                <div class="mb-2">Normal</div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color) {
+                        <div class="m-2">
+                            <button mat-button class="text-nowrap" [color]="color">{{ color }}</button>
+                        </div>
+                    }
+                    <div class="m-2">
+                        <button mat-button>Basic</button>
+                    </div>
+                    <div class="m-2">
+                        <button mat-button disabled>Disabled</button>
+                    </div>
+                    <div class="m-2">
+                        <a mat-button href="https://www.google.com/" target="_blank">&lt;a Link</a>
+                    </div>
+                </div>
+            </section>
+            <mat-divider class="my-4"></mat-divider>
+            <section>
+                <div class="mb-2">Stroked</div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color) {
+                        <div class="m-2">
+                            <button mat-stroked-button class="text-nowrap" [color]="color">{{ color }}</button>
+                        </div>
+                    }
+                    <div class="m-2">
+                        <button mat-stroked-button>Basic</button>
+                    </div>
+                    <div class="m-2">
+                        <button mat-stroked-button disabled>Disabled</button>
+                    </div>
+                    <div class="m-2">
+                        <a mat-stroked-button href="https://www.google.com/" target="_blank">&lt;a Link</a>
+                    </div>
+                </div>
+            </section>
+            <mat-divider class="my-4"></mat-divider>
+            <section>
+                <div class="mb-2">Flat</div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color) {
+                        <div class="m-2">
+                            <button mat-flat-button class="text-nowrap" [color]="color">{{ color }}</button>
+                        </div>
+                    }
+                    <div class="m-2">
+                        <button mat-flat-button>Basic</button>
+                    </div>
+                    <div class="m-2">
+                        <button mat-flat-button disabled>Disabled</button>
+                    </div>
+                    <div class="m-2">
+                        <a mat-flat-button href="https://www.google.com/" target="_blank">&lt;a Link</a>
+                    </div>
+                </div>
+            </section>
+            <mat-divider class="my-4"></mat-divider>
+            <section>
+                <div class="mb-2">Raised</div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color) {
+                        <div class="m-2">
+                            <button mat-raised-button class="text-nowrap" [color]="color">{{ color }}</button>
+                        </div>
+                    }
+                    <div class="m-2">
+                        <button mat-raised-button>Basic</button>
+                    </div>
+                    <div class="m-2">
+                        <button mat-raised-button disabled>Disabled</button>
+                    </div>
+                    <div class="m-2">
+                        <a mat-raised-button href="https://www.google.com/" target="_blank">&lt;a Link</a>
+                    </div>
+                </div>
+            </section>
+            <mat-divider class="my-4"></mat-divider>
+            <section>
+                <div class="mb-2">FAB</div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color; let index = $index) {
+                        <div class="m-2">
+                            <button mat-fab [color]="color" aria-label="Example icon button with an icon">
+                                <mat-icon>{{ getIcon(index) }}</mat-icon>
+                            </button>
+                        </div>
+                    }
+                    <div class="m-2">
+                        <button mat-fab color="white" aria-label="Example icon button with a vertical three dot icon">
+                            <mat-icon>more_vert</mat-icon>
+                        </button>
+                    </div>
+                    <div class="m-2">
+                        <button mat-fab disabled aria-label="Example icon button with a block icon">
+                            <mat-icon>block</mat-icon>
+                        </button>
+                    </div>
+                </div>
+            </section>
+            <mat-divider class="my-4"></mat-divider>
+            <section>
+                <div class="mb-2">FAB extended</div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color; let index = $index) {
+                        <div class="m-2">
+                            <button mat-fab extended [color]="color" aria-label="Example icon button with an icon">
+                                <mat-icon>{{ getIcon(index) }}</mat-icon>
+                                {{ color }}
+                            </button>
+                        </div>
+                    }
+                    <div class="m-2">
+                        <button mat-fab extended color="white" aria-label="Example icon button with a vertical three dot icon">
+                            <mat-icon>more_vert</mat-icon>
+                            white
+                        </button>
+                    </div>
+                    <div class="m-2">
+                        <button mat-fab extended disabled aria-label="Example icon button with a block icon">
+                            <mat-icon>block</mat-icon>
+                            disabled
+                        </button>
+                    </div>
+                </div>
+            </section>
+            <mat-divider class="my-4"></mat-divider>
+            <section>
+                <div class="mb-2">Mini FAB</div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color; let index = $index) {
+                        <div class="m-2">
+                            <button mat-mini-fab [color]="color" aria-label="Example icon button with an icon">
+                                <mat-icon>{{ getIcon(index) }}</mat-icon>
+                            </button>
+                        </div>
+                    }
+                    <div class="m-2">
+                        <button mat-mini-fab color="white" aria-label="Example icon button with a vertical three dot icon">
+                            <mat-icon>more_vert</mat-icon>
+                        </button>
+                    </div>
+                    <div class="m-2">
+                        <button mat-mini-fab disabled aria-label="Example icon button with a block icon">
+                            <mat-icon>block</mat-icon>
+                        </button>
+                    </div>
+                </div>
+            </section>
+            <mat-divider class="my-4"></mat-divider>
+            <section>
+                <div class="mb-2">Icon</div>
+                <div class="d-flex flex-wrap align-items-start">
+                    @for (color of getColors(); track color; let index = $index) {
+                        <div class="m-2">
+                            <button mat-icon-button [color]="color" aria-label="Example icon button with an icon">
+                                <mat-icon>{{ getIcon(index) }}</mat-icon>
+                            </button>
+                        </div>
+                    }
+                    <div class="m-2">
+                        <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
+                            <mat-icon>more_vert</mat-icon>
+                        </button>
+                    </div>
+                    <div class="m-2">
+                        <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
+                            <mat-icon>open_in_new</mat-icon>
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </mat-card-content>
+    </mat-card>
+</div>
+<mat-divider class="my-4"></mat-divider>
+<div cdkDropList class="row mb-3" (cdkDropListDropped)="drop($event)">
+    @for (color of getColors(); track color) {
+        <div class="col-xs-12 col-lg-6 col-xxl-4 pb-3" cdkDrag>
+            <div class="card-custom-placeholder col-xs-12 col-lg-6 col-xxl-4 pb-3" *cdkDragPlaceholder></div>
+            <mat-card>
+                <mat-card-header class="d-flex text-bg-{{ color }} rounded-top py-2 px-3">
+                    <div class="flex-fill">
+                        <mat-card-title>
+                            {{ color }}
+                        </mat-card-title>
+                        <mat-card-subtitle class="fw-normal">
+                            Card subtitle
+                        </mat-card-subtitle>
+                    </div>
+                    <span class="flex-spacer"></span>
+                    <div class="align-self-center">
+                        <button mat-icon-button>
+                            <mat-icon>more_vert</mat-icon>
+                        </button>
+                    </div>
+                </mat-card-header>
+                <mat-card-content>
+                    <section class="mt-4 mb-3">
+                        <div class="d-flex flex-wrap align-items-start">
+                            <button mat-raised-button [color]="color" class="m-2 align-self-center">Texte Raised</button>
+                            <button mat-flat-button [color]="color" class="m-2 align-self-center">Texte Flat</button>
+                            <button mat-stroked-button [color]="color" class="m-2 align-self-center">Texte Stroked</button>
+                            <button mat-button [color]="color" class="m-2 align-self-center">{{ color }}</button>
+                        </div>
+                        <div class="d-flex flex-wrap align-items-start mb-3">
+                            <button mat-fab extended [color]="color" class="m-2 align-self-center">
+                                <mat-icon>check_circle</mat-icon>
+                                {{ color }}
+                            </button>
+                            <button mat-fab [color]="color" class="m-2 align-self-center">
+                                <mat-icon>check_circle</mat-icon>
+                            </button>
+                            <button mat-mini-fab [color]="color" class="m-2 align-self-center">
+                                <mat-icon>check_circle</mat-icon>
+                            </button>
+                            <button mat-icon-button [color]="color" class="m-2 align-self-center">
+                                <mat-icon>check_circle</mat-icon>
+                            </button>
+                        </div>
+                        <mat-progress-bar [color]="color" mode="determinate" value="40"></mat-progress-bar>
+                        <mat-slider class="w-100" min="0" max="1000">
+                            <input value="300" matSliderStartThumb>
+                            <input value="600" matSliderEndThumb>
+                        </mat-slider>
+                    </section>
+                </mat-card-content>
+            </mat-card>
+        </div>
+    }
+</div>

src/app/components/demo/demo.component.scss

@@ -0,0 +1,58 @@
+/* Demo */
+@use 'variable' as var;
+
+.mat-mdc-card + .mat-mdc-card {
+    margin-top: 10px;
+}
+
+.card-list {
+    width: 500px;
+    max-width: 100%;
+    border: solid 1px #ccc;
+    min-height: 60px;
+    display: block;
+    background: var.$white;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.card-box {
+    padding: 20px 10px;
+    border-bottom: solid 1px #ccc;
+    color: rgba(0, 0, 0, 0.87);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    cursor: move;
+    background: var.$white;
+    font-size: 14px;
+}
+
+.cdk-drag-preview {
+    border: none;
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.card-box:last-child {
+    border: none;
+}
+
+.card-list.cdk-drop-list-dragging .card-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.card-custom-placeholder {
+    background: #ccc;
+    border: dotted 3px #999;
+    min-height: 60px;
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/app/components/demo/demo.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+
+import { DemoComponent } from './demo.component';
+
+describe('DemoComponent', () => {
+  let component: DemoComponent;
+  let fixture: ComponentFixture<DemoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DemoComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+      ],
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/demo/demo.component.ts

@@ -0,0 +1,135 @@
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { CdkDragDrop, CdkDropList, CdkDrag, CdkDragPlaceholder, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Title } from '@angular/platform-browser';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSliderModule } from '@angular/material/slider';
+
+import { Subscription } from 'rxjs';
+
+import { Errors, User } from '@models';
+import { UserService } from '@services';
+import { ListErrorsComponent } from '@components/shared';
+
+@Component({
+    selector: 'app-demo',
+    imports: [
+        CdkDropList,
+        CdkDrag,
+        CdkDragPlaceholder,
+        RouterLink,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatIconModule,
+        MatProgressBarModule,
+        MatSliderModule,
+        ListErrorsComponent,
+    ],
+    templateUrl: './demo.component.html',
+    styleUrl: './demo.component.scss',
+})
+export class DemoComponent implements OnInit, OnDestroy {
+    private titleService = inject(Title);
+    private userService = inject(UserService);
+
+    private _user: Subscription = new Subscription();
+    private _colors: string[] = [
+        'primary',
+        'accent',
+        'warn',
+        'secondary',
+        'megna',
+        'raspberry',
+        'success',
+        'info',
+        'warning',
+        'danger',
+        'red',
+        'orange',
+        'yellow',
+        'green',
+        'teal',
+        'turquoise',
+        'cyan',
+        'blue',
+        'navy',
+        'navy-light',
+        'pink',
+        'magenta',
+        'purple',
+        'purple-light',
+        'grey',
+        'muted',
+    ];
+    private _icons: string[] = [
+        'mode_edit',
+        'delete',
+        'bookmark',
+        'settings',
+        'home',
+        'person',
+        'share',
+        'account_circle',
+        'public',
+        'search',
+        'favorite',
+        'done',
+        'numbers',
+        'attach_file',
+        'insert_comment',
+        'format_list_bulleted',
+        'filter',
+        'crop',
+        'edit_attributes',
+        'upload',
+        'download',
+        'expand_less',
+        'expand_more',
+        'chevron_left',
+        'chevron_right',
+        'sync',
+        'power',
+        'power_off',
+        'notifications',
+        'emoji_emotions',
+        'person_add',
+        'block',
+    ];
+
+    title = 'Demo';
+    bannerTitle = '';
+    user: Partial<User> = {} as Partial<User>;
+    errors: Errors = { errors: {} };
+    btnSettingsTitle = 'Paramètres';
+
+    ngOnInit() {
+        this.titleService.setTitle(`Ad Astra - ${this.title}`);
+        Object.assign(this.user, this.userService.getCurrentUser());
+        if (this.user.username) {
+            this.bannerTitle = `@${this.user.username}`;
+        } else {
+            this.bannerTitle = `${this.user.firstname} ${this.user.lastname}`;
+        }
+    }
+
+    ngOnDestroy() {
+        this._user.unsubscribe();
+    }
+
+    getColors(): string[] {
+        return this._colors;
+    }
+
+    getIcon(index: number): string {
+        return this._icons[index];
+    }
+
+    drop(event: CdkDragDrop<string[]>) {
+        moveItemInArray(this._colors, event.previousIndex, event.currentIndex);
+    }
+}

src/app/components/dropzones/dropzones.component.html

@@ -0,0 +1,68 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{title}}</h1>
+            <span [hidden]="!lastJump.numero" class="me-2 fs-6">
+                Dernier saut enregistré : <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: 'dd/MM/yyyy' }}</span>
+            </span>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2">
+            <button mat-icon-button [matMenuTriggerFor]="menuDropzone" aria-label="Menu Dropzone">
+                <mat-icon fontIcon="more_vert"></mat-icon>
+            </button>
+            <mat-menu #menuDropzone="matMenu">
+                @for (menuitem of menuItems.getMenuPanel(); track menuitem) {
+                <button mat-menu-item>
+                    <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
+                    <span>{{ menuitem.name }}</span>
+                </button>
+                }
+            </mat-menu>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <mat-card>
+        <mat-card-header>
+            <mat-card-title>{{ subtitle }}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="mt-4">
+            @if (displayCharts) {
+            <div class="row">
+                <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12">
+                    <app-pie-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [colors]="seriesColor"></app-pie-chart>
+                </div>
+                <div class="col-xl-8 col-lg-7 col-md-6 col-sm-12">
+                    <app-bars-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesRow" [colors]="seriesColor" [legend]="false"></app-bars-chart>
+                    <!--
+                    @if (displayCharts) {
+                    <div class="barchart position-relative w-100 my-1">
+                        <x-chartist [configuration]="chartBarConfig"></x-chartist>
+                    </div>
+                    }
+                    -->
+                </div>
+            </div>
+            }
+            <div class="d-flex">
+                <div class="flex-fill py-2">
+                    <mat-divider class="mt-3 mb-0"></mat-divider>
+                    <app-history-table [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [rows]="seriesRow" [colors]="seriesColorClass"></app-history-table>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-divider class="my-3"></mat-divider>
+    <mat-card>
+        <mat-card-header>
+            <mat-card-title>Carte des DZ</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="mt-4">
+            <div class="ratio ratio-21x9">
+                <google-map height="100%" width="100%" [center]="center" [zoom]="zoom" [options]="options">
+                    <map-kml-layer [url]="kmlUrl" />
+                </google-map>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</div>

src/app/components/dropzones/dropzones.component.spec.ts

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { GoogleMap, MapKmlLayer } from '@angular/google-maps';
+
+import { MenuItems } from '@components/shared';
+import { DropzonesComponent } from './dropzones.component';
+
+describe('DropzonesComponent', () => {
+  let component: DropzonesComponent;
+  let fixture: ComponentFixture<DropzonesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropzonesComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        MenuItems,
+      ],
+    })
+    .overrideComponent(DropzonesComponent, {
+      remove: { imports: [GoogleMap, MapKmlLayer] },
+      add: { schemas: [CUSTOM_ELEMENTS_SCHEMA] },
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DropzonesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/dropzones/dropzones.component.ts

@@ -0,0 +1,182 @@
+import { DatePipe } from '@angular/common';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { GoogleMap, MapKmlLayer } from '@angular/google-maps';
+import { ActivatedRoute } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+//import { ChartistModule, Configuration } from 'ng-chartist';
+//import { AxisOptions, Label } from 'chartist';
+import { Observable, Subscription } from 'rxjs';
+
+import { MenuItems } from '@components/shared';
+import { BarsChartComponent, PieChartComponent } from '@components/shared/helpers-chart';
+import { HistoryTableComponent } from '@components/shared/helpers-jump';
+import { DropZoneByOaci, DropZoneByYear, DropZonesPageData, Jump } from '@models';
+import { UtilitiesService } from '@services';
+
+@Component({
+    selector: 'app-dropzones',
+    imports: [
+        DatePipe,
+        GoogleMap,
+        MapKmlLayer,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatExpansionModule,
+        MatGridListModule,
+        MatIconModule,
+        MatMenuModule,
+        //ChartistModule,
+        HistoryTableComponent,
+        BarsChartComponent,
+        PieChartComponent,
+    ],
+    templateUrl: './dropzones.component.html',
+    styleUrl: './dropzones.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateX(0)' })),
+            transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateX(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class DropzonesComponent implements OnInit, OnDestroy {
+    private route = inject(ActivatedRoute);
+    private _utilitiesService = inject(UtilitiesService);
+    menuItems = inject(MenuItems);
+
+    private _data: Subscription = new Subscription();
+    private _lastjump: Subscription = new Subscription();
+    private _dropzonesByOaci!: Array<DropZoneByOaci>;
+    private _dropzonesByYear!: Array<DropZoneByYear>;
+    public lastJump: Jump = {} as Jump;
+    public title = 'Drop zones';
+    public subtitle: string = 'Nombre total de sauts par drop zone';
+    public displayCharts = false;
+    public destroyRef = inject(DestroyRef);
+    public seriesHeader: string[] = [];
+    public seriesName: string[] = [];
+    public seriesValue: number[] = [];
+    public seriesRow: Array<Array<number>> = [];
+    public seriesColor: {
+        backgroundColor: string[];
+        borderColor: string[];
+    } = {
+        backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'all'),
+        borderColor: this._utilitiesService.getSeriesColors(1, 'all'),
+    };
+    public seriesColorClass: string[] = this._utilitiesService.getChartColors();
+    //public chartBarConfig: Configuration = this._utilitiesService.getBarConfig();
+
+    public center: google.maps.LatLngLiteral = { lat: 44.596408, lng: -1.115958 };
+    public zoom = 16;
+    public kmlUrl = 'https://rampeur.com/assets/kmls/dropzones.kml?v=6';
+    //public mapTypeId: google.maps.MapTypeId = google.maps.MapTypeId.SATELLITE;
+    public options: google.maps.MapOptions = {
+        //zoomControl: false,
+        //scrollwheel: false,
+        //mapTypeId: google.maps.MapTypeId.SATELLITE,
+        mapTypeId: 'satellite',
+        disableDoubleClickZoom: true,
+        maxZoom: 20,
+        minZoom: 3,
+    };
+
+    ngOnInit() {
+        const data$: Observable<{ dropZonesPageData: DropZonesPageData }> = this.route.data as Observable<{
+            dropZonesPageData: DropZonesPageData;
+        }>;
+        this._data = data$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((data: { dropZonesPageData: DropZonesPageData }) => {
+                const pageData: DropZonesPageData = data.dropZonesPageData;
+                this.lastJump = pageData.lastjump;
+                this._loadDropZoneByOaci(pageData);
+            });
+    }
+
+    ngOnDestroy() {
+        this._data.unsubscribe();
+    }
+
+    private _loadDropZoneByOaci(pageData: DropZonesPageData): void {
+        this._dropzonesByOaci = pageData.dropZonesByOaci.map((row: DropZoneByOaci) => {
+            this.seriesName.push(`${row.oaci} - ${row.lieu}`);
+            this.seriesValue.push(row.count);
+            return row;
+        });
+        this._loadDropZoneByYear(pageData);
+    }
+
+    private _loadDropZoneByYear(pageData: DropZonesPageData): void {
+        this.seriesHeader = ['2018', '2019', '2020', '2021', '2022', '2023', '2024'];
+        const values: Array<number> = this.seriesHeader.map(() => 0);
+        this.seriesName.forEach(() => {
+            this.seriesRow.push([...values]);
+        });
+        this._dropzonesByYear = pageData.dropZonesByOaciByYear.map((row: DropZoneByYear) => {
+            const lieu: string = row.lieu;
+            const oaci: string = row.oaci;
+            const year: string = row.year.toString();
+            this.seriesRow[this.seriesName.indexOf(`${oaci} - ${lieu}`)][this.seriesHeader.indexOf(year)] = row.count;
+            return row;
+        });
+        /*
+        const axisX: AxisOptions = {
+            labelInterpolationFnc: function(value: Label, index: number): string {
+                return index % 1 === 0 ? `${value.toString()}` : '';
+            }
+        }
+        this.chartBarConfig = {
+            type: 'Bar',
+            data: {
+                'labels': this.seriesHeader,
+                'series': this.seriesRow
+            },
+            options: {
+                seriesBarDistance: 15,
+                horizontalBars: false,
+                high: 180,
+                axisX: {
+                    showGrid: false,
+                    offset: 20
+                },
+                axisY: {
+                    showGrid: true,
+                    offset: 40
+                },
+                height: 300
+            },
+            responsiveOptions: [
+                ['screen and (min-width: 1024px)', {
+                    axisX: axisX
+                }],
+                ['screen and (min-width: 641px) and (max-width: 1024px)', {
+                    seriesBarDistance: 7,
+                    axisY: {
+                        offset: 30
+                    },
+                    axisX: axisX
+                }],
+                ['screen and (max-width: 640px)', {
+                    seriesBarDistance: 5,
+                    axisY: {
+                        offset: 20
+                    },
+                    axisX: axisX
+                }]
+            ]
+        };
+        */
+        this.displayCharts = true;
+    }
+}

src/app/components/herowars-guildraid/herowars-guildraid.component.html

@@ -0,0 +1,114 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{title}}</h1>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2 text-end">
+            <span class="fs-5 text-primary">{{ now | date: 'dd/MM/yyyy' }}</span>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <app-list-errors [errors]="errors"></app-list-errors>
+    <div class="d-flex">
+        <p class="fs-3">{{description}}</p>
+    </div>
+    <mat-divider class="mt-2 mb-3"></mat-divider>
+    <mat-card class="my-3">
+        <mat-card-header class="d-flex rounded-top bg-navy-light text-bg-navy-light py-2 px-3">
+            <div class="flex-fill">
+                <mat-card-title>
+                    {{ title }}
+                </mat-card-title>
+            </div>
+            <span class="flex-spacer"></span>
+            <div class="align-self-center text-end">
+                <span class="fs-5 font-light">{{ subtitle }}</span>
+            </div>
+        </mat-card-header>
+        <mat-card-content class="table-responsive p-0">
+            <mat-stepper headerPosition="top" #stepper>
+                <mat-step state="timeline">
+                    <ng-template matStepLabel>Stage 1</ng-template>
+                    <div class="d-flex mt-3">
+                        <div class="flex-fill">
+                            <h2 class="mb-1">Stage 1</h2>
+                        </div>
+                        <span class="flex-spacer"></span>
+                        <div class="align-self-center me-2 text-end">
+                            <h4 class="mb-1">Power limit: 320k</h4>
+                        </div>
+                    </div>
+
+                    <div class="border-top border-light pt-2">
+                        <button mat-button matStepperPrevious>Back</button>
+                        <button mat-button matStepperNext>Next</button>
+                    </div>
+                </mat-step>
+                <mat-step state="timeline">
+                    <ng-template matStepLabel>Stage 2</ng-template>
+                    <div class="d-flex mt-3">
+                        <div class="flex-fill">
+                            <h2 class="mb-1">Stage 2</h2>
+                        </div>
+                        <span class="flex-spacer"></span>
+                        <div class="align-self-center me-2 text-end">
+                            <h4 class="mb-1">Power limit: 500k</h4>
+                        </div>
+                    </div>
+
+                    <div class="border-top border-light pt-2">
+                        <button mat-button matStepperPrevious>Back</button>
+                        <button mat-button matStepperNext>Next</button>
+                    </div>
+                </mat-step>
+                <mat-step state="timeline">
+                    <ng-template matStepLabel>Stage 3</ng-template>
+                    <div class="d-flex mt-3">
+                        <div class="flex-fill">
+                            <h2 class="mb-1">Stage 3</h2>
+                        </div>
+                        <span class="flex-spacer"></span>
+                        <div class="align-self-center me-2 text-end">
+                            <h4 class="mb-1">No power limit</h4>
+                        </div>
+                    </div>
+
+                    <div class="border-top border-light pt-2">
+                        <button mat-button matStepperPrevious>Back</button>
+                        <button mat-button matStepperNext>Next</button>
+                    </div>
+                </mat-step>
+                <mat-step state="search">
+                    <ng-template matStepLabel>Statistics</ng-template>
+                    <div class="d-flex mt-3">
+                        <div class="flex-fill">
+                            <h2 class="mb-1">Statistics</h2>
+                        </div>
+                        <span class="flex-spacer"></span>
+                        <div class="align-self-center me-2 text-end">
+                            <h4 class="mb-1">variation ≥ {{ minVarPct }}%</h4>
+                            <mat-form-field appearance="outline">
+                                <mat-label>Variation</mat-label>
+                                <input matInput [(ngModel)]="minVarPct" type="number" min="{{ minValue }}">
+                                <mat-icon matSuffix>percent</mat-icon>
+                                <mat-hint>excess power in %</mat-hint>
+                            </mat-form-field>
+                        </div>
+                    </div>
+
+                    <div class="border-top border-light pt-2">
+                        <button mat-button matStepperPrevious>Back</button>
+                        <button mat-button (click)="stepper.reset()">Reset</button>
+                    </div>
+                </mat-step>
+                <ng-template matStepperIcon="timeline">
+                    <mat-icon>timeline</mat-icon>
+                </ng-template>
+                <ng-template matStepperIcon="search">
+                    <mat-icon>manage_search</mat-icon>
+                </ng-template>
+            </mat-stepper>
+        </mat-card-content>
+    </mat-card>
+</div>

src/app/components/herowars-guildraid/herowars-guildraid.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { HerowarsGuildraidComponent } from './herowars-guildraid.component';
+
+describe('HerowarsGuildraidComponent', () => {
+  let component: HerowarsGuildraidComponent;
+  let fixture: ComponentFixture<HerowarsGuildraidComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HerowarsGuildraidComponent],
+      providers: [
+        provideAnimations(),
+      ],
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HerowarsGuildraidComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/herowars-guildraid/herowars-guildraid.component.ts

@@ -0,0 +1,89 @@
+import { DatePipe } from '@angular/common';
+import { Title } from '@angular/platform-browser';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, DestroyRef, Injectable, inject, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+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 { MatStepperIntl, MatStepperModule } from '@angular/material/stepper';
+
+import { ListErrorsComponent } from '@components/shared';
+import { Errors } from '@models';
+import { HWGuildRaid, HWGuildRaidStage, HWMember } from '@models/herowars';
+
+@Injectable()
+export class GuildRaidStepperIntl extends MatStepperIntl {
+    // the default optional label text, if unspecified is "Optional"
+    override optionalLabel = 'Optional Label';
+}
+@Component({
+    selector: 'app-herowars-guildraid',
+    providers: [
+        {
+            provide: STEPPER_GLOBAL_OPTIONS,
+            useValue: { displayDefaultIndicatorType: false },
+        },
+    ],
+    imports: [
+        DatePipe,
+        FormsModule,
+        ListErrorsComponent,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatStepperModule,
+    ],
+    templateUrl: './herowars-guildraid.component.html',
+    styleUrl: './herowars-guildraid.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [style({ transform: 'translateY(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateY(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class HerowarsGuildraidComponent implements OnInit {
+    private _titleService = inject(Title);
+
+    public title = 'Guild Raids';
+    public subtitle = 'Log';
+    public description = 'Tools in working progress.';
+    public errors: Errors = { errors: {} };
+    public destroyRef = inject(DestroyRef);
+    public minVarPct = 3;
+    public minValue = 0;
+    public now = new Date();
+    private _guildMembers: HWMember[] = [];
+    private _matStepperIntl = inject(MatStepperIntl);
+    private _guildRaids: HWGuildRaid[] = [];
+    private _raidStages: HWGuildRaidStage[] = [
+        { num: 1, name: 'Stage 1', maxPower: 320000, duration: 8, startTime: 0, endTime: 0 },
+        { num: 2, name: 'Stage 2', maxPower: 500000, duration: 8, startTime: 0, endTime: 0 },
+        { num: 3, name: 'Stage 3', maxPower: 0, duration: 0, startTime: 0, endTime: 0 },
+    ];
+
+    ngOnInit() {
+        this._titleService.setTitle(this.title);
+        this._guildMembers.map((data) => {
+            data.raids = [];
+            data.raidsInfo = {
+                variationAvg: 0,
+                variationSum: 0,
+            };
+            return data;
+        });
+    }
+
+    getMembers(): HWMember[] {
+        return this._guildMembers;
+    }
+}

src/app/components/herowars-guildwar/herowars-guildwar.component.html

@@ -0,0 +1,215 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{title}}</h1>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2 text-end">
+            <span class="fs-5 text-primary">{{ now | date: 'dd/MM/yyyy' }}</span>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <app-list-errors [errors]="errors"></app-list-errors>
+    <div class="d-flex">
+        <p class="fs-3">{{description}}</p>
+    </div>
+    <mat-divider class="mt-2 mb-3"></mat-divider>
+
+    <mat-tab-group [selectedIndex]="0" color="primary">
+        <mat-tab label="Guild">
+            <div class="row g-0">
+                <div class="col-12 pe-md-2 border-1 border-top">
+                    <!--<app-guildwar-attack [members]="getMembers()"></app-guildwar-attack>-->
+                    @if (clanLoaded) {
+                        <app-card-container [colors]="getColors('raspberry')" [title]="getClanViewModel().getTitle()" subtitle="Members: {{ getClanViewModel().getMembersCount() }}/{{ maxClanMembers }}">
+                            <!--<app-guildwar-defence [members]="getMembers()" type="heroes"></app-guildwar-defence>-->
+                            <div class="d-flex mt-3">
+                                <div class="flex-fill">
+                                    <h2>
+                                        <span class="border-1 border-bottom">{{ getClanViewModel().getTitle() }} <span class="fs-4"> – Server {{ getClanViewModel().getServer() }}</span></span>
+                                    </h2>
+                                </div>
+                                <span class="flex-spacer"></span>
+                                <div class="align-self-center me-2 text-end">
+                                    <span class="fs-4">Members: {{ getClanViewModel().getMembersCount() }}/{{ maxClanMembers }}</span>
+                                </div>
+                            </div>
+                            <div class="row g-0 my-3">
+                                <div class="col-2">
+                                    <div class="d-flex align-items-start flex-column me-1" role="group" aria-label="Vertical button group">
+                                        <button mat-stroked-button color="warn" (click)="syncClan()" [disabled]="!clanLoaded" class="mb-1">Sync clan</button>
+                                        <button mat-stroked-button color="warn" (click)="syncMembers()" [disabled]="!membersLoaded" class="mb-1">Sync members</button>
+                                    </div>
+                                </div>
+                                <div class="col-5">
+                                    <dl class="dl-horizontal m-0">
+                                        <dt>country</dt>
+                                        <dd>{{ getClanViewModel().getCountry() }}</dd>
+                                        <dt>serverId</dt>
+                                        <dd>{{ getClanViewModel().getServer() }}</dd>
+                                        <dt>description</dt>
+                                        <dd>{{ getClanViewModel().getDescription() }}</dd>
+                                        <dt>level</dt>
+                                        <dd>{{ getClanViewModel().getLevel() }}</dd>
+                                        <dt>minLevel</dt>
+                                        <dd>{{ getClanViewModel().getMinLevel() }}</dd>
+                                    </dl>
+                                </div>
+                                <div class="col-5">
+                                    <dl class="dl-horizontal m-0">
+                                        <dt>topActivity</dt>
+                                        <dd>{{ getClanViewModel().getTopActivity() | number : '1.0' }}</dd>
+                                        <dt>topDungeon</dt>
+                                        <dd>{{ getClanViewModel().getTopDungeon() | number : '1.0' }}</dd>
+                                        <dt>disbanding</dt>
+                                        <dd>{{ getClanViewModel().getDisbanding() }}</dd>
+                                        <dt>frameId</dt>
+                                        <dd>{{ getClanViewModel().getFrameId() }}</dd>
+                                        <dt>ownerId</dt>
+                                        <dd>{{ getClanViewModel().getOwnerId() | number : '1.0' }}</dd>
+                                    </dl>
+                                </div>
+                            </div>
+                        </app-card-container>
+                    }
+                    @else {
+                        <div class="d-flex mt-3">
+                            <button mat-stroked-button color="warn" (click)="loadData()" class="mb-1">Load Data</button>
+                        </div>
+                    }
+                    @if (membersLoaded) {
+                        <app-card-container [colors]="getColors('raspberry')" title="Members" subtitle="List of guild members">
+                            <div class="table-responsive p-0">
+                                <table class="table table-striped table-condensed border-top border-light">
+                                    <thead>
+                                        <tr role="row" class="text-bg-raspberry bg-opacity-60">
+                                            <th scope="col" class="align-middle w-auto ps-4">
+                                                <div class="text-start">
+                                                    #
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="d-flex align-items-center text-start">
+                                                    Name
+                                                    <mat-icon fontIcon="arrow_upward" class="ms-1 icon-xsmall"></mat-icon>
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    ID
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    Last Login
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    Dismissal Delay
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    Clan
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-start">
+                                                    Server
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto">
+                                                <div class="text-end">
+                                                    Heroes
+                                                </div>
+                                            </th>
+                                            <th scope="col" class="align-middle w-auto pe-4">
+                                                <div class="text-end">
+                                                    Titans
+                                                </div>
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        @for (memberVM of getMembersViewModel().getMembers(); track memberVM.getId(); let index = $index) {
+                                            <tr role="row" class="align-middle">
+                                                <td class="cell text-start ps-4">
+                                                    {{ (index+1) }}
+                                                </td>
+                                                <td class="cell text-start">
+                                                    <div class="d-flex">
+                                                        <mat-icon [fontIcon]="memberVM.isChampion() ? 'gpp_good' : 'gpp_bad'" class="me-2 icon-small {{ memberVM.isChampion() ? 'text-green' : 'text-muted' }}"></mat-icon>
+                                                        <span [class]="memberVM.isChampion() ? 'text-green' : ''">{{ memberVM.getName() }}</span>
+                                                    </div>
+                                                </td>
+                                                <td class="cell font-monospace text-start">
+                                                    <span class="me-2">{{ memberVM.getId() }}</span> <small class="me-3">[{{ memberVM.getLevel() }}]</small> 
+                                                </td>
+                                                <td class="cell font-monospace text-start">
+                                                    <span class="me-3">{{ memberVM.getLastLoginTime() + '000' | date: 'dd/MM HH:mm' }}</span>
+                                                </td>
+                                                <td class="cell font-monospace text-start">
+                                                    <span [class]="memberVM.getInactivity().daysLeft < daysToWarn ? 'text-red' : ''">{{ memberVM.getInactivity().dropDelay }}</span>
+                                                </td>
+                                                <td class="cell text-start">
+                                                    {{ memberVM.getClanTitle() }}
+                                                </td>
+                                                <td class="cell text-start">
+                                                    {{ memberVM.getServerId() }}
+                                                </td>
+                                                <td class="cell font-monospace text-end">
+                                                    {{ memberVM.getMemberHeroes().power | number : '1.0' }}
+                                                </td>
+                                                <td class="cell font-monospace text-end pe-4">
+                                                    {{ memberVM.getMemberTitans().power | number : '1.0' }}
+                                                </td>
+                                            </tr>
+                                        }
+                                    </tbody>
+                                </table>
+                            </div>
+                        </app-card-container>
+                    }
+                </div>
+            </div>
+        </mat-tab>
+        <mat-tab label="Defense">
+            <div class="row g-0">
+                <div class="col col-md-6 pe-md-2">
+                    <app-card-container [colors]="getColors('accent')" title="Heroes Fortifications" subtitle="Defense overview">
+                        <!--<app-guildwar-defence [members]="getMembers()" type="heroes"></app-guildwar-defence>-->
+                    </app-card-container>
+                </div>
+                <div class="col col-md-6 ps-md-2">
+                    <app-card-container [colors]="getColors('accent')" title="Titans Fortifications" subtitle="Defense overview">
+                        <!--<app-guildwar-defence [members]="getMembers()" type="titans"></app-guildwar-defence>-->
+                    </app-card-container>
+                </div>
+            </div>
+        </mat-tab>
+        <mat-tab label="Attack">
+            <div class="row g-0">
+                <div class="col col-md-6 ps-md-2">
+                    <app-card-container [colors]="getColors('accent')" title="Heroes Fortifications" subtitle="Attack overview">
+                        <!--<app-guildwar-attack [members]="getMembers()" type="heroes"></app-guildwar-attack>-->
+                    </app-card-container>
+                </div>
+                <div class="col col-md-6 ps-md-2">
+                    <app-card-container [colors]="getColors('accent')" title="Titans Fortifications" subtitle="Attack overview">
+                        <!--<app-guildwar-attack [members]="getMembers()" type="titans"></app-guildwar-attack>-->
+                    </app-card-container>
+                </div>
+            </div>
+        </mat-tab>
+        <mat-tab label="Raids">
+            <div class="row g-0">
+                <div class="col">
+                    <app-card-container [colors]="getColors('megna')" title="Guild Raids" subtitle="Statistics">
+                        <!---->
+                    </app-card-container>
+                </div>
+            </div>
+        </mat-tab>
+    </mat-tab-group>
+</div>

src/app/components/herowars-guildwar/herowars-guildwar.component.scss

@@ -0,0 +1,8 @@
+.btn-group-vertical {
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+    button {
+        margin: 2px 0;
+    }
+}

src/app/components/herowars-guildwar/herowars-guildwar.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { HerowarsGuildwarComponent } from './herowars-guildwar.component';
+
+describe('HerowarsGuildwarComponent', () => {
+  let component: HerowarsGuildwarComponent;
+  let fixture: ComponentFixture<HerowarsGuildwarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HerowarsGuildwarComponent],
+      providers: [
+        provideHttpClient(),
+        provideAnimations(),
+      ],
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HerowarsGuildwarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/herowars-guildwar/herowars-guildwar.component.ts

@@ -0,0 +1,135 @@
+import { DatePipe, DecimalPipe } from '@angular/common';
+import { Title } from '@angular/platform-browser';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+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 { MatTabsModule } from '@angular/material/tabs';
+
+import { CardContainerComponent, ListErrorsComponent } from '@components/shared';
+import { CardColors, Errors, HWActivityStat, HWGuildClan, HWMember } from '@models';
+import { ClanViewModel, MembersViewModel } from '@viewmodels/herowars';
+import { HWClanService, HWMemberService, UtilitiesService } from '@services';
+import { MAX_CLAN_MEMBERS } from '@constants';
+
+@Component({
+    selector: 'app-herowars-guildwar',
+    imports: [
+        DatePipe,
+        DecimalPipe,
+        FormsModule,
+        CardContainerComponent,
+        ListErrorsComponent,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatTabsModule,
+    ],
+    templateUrl: './herowars-guildwar.component.html',
+    styleUrl: './herowars-guildwar.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [style({ transform: 'translateY(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateY(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class HerowarsGuildwarComponent implements OnInit {
+    private _titleService = inject(Title);
+    private _utilitiesService = inject(UtilitiesService);
+    private _clanService = inject(HWClanService);
+    private _memberService = inject(HWMemberService);
+
+    public destroyRef = inject(DestroyRef);
+    public title = 'Guild War';
+    public subtitle = 'Log';
+    public description = 'Tools in working progress.';
+    public colors: CardColors = { background: 'bg-raspberry', text: 'text-bg-primary' };
+    public errors: Errors = { errors: {} };
+    public now = new Date();
+    public daysToWarn = 1;
+    public maxClanMembers = MAX_CLAN_MEMBERS;
+    public clanLoaded = false;
+    public membersLoaded = false;
+    public clanViewModel: ClanViewModel = {} as ClanViewModel;
+    public membersViewModel: MembersViewModel = {} as MembersViewModel;
+    private _guildClan: HWGuildClan = {} as HWGuildClan;
+    private _guildMembers: HWMember[] = [];
+    private _guildInfo: HWActivityStat = {} as HWActivityStat;
+
+    ngOnInit() {
+        this._titleService.setTitle(this.title);
+    }
+
+    getClanViewModel(): ClanViewModel {
+        return this.clanViewModel;
+    }
+
+    getMembersViewModel(): MembersViewModel {
+        return this.membersViewModel;
+    }
+
+    getColors(color = 'megna'): CardColors {
+        if (color === 'accent') {
+            this.colors = { background: 'bg-accent', text: 'text-navy' };
+        } else if (color === 'raspberry') {
+            this.colors = { background: 'bg-raspberry', text: 'text-bg-primary' };
+        } else {
+            this.colors = { background: 'bg-megna', text: 'text-bg-primary' };
+        }
+        return this.colors;
+    }
+
+    loadClan(): void {
+        this._clanService.loadClan().subscribe((clan) => {
+            this._guildClan = clan;
+            this.clanViewModel = new ClanViewModel(this._guildClan);
+            this.clanLoaded = true;
+        });
+    }
+
+    loadData(): void {
+        this._clanService.loadClan().subscribe((clan) => {
+            this._guildClan = clan;
+            this._memberService.loadMembers(this._guildClan).subscribe((members) => {
+                this._guildMembers = members;
+                this._guildClan = this._clanService.loadClanStats(this._guildClan, this._guildMembers);
+                this.daysToWarn = parseInt(this._guildClan.daysToKick) / 2;
+                this.clanViewModel = new ClanViewModel(this._guildClan);
+                this.clanLoaded = true;
+                this.membersViewModel = new MembersViewModel(this._guildMembers);
+                this.membersLoaded = true;
+            });
+        });
+    }
+
+    loadMembers(): void {
+        this._memberService.loadMembers(this._guildClan).subscribe((members) => {
+            this._guildMembers = members;
+            this.membersViewModel = new MembersViewModel(this._guildMembers);
+            this._guildClan = this._clanService.loadClanStats(this._guildClan, this._guildMembers);
+            this.membersLoaded = true;
+        });
+    }
+
+    getMembers(): HWMember[] {
+        return this._guildMembers;
+    }
+
+    syncClan(): void {
+        console.log(this._guildClan);
+    }
+
+    syncMembers(): void {
+        console.log(this._guildMembers);
+    }
+}

src/app/components/herowars/herowars.component.html

@@ -0,0 +1,66 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{title}}</h1>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2 text-end">
+            <span class="fs-5 text-primary">{{ now | date: 'dd/MM/yyyy' }}</span>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <app-list-errors [errors]="errors"></app-list-errors>
+    <div class="d-flex">
+        <p class="fs-3">{{description}}</p>
+    </div>
+    <mat-divider class="mt-2 mb-3"></mat-divider>
+    <mat-tab-group [selectedIndex]="3">
+        <mat-tab label="Guild War">
+            <div class="row g-0">
+                <div class="col col-md-6 pe-md-2">
+                    <app-guildwar-defence [members]="getMembers()" type="heroes"></app-guildwar-defence>
+                </div>
+                <div class="col col-md-6 ps-md-2">
+                    <app-guildwar-defence [members]="getMembers()" type="titans"></app-guildwar-defence>
+                </div>
+            </div>
+            <div class="row g-0">
+                <div class="col-12 pe-md-2">
+                    <!--<app-guildwar-attack [members]="getMembers()"></app-guildwar-attack>-->
+                </div>
+            </div>
+        </mat-tab>
+        <mat-tab label="Champions">
+            <div class="row g-0">
+                <div class="col col-md-6 pe-md-2">
+                    <div class="row">
+                        <div class="col col-md-6 pe-md-2">
+                            <app-guildwar-champions [members]="getMembers()" type="heroes"></app-guildwar-champions>
+                        </div>
+                        <div class="col col-md-6 ps-md-2">
+                            <app-guildwar-champions [members]="getMembers()" type="titans"></app-guildwar-champions>
+                        </div>
+                    </div>
+                    <app-guild-card></app-guild-card>
+                </div>
+                <div class="col col-md-6 ps-md-2">
+                    <app-guildwar-teams [members]="getMembers()"></app-guildwar-teams>
+                </div>
+            </div>
+        </mat-tab>
+        <mat-tab label="Members">
+            <div class="row g-0">
+                <div class="col">
+                    <app-members-statistics [members]="getMembers()"></app-members-statistics>
+                </div>
+            </div>
+        </mat-tab>
+        <mat-tab label="Raids">
+            <div class="row g-0">
+                <div class="col">
+                    <app-guildraids-log [members]="getMembers()"></app-guildraids-log>
+                </div>
+            </div>
+        </mat-tab>
+    </mat-tab-group>
+</div>

src/app/components/herowars/herowars.component.scss

@@ -0,0 +1,37 @@
+/* herowars */
+//@use 'variable' as var;
+.icon-xxsmall {
+    transform: scale(0.25);
+}
+.icon-xsmall {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+}
+.icon-small {
+    font-size: 18px;
+    height: 18px;
+    width: 18px;
+}
+.icon-medium {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+}
+.hstack .value {
+    min-width: 56px;
+}
+
+/*
+#FF41F8
+#F0060B
+#F0070C
+#CC26D5
+#7702FF
+
+#35A2EB
+#B7DDD0
+#B0D9CB
+#D9CAAE
+#9788C7
+*/

src/app/components/herowars/herowars.component.spec.ts

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+
+import { HerowarsComponent } from './herowars.component';
+
+describe('HerowarsComponent', () => {
+    let component: HerowarsComponent;
+    let fixture: ComponentFixture<HerowarsComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [HerowarsComponent],
+            providers: [
+                provideAnimations(),
+                provideNativeDateAdapter(),
+                provideHttpClient(),
+                provideHttpClientTesting(),
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(HerowarsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/components/herowars/herowars.component.ts

@@ -0,0 +1,80 @@
+import { DatePipe } from '@angular/common';
+import { Title } from '@angular/platform-browser';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+//import { Component, DestroyRef, inject, OnInit, computed, signal, Signal } from '@angular/core';
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
+
+import {
+    ListErrorsComponent,
+    GuildCardComponent,
+    GuildraidsLogComponent,
+    GuildwarChampionsComponent,
+    GuildwarDefenceComponent,
+    GuildwarTeamsComponent,
+    MembersStatisticsComponent,
+} from '@components/shared';
+import { Errors, HWMember } from '@models';
+import { HWDataService } from '@services';
+
+@Component({
+    selector: 'app-herowars',
+    imports: [
+        DatePipe,
+        MatCardModule,
+        MatDividerModule,
+        MatIconModule,
+        MatTabsModule,
+        ListErrorsComponent,
+        GuildCardComponent,
+        GuildraidsLogComponent,
+        GuildwarChampionsComponent,
+        GuildwarDefenceComponent,
+        GuildwarTeamsComponent,
+        MembersStatisticsComponent,
+    ],
+    templateUrl: './herowars.component.html',
+    styleUrl: './herowars.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [style({ transform: 'translateY(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateY(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class HerowarsComponent implements OnInit {
+    private _titleService = inject(Title);
+    private _dataService = inject(HWDataService);
+
+    public title = 'HeroWars GM Tools';
+    public description = 'Tools in working progress.';
+    public errors: Errors = { errors: {} };
+    public destroyRef = inject(DestroyRef);
+    public now = new Date();
+    private _guildMembers: HWMember[] = [];
+
+    ngOnInit() {
+        this._titleService.setTitle(this.title);
+        this._dataService.guildData$.subscribe({
+            next: (guildData) => {
+                for (const data of Object.entries(guildData.clan.members)) {
+                    const member: HWMember = {} as HWMember;
+                    Object.assign(member, data[1]);
+                    member.champion = guildData.clan.warriors.indexOf(parseInt(member.id)) !== -1;
+                    member.heroes = { power: 0, teams: [] };
+                    member.titans = { power: 0, teams: [] };
+                    this._guildMembers.push(member);
+                }
+            },
+            error: (err) => console.error(err),
+        });
+    }
+
+    getMembers(): HWMember[] {
+        return this._guildMembers;
+    }
+}

src/app/components/home/home.component.scss

@@ -0,0 +1,37 @@
+/* Home */
+//@use 'variable' as var;
+.icon-xxsmall {
+    transform: scale(0.25);
+}
+.icon-xsmall {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+}
+.icon-small {
+    font-size: 18px;
+    height: 18px;
+    width: 18px;
+}
+.icon-medium {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+}
+.hstack .value {
+    min-width: 56px;
+}
+
+/*
+#FF41F8
+#F0060B
+#F0070C
+#CC26D5
+#7702FF
+
+#35A2EB
+#B7DDD0
+#B0D9CB
+#D9CAAE
+#9788C7
+*/

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeComponent],
+      providers: [
+        provideAnimations(),
+      ],
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,58 @@
+import { DatePipe } from '@angular/common';
+import { Title } from '@angular/platform-browser';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+
+import { ListErrorsComponent } from '@components/shared';
+import { Errors } from '@models';
+//import { UtilitiesService } from '@services';
+//import { UserService } from '@services';
+@Component({
+    selector: 'app-home',
+    imports: [DatePipe, MatCardModule, MatDividerModule, MatIconModule, ListErrorsComponent],
+    templateUrl: './home.component.html',
+    styleUrl: './home.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [style({ transform: 'translateY(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateY(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class HomeComponent implements OnInit {
+    private _titleService = inject(Title);
+
+    public title = 'Shop bientôt disponible!';
+    public description = "Encore un peu de patience, notre shop sera mis en ligne d'ici peu.";
+    public errors: Errors = { errors: {} };
+    public destroyRef = inject(DestroyRef);
+    public now = new Date();
+
+    ngOnInit() {
+        this._titleService.setTitle(this.title);
+        /*
+        type CreateArrayWithLengthX<
+            LENGTH extends number,
+            ACC extends unknown[] = [],
+        > = ACC['length'] extends LENGTH
+        ? ACC
+        : CreateArrayWithLengthX<LENGTH, [...ACC, 1]>;
+    
+        type NumericRange<
+            START_ARR extends number[],
+            END extends number,
+            ACC extends number = never>
+            = START_ARR['length'] extends END
+            ? ACC | END
+            : NumericRange<[...START_ARR, 1], END, ACC | START_ARR['length']>;
+    
+        //type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<7>, 13, 7>;
+        //type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<13>, 19>;
+        type TWENTY_TO_FORTY = NumericRange<CreateArrayWithLengthX<1>, 10>;
+        */
+    }
+}

src/app/components/index.ts

@@ -0,0 +1,22 @@
+export * from './auth/auth.component';
+export * from './aeronefs/aeronefs.component';
+export * from './calculator/calculator.component';
+export * from './canopies/canopies.component';
+export * from './dashboard/dashboard.component';
+export * from './demo/demo.component';
+export * from './dropzones/dropzones.component';
+export * from './herowars/herowars.component';
+export * from './herowars-guildwar/herowars-guildwar.component';
+export * from './herowars-guildraid/herowars-guildraid.component';
+export * from './home/home.component';
+export * from './jump/jump.component';
+export * from './jumps/jumps.component';
+export * from './logbook/logbook.component';
+export * from './page/page.component';
+export * from './pages/pages.component';
+export * from './product/product.component';
+export * from './products/products.component';
+export * from './profile/profile.component';
+export * from './qcm/qcm.component';
+export * from './settings';
+export * from './shared';

src/app/components/jump/jump.component.html

@@ -0,0 +1,283 @@
+<div class="d-flex">
+    <div class="flex-fill">
+        <h1 class="mb-1">
+            {{title}}
+            <span class="fs-3 text-accent ms-3">{{ jump.categorie }}</span>
+            @if (jump.module) {
+                <span class="fs-3 fw-light mx-2">/</span>
+                <span class="fs-3 text-muted">{{ jump.module }}</span>
+            }
+        </h1>
+        <span class="me-2 fs-6">
+            Le <span class="fs-5 mx-1 text-primary">{{ jump.date | date: 'dd/MM/yyyy' }}</span>
+            à <span class="fs-5 mx-1 text-primary">{{ jump.lieu }} {{ jump.oaci }}</span>
+        </span>
+    </div>
+    <span class="flex-spacer"></span>
+    <div class="align-self-center me-4">
+        <button mat-button [routerLink]="['/jump', prevSlug]" aria-label="Saut précédent" color="accent">
+            <mat-icon fontIcon="navigate_before"></mat-icon> {{ jump.numero - 1}}
+        </button>
+        <div class="vr mx-2 fs-3 align-middle"></div>
+        <span class="mx-2 align-middle">{{ jump.numero }}</span>
+        <div class="vr mx-2 fs-3 align-middle"></div>
+        <button mat-button [routerLink]="['/jump', nextSlug]" aria-label="Saut suivant" color="accent">
+            <mat-icon fontIcon="navigate_next" iconPositionEnd></mat-icon> {{ jump.numero +1}}
+        </button>
+    </div>
+    <div class="align-self-center me-2">
+        <button mat-icon-button [matMenuTriggerFor]="menuJump" aria-label="Menu saut">
+            <mat-icon fontIcon="more_vert"></mat-icon>
+        </button>
+        <mat-menu #menuJump="matMenu">
+            @if (jump.x2data) {
+                <button mat-menu-item>
+                    <mat-icon fontIcon="language" color="accent"></mat-icon>
+                    <span class="text-accent fw-medium">Obtenir le KML</span>
+                </button>
+                <mat-divider></mat-divider>
+            }
+            @for (menuitem of menuItems.getMenuJump(); track menuitem) {
+            <button mat-menu-item>
+                <mat-icon [fontIcon]="menuitem.icon" [color]="menuitem.color"></mat-icon>
+                <span class="text-{{menuitem.color}} fw-medium">{{ menuitem.name }}</span>
+            </button>
+            }
+        </mat-menu>
+    </div>
+</div>
+<mat-divider class="my-3"></mat-divider>
+<mat-card>
+    <mat-card-content>
+        <div class="row">
+            <div class="col-lg-6 col-md-12">
+                <dl class="dl-horizontal">
+                    <dt class="text-light-info fw-normal">Aeronef:</dt>
+                    <dd>{{ jump.aeronef }} {{ jump.imat }}</dd>
+                    <dt class="text-light-info fw-normal">Voile:</dt>
+                    <dd>{{ jump.voile }} {{ jump.taille }} ft<sup>2</sup></dd>
+                    @if (jump.programme) {
+                        <dt class="text-light-info fw-normal">Programme:</dt>
+                        <dd>{{ jump.programme }}</dd>
+                    }
+                </dl>
+            </div>
+            <div class="col-lg-6 col-md-12">
+                <dl class="dl-horizontal">
+                    @if (!jump.x2data) {
+                    <dt class="text-light-info fw-normal">Hauteur:</dt>
+                    <dd>{{ jump.hauteur }} m</dd>
+                    <dt class="text-light-info fw-normal">Déploiement:</dt>
+                    <dd>{{ jump.deploiement }} m</dd>
+                    }
+                    @for (file of jump.files; track file) {
+                    <dt class="text-light-info fw-normal">Fichier {{ file.type }}</dt>
+                    <dd>{{ file.name }}</dd>
+                    }
+                </dl>
+            </div>
+        </div>
+    </mat-card-content>
+</mat-card>
+@if (jump.x2data) {
+    <mat-card class="mt-3">
+        <mat-card-content>
+            <div class="row my-3">
+                <div class="col-sm-4 col-xs-12 text-center">
+                    <h6>Hauteur</h6>
+                    @if (jump.x2data.altitude.exit > 4200) {
+                        <mat-icon class="align-middle fs-5 me-2" fontIcon="mood" color="primary"></mat-icon>
+                    }
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.altitude.exit }} m</span>
+                </div>
+                <div class="col-sm-4 col-xs-12 text-center">
+                    <h6 class="d-flex justify-content-center"><mat-icon fontIcon="timer" class="me-1 fs-5"></mat-icon> Durée de la chute</h6>
+                    <span class="text-primary fw-medium fs-4">{{ formatDuration(jump.x2data.duration.freeFall) }}</span>
+                </div>
+                <div class="col-sm-4 col-xs-12 text-center">
+                    <h6>Déploiement</h6>
+                    @if (jump.x2data.altitude.deployment < 650) {
+                        <mat-icon class="align-middle fs-5 me-2" fontIcon="warning" color="raspberry"></mat-icon>
+                        <span class="text-raspberry fw-medium fs-5">{{ jump.x2data.altitude.deployment }} m</span>
+                    }
+                    @else if (jump.x2data.altitude.deployment < 750) {
+                        <mat-icon class="align-middle fs-5 me-2" fontIcon="local_florist" color="warn"></mat-icon>
+                        <span class="text-warn fw-medium fs-5">{{ jump.x2data.altitude.deployment }} m</span>
+                    }
+                    @else if (jump.x2data.altitude.deployment > 1000) {
+                        <mat-icon class="align-middle fs-5 me-2" fontIcon="mood" color="primary"></mat-icon>
+                        <span class="text-primary fw-medium fs-5">{{ jump.x2data.altitude.deployment }} m</span>
+                    }
+                </div>
+            </div>
+            <div class="row mt-4">
+                <div class="{{ jump.accessoires ? 'col-sm-6 ' : '' }}col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-4"><mat-icon fontIcon="people" class="me-2"></mat-icon> Participants ({{ jump.sautants.length + 1 }})</h5>
+                    @for (sautant of jump.sautants; track sautant) {
+                    <span class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
+                        {{ sautant }}
+                    </span>
+                    }
+                    <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
+                        {{ jump.author.username }}
+                    </span>
+                </div>
+                @if (jump.accessoires) {
+                <div class="col-sm-6 col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-4"><mat-icon fontIcon="auto_awesome" class="me-2"></mat-icon> Accessoires</h5>
+                    <span class="badge rounded-pill bg-navy-light mb-2 me-1 pe-3 py-1 fw-normal">
+                        <mat-icon class="align-middle me-1" fontIcon="auto_awesome"></mat-icon>
+                        {{ jump.accessoires }}
+                    </span>
+                </div>
+                }
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-card class="mt-3">
+        <mat-card-content>
+            <div class="row my-3">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="speed" class="me-1"></mat-icon> Vitesse en chute</h5>
+                </div>
+                <div class="col-sm-6 hidden-xs text-center">
+                    <h6>Verticale</h6>
+                </div>
+                <div class="col-sm-6 hidden-xs text-center">
+                    <h6>Horizontale</h6>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Vitesse maximale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.vertical.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Vitesse moyenne</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.vertical.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Vitesse maximale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.horizontal.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Vitesse moyenne</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.horizontal.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-card class="mt-3">
+        <mat-card-content>
+            <div class="row my-3">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="speed" class="me-1"></mat-icon> Vitesse sous voile</h5>
+                </div>
+                <div class="col-sm-6 hidden-xs text-center">
+                    <h6>Verticale</h6>
+                </div>
+                <div class="col-sm-6 hidden-xs text-center">
+                    <h6>Horizontale</h6>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Vitesse maximale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.vertical.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Vitesse moyenne</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.vertical.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Vitesse maximale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.horizontal.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Vitesse moyenne</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.horizontal.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-card class="mt-3">
+        <mat-card-content>
+            <div class="row my-3">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="square_foot" class="me-1"></mat-icon> Finesse</h5>
+                </div>
+                <div class="col-sm-6 hidden-xs text-center">
+                    <h6>En chute</h6>
+                </div>
+                <div class="col-sm-6 hidden-xs text-center">
+                    <h6>Sous voile</h6>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Finesse Max</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.freeFall.max | number : '1.2-2' }}</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Finesse Moyenne</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.freeFall.avg | number : '1.2-2' }}</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Finesse Max</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.underCanopy.max | number : '1.2-2' }}</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Finesse Moyenne</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.underCanopy.avg | number : '1.2-2' }}</span>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-card class="mt-3">
+        <mat-card-content>
+            <div class="row my-3">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="straighten" class="me-1"></mat-icon> Distance</h5>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Distance au largage</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.distance.exitFromLandingZone| number : '1.0-0' }} m</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Durée sous voile</h6>
+                    <span class="text-primary fw-medium fs-5">{{ formatDuration(jump.x2data.duration.underCanopy) }}</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Distance totale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.distance.totalFlying | number : '1.0-0' }} m</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Distance horizontale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.distance.totalHorizontal | number : '1.0-0' }} m</span>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+}
+@else {
+    <mat-card class="mt-3">
+        <mat-card-content>
+            <div class="row my-3">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-4"><mat-icon fontIcon="people" class="me-1"></mat-icon> Participants ({{ jump.sautants.length + 1 }})</h5>
+                    @for (sautant of jump.sautants; track sautant) {
+                    <span class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
+                        {{ sautant }}
+                    </span>
+                    }
+                    <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
+                        {{ jump.author.username }}
+                    </span>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-card class="mt-3">
+        <mat-card-content>
+            <div class="d-flex justify-content-center my-3 fs-5"><mat-icon fontIcon="satellite_alt" class="me-2"></mat-icon> Aucune donnée GPS</div>
+        </mat-card-content>
+    </mat-card>
+}

src/app/components/jump/jump.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideNativeDateAdapter } from '@angular/material/core';
+
+import { MenuItems } from '@components/shared';
+import { JumpComponent } from './jump.component';
+
+describe('JumpComponent', () => {
+  let component: JumpComponent;
+  let fixture: ComponentFixture<JumpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [JumpComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        provideNativeDateAdapter(),
+        MenuItems,
+      ],
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(JumpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/jump/jump.component.ts

@@ -0,0 +1,72 @@
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { DatePipe, DecimalPipe } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { Observable, Subscription } from 'rxjs';
+
+import { MenuItems } from '@components/shared';
+import { Errors, Jump, JumpPageData } from '@models';
+
+@Component({
+    selector: 'app-jump',
+    imports: [
+        DatePipe,
+        DecimalPipe,
+        RouterLink,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatIconModule,
+        MatMenuModule,
+    ],
+    templateUrl: './jump.component.html',
+    styleUrl: './jump.component.scss',
+})
+export class JumpComponent implements OnInit, OnDestroy {
+    private route = inject(ActivatedRoute);
+    menuItems = inject(MenuItems);
+
+    private _data: Subscription = new Subscription();
+    public title: string = '';
+    public errors: Errors = { errors: {} };
+    public destroyRef = inject(DestroyRef);
+    public jump: Jump = { sautants: [], author: {} } as unknown as Jump;
+    public prevSlug: string = '';
+    public nextSlug: string = '';
+
+    ngOnInit() {
+        const data$: Observable<{ pageData: JumpPageData }> = this.route.data as Observable<{ pageData: JumpPageData }>;
+        this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { pageData: JumpPageData }) => {
+            this.jump = data.pageData.jump;
+            this.prevSlug = data.pageData.prevJump?.slug;
+            this.nextSlug = data.pageData.nextJump?.slug;
+            this.title = `Saut n° ${this.jump.numero} `;
+        });
+        /*
+        const data$: Observable<Jump> = this.route.data as Observable<Jump>;
+        this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: Jump) => {
+            this.jump = data;
+            console.log('jump : ', this.jump);
+        });
+        */
+    }
+
+    ngOnDestroy() {
+        this._data.unsubscribe();
+    }
+
+    formatDuration(duration: number): string {
+        const start = new Date(0);
+        start.setSeconds(duration);
+        return start.toISOString().substring(14, 19);
+    }
+
+    private _resetErrors(): void {
+        this.errors = { errors: {} };
+    }
+}

src/app/components/jumps/jumps.component.html

@@ -0,0 +1,189 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{ title }}</h1>
+            <span [hidden]="!lastJump.numero" class="me-2 fs-6">
+                Dernier saut enregistré :
+                <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à
+                <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le
+                <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: "dd/MM/yyyy" }}</span>
+            </span>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2">
+            <button mat-icon-button [matMenuTriggerFor]="menuJumps" aria-label="Menu sauts">
+                <mat-icon fontIcon="more_vert"></mat-icon>
+            </button>
+            <mat-menu #menuJumps="matMenu">
+                @for (menuitem of menuItems.getMenuPanel(); track menuitem) {
+                    <button mat-menu-item>
+                        <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
+                        <span>{{ menuitem.name }}</span>
+                    </button>
+                }
+            </mat-menu>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <mat-card>
+        <mat-card-header>
+            <mat-card-title>{{ subtitle }}</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="mt-2">
+            @if (displayCharts) {
+                <div class="row">
+                    <div class="col-xxl-6 col-xs-12">
+                        <app-linearea-chart
+                            [headers]="seriesHeader"
+                            [names]="seriesName"
+                            [values]="seriesRow"
+                            [colors]="seriesColor"
+                        ></app-linearea-chart>
+                    </div>
+                    <div class="col-xxl-6 col-xs-12">
+                        <app-bars-chart
+                            [headers]="seriesHeader"
+                            [names]="seriesName"
+                            [values]="seriesRow"
+                            [colors]="seriesColor"
+                            [legend]="true"
+                        ></app-bars-chart>
+                    </div>
+                </div>
+            }
+            <div class="row">
+                <div class="col-xs-12">
+                    <mat-divider class="mt-3 mb-0"></mat-divider>
+                    <table class="table table-striped table-dark table-hover">
+                        <thead>
+                            <tr>
+                                <th></th>
+                                @for (name of seriesHeader; track name) {
+                                    <th class="text-end">{{ name }}</th>
+                                }
+                                <th class="text-end">Total</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @for (values of seriesRow; track $index; let i = $index) {
+                                <tr>
+                                    <th class="{{ seriesColorClass[i] }} text-end">● {{ seriesName[i] }}</th>
+                                    @for (value of values; track $index) {
+                                        <td class="font-monospace text-end">
+                                            @if (value) {
+                                                <span class="pr-1">{{ value }}</span>
+                                            } @else {
+                                                <span class="text-empty pr-1">{{ value }}</span>
+                                            }
+                                        </td>
+                                    }
+                                    <th class="{{ seriesColorClass[i] }} font-monospace text-end">
+                                        {{ seriesRowTotal[i] }}
+                                    </th>
+                                </tr>
+                            }
+                        </tbody>
+                        <tfoot>
+                            <tr>
+                                <th class="text-end">Total</th>
+                                @for (value of seriesColTotal; track $index) {
+                                    <th class="font-monospace text-end">
+                                        @if (value) {
+                                            <span class="pr-1">{{ value }}</span>
+                                        } @else {
+                                            <span class="text-empty pr-1">{{ value }}</span>
+                                        }
+                                    </th>
+                                }
+                                <th class="font-monospace text-end">{{ grandTotal }}</th>
+                            </tr>
+                            <tr>
+                                <th class="text-end">Moyenne</th>
+                                @for (value of seriesRowAvg; track $index) {
+                                    <th class="font-monospace text-end">
+                                        @if (value) {
+                                            <span class="pr-1">{{ value | number: "1.0-1" }}</span>
+                                        } @else {
+                                            <span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
+                                        }
+                                    </th>
+                                }
+                                <th class="font-monospace text-end">{{ grandAvg | number: "1.0-1" }}</th>
+                            </tr>
+                            <tr>
+                                <th class="text-end">Moyenne <small>3 dernières années</small></th>
+                                @for (value of seriesRowAvgLastYears; track $index) {
+                                    <th class="font-monospace text-end">
+                                        @if (value) {
+                                            <span class="pr-1">{{ value | number: "1.0-1" }}</span>
+                                        } @else {
+                                            <span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
+                                        }
+                                    </th>
+                                }
+                                <th class="font-monospace text-end">{{ grandAvgLastYears | number: "1.0-1" }}</th>
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
+            </div>
+        </mat-card-content>
+    </mat-card>
+    <mat-card class="bannercard">
+        <mat-card-header>
+            <mat-card-title>Types de sauts</mat-card-title>
+        </mat-card-header>
+        <mat-card-content class="mt-2">
+            @if (displayCharts) {
+                <div class="row">
+                    <div class="col-xs-12">
+                        <app-line-chart
+                            [headers]="seriesTypesHeader"
+                            [names]="seriesTypesName"
+                            [values]="seriesTypesRowCumulated"
+                            [colors]="seriesTypesColor"
+                            [legend]="true"
+                            [hideZero]="true"
+                        ></app-line-chart>
+                    </div>
+                </div>
+                <mat-divider class="mt-2 mb-3"></mat-divider>
+                <div class="row">
+                    @for (item of getCategories(); track $index) {
+                        <div class="col-lg-2 col-sm-4 col-xs-6">
+                            <app-circle-chart
+                                [headers]="seriesHeader"
+                                [names]="seriesName"
+                                [values]="[item.count, lastJump.numero - item.count]"
+                                [color]="$index"
+                                [label]="item.categorie"
+                            ></app-circle-chart>
+                        </div>
+                    }
+                    @for (item of getModules(); track $index) {
+                        <div class="col-lg-2 col-sm-4 col-xs-6">
+                            <app-circle-chart
+                                [headers]="seriesHeader"
+                                [names]="seriesName"
+                                [values]="[item.count, lastJump.numero - item.count]"
+                                [color]="getModuleColor($index)"
+                                [label]="item.module"
+                            ></app-circle-chart>
+                        </div>
+                    }
+                </div>
+                <mat-divider class="my-3"></mat-divider>
+                <!--
+            <div class="row">
+                <div class="col-xxl-6 col-xs-12">
+                    <app-line-chart [headers]="seriesTypesHeader" [names]="seriesTypesName" [values]="seriesTypesRow" [colors]="seriesTypesColor" [legend]="true"></app-line-chart>
+                </div>
+                <div class="col-xxl-6 col-xs-12">
+                    <app-line-chart [headers]="seriesTypesHeader" [names]="seriesTypesName" [values]="seriesTypesRowCumulated" [colors]="seriesTypesColor" [legend]="true"></app-line-chart>
+                </div>
+            </div>
+            -->
+            }
+        </mat-card-content>
+    </mat-card>
+</div>

src/app/components/jumps/jumps.component.scss

@@ -0,0 +1,12 @@
+element.style {
+    margin: 1.5rem -1.5rem -1.5rem -1.5rem;
+    padding: 0.9rem 1.1rem;
+    border-radius: 0;
+}
+.bannercard {
+    background-color: #202020;
+    color: #ffffff;
+    margin: 1.5rem -1.5rem -1.5rem -1.5rem;
+    padding: 0.9rem 1.1rem;
+    border-radius: 0;
+}

src/app/components/jumps/jumps.component.spec.ts

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { MenuItems } from '@components/shared';
+import { JumpsComponent } from './jumps.component';
+
+describe('JumpsComponent', () => {
+  let component: JumpsComponent;
+  let fixture: ComponentFixture<JumpsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [JumpsComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        MenuItems,
+      ],
+    });
+    fixture = TestBed.createComponent(JumpsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/jumps/jumps.component.ts

@@ -0,0 +1,267 @@
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, DestroyRef, inject, OnInit, OnDestroy } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+import { DatePipe, DecimalPipe } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { Observable, Subscription } from 'rxjs';
+
+import { MenuItems } from '@components/shared';
+import {
+    BarsChartComponent,
+    CircleChartComponent,
+    LineChartComponent,
+    LineAreaChartComponent,
+} from '@components/shared/helpers-chart';
+import { UtilitiesService } from '@services';
+import { Jump, JumpByCategorie, JumpByDate, JumpByDateByModule, JumpByModule, JumpsPageData, JumpYears } from '@models';
+
+@Component({
+    selector: 'app-jumps',
+    imports: [
+        DatePipe,
+        DecimalPipe,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatExpansionModule,
+        MatIconModule,
+        MatMenuModule,
+        BarsChartComponent,
+        CircleChartComponent,
+        LineChartComponent,
+        LineAreaChartComponent,
+    ],
+    templateUrl: './jumps.component.html',
+    styleUrl: './jumps.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateX(0)' })),
+            transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateX(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class JumpsComponent implements OnInit, OnDestroy {
+    private route = inject(ActivatedRoute);
+    private _utilitiesService = inject(UtilitiesService);
+    menuItems = inject(MenuItems);
+
+    private _data: Subscription = new Subscription();
+    private _jumpsByCategorie: Array<JumpByCategorie> = [];
+    private _jumpsByModule: Array<JumpByModule> = [];
+    private _jumpsByDate: Array<JumpByDate> = [];
+    public lastJump: Jump = {} as Jump;
+    public title: string = 'Sauts';
+    public subtitle: string = 'Nombre total de sauts par mois';
+    public displayCharts = false;
+    public destroyRef = inject(DestroyRef);
+    public min = 0;
+    public max = 0;
+    public grandAvg = 0;
+    public grandAvgLastYears = 0;
+    public grandTotal = 0;
+    public seriesHeader: string[] = [];
+    public seriesName: string[] = [];
+    public seriesRow: Array<Array<number>> = [];
+    public seriesColor: {
+        backgroundColor: string[];
+        borderColor: string[];
+    } = {
+        backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'all'),
+        borderColor: this._utilitiesService.getSeriesColors(1, 'all'),
+    };
+    public seriesTypesHeader: string[] = [];
+    public seriesTypesName: string[] = [];
+    public seriesTypesRow: Array<Array<number>> = [];
+    public seriesTypesRowCumulated: Array<Array<number>> = [];
+    public seriesTypesColor: {
+        backgroundColor: string[];
+        borderColor: string[];
+    } = {
+        backgroundColor: this._utilitiesService.getSeriesColors(0.8, 'pastels'),
+        borderColor: this._utilitiesService.getSeriesColors(1, 'pastels'),
+    };
+    public seriesColorClass: string[] = this._utilitiesService.getChartColors();
+    public seriesRowTotal: number[] = [];
+    public seriesRowAvg: number[] = [];
+    public seriesRowAvgLastYears: number[] = [];
+    public seriesColTotal: number[] = [];
+    public seriesColTotalClosed: number[] = [];
+    public seriesColTotalLastYears: number[] = [];
+
+    ngOnInit() {
+        const data$: Observable<{ pageData: JumpsPageData }> = this.route.data as Observable<{
+            pageData: JumpsPageData;
+        }>;
+        this._data = data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { pageData: JumpsPageData }) => {
+            const pageData: JumpsPageData = data.pageData;
+            this.lastJump = pageData.lastjump;
+            const currentYear: number = new Date().getFullYear();
+            const types: Array<string> = ['FF', 'Solo', 'VR', 'Wingsuit'];
+            const verticals: Array<string> = ['Chutas', 'Head Up', 'Head Down'];
+            const others: Array<string> = ['Track', 'Trace'];
+            const modules: Array<string> = [...verticals, ...others];
+            const minoration = 2; // -2 pour ne pas compter la première année
+            this.min = pageData.jumpsByYears[0].year;
+            this.max = pageData.jumpsByYears[pageData.jumpsByYears.length - 1].year;
+
+            this.seriesHeader = this._utilitiesService.getMonthsList();
+            const values: Array<number> = this.seriesHeader.map(() => 0);
+            this.seriesColTotal = [...values];
+            this.seriesColTotalClosed = [...values];
+            this.seriesColTotalLastYears = [...values];
+            this.seriesName = pageData.jumpsByYears.map((row: JumpYears) => {
+                this.seriesRow.push([...values]);
+                return row.year.toString();
+            });
+
+            this._jumpsByDate = pageData.jumpsByDate.map((row: JumpByDate) => {
+                this.seriesRow[row.year - this.min][row.month - 1] = row.count;
+                this.seriesColTotal[row.month - 1] += row.count;
+                if (row.year < currentYear) {
+                    this.seriesColTotalClosed[row.month - 1] += row.count;
+                }
+                if (row.year >= currentYear - 3 && row.year < currentYear) {
+                    this.seriesColTotalLastYears[row.month - 1] += row.count;
+                }
+                return row;
+            });
+            this.seriesRow.forEach((row: number[]) => {
+                const total = row.reduce((partialSum, a) => partialSum + a, 0);
+                this.seriesRowTotal.push(total);
+            });
+            this.seriesColTotalClosed.forEach((row: number) => {
+                const value: number = row / (this.seriesName.length - minoration);
+                this.seriesRowAvg.push(parseInt(value.toFixed(0)));
+            });
+            this.seriesColTotalLastYears.forEach((row: number) => {
+                const value: number = row / 3; // Les 3 dernières années
+                this.seriesRowAvgLastYears.push(parseInt(value.toFixed(0)));
+            });
+            this.grandAvg = this.seriesRowAvg.reduce((partialSum, accumulated) => partialSum + accumulated, 0);
+            this.grandAvgLastYears = this.seriesRowAvgLastYears.reduce(
+                (partialSum, accumulated) => partialSum + accumulated,
+                0,
+            );
+            this.grandTotal = this.seriesColTotal.reduce((partialSum, accumulated) => partialSum + accumulated, 0);
+
+            pageData.jumpsByCategory.forEach((row: JumpByCategorie) => {
+                if (types.indexOf(row.categorie) !== -1) {
+                    this._jumpsByCategorie.push(row);
+                }
+            });
+
+            //const focus: Array<string> = ['FF', 'Solo']; // ['FF']
+            let verticalCount: number = 0;
+            let otherCount: number = 0;
+            pageData.jumpsByModule.forEach((row: JumpByModule) => {
+                //if (focus.indexOf(row.categorie) !== -1 && modules.indexOf(row.module) !== -1) {
+                if (modules.indexOf(row.module) !== -1) {
+                    if (verticals.indexOf(row.module) !== -1) {
+                        verticalCount += row.count;
+                    } else {
+                        otherCount += row.count;
+                    }
+                }
+            });
+            if (verticalCount > 0) {
+                const row: JumpByModule = {
+                    categorie: 'FF',
+                    module: 'Vertical',
+                    count: verticalCount,
+                };
+                this._jumpsByModule.push(row);
+            }
+            if (otherCount > 0) {
+                const row: JumpByModule = {
+                    categorie: 'FF',
+                    module: 'Track/Trace',
+                    count: otherCount,
+                };
+                this._jumpsByModule.push(row);
+            }
+
+            for (let year = 0; year < pageData.jumpsByYears.length; year++) {
+                for (let index = 0; index < 12; index++) {
+                    const month: string = index + 1 < 10 ? `0${index + 1}` : `${index + 1}`;
+                    this.seriesTypesHeader.push(`${month}-${pageData.jumpsByYears[year].year}`);
+                }
+            }
+            const emptyValues: Array<number> = this.seriesTypesHeader.map(() => 0);
+            this.seriesTypesName = types;
+            this.seriesTypesName.forEach(() => {
+                this.seriesTypesRow.push([...emptyValues]);
+            });
+            pageData.jumpsByDateByModule.forEach((row: JumpByDateByModule) => {
+                const indexOf: number = this.seriesTypesName.indexOf(row.categorie);
+                if (indexOf !== -1) {
+                    this.seriesTypesRow[indexOf][(row.year - this.min) * 12 + row.month - 1] += row.count;
+                }
+            });
+            this.seriesTypesRowCumulated = this.seriesTypesRow.map((row: Array<number>) => {
+                let accumulated: number = 0;
+                return row.map((value: number) => {
+                    accumulated += value;
+                    return accumulated;
+                });
+            });
+            this.seriesTypesHeader = this.seriesTypesHeader.slice(
+                pageData.jumpsByDateByModule[0].month + 1,
+                -pageData.jumpsByDateByModule[pageData.jumpsByDateByModule.length - 1].month,
+            );
+            this.seriesTypesRow = this.seriesTypesRow.map((row: Array<number>) => {
+                return row.slice(
+                    pageData.jumpsByDateByModule[0].month + 1,
+                    -pageData.jumpsByDateByModule[pageData.jumpsByDateByModule.length - 1].month,
+                );
+            });
+            this.seriesTypesRowCumulated = this.seriesTypesRowCumulated.map((row: Array<number>) => {
+                return row.slice(
+                    pageData.jumpsByDateByModule[0].month + 1,
+                    -pageData.jumpsByDateByModule[pageData.jumpsByDateByModule.length - 1].month,
+                );
+            });
+            /*
+            console.log('this.min', this.min);
+            console.log('this.max', this.max);
+            console.log('this.lastJump', this.lastJump);
+            console.log('this.seriesHeader', this.seriesHeader);
+            console.log('this.seriesName', this.seriesName);
+            console.log('this.seriesRow', this.seriesRow);
+            console.log('this.seriesRowTotal', this.seriesRowTotal);
+            console.log('this.seriesRowAvg', this.seriesRowAvg);
+            console.log('this.seriesRowAvgLastYears', this.seriesRowAvgLastYears);
+            console.log('this._jumpsByCategorie', this._jumpsByCategorie);
+            console.log('this._jumpsByModule', this._jumpsByModule);
+            console.log('this.seriesTypesHeader', this.seriesTypesHeader);
+            console.log('this.seriesTypesName', this.seriesTypesName);
+            console.log('this.seriesTypesRow', this.seriesTypesRow);
+            console.log('this.seriesTypesRowCumulated', this.seriesTypesRowCumulated);
+            */
+            this.displayCharts = true;
+        });
+    }
+
+    ngOnDestroy() {
+        this._data.unsubscribe();
+    }
+
+    public getCategories(): Array<JumpByCategorie> {
+        return this._jumpsByCategorie;
+    }
+
+    public getModules(): Array<JumpByModule> {
+        return this._jumpsByModule;
+    }
+
+    public getModuleColor(index: number): number {
+        return this._jumpsByCategorie.length + index;
+    }
+}

src/app/components/logbook/dialogs/index.ts

@@ -0,0 +1,4 @@
+export * from './jump-add.dialog';
+export * from './jump-delete.dialog';
+export * from './jump-edit.dialog';
+export * from './jump-view.dialog';

src/app/components/logbook/dialogs/jump-add.dialog.html

@@ -0,0 +1,301 @@
+<h2 mat-dialog-title class="bg-warn border-bottom border-light-subtle d-flex mb-3 pt-3 pb-2">
+  Ajouter un saut<span class="flex-spacer"></span>
+  <mat-icon fontIcon="close" class="pointer" (click)="closeDialog()"></mat-icon>
+</h2>
+<mat-dialog-content>
+  <div class="container">
+    <!--
+    <div class="row">
+      <div class="col-xs-12 border-bottom border-dark pb-2 mb-2">
+        <mat-form-field appearance="outline" class="mt-2 me-2" color="warn">
+          <mat-label>Numéro ou plage de saut à ajouter</mat-label>
+          <input matInput [(ngModel)]="params.numeros" required />
+          <mat-hint>645 / +5 / 650-660</mat-hint>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mt-2 me-3" color="warn">
+          <mat-label>Choisissez une date</mat-label>
+          <input matInput [matDatepicker]="datepicker" [(ngModel)]="params.date" (dateChange)="onDateChange()" required />
+          <mat-hint>MM/DD/YYYY</mat-hint>
+          <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
+          <mat-datepicker #datepicker>
+            <mat-datepicker-actions>
+              <button mat-button matDatepickerCancel>Annuler</button>
+              <button mat-raised-button color="warn" matDatepickerApply>Appliquer</button>
+            </mat-datepicker-actions>
+          </mat-datepicker>
+        </mat-form-field>
+        <mat-checkbox (change)="setLastJump($event.checked)" [checked]="useLast.all">
+          <mat-icon fontIcon="history" class="align-middle me-2"></mat-icon> <span class="d-inline-block align-middle">Utiliser les valeurs du dernier saut</span>
+        </mat-checkbox>
+      </div>
+    </div>
+    -->
+    <form class="row" [formGroup]="jumpForm" (ngSubmit)="submitForm()">
+      <div class="col-xs-12 border-bottom border-dark pb-2 mb-2">
+        <mat-form-field appearance="outline" class="mt-2 me-2" color="warn">
+          <mat-label>Numéro ou plage de saut à ajouter</mat-label>
+          <input matInput formControlName="numero" required />
+          <mat-hint>645 / +5 / 650-660</mat-hint>
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mt-2 me-3" color="warn">
+          <mat-label>Choisissez une date</mat-label>
+          <input matInput [matDatepicker]="datepicker" formControlName="date" (dateChange)="onDateChange()" required cdkFocusInitial />
+          <mat-hint>MM/DD/YYYY</mat-hint>
+          <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
+          <mat-datepicker #datepicker>
+            <mat-datepicker-actions>
+              <button mat-button matDatepickerCancel>Annuler</button>
+              <button mat-raised-button color="warn" matDatepickerApply>Appliquer</button>
+            </mat-datepicker-actions>
+          </mat-datepicker>
+        </mat-form-field>
+        <mat-checkbox (change)="setLastJump($event.checked)" [checked]="useLast.all">
+          <mat-icon fontIcon="history" class="align-middle me-2"></mat-icon> <span class="d-inline-block align-middle">Utiliser les valeurs du dernier saut</span>
+        </mat-checkbox>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">
+          Dropzone
+          <mat-checkbox class="float-end" (change)="setLastDropzone($event.checked)" [checked]="useLast.dropzone">
+            <mat-icon fontIcon="history" class="align-middle"></mat-icon>
+          </mat-checkbox>
+        </h4>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Lieu</mat-label>
+          <input matInput formControlName="lieu" [matAutocomplete]="autoDropzone">
+          <mat-autocomplete #autoDropzone="matAutocomplete" [displayWith]="displayLieuFn">
+            @for (option of filteredOptions.dropzones | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelLieu(option)">{{option.lieu}} - {{option.oaci}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['lieu'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('lieu')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Oaci</mat-label>
+          <input matInput formControlName="oaci" [matAutocomplete]="autoOaci">
+          <mat-autocomplete #autoOaci="matAutocomplete" [displayWith]="displayOaciFn">
+            @for (option of filteredOptions.oaci | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelOaci(option)">{{option.lieu}} - {{option.oaci}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['oaci'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('oaci')}}</mat-error>
+          }
+        </mat-form-field>
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">
+          Aéronef
+          <mat-checkbox class="float-end" (change)="setLastAeronef($event.checked)" [checked]="useLast.aeronef">
+            <mat-icon fontIcon="history" class="align-middle"></mat-icon>
+          </mat-checkbox>
+        </h4>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Aéronef</mat-label>
+          <input matInput formControlName="aeronef" [matAutocomplete]="autoAeronef">
+          <mat-autocomplete #autoAeronef="matAutocomplete" [displayWith]="displayAeronefFn">
+            @for (option of filteredOptions.aeronefs | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelAeronef(option)">{{option.aeronef}} - {{option.imat}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['aeronef'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('aeronef')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Imatriculation</mat-label>
+          <input matInput formControlName="imat" [matAutocomplete]="autoImat">
+          <mat-autocomplete #autoImat="matAutocomplete" [displayWith]="displayImatFn">
+            @for (option of filteredOptions.imats | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelImat(option)">{{option.aeronef}} - {{option.imat}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['imat'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('imat')}}</mat-error>
+          }
+        </mat-form-field>
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">
+          Voile
+          <mat-checkbox class="float-end" (change)="setLastVoile($event.checked)" [checked]="useLast.voile">
+            <mat-icon fontIcon="history" class="align-middle"></mat-icon>
+          </mat-checkbox>
+        </h4>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Modèle</mat-label>
+          <input matInput formControlName="voile" [matAutocomplete]="autoCanopy">
+          <mat-autocomplete #autoCanopy="matAutocomplete" [displayWith]="displayVoileFn">
+            @for (option of filteredOptions.canopies | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelVoile(option)">{{option.voile}} - {{option.taille}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['voile'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('voile')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Taille en ft<sup>2</sup></mat-label>
+          <input matInput formControlName="taille" [matAutocomplete]="autoTaille">
+          <mat-autocomplete #autoTaille="matAutocomplete" [displayWith]="displayTailleFn">
+            @for (option of filteredOptions.tailles | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelTaille(option)">{{option.voile}} - {{option.taille}}</mat-option>
+            }
+          </mat-autocomplete>
+          <span matTextSuffix>ft<sup>2</sup></span>
+          @if (this.jumpForm.controls['taille'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('taille')}}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">
+          Altitude
+          <mat-checkbox class="float-end" (change)="setLastAltitude($event.checked)" [checked]="useLast.altitude">
+            <mat-icon fontIcon="history" class="align-middle"></mat-icon>
+          </mat-checkbox>
+        </h4>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Hauteur de largage</mat-label>
+          <input matInput formControlName="hauteur" type="number" min="0" step="1">
+          @if (this.jumpForm.controls['hauteur'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('hauteur')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Hauteur de déploiement</mat-label>
+          <input matInput formControlName="deploiement" type="number" min="0" step="1">
+          @if (this.jumpForm.controls['deploiement'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('deploiement')}}</mat-error>
+          }
+        </mat-form-field>
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">
+          Discipline
+          <mat-checkbox class="float-end" (change)="setLastDiscipline($event.checked)" [checked]="useLast.discipline">
+            <mat-icon fontIcon="history" class="align-middle"></mat-icon>
+          </mat-checkbox>
+        </h4>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Categorie</mat-label>
+          <input matInput formControlName="categorie" [matAutocomplete]="autoCategorie">
+          <mat-autocomplete #autoCategorie="matAutocomplete" [displayWith]="displayCategorieFn">
+            @for (option of filteredOptions.categories | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelCategorie(option)">{{option.categorie}}{{option.categorie && option.module ? ' - ' : ''}}{{option.module}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['categorie'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('categorie')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Module</mat-label>
+          <input matInput formControlName="module" [matAutocomplete]="autoModule">
+          <mat-autocomplete #autoModule="matAutocomplete" [displayWith]="displayModuleFn">
+            @for (option of filteredOptions.modules | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelModule(option)">{{option.categorie}}{{option.categorie && option.module ? ' - ' : ''}}{{option.module}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['module'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('module')}}</mat-error>
+          }
+        </mat-form-field>
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">
+          Divers
+          <mat-checkbox class="float-end" (change)="setLastDivers($event.checked)" [checked]="useLast.divers">
+            <mat-icon fontIcon="history" class="align-middle"></mat-icon>
+          </mat-checkbox>
+        </h4>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Accessoires</mat-label>
+          <input matInput formControlName="accessoires">
+          @if (this.jumpForm.controls['accessoires'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('accessoires')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Zone</mat-label>
+          <input matInput formControlName="zone">
+          @if (this.jumpForm.controls['zone'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('zone')}}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">
+          Groupe
+          <mat-checkbox class="float-end" (change)="setLastGroupe($event.checked)" [checked]="useLast.groupe">
+            <mat-icon fontIcon="history" class="align-middle"></mat-icon>
+          </mat-checkbox>
+        </h4>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Sautants</mat-label>
+          <input matInput placeholder="Ajouter un sautant" [formControl]="tagField" (keyup.enter)="addSautant()">
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Nombre de participants</mat-label>
+          <input matInput formControlName="participants" type="number" min="0" step="1">
+          @if (this.jumpForm.controls['participants'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('participants')}}</mat-error>
+          }
+        </mat-form-field>
+        <div class="mb-2">
+          @for (sautant of jump.sautants; track sautant) {
+            <span class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+              <mat-icon class="align-middle pointer me-1" fontIcon="close" (click)="removeSautant(sautant)"></mat-icon>
+              {{ sautant }}
+            </span>
+          }
+          <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+            <mat-icon class="align-middle pointer me-1" fontIcon="person"></mat-icon>
+            {{ lastJump.author.username }}
+          </span>
+        </div>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">
+          Programme
+          <mat-checkbox class="float-end" (change)="setLastProgramme($event.checked)" [checked]="useLast.programme">
+            <mat-icon fontIcon="history" class="align-middle"></mat-icon>
+          </mat-checkbox>
+        </h4>
+        <mat-form-field appearance="fill" class="me-2 w-100" color="warn">
+          <mat-label>Programme</mat-label>
+          <textarea matInput formControlName="programme"></textarea>
+          @if (this.jumpForm.controls['programme'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('programme')}}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">Vidéo</h4>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Dossier</mat-label>
+          <input matInput formControlName="dossier">
+          @if (this.jumpForm.controls['dossier'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('dossier')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2" color="warn">
+          <mat-label>Video</mat-label>
+          <input matInput formControlName="video">
+          @if (this.jumpForm.controls['video'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('video')}}</mat-error>
+          }
+        </mat-form-field>
+        <span class="d-inline-block align-middle ms-1">{{ filepath }}{{ filename }}</span>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-secondary mb-3 lh-lg">Données GPS</h4>
+        <div class="mb-2">
+          <mat-checkbox (change)="setLastJump($event.checked)" [checked]="useLast.all">
+            <mat-icon fontIcon="language" class="align-middle me-2"></mat-icon> <span class="d-inline-block align-middle">Rechercher le fichier kml</span>
+          </mat-checkbox>
+        </div>
+      </div>
+    </form>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <span class="flex-spacer"></span>
+  <button mat-button (click)="closeDialog()" class="me-1">Annuler</button>
+  <!--<button mat-button color="warn" [disabled]="!jumpForm.valid" [mat-dialog-close]="{jump: jump, params: params}" cdkFocusInitial>Enregistrer</button>-->
+  <button mat-button color="warn" [disabled]="!jumpForm.valid"  (click)="submitForm()">Enregistrer</button>
+</mat-dialog-actions>

src/app/components/logbook/dialogs/jump-add.dialog.ts

@@ -0,0 +1,927 @@
+import { Component, OnDestroy, inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { Observable, Subscription } from 'rxjs';
+import { map, startWith, take } from 'rxjs/operators';
+
+import {
+    AeronefByImat,
+    CanopyModelBySize,
+    DropZoneByOaci,
+    Errors,
+    Jump,
+    JumpAddParams,
+    JumpByModule,
+    JumpFile,
+    JumpFileType,
+} from '@models';
+import { AeronefsService, CanopiesService, DropZonesService, JumpsService } from '@services';
+
+@Component({
+    selector: 'app-jump-add-dialog',
+    templateUrl: 'jump-add.dialog.html',
+    imports: [
+        AsyncPipe,
+        FormsModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+        MatOptionModule,
+    ],
+})
+export class JumpAddDialogComponent implements OnDestroy {
+    dialogRef = inject<MatDialogRef<JumpAddDialogComponent>>(MatDialogRef);
+    private fb = inject(FormBuilder);
+    private _aeronefsService = inject(AeronefsService);
+    private _canopiesService = inject(CanopiesService);
+    private _dropZonesService = inject(DropZonesService);
+    private _jumpsService = inject(JumpsService);
+    data = inject<{
+        jump: Jump;
+        lastJump: Jump;
+    }>(MAT_DIALOG_DATA);
+
+    private _formChanges: Array<Subscription> = [];
+    private _subscriptions: Array<Subscription> = [];
+    private _aeronefByImat: Subscription = new Subscription();
+    private _canopyModelBySize: Subscription = new Subscription();
+    private _dropZoneByOaci: Subscription = new Subscription();
+    private _jumpByModule: Subscription = new Subscription();
+    public errors!: Errors;
+    public tagField = new FormControl<string>('', { nonNullable: true });
+    public jumpForm: FormGroup;
+    public jump: Jump;
+    public lastJump: Jump;
+    public nextJump: number;
+    public params: JumpAddParams;
+    public filename: string;
+    public filepath: string;
+    public useLast: {
+        all: boolean;
+        aeronef: boolean;
+        altitude: boolean;
+        discipline: boolean;
+        divers: boolean;
+        dropzone: boolean;
+        groupe: boolean;
+        programme: boolean;
+        voile: boolean;
+    } = {
+        all: false,
+        aeronef: false,
+        altitude: false,
+        discipline: false,
+        divers: false,
+        dropzone: false,
+        groupe: false,
+        programme: false,
+        voile: false,
+    };
+    public inputOptions: {
+        aeronefs: Array<AeronefByImat>;
+        canopies: Array<CanopyModelBySize>;
+        dropzones: Array<DropZoneByOaci>;
+        categories: Array<JumpByModule>;
+    };
+    public filteredOptions: {
+        aeronefs: Observable<Array<AeronefByImat>>;
+        imats: Observable<Array<AeronefByImat>>;
+        canopies: Observable<Array<CanopyModelBySize>>;
+        tailles: Observable<Array<CanopyModelBySize>>;
+        dropzones: Observable<Array<DropZoneByOaci>>;
+        oaci: Observable<Array<DropZoneByOaci>>;
+        categories: Observable<Array<JumpByModule>>;
+        modules: Observable<Array<JumpByModule>>;
+    };
+
+    constructor() {
+        const data = this.data;
+
+        this.inputOptions = { aeronefs: [], canopies: [], dropzones: [], categories: [] };
+        //this.filteredOptions.aeronefs = this._aeronefsService.getAllByImat();
+        this.jump = data.jump;
+        this.lastJump = data.lastJump;
+        this.nextJump = this.lastJump.numero + 1;
+        this.params = {
+            numeros: this.nextJump.toString(),
+            date: '',
+            video: true,
+        };
+        this.jump.numero = this.nextJump;
+        const controlsConfig = {
+            date: ['', Validators.required],
+            numero: [this.nextJump, Validators.required],
+            lieu: ['', Validators.required],
+            oaci: '',
+            aeronef: ['', Validators.required],
+            imat: '',
+            hauteur: ['', Validators.required],
+            deploiement: '',
+            voile: '',
+            taille: ['', Validators.required],
+            categorie: '',
+            module: '',
+            participants: [1, Validators.required],
+            sautants: [[]],
+            programme: '',
+            accessoires: '',
+            zone: '',
+            dossier: '',
+            video: '',
+        };
+        this.jumpForm = this.fb.group(controlsConfig);
+        this.filename = this._computeFilename();
+        this.filepath = this._computeFilepath();
+        this._subscriptions.push(
+            this.jumpForm.controls['module'].valueChanges.subscribe(() => {
+                this.filepath = this._computeFilepath();
+            }),
+            this.jumpForm.controls['numero'].valueChanges.subscribe(() => {
+                this.filename = this._computeFilename();
+            }),
+        );
+        /*
+        this.filteredAeronefOptions = this.jumpForm.controls['aeronef'].valueChanges.pipe(
+            startWith(''),
+            map(value => {
+                const aeronef = typeof value === 'string' ? value : '';
+                return aeronef ? this._filterString(aeronef as string, this.aeronefOptions) : this.aeronefOptions.slice();
+            }),
+        );
+        this.filteredImatOptions = this.jumpForm.controls['imat'].valueChanges.pipe(
+            startWith(''),
+            map(value => {
+                const imat = typeof value === 'string' ? value : value?.imat;
+                return imat ? this._filterImat(imat as string) : this.imatOptions.slice();
+            }),
+        );
+        //this.filteredAeronefOptions = this._aeronefsService.getAllByImat();
+        */
+        this.filteredOptions = {
+            aeronefs: this.jumpForm.controls['aeronef'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const aeronef = typeof value === 'string' ? value : value?.aeronef;
+                    return aeronef ? this._filterImat(aeronef as string) : this.inputOptions.aeronefs.slice();
+                }),
+            ),
+            imats: this.jumpForm.controls['imat'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const imat = typeof value === 'string' ? value : value?.imat;
+                    return imat ? this._filterImat(imat as string) : this.inputOptions.aeronefs.slice();
+                }),
+            ),
+            canopies: this.jumpForm.controls['voile'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const voile = typeof value === 'string' ? value : value?.voile;
+                    return voile ? this._filterTaille(voile as string) : this.inputOptions.canopies.slice();
+                }),
+            ),
+            tailles: this.jumpForm.controls['taille'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const taille = typeof value === 'string' ? value : value?.taille.toString();
+                    return taille ? this._filterTaille(taille as string) : this.inputOptions.canopies.slice();
+                }),
+            ),
+            dropzones: this.jumpForm.controls['lieu'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const lieu = typeof value === 'string' ? value : value?.lieu;
+                    return lieu ? this._filterOaci(lieu as string) : this.inputOptions.dropzones.slice();
+                }),
+            ),
+            oaci: this.jumpForm.controls['oaci'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const oaci = typeof value === 'string' ? value : value?.oaci;
+                    return oaci ? this._filterOaci(oaci as string) : this.inputOptions.dropzones.slice();
+                }),
+            ),
+            categories: this.jumpForm.controls['categorie'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const category = typeof value === 'string' ? value : value?.categorie;
+                    return category ? this._filterModule(category as string) : this.inputOptions.categories.slice();
+                }),
+            ),
+            modules: this.jumpForm.controls['module'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const module = typeof value === 'string' ? value : value?.module;
+                    return module ? this._filterModule(module as string) : this.inputOptions.categories.slice();
+                }),
+            ),
+        };
+        this._loadAeronefByImat();
+        this._loadCanopyModelBySize();
+        this._loadDropZoneByOaci();
+        this._loadJumpByModule();
+    }
+
+    ngOnDestroy() {
+        this._subscriptions.forEach((sub: Subscription) => {
+            sub.unsubscribe();
+        });
+        this._aeronefByImat.unsubscribe();
+        this._canopyModelBySize.unsubscribe();
+        this._dropZoneByOaci.unsubscribe();
+        this._jumpByModule.unsubscribe();
+    }
+
+    public onDateChange(): void {
+        this.filename = this._computeFilename();
+    }
+
+    private _computeFilename(numero?: string): string {
+        let file: string = '';
+        const timestamp: number = Date.parse(this.jumpForm.controls['date'].value);
+        if (isNaN(timestamp) == false) {
+            const date: Date = new Date(timestamp);
+            file += `${(date.getFullYear() + '').padStart(2, '0')}-${(date.getMonth() + 1 + '').padStart(2, '0')}-${(date.getDate() + '').padStart(2, '0')}_`;
+        }
+        if (numero !== undefined) {
+            numero = (numero + '').padStart(5, '0');
+        } else {
+            numero = (this.jumpForm.controls['numero'].value + '').padStart(5, '0');
+        }
+        file += `S${numero}.mp4`;
+        this.jumpForm.controls['video'].setValue(file);
+
+        return file;
+    }
+
+    private _computeFilepath(): string {
+        let path: string = '/Volumes/Storage/Skydive/Videos/';
+        if (this.jumpForm.controls['module'].value != '') {
+            //path += `${this.jumpForm.controls['module'].value}/`;
+            path +=
+                typeof this.jumpForm.controls['module'].value === 'string'
+                    ? `${this.jumpForm.controls['module'].value}/`
+                    : `${this.jumpForm.controls['module'].value?.module}/`;
+        }
+        this.jumpForm.controls['dossier'].setValue(path);
+
+        return path;
+    }
+
+    private _isLastForAllSections() {
+        return (
+            this.useLast.aeronef &&
+            this.useLast.altitude &&
+            this.useLast.discipline &&
+            this.useLast.divers &&
+            this.useLast.dropzone &&
+            this.useLast.groupe &&
+            this.useLast.programme &&
+            this.useLast.voile
+        );
+    }
+
+    private _filterImat(imat: string): Array<AeronefByImat> {
+        const filterValue = imat.toLowerCase();
+        return this.inputOptions.aeronefs.filter(
+            (option) =>
+                option.aeronef.toLowerCase().includes(filterValue) || option.imat.toLowerCase().includes(filterValue),
+        );
+    }
+
+    private _filterModule(module: string): Array<JumpByModule> {
+        const filterValue = module.toLowerCase();
+        return this.inputOptions.categories.filter(
+            (option) =>
+                option.categorie.toLowerCase().includes(filterValue) ||
+                option.module.toLowerCase().includes(filterValue),
+        );
+    }
+
+    private _filterOaci(oaci: string): Array<DropZoneByOaci> {
+        const filterValue = oaci.toLowerCase();
+        return this.inputOptions.dropzones.filter(
+            (option) =>
+                option.lieu.toLowerCase().includes(filterValue) || option.oaci.toLowerCase().includes(filterValue),
+        );
+    }
+
+    private _filterTaille(taille: string): Array<CanopyModelBySize> {
+        const filterValue = taille.toLowerCase();
+        return this.inputOptions.canopies.filter(
+            (option) =>
+                option.voile.toLowerCase().includes(filterValue) || option.taille.toString().includes(filterValue),
+        );
+    }
+
+    private _loadAeronefByImat(): void {
+        const aeronefs$ = this._aeronefsService.getAllByImat();
+        const subscription: Subscription = aeronefs$.subscribe((aggregate: Array<AeronefByImat>) => {
+            /*
+            this.inputOptions.imats = aggregate.map((row: AeronefByImat) => {
+                if (this.inputOptions.aeronefs.indexOf(row.aeronef) === -1) {
+                    this.inputOptions.aeronefs.push(row.aeronef);
+                }
+                return row;
+            });
+            */
+            this.inputOptions.aeronefs = aggregate;
+        });
+        this._subscriptions.push(subscription);
+    }
+
+    private _loadCanopyModelBySize(): void {
+        const canopies$ = this._canopiesService.getAllBySizeByModel();
+        const subscription: Subscription = canopies$.subscribe((aggregate: Array<CanopyModelBySize>) => {
+            /*
+            this.inputOptions.tailles = aggregate.map((row: CanopyModelBySize) => {
+                if (this.inputOptions.canopies.indexOf(row.voile) === -1) {
+                    this.inputOptions.canopies.push(row.voile);
+                }
+                return row;
+            });
+            */
+            this.inputOptions.canopies = aggregate;
+        });
+        this._subscriptions.push(subscription);
+    }
+
+    private _loadDropZoneByOaci(): void {
+        const dropzones$ = this._dropZonesService.getAllByOaci();
+        const subscription: Subscription = dropzones$.subscribe((aggregate: Array<DropZoneByOaci>) => {
+            /*
+            this.inputOptions.oaci = aggregate.map((row: DropZoneByOaci) => {
+                if (this.inputOptions.dropzones.indexOf(row.lieu) === -1) {
+                    this.inputOptions.dropzones.push(row.lieu);
+                }
+                return row;
+            });
+            */
+            this.inputOptions.dropzones = aggregate;
+        });
+        this._subscriptions.push(subscription);
+    }
+
+    private _loadJumpByModule(): void {
+        const jumps$ = this._jumpsService.getAllByModule();
+        const subscription: Subscription = jumps$.subscribe((aggregate: Array<JumpByModule>) => {
+            this.inputOptions.categories = aggregate;
+        });
+        this._subscriptions.push(subscription);
+    }
+
+    private _setAllLast(checked: boolean) {
+        this.useLast.all = checked;
+        this.useLast.aeronef = checked;
+        this.useLast.altitude = checked;
+        this.useLast.discipline = checked;
+        this.useLast.divers = checked;
+        this.useLast.dropzone = checked;
+        this.useLast.groupe = checked;
+        this.useLast.programme = checked;
+        this.useLast.voile = checked;
+    }
+
+    addSautant(): void {
+        this.useLast.groupe = false;
+        this.useLast.all = this._isLastForAllSections();
+        const tag = this.tagField.value;
+        if (tag != null && tag.trim() !== '') {
+            if (tag.includes(',') === true) {
+                const tags = tag.split(',');
+                tags.forEach((sautant) => {
+                    if (this.jump.sautants.indexOf(sautant.trim()) < 0) {
+                        this.jump.sautants.push(sautant.trim());
+                    }
+                });
+            } else if (this.jump.sautants.indexOf(tag) < 0) {
+                this.jump.sautants.push(tag);
+            }
+        }
+        this.tagField.reset('');
+        const participants = this.jump.sautants.length + 1;
+        this.jumpForm.controls['participants'].setValue(participants);
+    }
+
+    closeDialog(): void {
+        this._setAllLast(false);
+        //this.jump = <Jump>{};
+        //this.jump.numero = this.nextJump;
+        this.dialogRef.close();
+    }
+
+    displayAeronefFn(aeronef: AeronefByImat): string {
+        let res = '';
+        if (aeronef) {
+            if (typeof aeronef === 'string') {
+                res = aeronef;
+            } else {
+                res = aeronef.aeronef ? aeronef.aeronef : '';
+            }
+        }
+        return res;
+    }
+
+    displayImatFn(aeronef: AeronefByImat): string {
+        let res = '';
+        if (aeronef) {
+            if (typeof aeronef === 'string') {
+                res = aeronef;
+            } else {
+                res = aeronef.imat ? aeronef.imat : '';
+            }
+        }
+        return res;
+    }
+
+    displayLieuFn(dropzone: DropZoneByOaci): string {
+        //return dropzone && dropzone.oaci ? `${dropzone.lieu} - ${dropzone.oaci}` : '';
+        let res = '';
+        if (dropzone) {
+            if (typeof dropzone === 'string') {
+                res = dropzone;
+            } else {
+                res = dropzone.lieu ? dropzone.lieu : '';
+            }
+        }
+        //return dropzone && dropzone.lieu ? dropzone.lieu : '';
+        return res;
+    }
+
+    displayOaciFn(dropzone: DropZoneByOaci): string {
+        //return dropzone && dropzone.oaci ? `${dropzone.lieu} - ${dropzone.oaci}` : '';
+        let res = '';
+        if (dropzone) {
+            if (typeof dropzone === 'string') {
+                res = dropzone;
+            } else {
+                res = dropzone.oaci ? dropzone.oaci : '';
+            }
+        }
+        //return dropzone && dropzone.oaci ? dropzone.oaci : '';
+        return res;
+    }
+
+    displayTailleFn(canopy: CanopyModelBySize): string {
+        let res = '';
+        if (canopy) {
+            if (typeof canopy === 'string') {
+                res = canopy;
+            } else {
+                res = canopy.taille ? canopy.taille.toString() : '';
+            }
+        }
+        return res;
+    }
+
+    displayVoileFn(canopy: CanopyModelBySize): string {
+        let res = '';
+        if (canopy) {
+            if (typeof canopy === 'string') {
+                res = canopy;
+            } else {
+                res = canopy.voile ? canopy.voile : '';
+            }
+        }
+        return res;
+    }
+
+    displayCategorieFn(jump: JumpByModule): string {
+        let res = '';
+        if (jump) {
+            if (typeof jump === 'string') {
+                res = jump;
+            } else {
+                res = jump.categorie ? jump.categorie : '';
+            }
+        }
+        return res;
+    }
+
+    displayModuleFn(jump: JumpByModule): string {
+        let res = '';
+        if (jump) {
+            if (typeof jump === 'string') {
+                res = jump;
+            } else {
+                res = jump.module ? jump.module : '';
+            }
+        }
+        return res;
+    }
+
+    getErrorMessage(name: string): string {
+        if (this.jumpForm.controls[name].errors !== null) {
+            return 'Ce champ est requis.';
+        }
+        return '';
+    }
+
+    onSelAeronef(aeronef: AeronefByImat) {
+        if (aeronef && aeronef.aeronef) {
+            //this.jumpForm.controls['imat'].setValue(aeronef.imat);
+            this.jumpForm.controls['imat'].setValue(aeronef);
+        }
+    }
+
+    onSelImat(aeronef: AeronefByImat) {
+        if (aeronef && aeronef.imat) {
+            //this.jumpForm.controls['aeronef'].setValue(aeronef.aeronef);
+            this.jumpForm.controls['aeronef'].setValue(aeronef);
+        }
+    }
+
+    onSelLieu(dropzone: DropZoneByOaci) {
+        if (dropzone && dropzone.oaci) {
+            //this.jumpForm.controls['oaci'].setValue(dropzone.oaci);
+            this.jumpForm.controls['oaci'].setValue(dropzone);
+        }
+    }
+
+    onSelOaci(dropzone: DropZoneByOaci) {
+        if (dropzone && dropzone.lieu) {
+            //this.jumpForm.controls['lieu'].setValue(dropzone.lieu);
+            this.jumpForm.controls['lieu'].setValue(dropzone);
+        }
+    }
+
+    onSelTaille(canopy: CanopyModelBySize) {
+        if (canopy && canopy.voile) {
+            //this.jumpForm.controls['voile'].setValue(canopy.voile);
+            this.jumpForm.controls['voile'].setValue(canopy);
+        }
+    }
+
+    onSelVoile(canopy: CanopyModelBySize) {
+        if (canopy && canopy.taille) {
+            //this.jumpForm.controls['taille'].setValue(canopy.taille.toString());
+            this.jumpForm.controls['taille'].setValue(canopy);
+        }
+    }
+
+    onSelCategorie(jump: JumpByModule) {
+        if (jump && jump.categorie) {
+            this.jumpForm.controls['module'].setValue(jump);
+        }
+    }
+
+    onSelModule(jump: JumpByModule) {
+        if (jump && jump.module) {
+            this.jumpForm.controls['categorie'].setValue(jump);
+        }
+    }
+
+    removeSautant(index: string): void {
+        this.useLast.groupe = false;
+        this.useLast.all = this._isLastForAllSections();
+        this.jump.sautants = this.jump.sautants.filter((sautant) => sautant !== index);
+        const participants = this.jump.sautants.length + 1;
+        this.jumpForm.controls['participants'].setValue(participants);
+    }
+
+    setLastJump(checked: boolean) {
+        if (checked) {
+            this._setAllLast(true);
+            this.jumpForm.controls['lieu'].setValue(this.lastJump.lieu);
+            this.jumpForm.controls['oaci'].setValue(this.lastJump.oaci);
+            this.jumpForm.controls['aeronef'].setValue(this.lastJump.aeronef);
+            this.jumpForm.controls['imat'].setValue(this.lastJump.imat);
+            this.jumpForm.controls['hauteur'].setValue(this.lastJump.hauteur);
+            this.jumpForm.controls['deploiement'].setValue(this.lastJump.deploiement);
+            this.jumpForm.controls['voile'].setValue(this.lastJump.voile);
+            this.jumpForm.controls['taille'].setValue(this.lastJump.taille?.toString());
+            this.jumpForm.controls['categorie'].setValue(this.lastJump.categorie);
+            this.jumpForm.controls['module'].setValue(this.lastJump.module);
+            this.jumpForm.controls['participants'].setValue(this.lastJump.participants);
+            //this.jumpForm.controls['sautants'].setValue(this.lastJump.sautants);
+            this.jumpForm.controls['programme'].setValue(this.lastJump.programme);
+            this.jumpForm.controls['accessoires'].setValue(this.lastJump.accessoires);
+            this.jumpForm.controls['zone'].setValue(this.lastJump.zone);
+            this.jump.sautants = this.lastJump.sautants;
+            /*
+            Object.assign(
+                this.jump,
+                {
+                    date: this.lastJump.date,
+                    numero: this.lastJump.numero,
+                    lieu: this.lastJump.lieu,
+                    oaci: this.lastJump.oaci,
+                    aeronef: this.lastJump.aeronef,
+                    imat: this.lastJump.imat,
+                    hauteur: this.lastJump.hauteur,
+                    deploiement: this.lastJump.deploiement,
+                    voile: this.lastJump.voile,
+                    taille: this.lastJump.taille,
+                    categorie: this.lastJump.categorie,
+                    module: this.lastJump.module,
+                    participants: this.lastJump.participants,
+                    sautants: this.lastJump.sautants,
+                    programme: this.lastJump.programme,
+                    accessoires: this.lastJump.accessoires,
+                    zone: this.lastJump.zone,
+                }
+            );
+            */
+            this.jump.date = '';
+        } else {
+            this._setAllLast(false);
+            this.jumpForm.controls['lieu'].setValue('');
+            this.jumpForm.controls['oaci'].setValue('');
+            this.jumpForm.controls['aeronef'].setValue('');
+            this.jumpForm.controls['imat'].setValue('');
+            this.jumpForm.controls['hauteur'].setValue('');
+            this.jumpForm.controls['deploiement'].setValue('');
+            this.jumpForm.controls['voile'].setValue('');
+            this.jumpForm.controls['taille'].setValue('');
+            this.jumpForm.controls['categorie'].setValue('');
+            this.jumpForm.controls['module'].setValue('');
+            this.jumpForm.controls['participants'].setValue(1);
+            //this.jumpForm.controls['sautants'].setValue('');
+            this.jumpForm.controls['programme'].setValue('');
+            this.jumpForm.controls['accessoires'].setValue('');
+            this.jumpForm.controls['zone'].setValue('');
+            this.jump.sautants = [];
+        }
+        this.jump.numero = this.nextJump;
+    }
+
+    setLastAeronef(checked: boolean = false) {
+        if (checked) {
+            this.useLast.aeronef = true;
+            this.jumpForm.controls['aeronef'].setValue(this.lastJump.aeronef);
+            this.jumpForm.controls['imat'].setValue(this.lastJump.imat);
+        } else {
+            this.useLast.aeronef = false;
+            this.jumpForm.controls['aeronef'].setValue('');
+            this.jumpForm.controls['imat'].setValue('');
+        }
+        this.useLast.all = this._isLastForAllSections();
+    }
+
+    setLastAltitude(checked: boolean = false) {
+        if (checked) {
+            this.useLast.altitude = true;
+            this.jumpForm.controls['hauteur'].setValue(this.lastJump.hauteur);
+            this.jumpForm.controls['deploiement'].setValue(this.lastJump.deploiement);
+        } else {
+            this.useLast.altitude = false;
+            this.jumpForm.controls['hauteur'].setValue('');
+            this.jumpForm.controls['deploiement'].setValue('');
+        }
+        this.useLast.all = this._isLastForAllSections();
+    }
+
+    setLastDiscipline(checked: boolean = false) {
+        if (checked) {
+            this.useLast.discipline = true;
+            this.jumpForm.controls['categorie'].setValue(this.lastJump.categorie);
+            this.jumpForm.controls['module'].setValue(this.lastJump.module);
+        } else {
+            this.useLast.discipline = false;
+            this.jumpForm.controls['categorie'].setValue('');
+            this.jumpForm.controls['module'].setValue('');
+        }
+        this.useLast.all = this._isLastForAllSections();
+    }
+
+    setLastDivers(checked: boolean = false) {
+        if (checked) {
+            this.useLast.divers = true;
+            this.jumpForm.controls['accessoires'].setValue(this.lastJump.accessoires);
+            this.jumpForm.controls['zone'].setValue(this.lastJump.zone);
+        } else {
+            this.useLast.divers = false;
+            this.jumpForm.controls['accessoires'].setValue('');
+            this.jumpForm.controls['zone'].setValue('');
+        }
+        this.useLast.all = this._isLastForAllSections();
+    }
+
+    setLastDropzone(checked: boolean = false) {
+        if (checked) {
+            this.useLast.dropzone = true;
+            this.jumpForm.controls['lieu'].setValue(this.lastJump.lieu);
+            this.jumpForm.controls['oaci'].setValue(this.lastJump.oaci);
+        } else {
+            this.useLast.dropzone = false;
+            this.jumpForm.controls['lieu'].setValue('');
+            this.jumpForm.controls['oaci'].setValue('');
+        }
+        this.useLast.all = this._isLastForAllSections();
+    }
+
+    setLastGroupe(checked: boolean = false) {
+        if (checked) {
+            this.useLast.groupe = true;
+            this.jumpForm.controls['participants'].setValue(this.lastJump.participants);
+            //this.jumpForm.controls['sautants'].setValue(this.lastJump.sautants);
+            this.jump.sautants = this.lastJump.sautants;
+        } else {
+            this.useLast.groupe = false;
+            this.jumpForm.controls['participants'].setValue(1);
+            //this.jumpForm.controls['sautants'].setValue('');
+            this.jump.sautants = [];
+        }
+        this.useLast.all = this._isLastForAllSections();
+    }
+
+    setLastProgramme(checked: boolean = false) {
+        if (checked) {
+            this.useLast.programme = true;
+            this.jumpForm.controls['programme'].setValue(this.lastJump.participants);
+        } else {
+            this.useLast.programme = false;
+            this.jumpForm.controls['programme'].setValue('');
+        }
+        this.useLast.all = this._isLastForAllSections();
+    }
+
+    setLastVoile(checked: boolean = false) {
+        if (checked) {
+            this.useLast.voile = true;
+            this.jumpForm.controls['voile'].setValue(this.lastJump.voile);
+            this.jumpForm.controls['taille'].setValue(this.lastJump.taille?.toString());
+        } else {
+            this.useLast.voile = false;
+            this.jumpForm.controls['voile'].setValue('');
+            this.jumpForm.controls['taille'].setValue('');
+        }
+        this.useLast.all = this._isLastForAllSections();
+    }
+
+    submitForm(): void {
+        /*
+         * Création d'un tableau de saut contenant de 1 à n saut en fonction
+         * de la valeur du champ numero du formulaire jumpForm
+         */
+        const jumps: Array<Jump> = [];
+        const jump: Jump = {} as Jump;
+        const numeros: Array<number> = [];
+        let date: Date;
+        /* Controle de la validité du champ date et conversion au format ISO */
+        const timestamp: number = Date.parse(this.jumpForm.controls['date'].value);
+        if (isNaN(timestamp) == false) {
+            date = new Date(timestamp);
+        } else {
+            date = new Date();
+        }
+        let value = this.jumpForm.controls['numero'].value;
+        if (typeof value !== 'string') {
+            value = value.toString();
+        }
+
+        if (isNaN(+value) || value.split('+').length == 2) {
+            /*
+             * 'numero' n'est pas un entier , il s'agit donc d'une plage, d'une quantité ou de plusieurs valeur
+             * decomposer la valeur 'numero' et ajouter chaque sauts au tableau retourné par la fenêtre dialog
+             */
+            let jumpNum: number = this.lastJump.numero;
+            const elements: string[] = this.jumpForm.controls['numero'].value.split(';');
+            elements.forEach((element: string) => {
+                if (element == '') {
+                    jumpNum++;
+                    element = jumpNum.toString();
+                }
+                const values: string[] = element.split('-');
+                if (values.length == 2) {
+                    const start: number = parseInt(values[0]);
+                    const stop: number = parseInt(values[1]);
+                    const diff: number = stop - start;
+                    /* Ajout de saut par plage */
+                    for (let index = 0; index <= diff; index++) {
+                        jumpNum = start + index;
+                        numeros.push(jumpNum);
+                    }
+                } else {
+                    const quantity: string[] = values[0].split('+');
+                    if (quantity.length == 2) {
+                        /* Ajout de sauts par quantité */
+                        //const start: number = jumpNum;
+                        for (let index = 1; index <= parseInt(quantity[1]); index++) {
+                            jumpNum++;
+                            numeros.push(jumpNum);
+                        }
+                    } else {
+                        /* Ajout de sauts par numero */
+                        jumpNum = parseInt(quantity[0]);
+                        numeros.push(jumpNum);
+                    }
+                }
+            });
+        } else {
+            /* 'numero' est un entier */
+            numeros.push(this.jumpForm.controls['numero'].value);
+        }
+
+        /* Valeurs communes aux 1 à n saut(s) à ajouter */
+        jump.date = date.toISOString();
+        jump.lieu =
+            typeof this.jumpForm.controls['lieu'].value === 'string'
+                ? this.jumpForm.controls['lieu'].value
+                : this.jumpForm.controls['lieu'].value.lieu;
+        jump.oaci =
+            typeof this.jumpForm.controls['oaci'].value === 'string'
+                ? this.jumpForm.controls['oaci'].value
+                : this.jumpForm.controls['oaci'].value.oaci;
+        jump.aeronef =
+            typeof this.jumpForm.controls['aeronef'].value === 'string'
+                ? this.jumpForm.controls['aeronef'].value
+                : this.jumpForm.controls['aeronef'].value.aeronef;
+        jump.imat =
+            typeof this.jumpForm.controls['imat'].value === 'string'
+                ? this.jumpForm.controls['imat'].value
+                : this.jumpForm.controls['imat'].value.imat;
+        jump.voile =
+            typeof this.jumpForm.controls['voile'].value === 'string'
+                ? this.jumpForm.controls['voile'].value
+                : this.jumpForm.controls['voile'].value.voile;
+        jump.taille =
+            typeof this.jumpForm.controls['taille'].value === 'string'
+                ? this.jumpForm.controls['taille'].value
+                : this.jumpForm.controls['taille'].value.taille;
+        jump.categorie =
+            typeof this.jumpForm.controls['categorie'].value === 'string'
+                ? this.jumpForm.controls['categorie'].value
+                : this.jumpForm.controls['categorie'].value.categorie;
+        jump.module =
+            typeof this.jumpForm.controls['module'].value === 'string'
+                ? this.jumpForm.controls['module'].value
+                : this.jumpForm.controls['module'].value.module;
+        jump.hauteur = this.jumpForm.controls['hauteur'].value;
+        jump.deploiement = this.jumpForm.controls['deploiement'].value;
+        jump.participants = this.jumpForm.controls['participants'].value;
+        jump.sautants = this.jump.sautants;
+        //jump.sautants = this.jumpForm.controls['sautants'].value;
+        jump.programme = this.jumpForm.controls['programme'].value;
+        jump.accessoires = this.jumpForm.controls['accessoires'].value;
+        jump.zone = this.jumpForm.controls['zone'].value;
+        //jump.dossier = this.jumpForm.controls['dossier'].value;
+        //jump.video = this.jumpForm.controls['video'].value;
+
+        /* Ajout du saut au tableau à retourner */
+        numeros.forEach((numero: number) => {
+            const item: Jump = {} as Jump;
+            Object.assign(item, jump);
+            item.numero = numero;
+            if (this.jumpForm.controls['dossier'].value !== '' && this.jumpForm.controls['video'].value !== '') {
+                item.dossier = this._computeFilepath();
+                item.video = this._computeFilename(numero.toString());
+                const file: JumpFile = {
+                    name: item.video,
+                    path: item.dossier,
+                    type: JumpFileType.VIDEO,
+                } as JumpFile;
+                this._subscriptions.push(
+                    this._jumpsService
+                        .saveFile(item.slug, file)
+                        .pipe(take(1))
+                        .subscribe({
+                            next: (file) => {
+                                item.files.push(file);
+                                console.log(`Le fichier ${file.name} a été ajouté au saut n°${item.numero} !`, 'OK');
+                            },
+                            error: (err) => {
+                                this.errors = err;
+                            },
+                        }),
+                );
+            }
+            jumps.push(item);
+            //console.log(item);
+        });
+        //console.log(jumps);
+        /* Reset all 'last jump values' booleans */
+        this._setAllLast(false);
+        /* close the dialog with result */
+        this.dialogRef.close(jumps);
+
+        /*
+        // Reset all 'last jump values' booleans
+        this._setAllLast(false);
+        // update the model
+        this.updateJump(this.jumpForm.value);
+        // close the dialog with result
+        this.dialogRef.close(this.jump);
+        */
+    }
+
+    updateJump(values: NonNullable<unknown>): void {
+        Object.assign(this.jump, values);
+    }
+}

src/app/components/logbook/dialogs/jump-delete.dialog.html

@@ -0,0 +1,64 @@
+<h2 mat-dialog-title class="bg-danger border-bottom border-light-subtle d-flex mb-3 pt-3 pb-2">
+    Supprimer le saut n°{{jump.numero}}<span class="flex-spacer"></span>
+    <mat-icon fontIcon="close" class="pointer" (click)="closeDialog()"></mat-icon>
+</h2>
+<mat-dialog-content>
+    <div class="container">
+        <div class="mt-2 mb-4 text-center text-danger border-danger alert alert-danger">
+            <p class="fs-6 m-0">
+                Veuillez confirmer la suppression de ce saut.<br />
+                <span class="fw-semibold">Attention</span>, cette <span class="fw-semibold">action</span> est <span class="fw-semibold">irréversible</span>.
+            </p>
+        </div>
+        <h3 class="border-bottom border-light-subtle pb-2 mb-3">Données du saut :</h3>
+        <div class="row mb-3">
+            <div class="col-lg-6 col-md-12">
+                <dl class="dl-horizontal">
+                    <dt class="text-accent fw-normal">numero:</dt>
+                    <dd>{{jump.numero}}</dd>
+                    <dt class="text-accent fw-normal">lieu:</dt>
+                    <dd>{{jump.lieu}}</dd>
+                    <dt class="text-accent fw-normal">aeronef:</dt>
+                    <dd>{{jump.aeronef}}</dd>
+                    <dt class="text-accent fw-normal">voile:</dt>
+                    <dd>{{jump.voile}}</dd>
+                    <dt class="text-accent fw-normal">hauteur:</dt>
+                    <dd>{{jump.hauteur}} m</dd>
+                    <dt class="text-accent fw-normal">categorie:</dt>
+                    <dd>{{jump.categorie}}</dd>
+                    <dt class="text-accent fw-normal">accessoires:</dt>
+                    <dd>{{jump.accessoires}}</dd>
+                    <dt class="text-accent fw-normal">dossier:</dt>
+                    <dd>{{jump.dossier}}</dd>
+                    <dt class="text-accent fw-normal">programme:</dt>
+                    <dd>{{jump.programme}}</dd>
+                </dl>
+            </div>
+            <div class="col-lg-6 col-md-12">
+                <dl class="dl-horizontal">
+                    <dt class="text-accent fw-normal">date:</dt>
+                    <dd>{{jump.date | date: 'mediumDate'}}</dd>
+                    <dt class="text-accent fw-normal">oaci:</dt>
+                    <dd>{{jump.oaci}}</dd>
+                    <dt class="text-accent fw-normal">imat:</dt>
+                    <dd>{{jump.imat}}</dd>
+                    <dt class="text-accent fw-normal">taille:</dt>
+                    <dd>{{jump.taille}} ft<sup>2</sup></dd>
+                    <dt class="text-accent fw-normal">participants:</dt>
+                    <dd>{{jump.participants}}</dd>
+                    <dt class="text-accent fw-normal">module:</dt>
+                    <dd>{{jump.module}}</dd>
+                    <dt class="text-accent fw-normal">zone:</dt>
+                    <dd>{{jump.zone}}</dd>
+                    <dt class="text-accent fw-normal">video:</dt>
+                    <dd>{{jump.video}}</dd>
+                </dl>
+            </div>
+        </div>
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <span class="flex-spacer"></span>
+    <button mat-button (click)="closeDialog()" class="me-1">Annuler</button>
+    <button mat-button color="accent" [mat-dialog-close]="jump" cdkFocusInitial>Supprimer</button>
+</mat-dialog-actions>

src/app/components/logbook/dialogs/jump-delete.dialog.ts

@@ -0,0 +1,21 @@
+import { Component, inject } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+
+import { Jump } from '@models';
+
+@Component({
+    selector: 'app-jump-delete-dialog',
+    templateUrl: 'jump-delete.dialog.html',
+    imports: [DatePipe, MatDialogModule, MatButtonModule, MatIconModule],
+})
+export class JumpDeleteDialogComponent {
+    dialogRef = inject<MatDialogRef<JumpDeleteDialogComponent>>(MatDialogRef);
+    jump = inject<Jump>(MAT_DIALOG_DATA);
+
+    closeDialog(): void {
+        this.dialogRef.close();
+    }
+}

src/app/components/logbook/dialogs/jump-edit.dialog.html

@@ -0,0 +1,219 @@
+<h2 mat-dialog-title class="bg-primary border-bottom border-light-subtle d-flex mb-3 pt-3 pb-2">
+  Modifier un saut<span class="flex-spacer"></span>
+  <mat-icon fontIcon="close" class="pointer" (click)="closeDialog()"></mat-icon>
+</h2>
+<mat-dialog-content>
+  <div class="container">
+    <form class="row" [formGroup]="jumpForm" (ngSubmit)="submitForm()">
+      <div class="col-xs-12">
+        <mat-form-field appearance="outline" class="mt-2 me-2" color="primary">
+          <mat-label>Numéro du saut</mat-label>
+          <input matInput formControlName="numero">
+        </mat-form-field>
+        <mat-form-field appearance="outline" class="mt-2 me-3" color="primary">
+          <mat-label>Choisissez une date</mat-label>
+          <input matInput [matDatepicker]="datepicker" formControlName="date" />
+          <mat-hint>MM/DD/YYYY</mat-hint>
+          <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
+          <mat-datepicker #datepicker>
+            <mat-datepicker-actions>
+              <button mat-button matDatepickerCancel>Annuler</button>
+              <button mat-raised-button color="primary" matDatepickerApply>Appliquer</button>
+            </mat-datepicker-actions>
+          </mat-datepicker>
+        </mat-form-field>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-primary pb-1 mb-3">Dropzone</h4>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Lieu</mat-label>
+          <input matInput formControlName="lieu" [matAutocomplete]="autoDropzone">
+          <mat-autocomplete #autoDropzone="matAutocomplete" [displayWith]="displayLieuFn">
+            @for (option of filteredOptions.dropzones | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelLieu(option)">{{option.lieu}} - {{option.oaci}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['lieu'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('lieu')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Oaci</mat-label>
+          <input matInput formControlName="oaci" [matAutocomplete]="autoOaci">
+          <mat-autocomplete #autoOaci="matAutocomplete" [displayWith]="displayOaciFn">
+            @for (option of filteredOptions.oaci | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelOaci(option)">{{option.lieu}} - {{option.oaci}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['oaci'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('oaci')}}</mat-error>
+          }
+        </mat-form-field>
+        <h4 class="border-bottom border-primary pb-1 mb-3">Aéronef</h4>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Aéronef</mat-label>
+          <input matInput formControlName="aeronef" [matAutocomplete]="autoAeronef">
+          <mat-autocomplete #autoAeronef="matAutocomplete" [displayWith]="displayAeronefFn">
+            @for (option of filteredOptions.aeronefs | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelAeronef(option)">{{option.aeronef}} - {{option.imat}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['aeronef'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('aeronef')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Imatriculation</mat-label>
+          <input matInput formControlName="imat" [matAutocomplete]="autoImat">
+          <mat-autocomplete #autoImat="matAutocomplete" [displayWith]="displayImatFn">
+            @for (option of filteredOptions.imats | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelImat(option)">{{option.aeronef}} - {{option.imat}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['imat'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('imat')}}</mat-error>
+          }
+        </mat-form-field>
+        <h4 class="border-bottom border-primary pb-1 mb-3">Voile</h4>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Modèle</mat-label>
+          <input matInput formControlName="voile" [matAutocomplete]="autoCanopy">
+          <mat-autocomplete #autoCanopy="matAutocomplete" [displayWith]="displayVoileFn">
+            @for (option of filteredOptions.canopies | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelVoile(option)">{{option.voile}} - {{option.taille}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['voile'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('voile')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Taille en ft<sup>2</sup></mat-label>
+          <input matInput formControlName="taille" [matAutocomplete]="autoTaille">
+          <mat-autocomplete #autoTaille="matAutocomplete" [displayWith]="displayTailleFn">
+            @for (option of filteredOptions.tailles | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelTaille(option)">{{option.voile}} - {{option.taille}}</mat-option>
+            }
+          </mat-autocomplete>
+          <span matTextSuffix>ft<sup>2</sup></span>
+          @if (this.jumpForm.controls['taille'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('taille')}}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-primary pb-1 mb-3">Altitude</h4>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Hauteur de largage</mat-label>
+          <input matInput formControlName="hauteur" type="number" min="0" step="1">
+          @if (this.jumpForm.controls['hauteur'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('hauteur')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Hauteur de déploiement</mat-label>
+          <input matInput formControlName="deploiement" type="number" min="0" step="1">
+          @if (this.jumpForm.controls['deploiement'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('deploiement')}}</mat-error>
+          }
+        </mat-form-field>
+        <h4 class="border-bottom border-primary pb-1 mb-3">Discipline</h4>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Categorie</mat-label>
+          <input matInput formControlName="categorie" [matAutocomplete]="autoCategorie">
+          <mat-autocomplete #autoCategorie="matAutocomplete" [displayWith]="displayCategorieFn">
+            @for (option of filteredOptions.categories | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelCategorie(option)">{{option.categorie}}{{option.categorie && option.module ? ' - ' : ''}}{{option.module}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['categorie'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('categorie')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Module</mat-label>
+          <input matInput formControlName="module" [matAutocomplete]="autoModule">
+          <mat-autocomplete #autoModule="matAutocomplete" [displayWith]="displayModuleFn">
+            @for (option of filteredOptions.modules | async; track option) {
+              <mat-option [value]="option" (onSelectionChange)="onSelModule(option)">{{option.categorie}}{{option.categorie && option.module ? ' - ' : ''}}{{option.module}}</mat-option>
+            }
+          </mat-autocomplete>
+          @if (this.jumpForm.controls['module'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('module')}}</mat-error>
+          }
+        </mat-form-field>
+        <h4 class="border-bottom border-primary pb-1 mb-3">Divers</h4>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Accessoires</mat-label>
+          <input matInput formControlName="accessoires">
+          @if (this.jumpForm.controls['accessoires'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('accessoires')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Zone</mat-label>
+          <input matInput formControlName="zone">
+          @if (this.jumpForm.controls['zone'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('zone')}}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-primary pb-1 mb-3">Groupe</h4>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Sautants</mat-label>
+          <input matInput placeholder="Ajouter un sautant" [formControl]="tagField" (keyup.enter)="addSautant()">
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Nombre de participants</mat-label>
+          <input matInput formControlName="participants" type="number" min="0" step="1">
+          @if (this.jumpForm.controls['participants'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('participants')}}</mat-error>
+          }
+        </mat-form-field>
+        <div class="mb-2">
+          @for (sautant of jump.sautants; track sautant) {
+            <span class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+              <mat-icon class="align-middle pointer me-1" fontIcon="close" (click)="removeSautant(sautant)"></mat-icon>
+              {{ sautant }}
+            </span>
+          }
+          <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+            <mat-icon class="align-middle pointer me-1" fontIcon="person"></mat-icon>
+            {{ jump.author.username }}
+          </span>
+        </div>
+      </div>
+      <div class="col-lg-6 col-md-12">
+        <h4 class="border-bottom border-primary pb-1 mb-3">Programme</h4>
+        <mat-form-field appearance="fill" class="me-2 w-100">
+          <mat-label>Programme</mat-label>
+          <textarea matInput formControlName="programme"></textarea>
+          @if (this.jumpForm.controls['programme'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('programme')}}</mat-error>
+          }
+        </mat-form-field>
+        <h4 class="border-bottom border-primary pb-1 mb-3">Vidéo</h4>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Dossier</mat-label>
+          <input matInput formControlName="dossier">
+          @if (this.jumpForm.controls['dossier'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('dossier')}}</mat-error>
+          }
+        </mat-form-field>
+        <mat-form-field appearance="fill" class="me-2">
+          <mat-label>Video</mat-label>
+          <input matInput formControlName="video">
+          @if (this.jumpForm.controls['video'].status === 'INVALID') {
+            <mat-error>{{getErrorMessage('video')}}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+    </form>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <span class="flex-spacer"></span>
+  <button mat-button (click)="closeDialog()" class="me-1">Annuler</button>
+  <button mat-button color="primary" [disabled]="!jumpForm.valid" (click)="submitForm()" cdkFocusInitial>Enregistrer</button>
+</mat-dialog-actions>

src/app/components/logbook/dialogs/jump-edit.dialog.ts

@@ -0,0 +1,442 @@
+import { Component, OnDestroy, inject } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { Observable, Subscription } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+import { AeronefByImat, CanopyModelBySize, DropZoneByOaci, Jump, JumpByModule } from '@models';
+import { AeronefsService, CanopiesService, DropZonesService, JumpsService } from '@services';
+
+@Component({
+    selector: 'app-jump-edit-dialog',
+    templateUrl: 'jump-edit.dialog.html',
+    imports: [
+        AsyncPipe,
+        FormsModule,
+        ReactiveFormsModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+        MatOptionModule,
+    ],
+})
+export class JumpEditDialogComponent implements OnDestroy {
+    dialogRef = inject<MatDialogRef<JumpEditDialogComponent>>(MatDialogRef);
+    private fb = inject(FormBuilder);
+    private _aeronefsService = inject(AeronefsService);
+    private _canopiesService = inject(CanopiesService);
+    private _dropZonesService = inject(DropZonesService);
+    private _jumpsService = inject(JumpsService);
+    jump = inject<Jump>(MAT_DIALOG_DATA);
+
+    private _aeronefByImat: Subscription = new Subscription();
+    private _canopyModelBySize: Subscription = new Subscription();
+    private _dropZoneByOaci: Subscription = new Subscription();
+    private _jumpByModule: Subscription = new Subscription();
+    public tagField = new FormControl<string>('', { nonNullable: true });
+    public jumpForm: FormGroup;
+    public inputOptions: {
+        aeronefs: Array<AeronefByImat>;
+        canopies: Array<CanopyModelBySize>;
+        dropzones: Array<DropZoneByOaci>;
+        categories: Array<JumpByModule>;
+    };
+    public filteredOptions: {
+        aeronefs: Observable<Array<AeronefByImat>>;
+        imats: Observable<Array<AeronefByImat>>;
+        canopies: Observable<Array<CanopyModelBySize>>;
+        tailles: Observable<Array<CanopyModelBySize>>;
+        dropzones: Observable<Array<DropZoneByOaci>>;
+        oaci: Observable<Array<DropZoneByOaci>>;
+        categories: Observable<Array<JumpByModule>>;
+        modules: Observable<Array<JumpByModule>>;
+    };
+
+    constructor() {
+        this.inputOptions = { aeronefs: [], canopies: [], dropzones: [], categories: [] };
+        const controlsConfig = {
+            slug: [this.jump.slug, Validators.required],
+            date: [this.jump.date, Validators.required],
+            numero: [this.jump.numero, Validators.required],
+            lieu: [this.jump.lieu, Validators.required],
+            oaci: this.jump.oaci,
+            aeronef: [this.jump.aeronef, Validators.required],
+            imat: this.jump.imat,
+            hauteur: [this.jump.hauteur, Validators.required],
+            deploiement: this.jump.deploiement,
+            voile: this.jump.voile,
+            taille: [this.jump.taille?.toString(), Validators.required],
+            categorie: this.jump.categorie,
+            module: this.jump.module,
+            participants: [this.jump.participants, Validators.required],
+            programme: this.jump.programme,
+            accessoires: this.jump.accessoires,
+            zone: this.jump.zone,
+            dossier: this.jump.dossier,
+            video: this.jump.video,
+        };
+        this.jumpForm = this.fb.group(controlsConfig);
+
+        this.filteredOptions = {
+            aeronefs: this.jumpForm.controls['aeronef'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const aeronef = typeof value === 'string' ? value : value?.aeronef;
+                    return aeronef ? this._filterImat(aeronef as string) : this.inputOptions.aeronefs.slice();
+                }),
+            ),
+            imats: this.jumpForm.controls['imat'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const imat = typeof value === 'string' ? value : value?.imat;
+                    return imat ? this._filterImat(imat as string) : this.inputOptions.aeronefs.slice();
+                }),
+            ),
+            canopies: this.jumpForm.controls['voile'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const voile = typeof value === 'string' ? value : value?.voile;
+                    return voile ? this._filterTaille(voile as string) : this.inputOptions.canopies.slice();
+                }),
+            ),
+            tailles: this.jumpForm.controls['taille'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const taille = typeof value === 'string' ? value : value?.taille.toString();
+                    return taille ? this._filterTaille(taille as string) : this.inputOptions.canopies.slice();
+                }),
+            ),
+            dropzones: this.jumpForm.controls['lieu'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const lieu = typeof value === 'string' ? value : value?.lieu;
+                    return lieu ? this._filterOaci(lieu as string) : this.inputOptions.dropzones.slice();
+                }),
+            ),
+            oaci: this.jumpForm.controls['oaci'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const oaci = typeof value === 'string' ? value : value?.oaci;
+                    return oaci ? this._filterOaci(oaci as string) : this.inputOptions.dropzones.slice();
+                }),
+            ),
+            categories: this.jumpForm.controls['categorie'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const category = typeof value === 'string' ? value : value?.categorie;
+                    return category ? this._filterModule(category as string) : this.inputOptions.categories.slice();
+                }),
+            ),
+            modules: this.jumpForm.controls['module'].valueChanges.pipe(
+                startWith(''),
+                map((value) => {
+                    const module = typeof value === 'string' ? value : value?.module;
+                    return module ? this._filterModule(module as string) : this.inputOptions.categories.slice();
+                }),
+            ),
+        };
+        this._loadAeronefByImat();
+        this._loadCanopyModelBySize();
+        this._loadDropZoneByOaci();
+        this._loadJumpByModule();
+    }
+
+    ngOnDestroy() {
+        this._aeronefByImat.unsubscribe();
+        this._canopyModelBySize.unsubscribe();
+        this._dropZoneByOaci.unsubscribe();
+        this._jumpByModule.unsubscribe();
+    }
+
+    private _filterImat(imat: string): Array<AeronefByImat> {
+        const filterValue = imat.toLowerCase();
+        return this.inputOptions.aeronefs.filter(
+            (option) =>
+                option.aeronef.toLowerCase().includes(filterValue) || option.imat.toLowerCase().includes(filterValue),
+        );
+    }
+
+    private _filterModule(module: string): Array<JumpByModule> {
+        const filterValue = module.toLowerCase();
+        return this.inputOptions.categories.filter(
+            (option) =>
+                option.categorie.toLowerCase().includes(filterValue) ||
+                option.module.toLowerCase().includes(filterValue),
+        );
+    }
+
+    private _filterOaci(oaci: string): Array<DropZoneByOaci> {
+        const filterValue = oaci.toLowerCase();
+        return this.inputOptions.dropzones.filter(
+            (option) =>
+                option.lieu.toLowerCase().includes(filterValue) || option.oaci.toLowerCase().includes(filterValue),
+        );
+    }
+
+    private _filterTaille(taille: string): Array<CanopyModelBySize> {
+        const filterValue = taille.toLowerCase();
+        return this.inputOptions.canopies.filter(
+            (option) =>
+                option.voile.toLowerCase().includes(filterValue) || option.taille.toString().includes(filterValue),
+        );
+    }
+
+    private _loadAeronefByImat(): void {
+        const aeronefs$ = this._aeronefsService.getAllByImat();
+        this._aeronefByImat = aeronefs$.subscribe((aggregate: Array<AeronefByImat>) => {
+            this.inputOptions.aeronefs = aggregate;
+        });
+    }
+
+    private _loadCanopyModelBySize(): void {
+        const canopies$ = this._canopiesService.getAllBySizeByModel();
+        this._canopyModelBySize = canopies$.subscribe((aggregate: Array<CanopyModelBySize>) => {
+            this.inputOptions.canopies = aggregate;
+        });
+    }
+
+    private _loadDropZoneByOaci(): void {
+        const dropzones$ = this._dropZonesService.getAllByOaci();
+        this._dropZoneByOaci = dropzones$.subscribe((aggregate: Array<DropZoneByOaci>) => {
+            this.inputOptions.dropzones = aggregate;
+        });
+    }
+
+    private _loadJumpByModule(): void {
+        const jumps$ = this._jumpsService.getAllByModule();
+        this._jumpByModule = jumps$.subscribe((aggregate: Array<JumpByModule>) => {
+            this.inputOptions.categories = aggregate;
+        });
+    }
+
+    addSautant(): void {
+        const tag = this.tagField.value;
+        if (tag != null && tag.trim() !== '' && this.jump.sautants.indexOf(tag) < 0) {
+            this.jump.sautants.push(tag);
+        }
+        const participants = this.jump.sautants.length + 1;
+        this.jumpForm.controls['participants'].setValue(participants);
+        this.tagField.reset('');
+    }
+
+    closeDialog(): void {
+        // close the dialog without result
+        this.dialogRef.close();
+    }
+
+    displayAeronefFn(aeronef: AeronefByImat): string {
+        let res = '';
+        if (aeronef) {
+            if (typeof aeronef === 'string') {
+                res = aeronef;
+            } else {
+                res = aeronef.aeronef ? aeronef.aeronef : '';
+            }
+        }
+        return res;
+    }
+
+    displayImatFn(aeronef: AeronefByImat): string {
+        let res = '';
+        if (aeronef) {
+            if (typeof aeronef === 'string') {
+                res = aeronef;
+            } else {
+                res = aeronef.imat ? aeronef.imat : '';
+            }
+        }
+        return res;
+    }
+
+    displayLieuFn(dropzone: DropZoneByOaci): string {
+        let res = '';
+        if (dropzone) {
+            if (typeof dropzone === 'string') {
+                res = dropzone;
+            } else {
+                res = dropzone.lieu ? dropzone.lieu : '';
+            }
+        }
+        return res;
+    }
+
+    displayOaciFn(dropzone: DropZoneByOaci): string {
+        let res = '';
+        if (dropzone) {
+            if (typeof dropzone === 'string') {
+                res = dropzone;
+            } else {
+                res = dropzone.oaci ? dropzone.oaci : '';
+            }
+        }
+        return res;
+    }
+
+    displayTailleFn(canopy: CanopyModelBySize): string {
+        let res = '';
+        if (canopy) {
+            if (typeof canopy === 'string') {
+                res = canopy;
+            } else {
+                res = canopy.taille ? canopy.taille.toString() : '';
+            }
+        }
+        return res;
+    }
+
+    displayVoileFn(canopy: CanopyModelBySize): string {
+        let res = '';
+        if (canopy) {
+            if (typeof canopy === 'string') {
+                res = canopy;
+            } else {
+                res = canopy.voile ? canopy.voile : '';
+            }
+        }
+        return res;
+    }
+
+    displayCategorieFn(jump: JumpByModule): string {
+        let res = '';
+        if (jump) {
+            if (typeof jump === 'string') {
+                res = jump;
+            } else {
+                res = jump.categorie ? jump.categorie : '';
+            }
+        }
+        return res;
+    }
+
+    displayModuleFn(jump: JumpByModule): string {
+        let res = '';
+        if (jump) {
+            if (typeof jump === 'string') {
+                res = jump;
+            } else {
+                res = jump.module ? jump.module : '';
+            }
+        }
+        return res;
+    }
+
+    getErrorMessage(name: string): string {
+        if (this.jumpForm.controls[name].errors !== null) {
+            return `Ce champ est requis.`;
+        }
+        return '';
+    }
+
+    onSelAeronef(aeronef: AeronefByImat) {
+        if (aeronef && aeronef.aeronef) {
+            this.jumpForm.controls['imat'].setValue(aeronef);
+        }
+    }
+
+    onSelImat(aeronef: AeronefByImat) {
+        if (aeronef && aeronef.imat) {
+            this.jumpForm.controls['aeronef'].setValue(aeronef);
+        }
+    }
+
+    onSelLieu(dropzone: DropZoneByOaci) {
+        if (dropzone && dropzone.oaci) {
+            this.jumpForm.controls['oaci'].setValue(dropzone);
+        }
+    }
+
+    onSelOaci(dropzone: DropZoneByOaci) {
+        if (dropzone && dropzone.lieu) {
+            this.jumpForm.controls['lieu'].setValue(dropzone);
+        }
+    }
+
+    onSelTaille(canopy: CanopyModelBySize) {
+        if (canopy && canopy.voile) {
+            this.jumpForm.controls['voile'].setValue(canopy);
+        }
+    }
+
+    onSelVoile(canopy: CanopyModelBySize) {
+        if (canopy && canopy.taille) {
+            this.jumpForm.controls['taille'].setValue(canopy);
+        }
+    }
+
+    onSelCategorie(jump: JumpByModule) {
+        if (jump && jump.categorie) {
+            this.jumpForm.controls['module'].setValue(jump);
+        }
+    }
+
+    onSelModule(jump: JumpByModule) {
+        if (jump && jump.module) {
+            this.jumpForm.controls['categorie'].setValue(jump);
+        }
+    }
+
+    removeSautant(index: string): void {
+        this.jump.sautants = this.jump.sautants.filter((sautant) => sautant !== index);
+        const participants = this.jump.sautants.length + 1;
+        this.jumpForm.controls['participants'].setValue(participants);
+    }
+
+    submitForm(): void {
+        // update the model
+        this.updateJump(this.jumpForm.value);
+        this.jump.lieu =
+            typeof this.jumpForm.controls['lieu'].value === 'string'
+                ? this.jumpForm.controls['lieu'].value
+                : this.jumpForm.controls['lieu'].value.lieu;
+        this.jump.oaci =
+            typeof this.jumpForm.controls['oaci'].value === 'string'
+                ? this.jumpForm.controls['oaci'].value
+                : this.jumpForm.controls['oaci'].value.oaci;
+        this.jump.aeronef =
+            typeof this.jumpForm.controls['aeronef'].value === 'string'
+                ? this.jumpForm.controls['aeronef'].value
+                : this.jumpForm.controls['aeronef'].value.aeronef;
+        this.jump.imat =
+            typeof this.jumpForm.controls['imat'].value === 'string'
+                ? this.jumpForm.controls['imat'].value
+                : this.jumpForm.controls['imat'].value.imat;
+        this.jump.voile =
+            typeof this.jumpForm.controls['voile'].value === 'string'
+                ? this.jumpForm.controls['voile'].value
+                : this.jumpForm.controls['voile'].value.voile;
+        this.jump.taille =
+            typeof this.jumpForm.controls['taille'].value === 'string'
+                ? this.jumpForm.controls['taille'].value
+                : this.jumpForm.controls['taille'].value.taille;
+        this.jump.categorie =
+            typeof this.jumpForm.controls['categorie'].value === 'string'
+                ? this.jumpForm.controls['categorie'].value
+                : this.jumpForm.controls['categorie'].value.categorie;
+        this.jump.module =
+            typeof this.jumpForm.controls['module'].value === 'string'
+                ? this.jumpForm.controls['module'].value
+                : this.jumpForm.controls['module'].value.module;
+        // close the dialog with result
+        this.dialogRef.close(this.jump);
+    }
+
+    updateJump(values: NonNullable<unknown>): void {
+        Object.assign(this.jump, values);
+    }
+}

src/app/components/logbook/dialogs/jump-view.dialog.html

@@ -0,0 +1,214 @@
+<h2 mat-dialog-title class="bg-navy-light text-white border-bottom border-light-subtle d-flex mb-3 pt-3 pb-2">
+    Saut n° {{jump.numero}}<span class="flex-spacer"></span>
+    <mat-icon fontIcon="close" class="pointer" (click)="closeDialog()"></mat-icon>
+</h2>
+<mat-dialog-content>
+    <div class="container">
+        <div class="d-flex border-bottom border-light-subtle pb-2 mb-3">
+            <div class="flex-fill">
+                <h5>Le {{ jump.date | date: 'dd/MM/yyyy' }} à {{ jump.lieu }} {{ jump.zone ? jump.zone : jump.oaci }} :</h5>
+            </div>
+            <span class="flex-spacer"></span>
+            <div class="align-self-center me-2">
+                <span class="text-accent fs-5">{{ jump.categorie }}</span>
+                @if (jump.module) {
+                    <span class="fs-5 mx-2">/</span>
+                    <span class="text-muted fs-5">{{ jump.module }}</span>
+                }
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-6 col-md-12">
+                <dl class="dl-horizontal">
+                    <dt>Aeronef:</dt>
+                    <dd>{{ jump.aeronef }} {{ jump.imat }}</dd>
+                    <dt>Voile:</dt>
+                    <dd>{{ jump.voile }} {{ jump.taille }} ft<sup>2</sup></dd>
+                    @if (jump.programme) {
+                        <dt>Programme:</dt>
+                        <dd>{{ jump.programme }}</dd>
+                    }
+                </dl>
+            </div>
+            <div class="col-lg-6 col-md-12">
+                <dl class="dl-horizontal">
+                    @if (!jump.x2data) {
+                    <dt>Hauteur:</dt>
+                    <dd>{{ jump.hauteur }} m</dd>
+                    <dt>Déploiement:</dt>
+                    <dd>{{ jump.deploiement }} m</dd>
+                    }
+                    @for (file of jump.files; track file) {
+                    <dt>Fichier {{ file.type }}</dt>
+                    <dd>{{ file.name }}</dd>
+                    }
+                </dl>
+            </div>
+        </div>
+        <mat-divider></mat-divider>
+        @if (jump.x2data) {
+            <div class="row my-3">
+                <div class="col-sm-4 col-xs-12 text-center">
+                    <h6>Hauteur</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.altitude.exit }} m</span>
+                </div>
+                <div class="col-sm-4 col-xs-12 text-center">
+                    <h6 class="d-flex justify-content-center"><mat-icon fontIcon="timer" class="me-1 fs-5"></mat-icon> Durée de la chute</h6>
+                    <span class="text-primary fw-medium fs-5">{{formatDuration(jump.x2data.duration.freeFall)}}</span>
+                </div>
+                <div class="col-sm-4 col-xs-12 text-center">
+                    <h6>Déploiement</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.altitude.deployment }} m</span>
+                </div>
+            </div>
+            <div class="row my-4">
+                <div class="{{ jump.accessoires ? 'col-sm-6 ' : '' }}col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-4"><mat-icon fontIcon="people" class="me-1"></mat-icon> Participants ({{ jump.sautants.length + 1 }})</h5>
+                    @for (sautant of jump.sautants; track sautant) {
+                    <span class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
+                        {{ sautant }}
+                    </span>
+                    }
+                    <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
+                        {{ jump.author.username }}
+                    </span>
+                </div>
+                @if (jump.accessoires) {
+                <div class="col-sm-6 col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-4"><mat-icon fontIcon="auto_awesome" class="me-1"></mat-icon> Accessoires</h5>
+                    <span class="badge rounded-pill bg-navy-light mb-2 me-1 pe-3 py-1 fw-normal">
+                        <mat-icon class="align-middle me-1" fontIcon="auto_awesome"></mat-icon>
+                        {{ jump.accessoires }}
+                    </span>
+                </div>
+                }
+            </div>
+
+            <div class="row my-3">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="speed" class="me-1"></mat-icon> Vitesse en chute</h5>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Max Verticale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.vertical.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Max Horizontale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.horizontal.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Moyenne Verticale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.vertical.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Moyenne Horizontale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.freeFall.horizontal.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+            </div>
+            <mat-divider></mat-divider>
+
+            <div class="row mt-4 mb-3">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="speed" class="me-1"></mat-icon> Vitesse sous voile</h5>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Max Verticale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.vertical.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Max Horizontale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.horizontal.max / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Moyenne Verticale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.vertical.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Moyenne Horizontale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ (jump.x2data.speed.underCanopy.horizontal.avg / 1000 * 60 * 60) | number : '1.0-0' }} km/h</span>
+                </div>
+            </div>
+            <mat-divider></mat-divider>
+
+            <div class="row mt-3">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="square_foot" class="me-1"></mat-icon> Finesse</h5>
+                </div>
+                <div class="col-sm-6 col-xs-12 text-center">
+                    <h6>Finesse en chute</h6>
+                </div>
+                <div class="col-sm-6 col-xs-12 text-center">
+                    <h6>Finesse sous voile</h6>
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Finesse Max</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.freeFall.max | number : '1.2-2' }}</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Finesse Moyenne</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.freeFall.avg | number : '1.2-2' }}</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Finesse Max</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.underCanopy.max | number : '1.2-2' }}</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Finesse Moyenne</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.glideRatio.underCanopy.avg | number : '1.2-2' }}</span>
+                </div>
+            </div>
+            <mat-divider></mat-divider>
+
+            <div class="row my-3">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-3"><mat-icon fontIcon="straighten" class="me-1"></mat-icon> Distance</h5>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Distance au largage</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.distance.exitFromLandingZone| number : '1.0-0' }} m</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6 class="d-flex justify-content-center"><mat-icon fontIcon="timer" class="me-1 fs-5"></mat-icon> Durée sous voile</h6>
+                    <span class="text-primary fw-medium fs-5">{{formatDuration(jump.x2data.duration.underCanopy)}}</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Distance totale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.distance.totalFlying | number : '1.0-0' }} m</span>
+                </div>
+                <div class="col-sm-3 col-xs-12 text-center">
+                    <h6>Distance horizontale</h6>
+                    <span class="text-primary fw-medium fs-5">{{ jump.x2data.distance.totalHorizontal | number : '1.0-0' }} m</span>
+                </div>
+            </div>
+            <mat-divider></mat-divider>
+        }
+        @else {
+            <div class="row my-4">
+                <div class="col-xs-12 text-center">
+                    <h5 class="d-flex justify-content-center mb-4"><mat-icon fontIcon="people" class="me-1"></mat-icon> Participants ({{ jump.sautants.length + 1 }})</h5>
+                    @for (sautant of jump.sautants; track sautant) {
+                    <span class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
+                        {{ sautant }}
+                    </span>
+                    }
+                    <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+                        <mat-icon class="align-middle me-1" fontIcon="person"></mat-icon>
+                        {{ jump.author.username }}
+                    </span>
+                </div>
+            </div>
+            <mat-divider></mat-divider>
+            <div class="d-flex justify-content-center my-3 fs-5"><mat-icon fontIcon="satellite_alt" class="me-2"></mat-icon> Aucune donnée GPS</div>
+            <mat-divider></mat-divider>
+        }
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <span class="flex-spacer"></span>
+    <button mat-button (click)="closeDialog()" class="me-1">Fermer</button>
+</mat-dialog-actions>

src/app/components/logbook/dialogs/jump-view.dialog.ts

@@ -0,0 +1,29 @@
+import { Component, inject } from '@angular/core';
+import { DatePipe, DecimalPipe } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+
+import { Jump } from '@models';
+
+@Component({
+    selector: 'app-jump-view-dialog',
+    templateUrl: 'jump-view.dialog.html',
+    imports: [DatePipe, DecimalPipe, MatButtonModule, MatDialogModule, MatDividerModule, MatIconModule],
+})
+export class JumpViewDialogComponent {
+    dialogRef = inject<MatDialogRef<JumpViewDialogComponent>>(MatDialogRef);
+    jump = inject<Jump>(MAT_DIALOG_DATA);
+
+    closeDialog(): void {
+        // close the dialog without result
+        this.dialogRef.close();
+    }
+
+    formatDuration(duration: number): string {
+        const start = new Date(0);
+        start.setSeconds(duration);
+        return start.toISOString().substring(14, 19);
+    }
+}

src/app/components/logbook/logbook.component.html

@@ -0,0 +1,105 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{title}}</h1>
+            <span [hidden]="!lastJump.numero" class="me-2 fs-6">
+                Dernier saut enregistré : <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: 'dd/MM/yyyy' }}</span>
+            </span>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2">
+            <button mat-icon-button (click)="openAddDialog()" aria-label="Ajouter">
+                <mat-icon fontIcon="add_notes"></mat-icon>
+            </button>
+            <button mat-icon-button [matMenuTriggerFor]="menuJump" aria-label="Menu Jump">
+                <mat-icon fontIcon="more_vert"></mat-icon>
+            </button>
+            <mat-menu #menuJump="matMenu">
+                <button mat-menu-item (click)="openAddDialog()">
+                    <mat-icon fontIcon="add_notes"></mat-icon>
+                    <span>Ajouter un saut</span>
+                </button>
+                @for (menuitem of menuItems.getMenuLogbook(); track menuitem) {
+                    @if (menuitem.type === 'link') {
+                    <button mat-menu-item [routerLink]="['/', menuitem.state]">
+                        <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
+                        <span>{{ menuitem.name }}</span>
+                    </button>
+                    }
+                }
+            </mat-menu>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    @if (jumpsToHundred() <= 20) {
+    <div class="d-flex pb-2 pe-2">
+        <span class="flex-spacer"></span>
+        <mat-icon fontIcon="warning" color="teal"></mat-icon>
+        <div class="text-end text-teal align-self-center ms-2">
+            {{ lastJump.numero + jumpsToHundred() }}<sup>ème</sup> à venir dans {{ jumpsToHundred() }}
+            {{ jumpsToHundred() > 1 ? 'sauts' : 'saut' }}
+        </div>
+    </div>
+    }
+    <mat-card>
+        <mat-card-header class="p-0">
+            <mat-expansion-panel class="w-100">
+                <mat-expansion-panel-header class="bg-accent">
+                    <mat-panel-title>Filtrer les sauts</mat-panel-title>
+                    @if (jumpsCount < lastJump.numero) {
+                    <mat-panel-description>
+                        {{ jumpsCount }} {{ jumpsCount > 1 ? 'sauts' : 'saut' }} sur {{ lastJump.numero }} correspondent à la recherche
+                    </mat-panel-description>
+                    }
+                </mat-expansion-panel-header>
+                <div class="d-flex mt-3 mb-0">
+                    <div class="flex-fill">
+                        <div class="label-container d-flex justify-content-between mx-2">
+                            <label for="yearRange">Année du saut</label>
+                            <label for="yearRange">de <span class="fw-bold">{{listConfig.filters.yearRangeStart}}</span> à <span class="fw-bold">{{listConfig.filters.yearRangeEnd}}</span></label>
+                        </div>
+                        <mat-slider [min]="rangesMinMax.year.start" [max]="rangesMinMax.year.end" step="1" discrete>
+                            <input id="yearRange" matSliderStartThumb [(ngModel)]="listConfig.filters.yearRangeStart">
+                            <input matSliderEndThumb [(ngModel)]="listConfig.filters.yearRangeEnd">
+                        </mat-slider>
+                    </div>
+                    <div class="flex-fill">
+                        <div class="label-container d-flex justify-content-between mx-2">
+                            <label for="numeroRange">Numéro du saut</label>
+                            <label for="numeroRange">de <span class="fw-bold">{{listConfig.filters.numeroRangeStart}}</span> à <span class="fw-bold">{{listConfig.filters.numeroRangeEnd}}</span></label>
+                        </div>
+                        <mat-slider [min]="rangesMinMax.numero.start" [max]="rangesMinMax.numero.end" step="1" discrete>
+                            <input id="numeroRange" matSliderStartThumb [(ngModel)]="listConfig.filters.numeroRangeStart">
+                            <input matSliderEndThumb [(ngModel)]="listConfig.filters.numeroRangeEnd">
+                        </mat-slider>
+                    </div>
+                    <div class="flex-fill">
+                        <div class="label-container d-flex justify-content-between mx-2">
+                            <label for="tailleRange">Taille de la voile</label>
+                            <label for="tailleRange">de <span class="fw-bold">{{listConfig.filters.tailleRangeStart}}</span> ft<sup>2</sup> à <span class="fw-bold">{{listConfig.filters.tailleRangeEnd}}</span> ft<sup>2</sup></label>
+                        </div>
+                        <mat-slider [min]="rangesMinMax.taille.start" [max]="rangesMinMax.taille.end" step="1" discrete>
+                            <input id="tailleRange" matSliderStartThumb [(ngModel)]="listConfig.filters.tailleRangeStart">
+                            <input matSliderEndThumb [(ngModel)]="listConfig.filters.tailleRangeEnd">
+                        </mat-slider>
+                    </div>
+                    <div class="flex-fill">
+                        <div class="label-container d-flex justify-content-between mx-2">
+                            <label for="participantsRange">Taille du groupe</label>
+                            <label for="participantsRange">de <span class="fw-bold">{{listConfig.filters.participantsRangeStart}}</span> à <span class="fw-bold">{{listConfig.filters.participantsRangeEnd}}</span></label>
+                        </div>
+                        <mat-slider [min]="rangesMinMax.participants.start" [max]="rangesMinMax.participants.end" step="1" discrete>
+                            <input id="participantsRange" matSliderStartThumb [(ngModel)]="listConfig.filters.participantsRangeStart">
+                            <input matSliderEndThumb [(ngModel)]="listConfig.filters.participantsRangeEnd">
+                        </mat-slider>
+                    </div>
+                    <span class="flex-spacer"></span>
+                </div>
+            </mat-expansion-panel>
+        </mat-card-header>
+        <mat-card-content class="mt-2">
+            <app-jump-table (countChange)="setTotalResults($event)" #jumpTable [config]="listConfig" [isUser]="isUser" [showAdd]="canModify" [title]="title">
+            </app-jump-table>
+        </mat-card-content>
+    </mat-card>
+</div>

src/app/components/logbook/logbook.component.scss

@@ -0,0 +1,11 @@
+.mat-expansion-panel {
+    border-bottom-right-radius: initial;
+    border-bottom-left-radius: initial;
+}
+.mat-mdc-slider {
+    max-width: 300px;
+    width: 100%;
+}
+.label-container {
+    max-width: 284px;
+}

src/app/components/logbook/logbook.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideNativeDateAdapter } from '@angular/material/core';
+
+import { MenuItems } from '@components/shared';
+import { LogbookComponent } from './logbook.component';
+
+describe('LogbookComponent', () => {
+  let component: LogbookComponent;
+  let fixture: ComponentFixture<LogbookComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [LogbookComponent],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideAnimations(),
+        provideNativeDateAdapter(),
+        MenuItems,
+      ],
+    });
+    fixture = TestBed.createComponent(LogbookComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/logbook/logbook.component.ts

@@ -0,0 +1,402 @@
+import { CommonModule } from '@angular/common';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+import { Component, AfterContentChecked, OnInit, OnDestroy, computed, signal, Signal, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSliderModule } from '@angular/material/slider';
+import {
+    MatSnackBar,
+    MatSnackBarConfig,
+    MatSnackBarHorizontalPosition,
+    MatSnackBarModule,
+    MatSnackBarVerticalPosition,
+} from '@angular/material/snack-bar';
+import { Observable, Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { JumpAddDialogComponent } from '@components/logbook/dialogs';
+import { MenuItems, JumpTableComponent } from '@components/shared';
+import { Errors, Jump, JumpFile, JumpFileType, JumpListConfig, Range, User, X2Data } from '@models';
+import { JumpsService, JumpTableService, UserService } from '@services';
+
+@Component({
+    imports: [
+        CommonModule,
+        RouterModule,
+        FormsModule,
+        MatButtonModule,
+        MatCardModule,
+        MatDividerModule,
+        MatExpansionModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatDialogModule,
+        MatSliderModule,
+        MatSnackBarModule,
+        JumpTableComponent,
+    ],
+    selector: 'app-logbook',
+    templateUrl: './logbook.component.html',
+    styleUrl: './logbook.component.scss',
+    animations: [
+        trigger('flyInOut', [
+            state('in', style({ transform: 'translateY(0)' })),
+            transition('void => *', [style({ transform: 'translateY(-100%)' }), animate(200)]),
+            transition('* => void', [style({ transform: 'translateY(100%)' }), animate(200)]),
+        ]),
+    ],
+})
+export class LogbookComponent implements OnInit, OnDestroy, AfterContentChecked {
+    private route = inject(ActivatedRoute);
+    private router = inject(Router);
+    private dialog = inject(MatDialog);
+    private snackBar = inject(MatSnackBar);
+    private _jumpsService = inject(JumpsService);
+    private _jumpTableService = inject(JumpTableService);
+    private _userService = inject(UserService);
+    menuItems = inject(MenuItems);
+
+    private _currentUser: Subscription = new Subscription();
+    private _subscriptions: Array<Subscription> = [];
+    private _data: Subscription = new Subscription();
+    private _lastjump: Subscription = new Subscription();
+    private _lastjump$: Observable<Jump> = new Observable();
+    public jumpsCount = 0;
+    public errors!: Errors;
+    public title = 'Carnet de sauts';
+    public jump: Jump = {} as Jump;
+    public lastJump: Jump = {} as Jump;
+    public currentUser: User = {} as User;
+    public listConfig: JumpListConfig = { type: 'all', filters: {} };
+    public isAuthenticated = false;
+    public isUser = true;
+    public canModify = false;
+    public isSubmitting = false;
+    public tableRefresh = false;
+    public jumpRefresh = false;
+    public jumpsSinceHundred: Signal<number> = signal(0);
+    public jumpsToHundred: Signal<number> = signal(100);
+    public rangesMinMax: {
+        numero: Range;
+        taille: Range;
+        participants: Range;
+        hauteur: Range;
+        year: Range;
+    } = {
+        numero: { start: 1, end: 100000 },
+        taille: { start: 1, end: 400 },
+        participants: { start: 1, end: 200 },
+        hauteur: { start: 0, end: 10000 },
+        year: { start: 1970, end: 2020 },
+    };
+
+    ngOnInit() {
+        //this.importJumps();
+        const data$: Observable<{ isAuthenticated: boolean; lastjump: Jump }> = this.route.data as Observable<{
+            isAuthenticated: boolean;
+            lastjump: Jump;
+        }>;
+        this._data = data$.subscribe((data: { isAuthenticated: boolean; lastjump: Jump }) => {
+            this.isAuthenticated = data.isAuthenticated;
+            if (!this.isAuthenticated) {
+                this.router.navigateByUrl('/login');
+                return;
+            }
+
+            const currentUser$: Observable<User> = this._userService.currentUser;
+            this._currentUser = currentUser$.subscribe((userData: User) => {
+                this.currentUser = userData;
+                this.canModify = this.currentUser.role === 'Admin';
+            });
+
+            const currentYear: number = new Date().getFullYear();
+            this.lastJump = data['lastjump'];
+            this.rangesMinMax = {
+                numero: { start: 1, end: data.lastjump.numero },
+                taille: { start: data.lastjump.taille!, end: 230 },
+                participants: { start: 1, end: 20 },
+                hauteur: { start: 1000, end: 8000 },
+                year: { start: 2018, end: currentYear },
+            };
+            this.listConfig.filters.numeroRangeStart = this.rangesMinMax.numero.start;
+            this.listConfig.filters.numeroRangeEnd = this.rangesMinMax.numero.end;
+            this.listConfig.filters.tailleRangeStart = this.rangesMinMax.taille.start;
+            this.listConfig.filters.tailleRangeEnd = this.rangesMinMax.taille.end;
+            this.listConfig.filters.participantsRangeStart = this.rangesMinMax.participants.start;
+            this.listConfig.filters.participantsRangeEnd = this.rangesMinMax.participants.end / 2;
+            this.listConfig.filters.hauteurRangeStart = this.rangesMinMax.hauteur.start;
+            this.listConfig.filters.hauteurRangeEnd = this.rangesMinMax.hauteur.end;
+            this.listConfig.filters.yearRangeStart = this.rangesMinMax.year.start;
+            this.listConfig.filters.yearRangeEnd = this.rangesMinMax.year.end;
+            this.jumpsSinceHundred = computed(() => this.lastJump.numero % 100);
+            this.jumpsToHundred = computed(() => 100 - this.jumpsSinceHundred());
+            /*
+            this._lastjump$ = this._jumpsService.getLastJump();
+            this._lastjump = this._lastjump$.subscribe((jump) => {
+                const currentYear: number = new Date().getFullYear();
+                this.lastJump = jump;
+                this.rangesMinMax = {
+                    numero: {start: 1, end: jump.numero},
+                    taille: {start: jump.taille!, end: 230},
+                    participants: {start: 1, end: 20},
+                    hauteur: {start: 1000, end: 8000},
+                    year: {start: 2018, end: currentYear}
+                }
+                this.listConfig.filters.numeroRangeStart = this.rangesMinMax.numero.start;
+                this.listConfig.filters.numeroRangeEnd = this.rangesMinMax.numero.end;
+                this.listConfig.filters.tailleRangeStart = this.rangesMinMax.taille.start;
+                this.listConfig.filters.tailleRangeEnd = this.rangesMinMax.taille.end;
+                this.listConfig.filters.participantsRangeStart = this.rangesMinMax.participants.start;
+                this.listConfig.filters.participantsRangeEnd = (this.rangesMinMax.participants.end / 2);
+                this.listConfig.filters.hauteurRangeStart = this.rangesMinMax.hauteur.start;
+                this.listConfig.filters.hauteurRangeEnd = this.rangesMinMax.hauteur.end;
+                this.listConfig.filters.yearRangeStart = this.rangesMinMax.year.start;
+                this.listConfig.filters.yearRangeEnd = this.rangesMinMax.year.end;
+                this.jumpsSinceHundred = computed(() => (this.lastJump.numero % 100));
+                this.jumpsToHundred = computed(() => (100 - this.jumpsSinceHundred()));
+            });
+            */
+        });
+    }
+
+    ngOnDestroy() {
+        this._data.unsubscribe();
+        this._currentUser.unsubscribe();
+        this._lastjump.unsubscribe();
+        this._subscriptions.forEach((subscription) => {
+            subscription.unsubscribe();
+        });
+    }
+
+    ngAfterContentChecked() {
+        if (this.tableRefresh != this._jumpTableService.tableRefresh) {
+            this.tableRefresh = this._jumpTableService.tableRefresh;
+            this._lastjump$ = this._jumpsService.getLastJump();
+            this._lastjump = this._lastjump$.subscribe((jump) => {
+                this.lastJump = jump;
+            });
+            console.log('lastjump has been updated in logbook component');
+        }
+    }
+
+    openAddDialog(): void {
+        this.jump = <Jump>{};
+        this.jump.numero = this.lastJump.numero + 1;
+        this.jump.sautants = [];
+        this.jump.participants = 1;
+        const dialogRef = this.dialog.open(JumpAddDialogComponent, {
+            width: '70vw',
+            data: { jump: this.jump, lastJump: this.lastJump },
+        });
+        dialogRef
+            .afterClosed()
+            .pipe(take(1))
+            .subscribe((result) => {
+                if (result != undefined) {
+                    this._onEntry(result);
+                }
+            });
+    }
+
+    setTotalResults(value: number): void {
+        this.jumpsCount = value;
+    }
+
+    private _loadSkydiverIdJumps(jumps: Array<Jump>) {
+        const config: JumpListConfig = { type: 'all', filters: {} } as JumpListConfig;
+        config.filters.limit = 200;
+        config.filters.offset = 0;
+        config.filters.dateRangeStart = `${jumps[0].date!.substring(0, 10)} 00:00:00`;
+        config.filters.dateRangeEnd = `${jumps[0].date!.substring(0, 10)} 23:59:59`;
+        const subscription: Subscription = this._jumpsService
+            .getAllFromSkydiverIdApi(config)
+            .pipe(take(1))
+            .subscribe({
+                next: (data) => {
+                    if (data.items.length) {
+                        const diff = jumps.length - data.items.length;
+                        if (diff < 0) {
+                            console.error(
+                                `${diff} ${diff > 1 ? 'données' : 'donnée'} altimètre de trop le ${jumps[0].date!.substring(0, 10)}`,
+                            );
+                        }
+                        if (diff > 0) {
+                            console.error(
+                                `${diff}/${jumps.length} ${diff > 1 ? 'données altimètre manquantes' : 'donnée altimètre manquante'} le ${jumps[0].date!.substring(0, 10)}`,
+                                jumps,
+                                data.items,
+                            );
+                        }
+                        console.log(
+                            `${jumps.length} ${jumps.length > 1 ? 'sauts' : 'saut'} le ${data.items[0].date!.substring(0, 10)}`,
+                            jumps.sort((a, b) => b.numero! - a.numero!),
+                            data.items,
+                        );
+                        this._addX2Data(data.items, jumps);
+                    } else {
+                        console.info('Aucune données altimètre pour le ', jumps[0].date!.substring(0, 10));
+                    }
+                },
+                error: (err) => {
+                    console.error('getAllFromSkydiverIdApi error');
+                    this.errors = err;
+                },
+            });
+        this._subscriptions.push(subscription);
+    }
+
+    private _addJump(jumps: Array<Jump>, index: number = 0) {
+        this._jumpsService
+            .save(jumps[index])
+            .pipe(take(1))
+            .subscribe({
+                next: (jump) => {
+                    jumps[index] = jump;
+                    console.log('Ajout du saut', jump.numero);
+                    Object.assign(this.jump, jump);
+                    this._openSnackBar(`Le saut n°${jump.numero} a été ajouté !`, 'Annuler');
+                    this._resetErrors();
+                    if (jumps.length == index + 1) {
+                        this._loadSkydiverIdJumps(jumps);
+                    } else {
+                        this._addJump(jumps, index + 1);
+                    }
+                },
+                error: (err) => {
+                    this.errors = err;
+                    this.isSubmitting = false;
+                },
+            });
+    }
+
+    private _addX2Data(x2data: Array<X2Data>, jumps: Array<Jump>, index: number = 0) {
+        const file: JumpFile = {
+            name: x2data[index].name,
+            path: `/Volumes/Storage/Skydive/X2_Logs/${x2data[index].date!.substring(0, 4)}/`,
+            type: JumpFileType.CSV,
+        } as JumpFile;
+        this._subscriptions.push(
+            this._jumpsService
+                .saveX2Data(jumps[index].slug!, file, x2data[index])
+                .pipe(take(1))
+                .subscribe({
+                    next: (jump) => {
+                        jumps[index] = jump;
+                        console.log(`Le fichier ${file.name} a été ajouté au saut n°${jump.numero} !`, 'OK');
+                        if (jumps.length == index + 1 || x2data.length == index + 1) {
+                            this._addKmlFile(jumps);
+                        } else {
+                            this._addX2Data(x2data, jumps, index + 1);
+                        }
+                    },
+                    error: (err) => {
+                        this.errors = err;
+                    },
+                }),
+        );
+    }
+
+    private _addKmlFile(jumps: Array<Jump>, index: number = 0) {
+        if (jumps[index].x2data !== null) {
+            //console.log(`Le fichier ${jump.x2data.name} existe pour le saut n°${jump.numero} !`, `https://skydiver.id/api/jump/${jump.x2data.id}/kml`);
+            const file: JumpFile = {
+                name: jumps[index].x2data.name.substring(0, -4) + '.kml',
+                path: `/Volumes/Storage/Skydive/X2_Kmls/${jumps[index].date.substring(0, 4)}/`,
+                type: JumpFileType.KML,
+            } as JumpFile;
+            this._subscriptions.push(
+                this._jumpsService
+                    .saveKml(jumps[index].slug, file)
+                    .pipe(take(1))
+                    .subscribe({
+                        next: (file) => {
+                            console.log(
+                                `Le fichier ${file.path}${file.name} a été ajouté au saut n°${jumps[index].numero} !`,
+                                'OK',
+                            );
+                            if (jumps.length == index + 1) {
+                                this._resetErrors();
+                                this.jumpRefresh = !this.jumpRefresh;
+                                this._jumpTableService.updateJumpRefresh(this.jumpRefresh);
+                                this._lastjump$ = this._jumpsService.getLastJump();
+                                this._lastjump = this._lastjump$.subscribe((jump) => {
+                                    this.lastJump = jump;
+                                });
+                            } else {
+                                this._addKmlFile(jumps, index + 1);
+                            }
+                        },
+                        error: (err) => {
+                            this.errors = err;
+                        },
+                    }),
+            );
+        }
+    }
+
+    private _onEntry(jumps: Array<Jump>): void {
+        if (jumps.length) {
+            this._addJump(jumps);
+        }
+    }
+
+    /*
+    private _onEntry(jumps: Array<Jump>): void {
+        const max: number = jumps.length;
+        let refresh: boolean = false;
+        jumps.forEach((jump: Jump, index: number) => {
+            console.log('Ajout du saut', jump.numero);
+            Object.assign(this.jump, jump);
+            if (max == index+1) {
+                refresh = true;
+            }
+            this._saveJump(jump, refresh);
+        });
+    }
+
+    private _saveJump(jump: Jump, refresh: boolean) {
+        this._jumpsService.save(jump)
+        .pipe(take(1))
+        .subscribe({
+            next: (jump) => {
+                this._openSnackBar(`Le saut n°${jump.numero} a été ajouté !`, 'Annuler');
+                this._resetErrors();
+                if (refresh) {
+                    this.jumpRefresh = !this.jumpRefresh;
+                    this._jumpTableService.updateJumpRefresh(this.jumpRefresh);
+                    this._lastjump$ = this._jumpsService.getLastJump();
+                    this._lastjump = this._lastjump$.subscribe((jump) => {
+                        this.lastJump = jump;
+                    });
+                }
+            },
+            error: (err) => {
+                this.errors = err;
+                this.isSubmitting = false;
+            }
+        });
+    }
+    */
+
+    private _openSnackBar(content: string, title: string) {
+        const config: MatSnackBarConfig = {
+            horizontalPosition: <MatSnackBarHorizontalPosition>'end',
+            verticalPosition: <MatSnackBarVerticalPosition>'bottom',
+            duration: 4000,
+        };
+        this.snackBar.open(content, title, config);
+    }
+
+    private _resetErrors(): void {
+        this.errors = { errors: {} };
+    }
+}

src/app/components/page/page.component.html

@@ -0,0 +1,30 @@
+<div @flyInOut>
+    <div class="d-flex">
+        <div class="flex-fill">
+            <h1 class="mb-1">{{ article.title }}</h1>
+        </div>
+        <span class="flex-spacer"></span>
+        <div class="align-self-center me-2 text-end">
+            <span class="fs-5 text-primary">{{ article.createdAt | date: 'dd/MM/yyyy' }}</span>
+        </div>
+    </div>
+    <mat-divider class="my-3"></mat-divider>
+    <app-list-errors [errors]="errors"></app-list-errors>
+    <div class="d-flex">
+        {{ article.description }}
+    </div>
+    <div class="d-flex">
+        {{ article.body }}
+    </div>
+    @if (article.tagList) {
+    <mat-divider class="my-3"></mat-divider>
+    <div class="d-flex">
+        @for (tag of getArticleTags(); track tag) {
+        <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
+            <mat-icon class="align-middle me-1" fontIcon="tag"></mat-icon>
+            {{ tag.name }}
+        </span>
+        }
+    </div>
+    }
+</div>