room-list.component.html 4.74 KB
Newer Older
1
2
3
4
5
6
<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxFill>
  <div fxLayout="row" fxLayoutAlign="center">
    <mat-progress-spinner color="primary" mode="indeterminate" diameter="80"></mat-progress-spinner>
  </div>
</div>

7
<div *ngIf="roomsWithRole">
8
  <mat-divider></mat-divider>
9
  <div *ngIf="tableDataSource.data.length === 0" aria-labelledby="emptySessionHistoryLabel">
10
    <h3>{{ 'room-list.no-room-history' | translate }}</h3>
11
12
13
14
15
16
  </div>

  <div *ngIf="tableDataSource.data.length > 0">

    <!-- filter input -->
    <mat-form-field class="filterWrapper">
17
      <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()" matInput (keyup)="applyFilter($event.target.value)"
18
19
20
             class="filter"
             attr.aria-labelledby="sessionHistoryLabel{{ this.rooms.length === 1 ? '1' : '' }}"/>
      <mat-placeholder class="placeholder">{{ 'room-list.filter-message' | translate }}</mat-placeholder>
21
22
    </mat-form-field>

Tim Robin Schweizer's avatar
Tim Robin Schweizer committed
23
    <div [class.tableOverflow]="this.tableDataSource.data.length > 5">
24
      <table #roomTable mat-table [dataSource]="tableDataSource" style="width: 100%">
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

        <!-- Room / Session name column -->
        <ng-container matColumnDef="name" aria-hidden="true">
          <th mat-header-cell *matHeaderCellDef style="width: 35%">
            {{ 'room-list.panel-session-name' | translate }}
          </th>
          <td mat-cell *matCellDef="let room">
            {{ room.name }}
          </td>
        </ng-container>

        <!-- Session ID column -->
        <ng-container matColumnDef="shortId" aria-hidden="true">
          <th mat-header-cell *matHeaderCellDef style="width: 30%">
            {{ 'room-list.panel-session-id' | translate }}
          </th>
          <td mat-cell *matCellDef="let room">
            {{ room.shortId.slice(0,4) }} {{ room.shortId.slice(4,8) }}
          </td>
        </ng-container>

        <!-- Role column -->
        <ng-container matColumnDef="role" aria-hidden="true">
          <th mat-header-cell *matHeaderCellDef style="width: 15%">
            {{ 'room-list.panel-user-role' | translate }}
          </th>
          <td mat-cell *matCellDef="let room" [ngSwitch]="room.role">
            <mat-icon mat-list-icon *ngSwitchCase="creatorRole"
                      title="{{ 'room-list.creator-role' | translate }}">
              record_voice_over
            </mat-icon>
            <mat-icon mat-list-icon *ngSwitchCase="participantRole"
                      title="{{ 'room-list.participant-role' | translate }}">
58
              people
59
60
61
            </mat-icon>
            <mat-icon mat-list-icon *ngSwitchCase="executiveModeratorRole"
                      title="{{ 'room-list.executive-moderator-role' | translate }}">
Tom Käsler's avatar
Tom Käsler committed
62
              mic
63
64
65
66
67
68
69
70
71
            </mat-icon>
          </td>
        </ng-container>

        <!-- Join button column -->
        <ng-container matColumnDef="button">
          <th mat-header-cell *matHeaderCellDef style="width: 20%; text-align: end">
            {{ 'room-list.panel-join-button' | translate }}
          </th>
Tim Robin Schweizer's avatar
Tim Robin Schweizer committed
72
73
74
75
          <td mat-cell *matCellDef="let room" style="text-align: end"
              attr.aria-labelledby="empty">
            <button mat-flat-button type="button"
                    attr.aria-labelledby="{{ 'joinButtonLabel' + room.shortId | translate }}"
76
77
78
79
80
                    name="{{ 'room-list.panel-join-button' | translate }}"
                    routerLink="/{{ roleToString((room.role)) }}/room/{{ room.shortId }}"
                    (click)="setCurrentRoom(room.shortId)">
              <mat-icon>input</mat-icon>
            </button>
Tim Robin Schweizer's avatar
Tim Robin Schweizer committed
81
82
83
84
85
86
87
88
            <div class="visually-hidden">
              <div id="{{ 'joinButtonLabel' + room.shortId | translate }}">
                {{ 'room-list.join-message-template' | translate:{
                  session: room.name,
                  id: room.shortId,
                  role: ( 'room-list.' + roleToString((room.role)) + '-role' | translate )
              } }}
              </div>
89
90
91
92
93
94
95
96
97
98
99
100
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

      </table>

    </div>
  </div>

101
</div>
Tim Robin Schweizer's avatar
Tim Robin Schweizer committed
102
103

<div class="visually-hidden">
104
105
106
107
108
109
110
111
112
113
114
  <div id="emptySessionHistoryLabel">{{ 'room-list.no-room-history' | translate }}</div>
  <div id="sessionHistoryLabel">
    {{ 'room-list.session-history-label' | translate }}
    {{ 'room-list.session-history' | translate:{ count: this.rooms.length } }}
    {{ 'room-list.filter' | translate }}
  </div>
  <div id="sessionHistoryLabel1">
    {{ 'room-list.session-history-label' | translate }}
    {{ 'room-list.session-history-1' | translate }}
    {{ 'room-list.filter' | translate }}
  </div>
Tim Robin Schweizer's avatar
Tim Robin Schweizer committed
115
116
  <div id="empty"></div>
</div>