editor-node-detail-view.component.html

<h2 class="SummaryTitle">
  {{ nodeProperties.nodeBetriebspunktFullName }} ({{
    nodeProperties.nodeBetriebspunktName
  }})
</h2>
<sbb-accordion [multi]="true">
  <sbb-expansion-panel [expanded]="true">
    <sbb-expansion-panel-header>{{ 'app.view.editor-side-view.editor-node-detail-view.base-data' | translate }}</sbb-expansion-panel-header>
    <sbb-form-field [label]="'app.view.editor-side-view.editor-node-detail-view.operational-point' | translate"
                    class="sbb-form-field-long"
                    [class.readonly]="!versionControlService.getVariantIsWritable()"
    >
      <input
        sbbInput
        [ngModel]="nodeProperties.nodeBetriebspunktName"
        (change)="onBetriebspunktNameChanged($event)"
      />
    </sbb-form-field>
    <sbb-form-field [label]="'app.view.editor-side-view.editor-node-detail-view.name' | translate"
                    class="sbb-form-field-long"
                    [class.readonly]="!versionControlService.getVariantIsWritable()"
    >
      <input
        sbbInput
        [ngModel]="nodeProperties.nodeBetriebspunktFullName"
        (change)="onFullNameChanged($event)"
      />
    </sbb-form-field>
    <sbb-form-field [label]="'app.view.editor-side-view.editor-node-detail-view.connection-time' | translate"
                    class="sbb-form-field-long"
                    [class.readonly]="!versionControlService.getVariantIsWritable()"
    >
      <input
        sbbInput
        type="number"
        pattern="^[.0-9]*"
        [(ngModel)]="nodeProperties.nodeConnectionTime"
        (change)="onConnectionTimeChanged()"
      />
    </sbb-form-field>
  </sbb-expansion-panel>

  <sbb-expansion-panel [expanded]="true" *ngIf="false">
    <sbb-expansion-panel-header>{{ 'app.view.editor-side-view.editor-node-detail-view.occupancy' | translate }}</sbb-expansion-panel-header>
    <div class="sbb-mt-m">
      <sbb-knoten-auslastung-view></sbb-knoten-auslastung-view>
    </div>
    <sbb-form-field [label]="'app.view.editor-side-view.editor-node-detail-view.capacity' | translate"
                    class="sbb-form-field-long"
                    [class.readonly]="!versionControlService.getVariantIsWritable()"
    >
      <input
        sbbInput
        type="number"
        pattern="^[.0-9]*"
        min="1"
        [(ngModel)]="nodeProperties.nodeCapacity"
        (input)="onCapacityChanged()"
        (focusout)="loadCapacityValue()"
      />
    </sbb-form-field>
  </sbb-expansion-panel>

  <sbb-expansion-panel [expanded]="false">
    <sbb-expansion-panel-header>{{ 'app.view.editor-side-view.editor-node-detail-view.filterable-labels' | translate }}</sbb-expansion-panel-header>
    <sbb-form-field [label]="'app.view.editor-side-view.editor-node-detail-view.labels' | translate"
                    class="sbb-form-field-long"
                    [class.readonly]="!versionControlService.getVariantIsWritable()"
    >
      <sbb-chip-list
        [value]="nodeProperties.labels"
        (focusout)="onLabelsFocusout()"
      >
        <sbb-chip
          *ngFor="let element of nodeProperties.labels"
          [value]="element"
          (removed)="remove($event)"
        >
          {{ element }}
        </sbb-chip>
        <input
          id="nodeLabelsInput"
          [placeholder]="'app.view.editor-side-view.editor-node-detail-view.new-label-placeholder' | translate"
          sbbChipInput
          [sbbChipInputSeparatorKeyCodes]="separatorKeysCodes"
          (sbbChipInputTokenEnd)="add($event)"
          [sbbAutocomplete]="nodeLabelsAutoComplete"
        />
      </sbb-chip-list>
      <sbb-autocomplete #nodeLabelsAutoComplete="sbbAutocomplete">
        <sbb-option
          *ngFor="let option of nodeLabelsAutoCompleteOptions"
          [value]="option"
          >{{ option }}</sbb-option
        >
      </sbb-autocomplete>
    </sbb-form-field>
  </sbb-expansion-panel>

  <sbb-expansion-panel [expanded]="false" *ngIf="false">
    <sbb-expansion-panel-header> {{ 'app.view.editor-side-view.editor-node-detail-view.stopping-times' | translate }} </sbb-expansion-panel-header>

    <sbb-label class="sbb-mt-m">{{ 'app.view.editor-side-view.editor-node-detail-view.stopping-time-per-product' | translate }}</sbb-label>

    <!-- TIM: this should be done with sbb table component, but I don't know how
      (or better, use flexbox for each line and make it a two column area below a certain breakpoint)-->
    <table class="NodeDataTable"
           [class.readonly]="!versionControlService.getVariantIsWritable()"
    >
      <tr>
        <td class="sbb-table-column-s">{{ 'app.view.editor-side-view.editor-node-detail-view.ipv' | translate }}</td>
        <td class="sbb-table-column-m">
          <div
            *ngIf="
              !nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitIPV']
                .no_halt;
              else noHalt
            "
          >
            <input
              sbbInput
              type="number"
              pattern="^[.0-9]*"
              step="0.1"
              [(ngModel)]="
                nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitIPV']
                  .haltezeit
              "
              (change)="onHaltezeitChanged()"
            />
          </div>
          <ng-template #noHalt>
            <input disabled value="—" />
          </ng-template>
        </td>
        <td>
          <sbb-checkbox
            [(ngModel)]="
              nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitIPV']
                .no_halt
            "
            (change)="haltezeitIPVNoHaltChanged()"
            >{{ 'app.view.editor-side-view.editor-node-detail-view.no-stop' | translate }}
          </sbb-checkbox>
        </td>
      </tr>
      <tr>
        <td>{{ 'app.view.editor-side-view.editor-node-detail-view.a' | translate }}</td>
        <td class="sbb-table-column-m">
          <div
            *ngIf="
              !nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitA']
                .no_halt;
              else noHalt
            "
          >
            <input
              sbbInput
              type="number"
              pattern="^[.0-9]*"
              step="0.1"
              [(ngModel)]="
                nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitA']
                  .haltezeit
              "
              (change)="onHaltezeitChanged()"
            />
          </div>
          <ng-template #noHalt>
            <input disabled value="—" />
          </ng-template>
        </td>
        <td>
          <sbb-checkbox
            [(ngModel)]="
              nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitA'].no_halt
            "
            (change)="haltezeitANoHaltChanged()"
            >{{ 'app.view.editor-side-view.editor-node-detail-view.no-stop' | translate }}
          </sbb-checkbox>
        </td>
      </tr>
      <tr>
        <td>{{ 'app.view.editor-side-view.editor-node-detail-view.b' | translate }}</td>
        <td class="sbb-table-column-m">
          <div
            *ngIf="
              !nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitB']
                .no_halt;
              else noHalt
            "
          >
            <input
              sbbInput
              type="number"
              pattern="^[.0-9]*"
              step="0.1"
              [(ngModel)]="
                nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitB']
                  .haltezeit
              "
              (change)="onHaltezeitChanged()"
            />
          </div>
          <ng-template #noHalt>
            <input disabled value="—" />
          </ng-template>
        </td>
        <td>
          <sbb-checkbox
            [(ngModel)]="
              nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitB'].no_halt
            "
            (change)="haltezeitBNoHaltChanged()"
            >{{ 'app.view.editor-side-view.editor-node-detail-view.no-stop' | translate }}
          </sbb-checkbox>
        </td>
      </tr>
      <tr>
        <td>{{ 'app.view.editor-side-view.editor-node-detail-view.c' | translate }}</td>
        <td class="sbb-table-column-m">
          <div
            *ngIf="
              !nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitC']
                .no_halt;
              else noHalt
            "
          >
            <input
              sbbInput
              type="number"
              pattern="^[.0-9]*"
              step="0.1"
              [(ngModel)]="
                nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitC']
                  .haltezeit
              "
              (change)="onHaltezeitChanged()"
            />
          </div>
          <ng-template #noHalt>
            <input disabled value="—" />
          </ng-template>
        </td>
        <td>
          <sbb-checkbox
            [(ngModel)]="
              nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitC'].no_halt
            "
            (change)="haltezeitCNoHaltChanged()"
            >{{ 'app.view.editor-side-view.editor-node-detail-view.no-stop' | translate }}
          </sbb-checkbox>
        </td>
      </tr>
      <tr>
        <td>{{ 'app.view.editor-side-view.editor-node-detail-view.d' | translate }}</td>
        <td class="sbb-table-column-m">
          <div
            *ngIf="
              !nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitD']
                .no_halt;
              else noHalt
            "
          >
            <input
              sbbInput
              type="number"
              pattern="^[.0-9]*"
              step="0.1"
              [(ngModel)]="
                nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitD']
                  .haltezeit
              "
              (change)="onHaltezeitChanged()"
            />
          </div>
          <ng-template #noHalt>
            <input disabled value="—" />
          </ng-template>
        </td>
        <td>
          <sbb-checkbox
            [(ngModel)]="
              nodeProperties.nodeTrainrunCategoryHaltezeit['HaltezeitD'].no_halt
            "
            (change)="haltezeitDNoHaltChanged()"
            >{{ 'app.view.editor-side-view.editor-node-detail-view.no-stop' | translate }}
          </sbb-checkbox>
        </td>
      </tr>
    </table>
  </sbb-expansion-panel>
  <sbb-expansion-panel [expanded]="false" *ngIf="!disableBackend">
    <sbb-expansion-panel-header>{{ 'app.view.editor-side-view.editor-node-detail-view.links' | translate }}</sbb-expansion-panel-header>
    <ul>
      <li>
        <a
          sbb-link
          target="_blank"
          href="https://data.sbb.ch/explore/embed/dataset/perronkante/table/?q={{
            nodeProperties.nodeBetriebspunktName
          }}"
        >
          {{ 'app.view.editor-side-view.editor-node-detail-view.platform-information' | translate }}
        </a>
      </li>
      <li>
        <a
          sbb-link
          target="_blank"
          href="https://data.sbb.ch/explore/dataset/perronoberflache/table/?refine.bps={{
            nodeProperties.nodeBetriebspunktName
          }}&sort=-p_lange"
        >
          {{ 'app.view.editor-side-view.editor-node-detail-view.platform-length' | translate }}
        </a>
      </li>
    </ul>
  </sbb-expansion-panel>
  <ng-container *ngIf="versionControlService.getVariantIsWritable()">
    <button
      sbb-secondary-button
      svgIcon="trash-small"
      class="sbb-mt-m sbb-ml-m"
      (click)="onDeleteNode()"
    >
      {{ 'app.view.editor-side-view.editor-node-detail-view.delete-node' | translate }}
    </button>
  </ng-container>
</sbb-accordion>