openvidu/openvidu-testapp/src/app/components/dashboard/dashboard.component.html

<md-form-field>
  <input mdInput placeholder="OpenVidu Server URL" [(ngModel)]="openviduURL">
</md-form-field>

<md-form-field>
  <input mdInput placeholder="OpenVidu Server Secret" [(ngModel)]="openviduSecret">
</md-form-field>

<md-tab-group class="demo-tab-group" dynamicHeight="true">

  <md-tab id="audio-video" label="Test session">
    <div class="demo-tab-content">

      <div fxLayout="row" fxLayoutGap="20px" fxFlex="40" fxLayoutAlign="start start">
        <md-card class="join-card">
          <md-card-title>Join a session</md-card-title>
          <md-card-content>
            <form>
              <md-form-field class="full-width">
                <input mdInput placeholder="Client data" name="clientData" [(ngModel)]="clientData">
              </md-form-field>
              <md-form-field class="full-width">
                <input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName">
              </md-form-field>
              <div class="inner-card">
                <h4>Send...</h4>
                <p>
                  <md-checkbox [(ngModel)]="sendVideo" name="sendVideo">Video</md-checkbox>
                </p>
                <p>
                  <md-radio-group [(ngModel)]="optionVideo" name="optionVideo" [disabled]="!sendVideo">
                    <md-radio-button value="video">Video</md-radio-button>
                    <md-radio-button value="screen">Screen</md-radio-button>
                  </md-radio-group>
                </p>
                <p>
                  <md-checkbox [(ngModel)]="sendAudio" name="sendAudio">Audio</md-checkbox>
                </p>
              </div>
              <div class="inner-card">
                <h4>Enter with active...</h4>
                <md-checkbox [(ngModel)]="activeVideo" name="activeVideo" [disabled]="!sendVideo">Video</md-checkbox>
                <md-checkbox [(ngModel)]="activeAudio" name="activeAudio" [disabled]="!sendAudio">Audio</md-checkbox>
              </div>
            </form>
          </md-card-content>
          <md-card-actions>
            <button md-button id="join-btn" (click)="joinSession()">JOIN</button>
          </md-card-actions>
        </md-card>
      </div>

      <div *ngIf="session" fxLayout="row" fxLayoutGap="20px" fxFlex="60" fxLayoutAlign="start start">
        <div id="session">
          <div id="session-header">
            <h1 id="session-title">{{sessionName}}</h1>
            <button md-raised-button color="warn" (click)="leaveSession()">Leave session</button>
          </div>
          <div id="video-container"></div>
        </div>
      </div>
    </div>
  </md-tab>

  <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">

  </div>

  <md-tab id="api-rest" label="API REST">
    <div class="demo-tab-content">
      <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">
        <div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
          <button md-raised-button color="primary" (click)="getSessionId()">Get sessionId</button>
        </div>
        <div fxLayout="column" fxFlex="45" fxFlexAlign="center" fxFill>
          <button md-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">Get token</button>
        </div>
        <div fxLayout="column" fxFlex="10" fxFlexAlign="center" fxFill>
          <button md-raised-button color="warn" (click)="cleanAllSessions()" [disabled]="data.length == 0">Clean sessions</button>
        </div>
      </div>

      <div id="table-row" fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start">
        <div fxLayout="column" fxFlex="65" fxFlexAlign="start" fxFill>
          <table>
            <tr>
              <th class="first-col">sessionIds</th>
              <th>tokens</th>
              <th>Session</th>
            </tr>
            <tr *ngFor="let sid of this.data; let ind = index">
              <td class="first-col">
                <md-card [style.background]="getBackgroundColor(ind)">{{sid[0]}}</md-card>
              </td>
              <td>
                <md-card *ngIf="sid[1].length > 0" [style.background]="getBackgroundColor(ind)">
                  <p *ngFor="let token of sid[1]">{{token}}</p>
                </md-card>
              </td>
              <td style="text-align: center">
                <md-radio-button [checked]="selectedRadioIndex === ind" (click)="selectedRadioIndex = ind" name="sidOption"></md-radio-button>
              </td>
            </tr>
          </table>
        </div>
        <div fxLayout="column" fxFlex="35" fxFlexAlign="start" fxFill>
          <table>
            <tr>
              <th>OpenVidu Role</th>
              <th>Server data</th>
            </tr>
            <tr id="tr-token-options" *ngIf="data.length > 0">
              <td>
                <md-select placeholder="OpenVidu Role" [(ngModel)]="selectedRole">
                  <md-option *ngFor="let role of openViduRoles" [value]="role">
                    {{ role }}
                  </md-option>
                </md-select>
              </td>
              <td>
                <md-form-field id="server-data-field">
                  <input mdInput placeholder="Server Data" [(ngModel)]="serverData">
                </md-form-field>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </md-tab>
</md-tab-group>