overview.component.html

<!-- Header -->
<div class="overview-wrapper">
  <div class="header">
    <h1 style="white-space: pre">Scenario Tracker</h1>
    <span class="header-button-container">
      <st-custom-button
        buttonText=""
        size="S"
        iconType="fontawesome"
        icon="fa fa-trash"
        additionalClasses="delete-button"
        title="Remove All Events"
        (click)="deleteAllActionsDialog()">
      </st-custom-button>
      <st-custom-button
        additionalClasses="detail-button"
        icon="fas fa-undo"
        iconType="fontawesome"
        buttonText=""
        class=""
        size="S"
        color="white"
        title="Undo"
        [disabled]="indexCurrentState === 0"
        (click)="undo()">
      </st-custom-button>
      <st-custom-button
        [disabled]="indexCurrentState === maxIndexCurrentState"
        additionalClasses="detail-button"
        icon="fa fa-redo"
        iconType="fontawesome"
        buttonText=""
        class=""
        size="S"
        color="white"
        title="Redo"
        (click)="redo()">
      </st-custom-button>
    </span>
    <st-dialog-window
      *ngIf="isDeleteAllDialogOpen"
      (confirmEvent)="onDialogDeleteAllActionsConfirm()"
      (closeEvent)="onDialogDeleteAllActionsCancel()"
      (cancelEvent)="onDialogDeleteAllActionsCancel()">
      <p>Are you sure you want to remove all events and final states?</p>
    </st-dialog-window>
  </div>

  <!-- Controls -->
  <div style="display: inline-block; width: 10px"></div>
  <!--
    <custom-button
            buttonText="Stop recording"
            size="M"
            iconType="fontawesome"
            icon="fa fa-stop"
            additionalClasses="stop-button"
            (click)="toggleRecordingHandler()" *ngIf="recording">
    </custom-button>

    <custom-button
      buttonText="Start recording"
      size="M"
      iconType="fontawesome"
      icon="fa fa-play"
      additionalClasses="start-button"
      (click)="toggleRecordingHandler()" *ngIf="!recording"></custom-button>
    -->

  <div class="scroll-panel" #scrollContainer>
    <!-- List of actions -->
    <div
      *ngFor="let actionResult of actionsResults; index as i"
      class="action-block">
      <st-captured-action
        *ngIf="actionResult.action"
        [action]="actionResult.action"
        [deleteActionHandler]="deleteActionHandler"
        [deleteSubActionHandler]="deleteSubActionHandler"
        [startTime]="getStartTime()"
        (toggleDetailDialog)="toggleDetailDialog(actionResult, $event)"
        [isActionDetailDialogOpen]="
          actionResult.isActionDetailDialogOpen ?? false
        "
        [openDetailDialogActionOrSubactionId]="
          actionResult.activeDetailDialogActionId ?? null
        "
        [isSubactionsPanelOpen]="
          openedSubactionPanels.includes(actionResult.action.id)
        "
        (toggleSubactionsPanelOpen)="toggleSubactionsPanelOpen(actionResult)">
      </st-captured-action>
      <st-final-state
        *ngIf="actionResult.result"
        [finalState]="actionResult.result"
        [deleteFinalState]="deleteFinalStateHandler"
        (toggleDetailDialog)="toggleDetailDialog(actionResult, $event)"
        [isActionDetailDialogOpen]="
          actionResult.isActionDetailDialogOpen ?? false
        "
        [openDetailDialogActionOrSubactionId]="
          actionResult.activeDetailDialogActionId ?? null
        ">
      </st-final-state>
    </div>
  </div>
  <!--
    <custom-button
            buttonText="Mark final state"
            size="M"
            iconType="fontawesome"
            icon="fa fa-solid fa-flag-checkered"
            additionalClasses="info-button"
            additionalStyles="margin-top: 2em; margin-left:1em;"
            (click)="markFinalStateHandler()">
    </custom-button>
    -->
</div>