one-way: uniformize trainrun direction arrows

Signed-off-by: Louis Greiner <greiner.louis@gmail.com>

Author: louisgreiner

src/app/perlenkette/perlenkette.component.html

@@ -52,9 +52,9 @@
                 style="transform: translateY(-2px)"
                 >{{ perlenketteTrainrun.pathItems.at(0).getPerlenketteNode().fullName }}</span
               >
-              @if (getArrowDirectionForOneWayTrainrun() !== null) {
+              @if (trainrunService.getSbbArrowForTrainrunDirection() !== null) {
                 <sbb-icon
-                  [svgIcon]="getArrowDirectionForOneWayTrainrun()"
+                  [svgIcon]="trainrunService.getSbbArrowForTrainrunDirection()"
                   aria-hidden="false"
                   height="13px"
                   width="13px"
@@ -77,9 +77,9 @@
               <span class="station" (click)="scrollFirst($event)">{{
                 perlenketteTrainrun.pathItems.at(0).getPerlenketteNode().fullName
               }}</span>
-              @if (getArrowDirectionForOneWayTrainrun() !== null) {
+              @if (trainrunService.getSbbArrowForTrainrunDirection() !== null) {
                 <sbb-icon
-                  [svgIcon]="getArrowDirectionForOneWayTrainrun()"
+                  [svgIcon]="trainrunService.getSbbArrowForTrainrunDirection()"
                   aria-hidden="false"
                   height="13px"
                   width="13px"
@@ -114,10 +114,13 @@
             </sbb-toggle-icon>
           </sbb-toggle-option>
           <sbb-toggle-option
-            label="⟷"
+            label=""
             subtitle=""
             [value]="ShowTrainrunEditTab.sbb_trainrun_roundtrip_tab"
           >
+            <sbb-toggle-icon>
+              <sbb-icon [svgIcon]="trainrunService.getSbbArrowForTrainrunDirection()"></sbb-icon>
+            </sbb-toggle-icon>
           </sbb-toggle-option>
         </sbb-toggle>
       </div>

src/app/perlenkette/perlenkette.component.ts

@@ -58,8 +58,6 @@ export class PerlenketteComponent implements AfterContentChecked, OnDestroy {
 
   private showAllLockStates = false;
 
-  private trainrunSectionHelper: TrainrunsectionHelper;
-
   public showTrainrunEditTab: ShowTrainrunEditTab = ShowTrainrunEditTab.sbb_trainrun_tab;
 
   sbbToogleValue = ShowTrainrunEditTab.sbb_trainrun_tab;
@@ -71,11 +69,10 @@ export class PerlenketteComponent implements AfterContentChecked, OnDestroy {
     private readonly nodeService: NodeService,
     private versionControlService: VersionControlService,
     private changeDetectorRef: ChangeDetectorRef,
-    private trainrunService: TrainrunService,
+    public trainrunService: TrainrunService,
     private trainrunSectionService: TrainrunSectionService,
   ) {
     this.selectedPerlenketteConnection = undefined;
-    this.trainrunSectionHelper = new TrainrunsectionHelper(this.trainrunService);
 
     this.loadPerlenketteService
       .getPerlenketteData()
@@ -444,19 +441,5 @@ export class PerlenketteComponent implements AfterContentChecked, OnDestroy {
     );
   }
 
-  getArrowDirectionForOneWayTrainrun(): string {
-    if (!this.perlenketteTrainrun || this.perlenketteTrainrun.direction === Direction.ROUND_TRIP) {
-      return "minus-medium";
-    }
-    const isTargetRightOrBottom = TrainrunsectionHelper.isTargetRightOrBottom(
-      this.trainrunSectionService.getSelectedTrainrunSection(),
-    );
-    if (isTargetRightOrBottom) {
-      return "arrow-right-medium";
-    } else {
-      return "arrow-left-medium";
-    }
-  }
-
   protected readonly ShowTrainrunEditTab = ShowTrainrunEditTab;
 }

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

@@ -30,6 +30,7 @@ import {Transition} from "../../models/transition.model";
 import {Port} from "../../models/port.model";
 import {Connection} from "../../models/connection.model";
 import {Operation, OperationType, TrainrunOperation} from "../../models/operation.model";
+import {TrainrunsectionHelper} from "../util/trainrunsection.helper";
 
 @Injectable({
   providedIn: "root",
@@ -723,6 +724,21 @@ export class TrainrunService {
     return iterator.current().trainrunSection;
   }
 
+  getLastTrainrunSection(trainrun: Trainrun): TrainrunSection | undefined {
+    const sections = this.trainrunSectionService.getAllTrainrunSectionsForTrainrun(
+      trainrun.getId(),
+    );
+    if (sections.length === 0) {
+      return undefined;
+    }
+    // sections[0] does not ensure to be the first section in the trainrun
+    const iterator = this.getIterator(sections[0].getSourceNode(), sections[0]);
+    while (iterator.hasNext()) {
+      iterator.next();
+    }
+    return iterator.current().trainrunSection;
+  }
+
   sumTravelTimeUpToLastNonStopNode(node: Node, trainrunSection: TrainrunSection): number {
     let summedTravelTime = 0;
     const iterator = this.getNonStopIterator(node, trainrunSection);
@@ -912,4 +928,31 @@ export class TrainrunService {
     });
     return labelIDCauntMap;
   }
+
+  getSbbArrowForTrainrunSectionDirection(): string {
+    if (!this.getSelectedTrainrun() || this.getSelectedTrainrun().isRoundTrip()) {
+      return "arrows-left-right-medium";
+    }
+    const isTargetRightOrBottom = TrainrunsectionHelper.isTargetRightOrBottom(
+      this.trainrunSectionService.getSelectedTrainrunSection(),
+    );
+    if (isTargetRightOrBottom) {
+      return "arrow-right-medium";
+    } else {
+      return "arrow-left-medium";
+    }
+  }
+
+  getSbbArrowForTrainrunDirection(): string {
+    if (!this.getSelectedTrainrun() || this.getSelectedTrainrun().isRoundTrip()) {
+      return "arrows-left-right-medium";
+    }
+    const firstNode = this.getFirstTrainrunSection(this.getSelectedTrainrun()).getSourceNode();
+    const lastNode = this.getLastTrainrunSection(this.getSelectedTrainrun()).getTargetNode();
+    if (GeneralViewFunctions.getRightOrBottomNode(firstNode, lastNode) === lastNode) {
+      return "arrow-right-medium";
+    } else {
+      return "arrow-left-medium";
+    }
+  }
 }

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-and-section-dialog.component.html

@@ -25,25 +25,16 @@
           ></sbb-trainrun-tab>
         </sbb-tab>
         <sbb-tab id="trainrun-section-tab">
-          @if (getArrowDirectionForOneWayTrainrun() !== null) {
-            <ng-template sbb-tab-label>
-              <span style="transform: translateY(-2px)" class="onewayTrip">{{
-                nextStopLeftNodeName
-              }}</span>
-              <sbb-icon
-                style="transform: translateY(-2px)"
-                [svgIcon]="getArrowDirectionForOneWayTrainrun()"
-                aria-hidden="false"
-                height="13px"
-                width="13px"
-              ></sbb-icon>
-              <span style="transform: translateY(-2px)">{{ nextStopRightNodeName }}</span>
-            </ng-template>
-          } @else {
-            <ng-template sbb-tab-label>
-              <span>{{ nextStopLeftNodeName + " — " + nextStopRightNodeName }}</span>
-            </ng-template>
-          }
+          <ng-template sbb-tab-label
+            >{{ nextStopLeftNodeName }}
+            <sbb-icon
+              [svgIcon]="trainrunService.getSbbArrowForTrainrunSectionDirection()"
+              aria-hidden="false"
+              height="13px"
+              width="13px"
+            ></sbb-icon
+            >{{ nextStopRightNodeName }}
+          </ng-template>
           <sbb-trainrunsection-tab [trainrunDialogParameter]="data"></sbb-trainrunsection-tab>
         </sbb-tab>
         <sbb-tab
@@ -52,7 +43,15 @@
         >
           <sbb-trainrun-filter-tab (trainrunDeleted)="closeDialog()"></sbb-trainrun-filter-tab>
         </sbb-tab>
-        <sbb-tab label="⟷" id="trainrun-roundTrip-tab">
+        <sbb-tab id="trainrun-roundTrip-tab">
+          <ng-template sbb-tab-label>
+            <sbb-icon
+              [svgIcon]="trainrunService.getSbbArrowForTrainrunDirection()"
+              aria-hidden="false"
+              height="13px"
+              width="13px"
+            ></sbb-icon>
+          </ng-template>
           <sbb-trainrun-roundtrip-tab
             (trainrunDeleted)="closeDialog()"
           ></sbb-trainrun-roundtrip-tab>

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-and-section-dialog.component.ts

@@ -81,7 +81,7 @@ export class TrainrunAndSectionDialogComponent implements OnDestroy {
   constructor(
     public dialog: SbbDialog,
     private uiInteractionService: UiInteractionService,
-    private trainrunService: TrainrunService,
+    public trainrunService: TrainrunService,
     private trainrunSectionService: TrainrunSectionService,
     private dataService: DataService,
   ) {
@@ -220,18 +220,4 @@ export class TrainrunAndSectionDialogComponent implements OnDestroy {
       top: dialogPos.top + "px",
     };
   }
-
-  getArrowDirectionForOneWayTrainrun(): string {
-    if (!this.selectedTrainrun || this.selectedTrainrun.isRoundTrip()) {
-      return "minus-medium";
-    }
-    const isTargetRightOrBottom = TrainrunsectionHelper.isTargetRightOrBottom(
-      this.trainrunSectionService.getSelectedTrainrunSection(),
-    );
-    if (isTargetRightOrBottom) {
-      return "arrow-right-medium";
-    } else {
-      return "arrow-left-medium";
-    }
-  }
 }

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-tab/trainrun-tab.component.scss

@@ -7,10 +7,7 @@
 
 ::ng-deep div.sbb-tab-label {
   background: var(--sbb-header-lean-background-color);
-}
-::ng-deep div.sbb-tab-label:has(span.onewayTrip) {
-  padding: 0 15px;
-  height: 36px;
+  max-height: 36px;
 }
 
 ::ng-deep .sbb-trainrun-chip-group {