bootstrap customElement + emit output create/update/delete operations

Author: louisgreiner

src/app/app.component.ts

@@ -37,19 +37,7 @@ export class AppComponent {
     return this.authService.claims?.email;
   }
 
-  constructor(private authService: AuthService, private trainrunService: TrainrunService, private trainrunSectionService: TrainrunSectionService, private dataService: DataService) {
-
-    /*trainrunService.trainruns.subscribe((value) => {
-      console.log('trainrunService', value);
-    });
-
-    trainrunSectionService.trainrunSections.subscribe((value) => {
-      console.log('trainrunSectionService', value);
-    });*/
-
-    /*trainrunSectionService.trainrunSectionCreated.subscribe((trainrunSection) => {
-      console.log('trainrunSectionCreated', trainrunSection);
-    });*/
+  constructor(private authService: AuthService, private dataService: DataService, private trainrunService: TrainrunService, private trainrunSectionService: TrainrunSectionService) {
 
     if (!this.disableBackend) {
       this.authenticated = authService.initialized;
@@ -63,13 +51,16 @@ export class AppComponent {
   }
 
   @Input()
-  get dto() {
+  get netzgrafikDto() {
     return this.dataService.getNetzgrafikDto();
   }
-  set dto(dto: NetzgrafikDto) {
-    this.dataService.loadNetzgrafikDto(dto);
+  set netzgrafikDto(netzgrafikDto: NetzgrafikDto) {
+    this.dataService.loadNetzgrafikDto(netzgrafikDto);
   }
 
   @Output()
-  trainrunSectionOperation = this.trainrunSectionService.trainrunSectionOperation;
+  trainrunOperation = this.trainrunService.operation;
+
+  @Output()
+  trainrunSectionOperation = this.trainrunSectionService.operation;
 }

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import {NgModule, Injector} from "@angular/core";
+import {NgModule, Injector, ApplicationRef} from "@angular/core";
 import {NgxEditorModule} from "ngx-editor";
 import {BrowserModule} from "@angular/platform-browser";
 import {createCustomElement} from "@angular/elements";
@@ -231,17 +231,21 @@ import {ActionMenuComponent} from "./view/action-menu/action-menu/action-menu.co
     SbbBreadcrumbModule,
     SbbAutocompleteModule,
   ],
-  //bootstrap: [AppComponent],
   providers: [
     {provide: BASE_PATH, useValue: environment.backendUrl},
     {provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true},
   ],
 })
+
 export class AppModule {
   constructor(private injector: Injector) {}
 
-  ngDoBootstrap() {
-    const element = createCustomElement(AppComponent, { injector: this.injector });
-    customElements.define("sbb-root", element);
+  ngDoBootstrap(appRef: ApplicationRef) {
+    if (environment.customElement) {
+      const element = createCustomElement(AppComponent, { injector: this.injector });
+      customElements.define("sbb-root", element);
+    } else {
+      appRef.bootstrap(AppComponent);
+    }
   }
 }

src/app/models/operation.model.ts

@@ -0,0 +1,42 @@
+import {Trainrun} from "./trainrun.model";
+import {TrainrunSection} from "./trainrunsection.model";
+
+enum OperationType {
+    create = "create",
+    update = "update",
+    delete = "delete"
+}
+
+export abstract class Operation{
+    type: String;
+}
+
+export class CreateTrainrunOperation extends Operation {
+    readonly trainrunSection: TrainrunSection;
+
+    constructor(trainrunSection: TrainrunSection){
+        super();
+        this.type = OperationType.create;
+        this.trainrunSection = trainrunSection;
+    }
+}
+
+export class UpdateTrainrunSectionsOperation extends Operation {
+    readonly trainrunSections: TrainrunSection[];
+
+    constructor(trainrunSections: TrainrunSection[]){
+        super();
+        this.type = OperationType.update;
+        this.trainrunSections = trainrunSections;
+    }
+}
+
+export class DeleteTrainrunOperation extends Operation {
+    readonly trainrun: Trainrun;
+
+    constructor(trainrun: Trainrun){
+        super();
+        this.type = OperationType.delete;
+        this.trainrun = trainrun;
+    }
+}

src/app/services/data/trainrun.service.ts

@@ -8,7 +8,7 @@ import {
   TrainrunFrequency,
   TrainrunTimeCategory,
 } from "../../data-structures/business.data.structures";
-import {Injectable} from "@angular/core";
+import {EventEmitter, Injectable} from "@angular/core";
 import {BehaviorSubject} from "rxjs";
 import {NodeService} from "./node.service";
 import {TrainrunSectionService} from "./trainrunsection.service";
@@ -23,6 +23,7 @@ import {FilterService} from "../ui/filter.service";
 import {Transition} from "../../models/transition.model";
 import {Port} from "../../models/port.model";
 import {Connection} from "../../models/connection.model";
+import {DeleteTrainrunOperation, Operation} from "../../models/operation.model";
 
 @Injectable({
   providedIn: "root",
@@ -34,6 +35,8 @@ export class TrainrunService {
 
   trainrunsStore: { trainruns: Trainrun[] } = {trainruns: []}; // store the data in memory
 
+  readonly operation = new EventEmitter<Operation>();
+
   private dataService: DataService = null;
   private nodeService: NodeService = null;
   private trainrunSectionService: TrainrunSectionService = null;
@@ -180,6 +183,7 @@ export class TrainrunService {
     if (enforceUpdate) {
       this.trainrunsUpdated();
     }
+    this.operation.emit(new DeleteTrainrunOperation(trainrun));
   }
 
   getSelectedTrainrun(): Trainrun {

src/app/services/data/trainrunsection.service.ts

@@ -22,6 +22,7 @@ import {Transition} from "../../models/transition.model";
 import {takeUntil} from "rxjs/operators";
 import {FilterService} from "../ui/filter.service";
 import {TrainrunSectionNodePair} from "../util/trainrun.iterator";
+import {CreateTrainrunOperation, Operation, UpdateTrainrunSectionsOperation} from "../../models/operation.model";
 
 interface DepartureAndArrivalTimes {
   nodeFromDepartureTime: number;
@@ -35,11 +36,6 @@ export interface InformSelectedTrainrunClick {
   open: boolean;
 }
 
-export class TrainrunSectionOperation {
-  type: 'create' | 'update' | 'delete';
-  trainrunSection: TrainrunSection;
-}
-
 @Injectable({
   providedIn: "root",
 })
@@ -51,7 +47,7 @@ export class TrainrunSectionService implements OnDestroy {
     trainrunSections: [],
   }; // store the data in memory
 
-  trainrunSectionOperation = new EventEmitter<TrainrunSectionOperation>();
+  readonly operation = new EventEmitter<Operation>();
 
   informSelectedTrainrunClickSubject =
     new BehaviorSubject<InformSelectedTrainrunClick>({
@@ -675,6 +671,8 @@ export class TrainrunSectionService implements OnDestroy {
 
   createTrainrunSection(sourceNodeId: number, targetNodeId: number, retrieveTravelTimeFromEdge: boolean = false) {
     const trainrunSection: TrainrunSection = new TrainrunSection();
+    const initialTrainrunsLength = this.trainrunService.trainrunsStore.trainruns.length;
+
     trainrunSection.setTrainrun(
       this.trainrunService.getSelectedOrNewTrainrun(),
     );
@@ -689,11 +687,6 @@ export class TrainrunSectionService implements OnDestroy {
     const targetNode = this.nodeService.getNodeFromId(targetNodeId);
     trainrunSection.setSourceAndTargetNodeReference(sourceNode, targetNode);
     this.trainrunSectionsStore.trainrunSections.push(trainrunSection);
-    this.logger.log(
-      "create new trainrunSection between nodes",
-      sourceNode.getBetriebspunktName(),
-      targetNode.getBetriebspunktName(),
-    );
 
     this.handleNodeAndTrainrunSectionDetails(
       sourceNode,
@@ -706,10 +699,11 @@ export class TrainrunSectionService implements OnDestroy {
     //this.trainrunSectionsUpdated();
     this.trainrunService.trainrunsUpdated();
 
-    this.trainrunSectionOperation.emit({
-      type: 'create',
-      trainrunSection: trainrunSection,
-    });
+    if (initialTrainrunsLength != this.trainrunService.trainrunsStore.trainruns.length) {
+      this.operation.emit(new CreateTrainrunOperation(trainrunSection));
+    } else {
+      this.operation.emit(new UpdateTrainrunSectionsOperation(this.getAllTrainrunSectionsForTrainrun(trainrunSection.getTrainrunId())));
+    }
   }
 
   reconnectTrainrunSection(

src/environments/environment.model.ts

@@ -6,4 +6,5 @@ export interface Environment {
   backendUrl: string;
   authConfig: AuthConfig;
   disableBackend: boolean;
+  customElement: boolean;
 }

src/environments/environment.ts

@@ -23,7 +23,8 @@ export const environment: Environment = {
   label: "local",
   backendUrl: "http://localhost:8080",
   authConfig,
-  disableBackend: false
+  disableBackend: false,
+  customElement: false,
 };
 
 /*

src/main.ts

@@ -8,6 +8,7 @@ if (environment.production) {
 }
 
 environment.disableBackend = true;
+environment.customElement = true;
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)