feat(tracks): add default tracks and improve failover for track selec…

…tion

src/app/app.routes.ts

@@ -1,6 +1,8 @@
 import { inject } from '@angular/core';
 import { Router, type Routes } from '@angular/router';
 import { AuthService } from './common/services/auth.service';
+import { from } from 'rxjs';
+import { RETROSKI_DB } from './common/db/db';
 
 export const AuthGuard = () => {
     const authService = inject(AuthService);
@@ -29,6 +31,10 @@ export const AvailableGuard = () => {
     return authService.isAvailable$();
 };
 
+export const DatabaseReady = () => {
+    return from(RETROSKI_DB.populate());
+};
+
 export const routes: Routes = [
     { path: '', loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent) },
     {
@@ -45,7 +51,8 @@ export const routes: Routes = [
     },
     {
         path: 'ride-local',
-        loadComponent: () => import('./pages/ride-local/ride-local.component').then(m => m.RideLocalComponent)
+        loadComponent: () => import('./pages/ride-local/ride-local.component').then(m => m.RideLocalComponent),
+        canActivate: [DatabaseReady]
     },
     {
         path: 'login',

src/app/common/db/db.ts

@@ -15,10 +15,22 @@ export class RetroskiDB extends Dexie {
             ghosts: 'trackId, eventId',
             records: '++id, trackId, rider'
         });
-        this.on('populate', () => this.populate());
     }
 
-    async populate() {}
+    public async populate() {
+        const count = await this.tracks.count();
+        if (count === 0) {
+            try {
+                // Charger le fichier JSON depuis les assets
+                const response = await fetch('/assets/tracks/tracks.json');
+                const defaultTracks: StockableTrack[] = await response.json();
+                await this.tracks.bulkAdd(defaultTracks);
+                console.log('Default tracks added to the local DB');
+            } catch (error) {
+                console.warn('Unable to load default tracks', error);
+            }
+        }
+    }
 }
 
 export const RETROSKI_DB = new RetroskiDB();

src/app/pages/ride-local/ride-local.component.html

@@ -3,6 +3,7 @@
         <app-button-icon icon="close" routerLink="/"></app-button-icon>
     </ng-container>
 </app-toolbar>
+@if(availableTracks()) {
 <div class="retro-content" [formGroup]="form">
     <div class="retro-title">Ride local</div>
     <div class="retro-subtitle">Track setup</div>
@@ -11,7 +12,7 @@
             class="retro-form-line"
             [class.invalid]="form.get('track')?.invalid"
         >
-            @if(availableTracks()?.length) {
+            @if(availableTracks()!.length) {
             <div class="label">Track</div>
             <select class="retro-input" formControlName="track">
                 <option selected [ngValue]="0">Select a track</option>
@@ -22,7 +23,7 @@
             }
         </div>
         <button class="retro-button" routerLink="/manage-tracks">
-            @if(availableTracks()?.length) { Manage local tracks } @else { Build
+            @if(availableTracks()!.length) { Manage local tracks } @else { Build
             your first track }
         </button>
     </div>
@@ -78,3 +79,4 @@
         Start the event
     </button>
 </div>
+}

src/app/pages/ride-local/ride-local.component.ts

@@ -8,6 +8,7 @@ import type { Track } from '../../game/models/track';
 import { TrackService } from '../../common/services/track.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { StorageManager } from '../../game/utils/storage-manager';
+import { tap } from 'rxjs';
 
 interface LocalEventForm {
     track: FormControl<number | null>;
@@ -37,8 +38,9 @@ export class RideLocalComponent implements OnDestroy {
     private localEventService = inject(LocalEventService);
 
     constructor() {
-        this.availableTracks = toSignal(this.trackService.getTracks$('local'));
-        this.initForm();
+        this.availableTracks = toSignal(
+            this.trackService.getTracks$('local').pipe(tap(tracks => this.initForm(tracks)))
+        );
     }
 
     ngOnDestroy(): void {
@@ -67,12 +69,11 @@ export class RideLocalComponent implements OnDestroy {
         }
     }
 
-    private initForm(): void {
+    private initForm(tracks: Track[]): void {
         // Load default riders
         const defaultRiders = localStorage.getItem(RideLocalComponent.RIDERS_KEY)?.split(';') ?? [''];
-        const defaultTrack = localStorage.getItem(RideLocalComponent.TRACK_KEY)
-            ? +localStorage.getItem(RideLocalComponent.TRACK_KEY)!
-            : null;
+        const trackKey = localStorage.getItem(RideLocalComponent.TRACK_KEY);
+        const defaultTrack = trackKey && tracks.some(track => +track.id! === +trackKey) ? +trackKey : 0;
         const defaultRaces = localStorage.getItem(RideLocalComponent.RACES_KEY)
             ? +localStorage.getItem(RideLocalComponent.RACES_KEY)!
             : 2;