i18n: setup translations + fill english and german table

src/app/app-routing.module.ts

@@ -24,32 +24,32 @@ const routes: Routes = [
   {
     path: "404",
     component: ErrorViewComponent,
-    data: {error: $localize`:@@app-routing.module.path.404:Die gesuchte Seite wurde nicht gefunden.`},
+    data: {error: $localize`:@@app-routing.module.path.404:The page you were looking for was not found.`},
   },
   {
     path: "401",
     component: ErrorViewComponent,
     data: {
-      error: $localize`:@@app-routing.module.path.401:Sie sind nicht autorisiert, bitte laden Sie die Seite neu.`,
+      error: $localize`:@@app-routing.module.path.401:You are not authorized, please reload the page.`,
     },
   },
   {
     path: "403",
     component: ErrorViewComponent,
-    data: {error: $localize`:@@app-routing.module.path.403:Sie sind nicht berechtigt diese Aktion durchzuführen.`},
+    data: {error: $localize`:@@app-routing.module.path.403:You are not authorized to perform this action.`},
   },
   {
     path: "409",
     component: ErrorViewComponent,
     data: {
       error:
-        $localize`:@@app-routing.module.path.409:Es gab einen Konflikt bei der Ausführung Ihrer Aktion, bitte versuchen Sie es erneut.`,
+        $localize`:@@app-routing.module.path.409:There was a conflict while executing your action, please try again.`,
     },
   },
   {
     path: "error",
     component: ErrorViewComponent,
-    data: {error: $localize`:@@app-routing.module.path.error:Es ist ein Fehler aufgetreten.`},
+    data: {error: $localize`:@@app-routing.module.path.error:An error has occurred.`},
   },
   {path: "**", redirectTo: "/404"},
 ];

src/app/app.component.html

@@ -1,15 +1,14 @@
 <sbb-header-lean
   label="Netzgrafik-Editor"
-  [subtitle]="version"
+  [subtitle]="tVersion"
   class="sbb-header-fixed-columns noprint"
 >
-  <sbb-app-chooser-section [label]="userGuide" class="noprint">
+  <sbb-app-chooser-section [label]="tUserGuide" class="noprint">
     <a href="https://github.com/SchweizerischeBundesbahnen/netzgrafik-editor-frontend/blob/main/documentation/USERMANUAL.md"
       class="nav-element"
       target="_blank"
-      i18n="@@app.user-manual"
     >
-      User Manual 
+      {{ tUserManual }}
     </a>
     <select (change)="changeLocale($event.target.value)" [value]="locale" class="language-selector">
       <option value="en">🇬🇧 English</option>
@@ -33,7 +32,7 @@
   <sbb-menu #menu="sbbMenu">
     <button sbb-menu-item (click)="logout()">
       <sbb-icon svgIcon="exit-small" class="sbb-icon-fit"></sbb-icon>
-      <span i18n="@@app.logout">Logout</span>
+      <span>{{ tLogout }}</span>
     </button>
   </sbb-menu>
 </sbb-header-lean>
@@ -44,7 +43,7 @@
 <ng-template #loading>
   <ng-container *ngIf="!disableBackend">
     <sbb-loading-indicator mode="big"></sbb-loading-indicator>
-    <div class="login-message" i18n="@@app.login-message">You are getting logged in...</div>
+    <div class="login-message">{{ tLoginMessage }}</div>
   </ng-container>
   <ng-container *ngIf="disableBackend">
     <sbb-netzgrafik-editor></sbb-netzgrafik-editor>

src/app/app.component.ts

@@ -18,8 +18,11 @@ import {Operation} from "./models/operation.model";
 export class AppComponent {
   readonly disableBackend = environment.disableBackend;
 
-  version = $localize`:@@app.version:Version` + " " + packageJson.version;
-  userGuide = $localize`:@@app.user-guide:User Guide`;
+  readonly tVersion = $localize`:@@app.version:Version` + " " + packageJson.version;
+  readonly tUserGuide = $localize`:@@app.user-guide:User guide`;
+  readonly tUserManual = $localize`:@@app.user-manual:User manual`;
+  readonly tLogout = $localize`:@@app.logout:Logout`;
+  readonly tLoginMessage = $localize`:@@app.login:You are getting logged in...`;
 
   locale = localStorage.getItem("locale");
 

src/app/models/node.model.ts

@@ -61,8 +61,8 @@ export class Node {
       labelIds,
     }: NodeDto = {
       id: Node.incrementId(),
-      betriebspunktName: "NEW",
-      fullName: "Neuer Knoten",
+      betriebspunktName: $localize`:@@app.models.node.betriebspunkt-name-default:NEW`,
+      fullName: $localize`:@@app.models.node.full-name-default:New node`,
       positionX: 0,
       positionY: 0,
       ports: [],

src/app/models/note.model.ts

@@ -6,8 +6,8 @@ export class Note {
   public static DEFAULT_NOTE_HEIGHT = 64;
   public static DEFAULT_NOTE_POSITION_X = 0;
   public static DEFAULT_NOTE_POSITION_Y = 0;
-  public static DEFAULT_NOTE_TITLE = "Kommentar Titel";
-  public static DEFAULT_NOTE_TEXT = "Kommentar Text";
+  public static DEFAULT_NOTE_TITLE = $localize`:@@app.models.note.title-default:Note title`;
+  public static DEFAULT_NOTE_TEXT = $localize`:@@app.models.note.text-default:Note text`;
   public static DEFAULT_NOTE_BACKGROUND_COLOR = "#ffffff";
   public static DEFAULT_NOTE_TEXT_COLOR = "#000000";
 

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

@@ -33,12 +33,12 @@ export class NetzgrafikApplicationComponent {
 
   readonly disableBackend = environment.disableBackend;
 
-  variants = $localize`:@@app.netzgrafik-application.variants:Varianten`;
-  filter = $localize`:@@app.netzgrafik-application.filter:Filter`;
-  analytics = $localize`:@@app.netzgrafik-application.analytics:Analytics`;
-  edit = $localize`:@@app.netzgrafik-application.edit:Bearbeiten`;
-  moreFunctions = $localize`:@@app.netzgrafik-application.more-functions:Weitere Funktionen`;
-  properties = $localize`:@@app.netzgrafik-application.properties:Einstellungen`;
+  readonly variants = $localize`:@@app.netzgrafik-application.variants:Variants`;
+  readonly filter = $localize`:@@app.netzgrafik-application.filter:Filter`;
+  readonly analytics = $localize`:@@app.netzgrafik-application.analytics:Analytics`;
+  readonly edit = $localize`:@@app.netzgrafik-application.edit:Edit`;
+  readonly moreFunctions = $localize`:@@app.netzgrafik-application.more-functions:More functions`;
+  readonly properties = $localize`:@@app.netzgrafik-application.properties:Properties`;
 
   private readonly destroyed = new Subject<void>();
 

src/app/perlenkette/perlenkette-node/perlenkette-node.component.ts

@@ -52,12 +52,12 @@ export class PerlenketteNodeComponent implements OnInit {
         mockConnection.connectionWarning && amountOfWarningConnections++,
     );
     if (amountOfWarningConnections === 0) {
-      return $localize`:@@app.perlenkette.node.0-warning-connection:Kein fehlerhafter Anschluss`;
+      return $localize`:@@app.perlenkette.perlenkette-node.0-warning-connection:No incorrect connection`;
     }
     if (amountOfWarningConnections === 1) {
-      return $localize`:@@app.perlenkette.node.1-warning-connection:1 fehlerhafter Anschluss`;
+      return $localize`:@@app.perlenkette.perlenkette-node.1-warning-connection:1 incorrect connection`;
     }
-    return $localize`:@@app.perlenkette.node.n-warning-connections:${amountOfWarningConnections} fehlerhafte Anschlüsse`;
+    return $localize`:@@app.perlenkette.perlenkette-node.n-warning-connections:${amountOfWarningConnections} incorrect connections`;
   }
 
   getFittingConnections(): string {
@@ -67,12 +67,12 @@ export class PerlenketteNodeComponent implements OnInit {
         !mockConnection.connectionWarning && amountOfFittingConnections++,
     );
     if (amountOfFittingConnections === 0) {
-      return $localize`:@@app.perlenkette.node.0-fitting-connection:Kein passender Anschluss`;
+      return $localize`:@@app.perlenkette.perlenkette-node.0-fitting-connection:No fitting connection`;
     }
     if (amountOfFittingConnections === 1) {
-      return $localize`:@@app.perlenkette.node.1-fitting-connection:1 passender Anschluss`;
+      return $localize`:@@app.perlenkette.perlenkette-node.1-fitting-connection:1 fitting connection`;
     }
-    return $localize`:@@app.perlenkette.node.n-fitting-connections:${amountOfFittingConnections} passende Anschlüsse`;
+    return $localize`:@@app.perlenkette.perlenkette-node.n-fitting-connections:${amountOfFittingConnections} fitting connections`;
   }
 
   expandConnections() {

src/app/perlenkette/perlenkette.component.html

@@ -3,10 +3,10 @@
   <div>
     <div [attr.style]="'pointer-events: none; margin: 0px; position: absolute; padding-left: '+(contentWidth-55)+'px; padding-top: '+(contentHeight-40)+'px;'">
       <ng-container *ngIf="!getShowAllLockStates()">
-        <sbb-icon class="ToggleAllEyesButton" svgIcon="eye-disabled-small" style="pointer-events:auto;" (mouseup)="toggleShowAllLockStates()" title="Zeige nur geschlossene Schlösser"></sbb-icon>
+        <sbb-icon class="ToggleAllEyesButton" svgIcon="eye-disabled-small" style="pointer-events:auto;" (mouseup)="toggleShowAllLockStates()" [title]="tShowOnlyClosedLocks"></sbb-icon>
       </ng-container>
       <ng-container *ngIf="getShowAllLockStates()">
-        <sbb-icon class="ToggleAllEyesButton" svgIcon="eye-small" style="pointer-events:auto;" (mouseup)="toggleShowAllLockStates()" title="Zeige alle Schlösser"></sbb-icon>
+        <sbb-icon class="ToggleAllEyesButton" svgIcon="eye-small" style="pointer-events:auto;" (mouseup)="toggleShowAllLockStates()" [title]="tShowAllLocks"></sbb-icon>
       </ng-container>
     </div>
   </div>

src/app/perlenkette/perlenkette.component.ts

@@ -48,6 +48,9 @@ export class PerlenketteComponent implements AfterContentChecked, OnDestroy {
 
   private showAllLockStates = false;
 
+  readonly tShowOnlyClosedLocks = $localize`:@@app.perlenkette.show-only-closed-locks:Show only closed locks`;
+  readonly tShowAllLocks = $localize`:@@app.perlenkette.show-all-locks:Show all locks`;
+
   constructor(
     private readonly loadPerlenketteService: LoadPerlenketteService,
     readonly filterService: FilterService,

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

@@ -577,9 +577,8 @@ export class NodeService implements OnDestroy {
     }
 
     if (isForwardPathLocked && isBackwardPathLocked) {
-      const warningTitle = "Durchfahrt geändert";
-      const warningDescription =
-        "Zeiten können nicht angepasst werden, beidseitger Lock gefunden";
+      const warningTitle = $localize`:@@app.services.data.node.transit-modified.title:Transition changed`;
+      const warningDescription = $localize`:@@app.services.data.node.transit-modified.description:Times cannot be adjusted, lock found on both sides`;
       this.trainrunSectionService.setWarningOnNode(
         trainrunSections.trainrunSection1.getId(),
         node.getId(),
@@ -1069,7 +1068,7 @@ export class NodeService implements OnDestroy {
   setNodePropertiesFromStammdaten(stammdaten: Stammdaten[]) {
     stammdaten.forEach((stdDaten) => {
       if (stdDaten.getErstellen() !== undefined) {
-        if (stdDaten.getErstellen().trim().toLowerCase() === "ja") {
+        if (stdDaten.getErstellen().trim().toLowerCase() === "ja") { // trad ?
           if (
             this.nodesStore.nodes.find(
               (node) => node.getBetriebspunktName() === stdDaten.getBP(),
@@ -1088,7 +1087,7 @@ export class NodeService implements OnDestroy {
               labelIds.push(
                 this.labelService
                   .getOrCreateLabel(
-                    "Knoten aus CSV-Datei importiert",
+                    "Knoten aus CSV-Datei importiert", // trad ?
                     LabelRef.Node,
                   )
                   .getId(),
@@ -1123,14 +1122,14 @@ export class NodeService implements OnDestroy {
         bpStammdaten.getRegions().forEach((region) => {
           labels.push(
             this.labelService
-              .getOrCreateLabel("Region: " + region.trim(), LabelRef.Node)
+              .getOrCreateLabel("Region: " + region.trim(), LabelRef.Node) // trad ?
               .getId(),
           );
         });
         bpStammdaten.getKategorien().forEach((kategorie) => {
           labels.push(
             this.labelService
-              .getOrCreateLabel("Kategorie: " + kategorie.trim(), LabelRef.Node)
+              .getOrCreateLabel("Kategorie: " + kategorie.trim(), LabelRef.Node) // trad ?
               .getId(),
           );
         });

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

@@ -56,7 +56,8 @@ export class NoteService {
     });
   }
 
-  addNote(position: Vec2D, title = "Titel", text = "Text"): Note {
+  // addNote(position: Vec2D, title = "Titel", text = "Text"): Note { // redondant default parameters (see note.model.ts constructor) // trad ?
+  addNote(position: Vec2D, title = $localize`:@@app.models.note.default-title:Note title`, text = $localize`:@@app.models.note.default-text:Note text`): Note { // redondant default parameters (see note.model.ts constructor)
     const newNote = new Note();
     newNote.setPosition(position.getX(), position.getY());
     newNote.setTitle(title);

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

@@ -1123,24 +1123,12 @@ export class TrainrunSectionService implements OnDestroy {
       origTravelTime ||
       travelTimeIssue
     ) {
-      const description =
-        "Zwischenhalteumwandlung führte bei der Vergabe der Zeiten zu inkonsistenzen!";
-      trainrunSection1.setTargetArrivalWarning(
-        "Zwischenhalteumwandlung",
-        description,
-      );
-      trainrunSection1.setTargetDepartureWarning(
-        "Zwischenhalteumwandlung",
-        description,
-      );
-      trainrunSection2.setSourceArrivalWarning(
-        "Zwischenhalteumwandlung",
-        description,
-      );
-      trainrunSection2.setSourceDepartureWarning(
-        "Zwischenhalteumwandlung",
-        description,
-      );
+      const title = $localize`:@@app.services.data.trainrunsection.intermediate-stop-replacement.title:Intermediate stop replacement`;
+      const description = $localize`:@@app.services.data.trainrunsection.intermediate-stop-replacement.description:Intermediate stop replacement led to inconsistencies in the allocation of times!`;
+      trainrunSection1.setTargetArrivalWarning(title, description);
+      trainrunSection1.setTargetDepartureWarning(title, description);
+      trainrunSection2.setSourceArrivalWarning(title, description);
+      trainrunSection2.setSourceDepartureWarning(title, description);
     }
 
     const transitionNew1 = node1.getTransition(trainrunSection1.getId());

src/app/services/data/version-control.service.ts

@@ -87,7 +87,8 @@ export class VersionControlService implements OnDestroy {
     this.versionsBackendService
       .createSnapshotVersion(this.variant.latestVersion.id, {
         name,
-        comment: newName ? `Neuer Name: ${newName}` : "",
+        comment: newName ? `Neuer Name: ${newName}` : "", // trad ?
+        // comment: newName ? $localize`:@@app.services.data.version-control.create-snapshot.new-name:Neuer Name: ${newName}` : "", // trad ?
         model: JSON.stringify(this.dataService.getNetzgrafikDto()),
       })
       .pipe(takeUntil(this.destroyed))

src/app/services/ui/filter.service.ts

@@ -129,7 +129,7 @@ export class FilterService implements OnDestroy {
     const fs = this.activeFilterSetting.copy();
     this.filterSettingStore.filterSettings.push(fs);
     this.activateFilterSetting(fs.getId());
-    this.setActiveFilterSettingName("Neuer Filter", fs.getId());
+    this.setActiveFilterSettingName("Neuer Filter", fs.getId()); // trad ?
     this.filterSettingUpdated();
     return fs;
   }

src/app/services/util/connection.validator.ts

@@ -29,8 +29,8 @@ export class ConnectionValidator {
 
     if (nonStopConnectionError) {
       connection.setWarning(
-        "Anschluss auf Durchfahrt gezeichnet!",
-        "Anschluss auf Durchfahrt gezeichnet!",
+        $localize`:@@app.services.util.connection-validator.connection-marked-for-transit.title:Connection marked for transition!`,
+        $localize`:@@app.services.util.connection-validator.connection-marked-for-transit.description:Connection marked for transition!`
       );
     } else {
       connection.resetWarning();

src/app/services/util/trainrun.iterator.ts

@@ -58,7 +58,7 @@ export class TrainrunIterator {
       this.pointerElement = new TrainrunSectionNodePair(undefined, undefined);
       // log the issue
       this.logService.error(
-        "Iterator has detected an infinity loop. The iteration terminated early!",
+        $localize`:@@app.services.util.trainrun-iteration.error.infinity-loop:Iterator has detected an infinity loop. The iteration terminated early!`,
         new Error().stack,
       );
       return this.currentElement;

src/app/services/util/trainrunsection.validator.ts

@@ -12,8 +12,8 @@ export class TrainrunsectionValidator {
     if (Math.abs(calculatedTargetArrivalTime - trainrunSection.getTargetArrival())
        > 1 / 60) {
       trainrunSection.setTargetArrivalWarning(
-        "Target Arrival Warning",
-        "Target arrival time cannot be reached",
+        $localize`:@@app.services.util.trainrunsection-validator.target-arrival-not-reacheable.title:Target Arrival Warning`,
+        $localize`:@@app.services.util.trainrunsection-validator.target-arrival-not-reacheable.description:Target arrival time cannot be reached`,
       );
     } else {
       trainrunSection.resetTargetArrivalWarning();
@@ -25,8 +25,8 @@ export class TrainrunsectionValidator {
     if (Math.abs(calculatedSourceArrivalTime - trainrunSection.getSourceArrival())
        > 1 / 60) {
       trainrunSection.setSourceArrivalWarning(
-        "Source Arrival Warning",
-        "Target arrival time cannot be reached",
+        $localize`:@@app.services.util.trainrunsection-validator.source-arrival-not-reacheable.title:Source Arrival Warning`,
+        $localize`:@@app.services.util.trainrunsection-validator.source-arrival-not-reacheable.description:Source arrival time cannot be reached`,
       );
     } else {
       trainrunSection.resetSourceArrivalWarning();
@@ -36,8 +36,8 @@ export class TrainrunsectionValidator {
   static validateTravelTime(trainrunSection: TrainrunSection) {
     if (trainrunSection.getTravelTime() < 1) {
       trainrunSection.setTravelTimeWarning(
-        "Travel Time Warning",
-        "Travel time must be greater-equal than 1",
+        $localize`:@@app.services.util.trainrunsection-validator.travel-time-less-than-1.title:Travel Time less than 1`,
+        $localize`:@@app.services.util.trainrunsection-validator.travel-time-less-than-1.description:Travel time must be greater than or equal to 1`,
       );
     } else {
       trainrunSection.resetTravelTimeWarning();