Add standalone mode

Author: emersion

angular.json

@@ -107,6 +107,14 @@
             },
             "es5": {
               "tsConfig": "tsconfig.app.es5.json"
+},
+            "standalone": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.standalone.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": ""
@@ -125,6 +133,9 @@
             },
             "es5": {
               "buildTarget": "netzgrafik-frontend:build:es5"
+            },
+            "standalone": {
+              "buildTarget": "netzgrafik-frontend:build:standalone"
             }
           }
         },

package-lock.json

@@ -3,9 +3,11 @@
     "ng": "ng",
     "start": "ng serve",
     "start:local": "ng serve --configuration=local",
+    "start:standalone": "ng serve --configuration=standalone",
     "e2e:browserstack": "ng e2e -c browserstack",
     "e2e:puppeteer": "ng e2e -c puppeteer",
     "build": "ng run netzgrafik-frontend:ngsscbuild",
+    "build:standalone": "ng build --configuration=standalone",
     "test": "ng test -c ci",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -24,6 +26,7 @@
     "@angular/common": "^17.0.5",
     "@angular/compiler": "^17.0.5",
     "@angular/core": "^17.0.5",
+    "@angular/elements": "^17.1.0",
     "@angular/forms": "^17.0.5",
     "@angular/localize": "^17.0.5",
     "@angular/platform-browser": "^17.0.5",

package.json

@@ -30,9 +30,17 @@
     </button>
   </sbb-menu>
 </sbb-header-lean>
-<sbb-navigation-bar class="noprint"></sbb-navigation-bar>
+<ng-container *ngIf="!disableBackend">
+  <sbb-navigation-bar class="noprint"></sbb-navigation-bar>
+</ng-container>
 <router-outlet *ngIf="authenticated | async; else loading"></router-outlet>
 <ng-template #loading>
-  <sbb-loading-indicator mode="big"></sbb-loading-indicator>
-  <div class="login-message">Sie werden angemeldet...</div>
+  <ng-container *ngIf="!disableBackend">
+    <sbb-loading-indicator mode="big"></sbb-loading-indicator>
+    <div class="login-message">Sie werden angemeldet...</div>
+  </ng-container>
+  <ng-container *ngIf="disableBackend">
+    <sbb-netzgrafik-editor></sbb-netzgrafik-editor>
+  </ng-container>
 </ng-template>
+

src/app/app.component.html

@@ -1,35 +1,66 @@
-import {Component} from "@angular/core";
+import {Component, Input, Output} from "@angular/core";
 import {AuthService} from "./services/auth/auth.service";
+import {TrainrunService} from "./services/data/trainrun.service";
+import {TrainrunSectionService} from "./services/data/trainrunsection.service";
+import {DataService} from "./services/data/data.service";
 import {environment} from "../environments/environment";
 import packageJson from "../../package.json";
 import {Observable} from "rxjs";
 import {ProjectDto} from "./api/generated";
+import {NetzgrafikDto} from "./data-structures/business.data.structures";
 
 @Component({
   selector: "sbb-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.scss"],
 })
 export class AppComponent {
+  readonly disableBackend = environment.disableBackend;
+
   version = packageJson.version;
   environmentLabel = environment.label;
   authenticated: Promise<unknown>;
 
   projectInMenu: Observable<ProjectDto | null>;
 
   get userName() {
+    if (this.disableBackend) {
+      return undefined;
+    }
     return this.authService.claims?.name;
   }
 
   get email() {
+    if (this.disableBackend) {
+      return undefined;
+    }
     return this.authService.claims?.email;
   }
 
-  constructor(private authService: AuthService) {
-    this.authenticated = authService.initialized;
+  constructor(private authService: AuthService, private dataService: DataService, private trainrunService: TrainrunService, private trainrunSectionService: TrainrunSectionService) {
+
+    if (!this.disableBackend) {
+      this.authenticated = authService.initialized;
+    }
   }
 
   logout() {
-    this.authService.logOut();
+    if (!this.disableBackend) {
+      this.authService.logOut();
+    }
+  }
+
+  @Input()
+  get netzgrafikDto() {
+    return this.dataService.getNetzgrafikDto();
   }
+  set netzgrafikDto(netzgrafikDto: NetzgrafikDto) {
+    this.dataService.loadNetzgrafikDto(netzgrafikDto);
+  }
+
+  @Output()
+  trainrunOperation = this.trainrunService.operation;
+
+  @Output()
+  trainrunSectionOperation = this.trainrunSectionService.operation;
 }

src/app/app.component.ts

@@ -1,6 +1,7 @@
-import {NgModule} from "@angular/core";
+import {NgModule, Injector, ApplicationRef, DoBootstrap} from "@angular/core";
 import {NgxEditorModule} from "ngx-editor";
 import {BrowserModule} from "@angular/platform-browser";
+import {createCustomElement} from "@angular/elements";
 import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
 import {OAuthModule} from "angular-oauth2-oidc";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
@@ -203,7 +204,7 @@ import {ActionMenuComponent} from "./view/action-menu/action-menu/action-menu.co
         // and you send a request to these, the access token is appended.
         // Documentation:
         // https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/working-with-httpinterceptors.html
-        allowedUrls: [environment.backendUrl],
+        allowedUrls: environment.backendUrl ? [environment.backendUrl] : [],
         sendAccessToken: true,
       },
     }),
@@ -230,10 +231,20 @@ import {ActionMenuComponent} from "./view/action-menu/action-menu/action-menu.co
     SbbBreadcrumbModule,
     SbbAutocompleteModule,
   ],
-  bootstrap: [AppComponent],
+  bootstrap: environment.customElement ? [] : [AppComponent],
   providers: [
-    {provide: BASE_PATH, useValue: environment.backendUrl},
+    ... environment.backendUrl ? [{provide: BASE_PATH, useValue: environment.backendUrl}] : [],
     {provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true},
   ],
 })
-export class AppModule {}
+
+export class AppModule implements DoBootstrap {
+  constructor(private injector: Injector) {}
+
+  ngDoBootstrap(appRef: ApplicationRef) {
+    if (environment.customElement) {
+      const element = createCustomElement(AppComponent, {injector: this.injector});
+      customElements.define("sbb-root", element);
+    }
+  }
+}

src/app/app.module.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/models/operation.model.ts

@@ -1,22 +1,24 @@
-<sbb-icon-sidebar-container>
-  <sbb-icon-sidebar [(expanded)]="expanded">
+<sbb-icon-sidebar-container [attr.style]="getSidebarContainerStyle()">
+  <sbb-icon-sidebar [(expanded)]="expanded" >
     <!--<a sbbIconSidebarItem label="Varianten" (click)="onVariantenClicked()" class="sbb-active">-->
-    <a
-      sbbIconSidebarItem
-      label="Varianten"
-      [class]="getVariantsActivatedTag()"
-      (click)="onVariantenClicked()"
-    >
-      <sbb-icon
-        *ngIf="getVariantIsWritable()"
-        svgIcon="document-standard-small"
-      ></sbb-icon>
-      <sbb-icon
-        *ngIf="!getVariantIsWritable()"
-        svgIcon="folder-lock-small"
-        style="color: #c60018"
-      ></sbb-icon>
-    </a>
+    <ng-container *ngIf="!disableBackend">
+      <a
+        sbbIconSidebarItem
+        label="Varianten"
+        [class]="getVariantsActivatedTag()"
+        (click)="onVariantenClicked()"
+      >
+        <sbb-icon
+          *ngIf="getVariantIsWritable()"
+          svgIcon="document-standard-small"
+        ></sbb-icon>
+        <sbb-icon
+          *ngIf="!getVariantIsWritable()"
+          svgIcon="folder-lock-small"
+          style="color: #c60018"
+        ></sbb-icon>
+      </a>
+    </ng-container>
     <a
       sbbIconSidebarItem
       label="Filter"

src/app/netzgrafik-application/netzgrafik-application.component.html

@@ -1,7 +1,3 @@
-sbb-icon-sidebar-container {
-  top: 85px;
-}
-
 ::ng-deep a.SideBarMainIcon {
   background: whitesmoke;
 }

src/app/netzgrafik-application/netzgrafik-application.component.scss

@@ -12,6 +12,8 @@ import {DomSanitizer} from "@angular/platform-browser";
 import {EditorMode} from "../view/editor-menu/editor-mode";
 import {UndoService} from "../services/data/undo.service";
 import {EditorView} from "../view/editor-main-view/data-views/editor.view";
+import {NetzgrafikDefault} from "../sample-netzgrafik/netzgrafik.default";
+import {environment} from "../../environments/environment";
 
 export enum IconSidebarMode {
   VARIANTEN = "varianten",
@@ -29,6 +31,8 @@ export class NetzgrafikApplicationComponent {
   mode = IconSidebarMode.NONE;
   expanded = false;
 
+  readonly disableBackend = environment.disableBackend;
+
   private readonly destroyed = new Subject<void>();
 
   constructor(
@@ -48,13 +52,24 @@ export class NetzgrafikApplicationComponent {
       .subscribe((params) => {
         uiInteractionService.setEditorMode(EditorMode.NetzgrafikEditing);
         uiInteractionService.showNetzgrafik();
-        versionControlService.load(params.getVariantId(), true);
+        try {
+          versionControlService.load(params.getVariantId(), true);
+        } catch (e) {
+          versionControlService.loadNetzgrafikDTO(NetzgrafikDefault.getDefaultNetzgrafik());
+        }
         uiInteractionService.setViewboxProperties(
           EditorView.svgName,
           uiInteractionService.getDefaultViewProperties());
       });
   }
 
+  getSidebarContainerStyle(): string {
+    if (this.disableBackend) {
+      return "top: 53px;";
+    }
+    return "top: 85px;";
+  }
+
   getVariantIsWritable(): boolean {
     if (this.versionControlService.variant === null) {
       return true;

src/app/netzgrafik-application/netzgrafik-application.component.ts

@@ -30,27 +30,29 @@ export class AuthService {
     private router: Router,
     location: Location,
   ) {
-    this.oauthService.configure(environment.authConfig);
-    this.oauthService.setupAutomaticSilentRefresh();
-    // If the user should not be forcefully logged in (e.g. if you have pages, which can be
-    // accessed anonymously), change loadDiscoveryDocumentAndLogin to
-    // loadDiscoveryDocumentAndTryLogin and have a login functionality in the
-    // template of the component injecting the AuthService which calls the login() method.
-    this.initialized = this.oauthService
-      .loadDiscoveryDocumentAndLogin({state: location.path()})
-      // If the user is not logged in, he will be forwarded to the identity provider
-      // and this promise will not resolve. After being redirected from the identity
-      // provider, the login promise will return true.
-      .then((v) => (v ? true : new Promise(() => {})));
-    // Redirect the user to the url configured with state above or in a separate login call.
-    this.oauthService.events
-      .pipe(first((e) => e.type === "token_received"))
-      .subscribe(() => {
-        const state = decodeURIComponent(this.oauthService.state || "");
-        if (state && state !== "/") {
-          this.router.navigate([state]);
-        }
-      });
+    if (!environment.disableBackend) {
+      this.oauthService.configure(environment.authConfig);
+      this.oauthService.setupAutomaticSilentRefresh();
+      // If the user should not be forcefully logged in (e.g. if you have pages, which can be
+      // accessed anonymously), change loadDiscoveryDocumentAndLogin to
+      // loadDiscoveryDocumentAndTryLogin and have a login functionality in the
+      // template of the component injecting the AuthService which calls the login() method.
+      this.initialized = this.oauthService
+        .loadDiscoveryDocumentAndLogin({state: location.path()})
+        // If the user is not logged in, he will be forwarded to the identity provider
+        // and this promise will not resolve. After being redirected from the identity
+        // provider, the login promise will return true.
+        .then((v) => (v ? true : new Promise(() => {})));
+      // Redirect the user to the url configured with state above or in a separate login call.
+      this.oauthService.events
+        .pipe(first((e) => e.type === "token_received"))
+        .subscribe(() => {
+          const state = decodeURIComponent(this.oauthService.state || "");
+          if (state && state !== "/") {
+            this.router.navigate([state]);
+          }
+        });
+    }
   }
 
   logOut() {