room-creator-page.component.html 4.98 KB
Newer Older
1
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
Thomas Lenz's avatar
Thomas Lenz committed
2
  <div fxLayout="row" fxLayoutAlign="center">
3
    <mat-progress-spinner *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-spinner>
4
    <mat-card *ngIf="room">
5
      <div fxLayout="row">
6
        <span class="corner-icons"></span>
7 8 9 10 11 12
        <span class="fill-remaining-space"></span>
        <mat-card-header fxLayoutAlign="center" fxLayout="row">
          <mat-card-title fxLayoutAlign="center">
            <h2>{{ room.name }}</h2>
          </mat-card-title>
          <mat-card-subtitle fxLayoutAlign="center">
13 14 15
            <mat-icon *ngIf="moderationEnabled" class="gavel">
              gavel
            </mat-icon>
Tom Käsler's avatar
Tom Käsler committed
16
            <span class="room-short-id">
17
              {{ 'room-page.session-id' | translate}}: {{ room.shortId.slice(0, 4) }} {{  room.shortId.slice(4, 8) }}
Tom Käsler's avatar
Tom Käsler committed
18
            </span>
19 20
            <button id="copy" mat-icon-button (click)="copyShortId()">
              <mat-icon class="copy" matTooltip="{{ 'room-page.copy-session-id' | translate}}">cloud_download</mat-icon>
21
            </button>
22 23 24
          </mat-card-subtitle>
        </mat-card-header>
        <span class="fill-remaining-space"></span>
25 26
        <mat-menu #settingsMenu="matMenu" [overlapTrigger]="false" xPosition="before">
          <button mat-menu-item (click)="showSettingsDialog()">
27
            <mat-icon>edit</mat-icon>
28 29
            {{ 'room-page.general' | translate}}
          </button>
30
          <button mat-menu-item (click)="showCommentsDialog()">
31 32 33 34 35 36 37 38
            <mat-icon>insert_comment</mat-icon>
            {{ 'room-page.comments' | translate}}
          </button>
          <button mat-menu-item (click)="showModeratorsDialog()">
            <mat-icon>person</mat-icon>
            {{ 'room-page.moderators' | translate}}
          </button>
        </mat-menu>
39 40 41 42 43 44 45 46 47
        <div fxLayout="column">
          <button mat-icon-button class="corner-icons" [matMenuTriggerFor]="settingsMenu">
            <mat-icon class="corner-icon" matTooltip="{{ 'room-page.session-settings' | translate}}">settings</mat-icon>
          </button>
          <button mat-icon-button class="corner-icons" routerLink="/creator/room/{{ room.shortId }}/statistics">
            <mat-icon class="corner-icon" matTooltip="{{ 'room-page.answer-statistics' | translate}}">insert_chart
            </mat-icon>
          </button>
        </div>
48
      </div>
49
      <mat-card-content *ngIf="room.description" fxLayoutAlign="center">
50
        <h4>
51
          {{ room.description.trim() }}
52
        </h4>
53
      </mat-card-content>
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
      <div fxLayout="column" fxLayoutAlign="center">
        <div fxLayout="row">
        <span class="fill-remaining-space"></span>
        <mat-grid-list cols="{{viewModuleCount}}" rowHeight="2:1">
          <mat-grid-tile>
            <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/comments">
              <mat-icon matBadge="{{commentCounter}}" class="main-icon"
                        [ngClass]="{'desktop' : deviceType === 'desktop'}">question_answer
              </mat-icon>
              <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.comments' | translate}}</h3>
            </button>
          </mat-grid-tile>
          <mat-grid-tile *ngIf="moderationEnabled">
            <button mat-icon-button routerLink="/moderator/room/{{ room.shortId }}/moderator/comments">
              <mat-icon matBadge="{{moderatorCommentCounter}}" class="main-icon"
                        [ngClass]="{'desktop' : deviceType === 'desktop'}">gavel
              </mat-icon>
              <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.moderating-stream' | translate}}</h3>
            </button>
          </mat-grid-tile>
        </mat-grid-list>
        <span class="fill-remaining-space"></span>
      </div>
      <div fxLayout="row">
        <span class="fill-remaining-space"></span>
        <mat-grid-list cols="2" rowHeight="2:1" class="second">
          <mat-grid-tile>
            <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
              <mat-icon class="main-icon" [ngClass]="{'desktop' : deviceType === 'desktop'}">thumbs_up_down
              </mat-icon>
              <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.live-feedback' | translate}}</h3>
            </button>
          </mat-grid-tile>
          <mat-grid-tile>
            <button mat-icon-button routerLink="/creator/room/{{ room.shortId }}/create-content">
              <mat-icon class="main-icon" [ngClass]="{'desktop' : deviceType === 'desktop'}">note_add</mat-icon>
              <h3 *ngIf="deviceType === 'desktop'">{{ 'room-page.create-content' | translate}}</h3>
            </button>
          </mat-grid-tile>
        </mat-grid-list>
        <span class="fill-remaining-space"></span>
      </div>
      </div>
97

98
      <app-content-groups *ngIf="room && room.contentGroups" [contentGroups]="room.contentGroups"></app-content-groups>
99

100
    </mat-card>
101
    <div *ngIf="!isLoading && !room">{{ 'room-page.room-not-found' | translate }}</div>
Thomas Lenz's avatar
Thomas Lenz committed
102
  </div>
103
</div>
104