we_bstly-web/src/app/pages/jitsi/jitsi.component.html

<h3>{{'jitsi.rooms' | i18n}}</h3>

<div *ngIf="jitsiRooms">
  <table mat-table matSort [dataSource]="jitsiRooms.content" (matSortChange)="updateSort($event)">

    <ng-container matColumnDef="share">
      <th mat-header-cell *matHeaderCellDef> {{'jitsi.share' | i18n}} </th>
      <td mat-cell *matCellDef="let jitsiRoom">
        <a mat-icon-button (click)="share(jitsiRoom)">
          <mat-icon>share</mat-icon>
        </a>
      </td>
    </ng-container>

    <ng-container matColumnDef="room">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="room"> {{'jitsi.rooms.room' | i18n}} </th>
      <td mat-cell *matCellDef="let jitsiRoom">
        <div class="flex align-center">
          <a *ngIf="open(jitsiRoom, false)" mat-button color="accent" href="{{ jitsiRoom.url }}" target="_blank">
            {{ jitsiRoom.room }}
            <mat-icon style="font-size: 1em;">open_in_new</mat-icon>
          </a>

          <a *ngIf="!open(jitsiRoom, false)" mat-button matTooltip="{{'jitsi.rooms.notStarted' | i18n}}"
            (click)="copyRoomUrlToClipboard(jitsiRoom)">
            {{ jitsiRoom.room }}
          </a>

          <a *ngIf="!jitsiRoom.code && shortenedUrlQuota" mat-icon-button (click)="createShortenedUrl(jitsiRoom)" inline
            matTooltip="{{'urlshortener.create' | i18n}}">
            <mat-icon>add_link</mat-icon>
          </a>
        </div>
      </td>
    </ng-container>


    <ng-container matColumnDef="starts">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="starts"> {{'jitsi.rooms.starts' | i18n}} </th>
      <td mat-cell *matCellDef="let jitsiRoom">{{ jitsiRoom.starts | datef:datetimeformat}} </td>
    </ng-container>

    <ng-container matColumnDef="moderationStarts">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="moderationStarts"> {{'jitsi.rooms.moderationStarts' |
        i18n}} </th>
      <td mat-cell *matCellDef="let jitsiRoom">{{ jitsiRoom.moderationStarts | datef:datetimeformat}} </td>
    </ng-container>

    <ng-container matColumnDef="expires">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="expires"> {{'jitsi.rooms.expires' | i18n}} </th>
      <td mat-cell *matCellDef="let jitsiRoom"> {{ jitsiRoom.expires | datef:datetimeformat}} </td>
    </ng-container>

    <ng-container matColumnDef="moderationUrl">
      <th mat-header-cell *matHeaderCellDef mat-sort-header="moderationUrl"> {{'jitsi.rooms.moderationUrl' | i18n}}
      </th>
      <td mat-cell *matCellDef="let jitsiRoom">
        <a *ngIf="open(jitsiRoom, true)" mat-button color="primary" href="{{ jitsiRoom.moderationUrl}}" target="_blank">
          <span class="url">{{ jitsiRoom.moderationUrl }}</span>
          <mat-icon style="font-size: 1em;">open_in_new</mat-icon>
        </a>

        <a *ngIf="!open(jitsiRoom, true)" mat-button color="primary" disabled
          matTooltip="{{'jitsi.rooms.notStarted' | i18n}}" matTooltipPosition="above">
          <span class="url">{{ jitsiRoom.moderationUrl }}</span>
        </a>
      </td>
    </ng-container>

    <ng-container matColumnDef="edit">
      <th mat-header-cell *matHeaderCellDef> {{'jitsi.rooms.edit' | i18n}} </th>
      <td mat-cell *matCellDef="let jitsiRoom" class="text-right">
        <a mat-icon-button (click)="edit(jitsiRoom)">
          <mat-icon>edit</mat-icon>
        </a>
      </td>
    </ng-container>

    <ng-container matColumnDef="delete">
      <th mat-header-cell *matHeaderCellDef class="align-right"> {{'jitsi.rooms.delete' | i18n}} </th>
      <td mat-cell *matCellDef="let jitsiRoom" class="text-right">
        <a mat-icon-button (click)="confirmDelete(jitsiRoom)">
          <mat-icon>delete</mat-icon>
        </a>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="jitsiRoomsColumns"></tr>
    <tr mat-row *matRowDef="let myRowData; columns: jitsiRoomsColumns"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="jitsiRooms.totalElements" [pageSize]="jitsiRooms.size"
    (page)="updatePages($event)" showFirstLastButtons></mat-paginator>

</div>

<form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
  <mat-card>
    <mat-card-content>
      <p>{{'jitsi.rooms.info' | i18n}}</p>
      <p *ngIf="!jitsiRoomsQuota">{{'jitsi.rooms.noQuota' | i18n}}</p>
      <div *ngIf="jitsiRoomsQuota">
        <p>{{'jitsi.rooms.left' | i18n:jitsiRoomsQuota}}</p>
        <mat-form-field>
          <mat-label>{{'jitsi.rooms.room' | i18n}}</mat-label>
          <input matInput formControlName="room" [(ngModel)]="jitsiRoom.room" required pattern="[a-zA-Z0-9]+">
          <mat-error>
            {{'jitsi.rooms.error.room' | i18n}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>{{'jitsi.rooms.starts' | i18n}}</mat-label>
          <input matInput [ngxMatDatetimePicker]="startsPicker" [(ngModel)]="jitsiRoom.starts" formControlName="starts"
            (dateChange)="clearModeration(jitsiRoom)">
          <mat-datepicker-toggle matSuffix [for]="startsPicker"></mat-datepicker-toggle>
          <ngx-mat-datetime-picker #startsPicker></ngx-mat-datetime-picker>
          <mat-error>
            {{'jitsi.rooms.error.starts' | i18n}}
          </mat-error>
        </mat-form-field>

        <mat-form-field *ngIf="jitsiRoom.starts">
          <input matInput [ngxMatDatetimePicker]="moderationStartsPicker" [(ngModel)]="jitsiRoom.moderationStarts"
            formControlName="moderationStarts">
          <mat-label>{{'jitsi.rooms.moderationStarts' | i18n}}</mat-label>
          <mat-datepicker-toggle matSuffix [for]="moderationStartsPicker"></mat-datepicker-toggle>
          <ngx-mat-datetime-picker #moderationStartsPicker></ngx-mat-datetime-picker>
          <mat-error>
            {{'jitsi.rooms.error.moderationStarts' | i18n}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <input matInput [ngxMatDatetimePicker]="expiresPicker" [(ngModel)]="jitsiRoom.expires"
            formControlName="expires">
          <mat-label>{{'jitsi.rooms.expires' | i18n}}</mat-label>
          <mat-datepicker-toggle matSuffix [for]="expiresPicker"></mat-datepicker-toggle>
          <ngx-mat-datetime-picker #expiresPicker></ngx-mat-datetime-picker>
          <mat-error>
            {{'jitsi.rooms.error.expires' | i18n}}
          </mat-error>
        </mat-form-field>

      </div>
    </mat-card-content>
    <mat-card-actions>
      <button type="submit" *ngIf="jitsiRoomsQuota && !working" mat-raised-button color="primary"
        [disabled]="form.invalid">
        {{'jitsi.rooms.create' | i18n}}
      </button>
    </mat-card-actions>
    <mat-card-footer>
      <a href="https://wiki.bstly.de/services/jitsi#rooms" class="help-button" matTooltip="{{'help-button' | i18n}}"
        matTooltipPosition="above" target="_blank" mat-fab color="accent">
        <mat-icon>contact_support</mat-icon>
      </a>
    </mat-card-footer>
  </mat-card>

</form>