header.component.html

<mat-toolbar class="mat-elevation-z2">
  <mat-toolbar-row>
    <button id="back-button"
            mat-icon-button
            aria-labelledby="back-label"
            *ngIf="router.url !== '/home'"
            (click)="goBack()">
      <mat-icon class="header-icons">arrow_back</mat-icon>
    </button>

    <span class="fill-remaining-space"></span>

    <h2 class="oldtypo-h2"
        *ngIf="router.url.includes('comments')  && deviceType === 'desktop'"
        fxLayoutAlign="center center">
      {{cTime}}
    </h2>

    <!--
    <span *ngIf="router.url.includes('comments')  && !router.url.includes('moderator/comments') && deviceType === 'desktop'"
          class="fill-remaining-space"></span>
    <span class="fill-remaining-space"
          *ngIf="router.url.includes('comments') && deviceType === 'desktop'"></span>
    <span
      *ngIf="router.url.includes('comments') && moderationEnabled"
      class="moderation-enabled"
      fxLayoutAlign="center center">
    <mat-icon matTooltip="{{ 'header.moderation-enabled' | translate }}">
      gavel
    </mat-icon>
  </span>

    <h2 class="oldtypo-h2"
        id="shortId-header"
        *ngIf="router.url.includes('comments')"
        fxLayoutAlign="center center">
      {{ shortId.slice(0, 4) }} {{  shortId.slice(4, 8) }}
    </h2>-->
    <!--Feedback im Hörsaal-->
    <h2 class="oldtypo-h2"
        *ngIf="router.url.includes('home')"
        fxLayoutAlign="center center">
      {{ 'header.home-header' | translate }}
    </h2>
    <span class="fill-remaining-space"></span>

    <mat-menu #userMenu="matMenu"
              [overlapTrigger]="false">
      <!--      <p class="mat-menu-inner-title">Account</p>-->

      <div class="mat-menu-inner-box">

        <!-- Home -->
        <ng-container *ngIf="router.url.endsWith('/home')">
        </ng-container>

        <!-- Session list -->
        <ng-container *ngIf="router.url.endsWith('/user')">
        </ng-container>

        <!-- Room -->
        <ng-container *ngIf="router.url.includes('/room/')">

          <!-- Room General Options - top -->

          <!-- Moderator board / index -->

          <ng-container *ngIf="user && user.role > 0 && (router.url.endsWith('/moderator/comments') || router.url.includes('/comment/'))">

            <button mat-menu-item
                    tabindex="0"
                    routerLink="creator/room/{{shortId}}/comments">
              <mat-icon>
                forum
              </mat-icon>
              <span>{{'header.back-to-questionboard' | translate}}</span>
            </button>

          </ng-container>

          <ng-container *ngIf="user && user.role == 0 && router.url.includes('/comment/')">

            <button mat-menu-item
                    tabindex="0"
                    routerLink="participant/room/{{shortId}}/comments">
              <mat-icon>
                forum
              </mat-icon>
              <span>{{'header.back-to-questionboard' | translate}}</span>
            </button>

          </ng-container>

          <!-- Question board -->
          <ng-container *ngIf="router.url.endsWith('/comments')">

            <button mat-menu-item
                    *ngIf="user && !router.url.endsWith('moderator/comments')"
                    tabindex="0"
                    (click)="navigateCreateQuestion();">
              <mat-icon>
                add
              </mat-icon>
              <span>{{'header.create-question' | translate}}</span>
            </button>

            <ng-container *ngIf="user && user.role > 0">

              <button mat-menu-item
                      tabindex="0"
                      *ngIf="user && user.role > 0 && !router.url.includes('/participant/') && !router.url.endsWith('moderator/comments')"
                      routerLink="moderator/room/{{shortId}}/moderator/comments">
                <mat-icon>
                  visibility_off
                </mat-icon>
                <span>{{'header.moderationboard' | translate}}</span>
              </button>

              <button mat-menu-item
                      tabindex="0"
                      *ngIf="deviceType !== 'mobile' && !router.url.includes('/participant/')"
                      routerLink="participant/room/{{shortId}}/comments/questionwall">
                <mat-icon
                  svgIcon="beamer">
                  comment
                </mat-icon>
                <span>{{'header.questionwall' | translate}}</span>
              </button>

            </ng-container>

            <ng-container *ngIf="router.url.includes('/participant/room/')">
            </ng-container>
            <ng-container *ngIf="router.url.includes('/moderator/room/')">
            </ng-container>
            <ng-container *ngIf="router.url.includes('/creator/room/')">
            </ng-container>

            <button mat-menu-item
                    *ngIf="user"
                    (click)="navigateExportQuestions()"
                    tabindex="0">
              <mat-icon>save</mat-icon>
              <span>{{'header.export-questions' | translate}}</span>
            </button>

            <button mat-menu-item
                    *ngIf="user && user.role > 0 && !router.url.includes('/participant/')"
                    (click)="navigateDeleteQuestions()"
                    tabindex="0">
              <mat-icon class="color-warn">delete</mat-icon>
              <span>{{'header.delete-questions' | translate}}</span>
            </button>

          </ng-container>

          <!-- Session -->
          <ng-container *ngIf="!router.url.endsWith('/comments') && !router.url.includes('/comment/')">

            <!-- app-room-participant-page -->
            <ng-container *ngIf="router.url.includes('/participant/room/')">
            </ng-container>
            <!-- app-room-creator-page -->
            <ng-container *ngIf="router.url.includes('/moderator/room/')">
            </ng-container>
            <!-- app-room-creator-page -->
            <ng-container *ngIf="router.url.includes('/creator/room/')">

              <button mat-menu-item
                      *ngIf="user"
                      (click)="navigateRoomBonusToken()"
                      tabindex="0">
                <mat-icon class="star">grade</mat-icon>
                <span>{{'header.bonustoken' | translate}}</span>
              </button>

              <button mat-menu-item
                      *ngIf="user"
                      (click)="navigateExportQuestions()"
                      tabindex="0">
                <mat-icon>save</mat-icon>
                <span>{{'header.export-questions' | translate}}</span>
              </button>

              <button mat-menu-item
                      *ngIf="user"
                      (click)="navigateDeleteQuestions()"
                      tabindex="0">
                <mat-icon class="color-warn">delete</mat-icon>
                <span>{{'header.delete-questions' | translate}}</span>
              </button>

            </ng-container>

          </ng-container>

          <!-- Room General Options - bot -->

          <ng-container *ngIf="user && user.role > 0 && !router.url.includes('/participant') && !router.url.includes('/comment/')" >

            <button mat-menu-item
                    *ngIf="user"
                    (click)="navigateModerator()"
                    tabindex="0">
              <mat-icon>gavel</mat-icon>
              <span>{{'header.edit-moderator' | translate}}</span>
            </button>

            <button mat-menu-item
                    *ngIf="user"
                    (click)="navigateTags()"
                    tabindex="0">
              <mat-icon svgIcon="comment_tag"></mat-icon>
              <span>{{'header.edit-tags' | translate}}</span>
            </button>

          </ng-container>

          <button mat-menu-item
                  *ngIf="user && user.role > 0 && !router.url.includes('/comment/')"
                  tabindex="0"
                  (click)="showQRDialog();">
            <mat-icon svgIcon="qrcode">
            </mat-icon>
            <span>{{'header.room-qr' | translate}}</span>
          </button>

        </ng-container>

      </div>

      <!-- General Options -->

      <button mat-menu-item
              *ngIf="user && !router.url.endsWith('/user')"
              routerLink="/user"
              tabindex="0">
        <mat-icon class="sessions">group</mat-icon>
        <span *ngIf="!user.isGuest">{{'header.my-sessions' | translate}}</span>
        <span *ngIf="user.isGuest"
              svgIcon="meeting_room">{{'header.visited-sessions' | translate}}</span>
      </button>

      <button mat-menu-item
              *ngIf="user"
              (click)="openUserBonusTokenDialog()"
              tabindex="0">
        <mat-icon class="star">grade</mat-icon>
        <span>{{'header.user-bonus-token' | translate}}</span>
      </button>

      <button mat-menu-item
              *ngIf="user"
              (click)="showMotdDialog()">
        <mat-icon>
          {{ motdState ? 'notifications_active' : 'notifications_none' }}
        </mat-icon>
        <span>{{'header.motd' | translate}}</span>
      </button>

      <button mat-menu-item
              aria-hidden="true"
              *ngIf="isSafari === 'false'  && !router.url.includes('home')"
              (click)="getRescale().toggleState();">
        <mat-icon (click)="getRescale().toggleState();">fullscreen
        </mat-icon>
        <span>{{'header.fullscreen' | translate}}</span>
      </button>

      <mat-divider></mat-divider>

      <button mat-menu-item
              *ngIf="user && !user.isGuest && user.loginId"
              (click)="openDeleteUserDialog()"
              tabindex="0">
        <mat-icon class="color-warn">delete</mat-icon>
        <span>{{'header.delete-account' | translate}}</span>
      </button>

      <button mat-menu-item
              (click)="logout()"
              tabindex="0">
        <mat-icon class="color-warn">exit_to_app</mat-icon>
        <span>{{ 'header.logout' | translate }}</span>
      </button>

    </mat-menu>

    <button [disabled]="cookiesDisabled()"
            mat-button
            *ngIf="user && deviceType === 'desktop'"
            [matMenuTriggerFor]="userMenu"
            aria-labelledby="session-label"
            id="session-button">
      <div class="label-icon">
        <mat-icon *ngIf="!user.isGuest"
                  class="header-icons">more_vert
        </mat-icon>
        <mat-icon *ngIf="user.isGuest"
                  svgIcon="meeting_room"
                  class="header-icons"></mat-icon>
        <h2 class="oldtypo-h2"
            *ngIf="!user.isGuest">{{'header.my-account' | translate}}</h2>
        <!--Guest Account-->
        <h2 class="oldtypo-h2"
            *ngIf="user.isGuest">{{'header.my-guest-account' | translate}}</h2>
      </div>
    </button>

    <button [disabled]="cookiesDisabled()"
            mat-icon-button
            *ngIf="user && deviceType === 'mobile'"
            [matMenuTriggerFor]="userMenu"
            aria-labelledby="session-label">
      <mat-icon *ngIf="!user.isGuest"
                class="header-icons">more_vert
      </mat-icon>
      <mat-icon *ngIf="user.isGuest"
                svgIcon="meeting_room"
                class="header-icons"></mat-icon>
    </button>

    <button id="login-button"
            [disabled]="cookiesDisabled()"
            mat-button
            *ngIf="!user && deviceType === 'desktop'"
            (click)=login(false)
            aria-labelledby="login-label">
      <div class="label-icon">
        <mat-icon class="header-icons">person</mat-icon>
        <h2 class="oldtypo-h2"
            *ngIf="deviceType === 'desktop'">{{'header.login' | translate}}</h2>
      </div>
    </button>

    <button [disabled]="cookiesDisabled()"
            mat-icon-button
            *ngIf="!user && deviceType === 'mobile'"
            (click)=login(false)
            aria-labelledby="login-label">
      <mat-icon class="header-icons">person</mat-icon>
    </button>
  </mat-toolbar-row>
</mat-toolbar>

<div class="visually-hidden">
  <div id="login-label">{{'header.accessibility-login' | translate}}</div>
  <div id="back-label">{{'header.accessibility-back' | translate}}</div>
  <div id="session-label">{{'header.accessibility-session' | translate}}</div>
</div>