fix: Match DTO of backend

fix: Convert string from backend to enum in frontend

src/app/dashboard/dashboard.component.html

@@ -62,7 +62,7 @@
     <ion-item-sliding *ngFor="let timetable of timetables$ | async">
       <ion-item>
         <ion-label>{{ timetable.name }}</ion-label>
-        <ion-label>{{ timetable.route.name }}</ion-label>
+        <ion-label>{{ timetable.routeName }}</ion-label>
         <ion-label>{{ timetable.date | date }}</ion-label>
         <ion-label>{{ TimetableStateTexts[timetable.state] }}</ion-label>
         <ion-label class="ion-text-end">{{ timetable.numberOfServices }}</ion-label>

src/app/timetables/create-timetable/create-timetable.component.html

@@ -45,7 +45,7 @@
           name="route"
           interface="popover"
           [compareWith]="compareWithRoute"
-          [(ngModel)]="timetable.route"
+          [(ngModel)]="route"
         >
           <ion-select-option *ngFor="let route of routes$ | async"
                              [value]="route">

src/app/timetables/create-timetable/create-timetable.component.ts

@@ -34,6 +34,7 @@ import {pencilOutline, pencilSharp, trashOutline, trashSharp} from "ionicons/ico
 import {DEFAULT_TIMETABLE} from "../model/timetable";
 import {addTimetableAction} from "../store/timetables.actions";
 import {AsyncPipe, NgForOf} from "@angular/common";
+import {DEFAULT_ROUTE, Route} from "../../routes/model/route";
 
 @Component({
   selector: 'app-create-timetable',
@@ -52,6 +53,7 @@ export class CreateTimetableComponent extends TimetableComponent {
 
   @ViewChild(IonModal) modal: IonModal | undefined;
 
+  route: Route = {...DEFAULT_ROUTE};
   minDate = new Date();
   minDateString: string;
 
@@ -74,7 +76,11 @@ export class CreateTimetableComponent extends TimetableComponent {
 
   confirm() {
     this.store.dispatch(addTimetableAction({
-      payload: {...this.timetable}
+      payload: {
+        ...this.timetable,
+        routeId: this.route.id,
+        routeName: this.route.name
+      }
     }))
     this.dismissed.emit(true);
     this.timetable = {...DEFAULT_TIMETABLE};

src/app/timetables/model/timetable.ts

@@ -1,9 +1,8 @@
-import {DEFAULT_ROUTE, Route} from "../../routes/model/route";
-
 export interface Timetable {
   id: string;
   name: string;
-  route: Route;
+  routeId: string;
+  routeName: string;
   date: string;
   state: TimetableState;
   numberOfServices: number;
@@ -17,6 +16,14 @@ export enum TimetableState {
   READY_FOR_USAGE
 }
 
+export const TimetableStateIndices: { [name: string]: number } = {
+  NEW: 0,
+  PROCESSING: 1,
+  ENTER_FORMATIONS: 2,
+  LINK_SERVICES: 3,
+  READY_FOR_USAGE: 4
+}
+
 export const TimetableStateTexts: { [name: number]: string } = {
   0: $localize`New`,
   1: $localize`Processing`,
@@ -28,7 +35,8 @@ export const TimetableStateTexts: { [name: number]: string } = {
 export const DEFAULT_TIMETABLE: Timetable = {
   id: '',
   name: '',
-  route: {...DEFAULT_ROUTE},
+  routeId: '',
+  routeName: '',
   date: '',
   state: TimetableState.NEW,
   numberOfServices: 0

src/app/timetables/service/timetable.service.ts

@@ -1,9 +1,9 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from "@angular/common/http";
 import {environment} from "../../../environments/environment";
-import {catchError, Observable, of} from "rxjs";
+import {catchError, map, Observable, of} from "rxjs";
 import {ErrorService} from "../../errors/error.service";
-import {Timetable} from "../model/timetable";
+import {Timetable, TimetableStateIndices} from "../model/timetable";
 
 @Injectable({
   providedIn: 'root'
@@ -33,6 +33,12 @@ export class TimetableService {
 
     return this.http.get<Timetable[]>(this.timetablesURL + '/' + encodeURIComponent(userId) + '/', this.httpOptions)
       .pipe(
+        map(timetables => timetables.map(timetable => {
+          return {
+            ...timetable,
+            state: TimetableStateIndices[timetable.state]
+          }
+        })),
         catchError(this.errorService.handleError<Timetable[]>('Timetables',
           'fetchTimetables', environment.fallbackToMock ? this.timetables : []))
       );
@@ -52,6 +58,12 @@ export class TimetableService {
       timetable,
       this.httpOptions
     ).pipe(
+      map(timetable => {
+        return {
+          ...timetable,
+          state: TimetableStateIndices[timetable.state]
+        }
+      }),
       catchError(this.errorService.handleError<Timetable>('Timetables',
         'storeTimetable', timetable))
     )

src/app/timetables/store/timetables.actions.ts

@@ -18,6 +18,7 @@ export enum ActionTypes {
 
   AddTimetable = '[Timetables] Add Timetable',
   UpdateTimetable = '[Timetables] Update Timetable',
+  UpdateTimetableFromBackend = '[Timetables] Update Timetable From Backend',
   DeleteTimetable = '[Timetables] Delete Timetable',
 }
 
@@ -70,6 +71,11 @@ export const updateTimetableAction = createAction(
   props<{ payload: Timetable }>()
 );
 
+export const updateTimetableFromBackendAction = createAction(
+  ActionTypes.UpdateTimetableFromBackend,
+  props<{ payload: Timetable }>()
+);
+
 export const deleteTimetableAction = createAction(
   ActionTypes.DeleteTimetable,
   props<{ payload: Timetable }>()

src/app/timetables/store/timetables.effects.ts

@@ -1,7 +1,12 @@
 import {Actions, createEffect, ofType} from "@ngrx/effects";
 import {inject} from "@angular/core";
 import {combineLatestWith, map, switchMap} from "rxjs";
-import {addTimetableAction, deleteTimetableAction, updateTimetableAction} from "./timetables.actions";
+import {
+  addTimetableAction,
+  deleteTimetableAction,
+  updateTimetableAction,
+  updateTimetableFromBackendAction
+} from "./timetables.actions";
 import {TimetableService} from "../service/timetable.service";
 import {AuthService} from "../../auth/service/auth.service";
 
@@ -14,10 +19,11 @@ export const storeTimetable = createEffect((
       ofType(addTimetableAction, updateTimetableAction),
       map(action => action.payload),
       combineLatestWith(authService.getUser$()),
-      switchMap(([timetable, user]) => timetableService.storeTimetable(timetable, user.id))
+      switchMap(([timetable, user]) => timetableService.storeTimetable(timetable, user.id)),
+      map(timetable => updateTimetableFromBackendAction({payload: timetable}))
     );
   },
-  {functional: true, dispatch: false});
+  {functional: true});
 
 export const deleteTimetable = createEffect((
     actions$ = inject(Actions),

src/app/timetables/store/timetables.reducer.ts

@@ -9,7 +9,8 @@ import {
   loadAllServicesFinishedAction,
   loadAllTimetablesCancelledAction,
   loadAllTimetablesFinishedAction,
-  updateTimetableAction
+  updateTimetableAction,
+  updateTimetableFromBackendAction
 } from "./timetables.actions";
 import {Service} from "../model/service";
 import {Rotation} from "../model/rotation";
@@ -71,7 +72,7 @@ export const timetablesReducer = createReducer(
     ...state,
     timetables: [...state.timetables, action.payload]
   })),
-  on(updateTimetableAction, (state, action) => ({
+  on(updateTimetableAction, updateTimetableFromBackendAction, (state, action) => ({
     ...state,
     timetables: state.timetables.map((oldTimetable) => {
       if (oldTimetable.id == action.payload.id) {

src/app/timetables/timetables.component.html

@@ -23,7 +23,7 @@
     <ion-item-sliding *ngFor="let timetable of timetables$ | async">
       <ion-item>
         <ion-label>{{ timetable.name }}</ion-label>
-        <ion-label>{{ timetable.route.name }}</ion-label>
+        <ion-label>{{ timetable.routeName }}</ion-label>
         <ion-label>{{ timetable.date | date }}</ion-label>
         <ion-label>{{ TimetableStateTexts[timetable.state] }}</ion-label>
         <ion-label class="ion-text-end">{{ timetable.numberOfServices }}</ion-label>

src/app/timetables/update-timetable/update-timetable.component.html

@@ -38,7 +38,7 @@
           labelPlacement="stacked"
           type="text"
           name="route"
-          [value]="timetable.route.name"
+          [value]="timetable.routeName"
           [readonly]="true"
           i18n-helperText
           helperText="Cannot be modified"