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

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

<md-tab-group class="demo-tab-group" dynamicHeight="true" selectedIndex="5">
  <md-tab id="audio-video" label="Audio + Video">
    <div class="demo-tab-content">

    </div>
  </md-tab>
  <md-tab id="audio-only" label="Audio only">
    <div class="demo-tab-content">

    </div>
  </md-tab>
  <md-tab id="video-only" label="Video only">

  </md-tab>
  <md-tab id="screen-audio" label="Screen + Audio">
    <div class="demo-tab-content">

    </div>
  </md-tab>
  <md-tab id="screen-only" label="Screen only">
    <div class="demo-tab-content">
    </div>
  </md-tab>
  <md-tab id="api-rest" label="API REST">
    <div class="demo-tab-content">
      <md-form-field>
        <input mdInput placeholder="OpenVidu Server Secret" [(ngModel)]="openviduSecret">
      </md-form-field>
      <button md-raised-button color="primary" (click)="cleanAllSessions()" style="float: right">Clean sessions</button>

      <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="start space-around">
        <div fxLayout="column" fxFlex="50" fxFlexAlign="center" fxFill>
          <button md-raised-button color="primary" (click)="getSessionId()">Get sessionId</button>
        </div>
        <div fxLayout="column" fxFlex="50" fxFlexAlign="center" fxFill>
          <button md-raised-button color="primary" (click)="getToken()" [disabled]="getTokenDisabled()">Get token</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>

<!--<div id="join">
  <div id="img-div"><img src="assets/images/openvidu_grey_bg_transp_cropped.png" /></div>
  <div id="join-dialog" class="jumbotron vertical-center">
    <h1>Join a video session</h1>
    <form class="form-group" (submit)="joinSession()">
      <p>
        <label>Participant</label>
        <input class="form-control" type="text" id="clientData" name="clientData" [(ngModel)]="clientData" required>
      </p>
      <p>
        <label>Session</label>
        <input class="form-control" type="text" id="sessionName" name="sessionName" [(ngModel)]="sessionName" required>
      </p>
      <p class="text-center">
        <input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
      </p>
    </form>
  </div>
</div>-->