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">
        <button mat-icon-button (click)="share(jitsiRoom)">
          <mat-icon>share</mat-icon>
        </button>
      </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">
        <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 disabled matTooltip="{{'jitsi.rooms.notStarted' | i18n}}"
          matTooltipPosition="above">
          {{ jitsiRoom.room }}
        </a>
      </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 | date: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 | date: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 | date: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" class="url" href="{{ jitsiRoom.moderationUrl}}"
          target="_blank">
          {{ jitsiRoom.moderationUrl }}
          <mat-icon style="font-size: 1em;">open_in_new</mat-icon>
        </a>

        <a *ngIf="!open(jitsiRoom, true)" mat-button color="primary" class="url" disabled
          matTooltip="{{'jitsi.rooms.notStarted' | i18n}}" matTooltipPosition="above">
          {{ jitsiRoom.moderationUrl }}
        </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>
          <mat-icon (click)="confirmDelete(jitsiRoom)">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>
          <input matInput placeholder="{{'jitsi.rooms.room' | i18n}}" 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>
          <input matInput [ngxMatDatetimePicker]="startsPicker" [(ngModel)]="jitsiRoom.starts" formControlName="starts"
            placeholder="{{'jitsi.rooms.starts' | i18n}}">
          <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" placeholder="{{'jitsi.rooms.moderationStarts' | i18n}}">
          <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" placeholder="{{'jitsi.rooms.expires' | i18n}}">
          <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 *ngIf="jitsiRoomsQuota && !working" mat-raised-button color="primary" [disabled]="form.invalid">
        {{'jitsi.rooms.create' | i18n}}
      </button>
    </mat-card-actions>
  </mat-card>

</form>