virl-scheduler/partials/index.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="well">
                <fieldset>
                    <legend>Schedule a new topology</legend>
                    <div class="form-group">
                        <label for="inputSession" class="col-md-2 control-label">Session Name</label>

                        <div class="col-md-10">
                            <input type="text"  ng-model="topology.sessionName" class="form-control" id="inputSession" placeholder="Session Name" required>
                        </div>
                    </div>  
                    <div class="form-group">
                        <label for="inputXML" class="col-md-2 control-label">Topology-XML</label>

                        <div class="col-md-10">
                             <textarea rows="10" id="inputXML" style="width:100%;" ng-model="topology.filecontent" style="max-height:200px;overflow:scroll;"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="startDate" class="col-md-2 control-label">Topology startup date</label>

                        <div class="col-md-10">
                            <input type="text" class="form-control" uib-datepicker-popup="dd.MM.yyyy" ng-model="topology.datetime" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" readonly/>
                              <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="openDatePicker()"><i class="glyphicon glyphicon-calendar"></i></button>
                              </span>
                        </div>
                    </div>                    
                    <div class="form-group">
                        <label for="startDate" class="col-md-2 control-label">Topology startup time</label>

                        <div class="col-md-10">
                
                            <div uib-timepicker ng-model="topology.datetime" minute-step="15" ng-change=""  show-meridian="false"></div>
                     
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="repeat" class="col-md-2 control-label">Repeat interval</label>

                        <div class="col-md-10">
                            <div class="btn-group btn-group-justified btn-group-raised">
                                <label class="btn btn-raised" ng-model="topology.repeat" uib-btn-radio="'none'">Once</label>
                                <label class="btn btn-raised" ng-model="topology.repeat" uib-btn-radio="'daily'">Daily</label>
                                <label class="btn btn-raised" ng-model="topology.repeat" uib-btn-radio="'weekly'">Weekly</label>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary btn-raised btn-block" ng-click="send()">Schedule</button>
                    
                </fieldset>
                
            </div>
        
        </div>
    
        
        <div class="col-md-4">
            <div class="well">
                <legend>scheduled simulations</legend>
            <div class="list-group ">
                <div class="list-group-item" ng-repeat-start="sim in plannedSims">
                  <div class="row-action-primary">
                    <i class="material-icons" ng-if="sim.status=='done'">done</i>
                    <i class="material-icons" ng-if="sim.status=='repeating'">cached</i>
                    <i class="material-icons" ng-if="sim.status=='scheduled'">access_time</i>
                  </div>
                  <div class="row-content">
                    <div class="least-content">{{sim.timestamp*1000 |  date:'EEEE, dd.MM.yyyy HH:mm'}}</div>
                    <h4 class="list-group-item-heading">{{sim.sessionname}}</h4>

                    <p class="list-group-item-text">Status: {{sim.status}}</p>
                      <p class="list-group-item-text">User: {{sim.username}}</p>
                      <p class="list-group-item-text" ng-if="sim.status == 'repeating'">Next startup: {{sim.timestamp*1000 + sim.repeat_interval*1000 * sim.repeat_count | date:'EEEE, dd.MM.yyyy HH:mm'}}</p>
                      <button class="btn btn-danger" ng-click="removePlannedSim(sim.id)">Delete</button>
                  </div>
                </div>
            <div class="list-group-separator" ng-repeat-end></div>
                </div>
          </div>        
        </div>
        
        
        <div class="col-md-4">
            <div class="well">
            <legend>running simulations for user: {{credentials.username}}</legend>
            <div class="list-group">
                <div class="list-group-item" ng-repeat-start="(key,value) in runningSims">
                  <div class="row-action-primary">
                    <i class="material-icons">folder</i>
                  </div>
                  <div class="row-content">
                    <div class="least-content"></div>
                    <h4 class="list-group-item-heading">{{key}}</h4>

                    <p class="list-group-item-text">Status: {{value.status}}</p>
                      <p class="list-group-item-text">Launched: {{value.launched}}</p>
                      <button class="btn btn-danger" ng-click="stopSim(key)">Stop</button>
                  </div>
                </div>
            <div class="list-group-separator" ng-repeat-end></div>
                </div>
          </div>                
        </div>
    </div>

</div>