unserver-unify/src/components/content/video_meeting.html

<div class="row">
  <div class="col-md-3">
    <div class="panel panel-info">
      <div class="panel-heading">
        Available {{appname}}
        <span class="badge pull-right">{{currentMeetings.length}}</span>
      </div>
      <d class="list-group">
        <li class="list-group-item" ng-repeat="meeting in currentMeetings=(meetings|filter:{available:true})" title="{{meeting.rid}}">
          <span class="badge" style="background-color:#31708f" onclick="$(this).next()[0].click()"><i class="glyphicon glyphicon-facetime-video"></i> Join</span>
          <a href="/app/#/{{appname}}/{{ school_id }}/{{ appfolder || 'class' }}/{{ meeting._id}}" title="{{meeting.rid}}">
            <div class="list-group-item-heading text-nowrap text-info">
              {{meeting.rid}}
            </div>
            <div class="list-group-item-text text-nowrap">
              {{ meeting.start| date: 'medium' }}
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="panel panel-info">
      <div class="panel-heading">
        Upcoming {{appname}}
        <span class="badge pull-right">{{futureMeetings.length}}</span>
      </div>
      <d class="list-group">
        <li class="list-group-item" ng-repeat="meeting in futureMeetings=(meetings|filter:{available:false})">
          <div class="list-group-item-heading text-nowrap">
            {{meeting.rid}}
          </div>
          <div class="list-group-item-text text-nowrap">
            {{ meeting.start| date: 'medium' }}
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-9">
    <div class='panel panel-info' ng-if="teacher || (!teacher && meetings.length == 0)">
      <div class='panel-heading'>
        <span class="fa-stack fa-lg" title='Video Service'>
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-video-camera fa-stack-1x fa-inverse"></i>
        </span>
        <span>{{schoolname}}</span>
      </div>
      <form class="form-horizontal" name="vcForm" novalidate ng-submit="ctrl.addVideoClass(vcForm)" ng-if="teacher" ng-class='{"shake":shaking}'>
        <div class='panel-body'>
          <div class="form-group" ng-class='{"has-error":vcForm.name.$invalid && submitted}'>
            <label class="control-label col-md-3" for="name">Room Name</label>
            <div class="col-md-9">
              <input type="text" name="name" class="form-control" placeholder="Room Name" ng-model="ctrl.newclass.rid" focus-me="true" required>
            </div>
          </div>
          <div class="form-group alert alert-danger" ng-show="vcForm.name.$invalid && submitted">
            <p class="help-block col-md-offset-3 col-md-9">The room name is required.</p>
          </div>
          <div class="form-group" ng-class='{"has-error":vcForm.start.$invalid}'>
            <label class="control-label col-md-3" for="start">Start Date</label>
            <div class="col-md-9">
              <div class="input-group">
                <input type="text" class="form-control" id="start" name="start" required
                   placeholder="Date" ng-model="ctrl.newclass.start" datepicker-popup="yyyy-MM-dd"
                  is-open="ctrl.datePicker" close-text="Close">
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.showDatePicker($event)">
                    <i class="glyphicon glyphicon-calendar"></i>
                  </button>
                </span>
              </div>
             </div>
          </div>
          <div class="form-group alert alert-danger" ng-show="vcForm.start.$invalid && submitted">
            <p class="help-block col-md-offset-3 col-md-9">The start date is required.</p>
          </div>
          <div class="form-group">
            <label class="control-label col-md-3">Start Time</label>
            <div class="col-md-9">
              <timepicker ng-model="ctrl.newclass.start"></timepicker>
              </div>
          </div>
          <div class="form-group" ng-if="ctrl.showDuration" ng-class='{"has-error":vcForm.duration.$invalid}'>
            <label class="control-label col-md-3">Duration</label>
            <div class="col-md-9">
              <div class="input-group">
                <input type="number" min="1" name="duration" class="form-control" placeholder="Duration" ng-model="ctrl.newclass.len" required>
                <span class="input-group-addon">Hour(s)</span>
              </div>
            </div>
          </div>
          <div ng-if="ctrl.showDuration" class="form-group alert alert-danger" ng-show="vcForm.duration.$invalid && submitted">
            <p class="help-block col-md-offset-3 col-md-9">The duration is required and must be greater or equal than 1.</p>
          </div>
      </div>
      <div class="panel-footer text-right" ng-if="teacher">
        <button type="submit" class="btn btn-default" ng-disabled="submitted && vcForm.$invalid">Create</button>
      </div>
      </form>
      <div class='panel-body' ng-if="!teacher && meetings.length == 0">
        <h4>No video class available!</h4>
      </div>
    </div>
  </div>
</div>