source: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Resource/Index.cshtml @ 13795

<div ng-app="wjm" ng-controller="resourceCtrl" data-ng-init="init()">
    <div id="userId" style="display:none">@ViewBag.SessionId</div>

    @Html.Partial("Navbar", new HeuristicLab.Clients.Hive.WebJobManager.ViewModels.NavbarViewModel("Resource"))



    <div class="col-sm-4">
        <div class="btn-group btn-group-justified" style="padding:3px;margin-bottom:-10px"
             role="group">
            <a class="btn btn-info btn-lg btn-block disabled"
               style="width:6%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                <i class="fa fa-sitemap"></i> Resource groups
            </a>
            <div class="btn btn-block btn-success"
                 style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                 ng-click="clearTreeSelect()"><i class="fa fa-plus-circle"></i></div>
        </div>

        <div style=""
             data-angular-treeview="true"
             data-tree-id="treeview"
             data-tree-model="tree"
             data-node-id="Id"
             data-node-label="Name"
             data-node-children="children"
             ng-class="">
        </div>
    </div>
    <div ng-if="treeview.currentNode && treeview.currentNode.Id !== undefined" class="col-sm-8 panel  panel-primary" style="margin-bottom:200px">
        <div class="row panel-heading"
             style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
            <h3>
                {{treeview.currentNode.Name}}
                <span ng-if="treeview.currentNode.IsDisposable === undefined"> - Resource group</span>
                <a ng-if="treeview.currentNode.IsDisposable !== undefined"
                   class="btn pull-right"
                   style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;font-weight:bold;margin-bottom:5px"
                   ng-class="{ 'btn-success': treeview.currentNode.IsDisposable, 'btn-warning': !treeview.currentNode.IsDisposable }"
                   ng-click="toggleDisposable()">
                    <span ng-if="calendarDispose"><i class="fa fa-save fa-spin"></i> </span> {{ treeview.currentNode.IsDisposable | disp}}
                </a>
            </h3>
            <ul class="nav nav-pills nav-justified">
                <li role="presentation" ng-class="{ 'active': !permission }" ng-style="{ 'text-decoration': !permission ? 'underline' : ''}">
                    <a style="text-shadow:2px 2px black; color:white; font-weight:bold; border: 1px solid white;"
                       href=""
                       ng-click="permission = false">
                        Resource info
                    </a>
                </li>
                <li role="presentation" ng-class="{ 'active': permission }" ng-style="{ 'text-decoration': permission ? 'underline' : ''}">
                    <a style="text-shadow:2px 2px black; color:white; font-weight:bold; border: 1px solid white;"
                       href=""
                       ng-click="permission = true">
                        Permissions
                    </a>
                </li>
            </ul>
            
            <form ng-show="permission"
                  method="post"
                  asp-action="editPermissions"
                  asp-controller="Resource"
                  enctype="multipart/form-data"
                  class="row panel-heading"
                  > 
                <div
                     class="row" style="padding:10px;">
                    <h4>Groups</h4>
                    <label class="col-sm-3" ng-repeat="group in permGroups">
                        <input type="checkbox" 
                               name="permgroups" 
                               value="{{group.Id}}"
                               ng-model="group.state"> {{group.Name}}
                    </label>
                </div>
                <div class="row" style="padding:10px;">
                    <h4>Users</h4>
                    <label class="col-sm-3 col-lg-2" ng-repeat="user in permUsers">
                        <input type="checkbox" 
                               name="permusers" 
                               value="{{user.Id}}"
                               ng-model="user.state"> {{user.UserName}}
                    </label>
                </div>
                <div class="btn btn-info pull-right" 
                     style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                     ng-click="pushPermissions()">
                <i ng-if="permissionLoader" class="fa fa-spin fa-save"></i> 
                Save permission changes</div>
            </form>
            <form ng-show="!permission"
                  method="post"
                  asp-action="deleteClientGroup"
                  ng-init="checkDel = false"
                  asp-controller="Resource"
                  enctype="multipart/form-data"
                  class="row panel-heading"
                  style="padding:10px;">
                <table class="table" style="margin-bottom:0px">
                    <tbody>
                        <tr>
                            <td>Heartbeat</td>
                            <td>
                                Every {{treeview.currentNode.HbInterval}} sec
                                <span ng-if="treeview.currentNode.IsDisposable !== undefined">
                                    - Last beat {{treeview.currentNode.LastHeartbeat | date:'HH:mm dd/MM/yyyy' }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>{{treeview.currentNode.Name}}</td>
                        </tr>
                        <tr>
                            <td>Id</td>
                            <td>{{treeview.currentNode.Id}}</td>
                        </tr>
                        <tr ng-if="treeview.currentNode.IsDisposable === undefined">

                            <td>

                                <input style="display:none" type="text" id="inpid" name="inpid" value="{{treeview.currentNode.Id}}" />
                                <input type="checkbox" ng-model="checkDel" /> I want to delete this group
                            </td>
                            <td>
                                <button type="submit"
                                        id="inpsaver"
                                        ng-disabled="!checkDel"
                                        class="btn btn-danger"
                                        style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                                    <i class="fa fa-trash-o"></i>
                                    Delete group (irriversible action!)
                                </button>

                            </td>

                        </tr>
                    </tbody>
                    <tbody ng-if="treeview.currentNode.IsDisposable !== undefined">
                        <tr>
                            <td>Cores (free/total)</td>
                            <td>{{treeview.currentNode.FreeCores}} / {{treeview.currentNode.Cores}} @@ {{treeview.currentNode.CpuSpeed/1000 | number:1}} GHz</td>


                        </tr>
                        <tr>
                            <td>Memory (free/total)</td>
                            <td>{{treeview.currentNode.FreeMemory/1024 | number:1}} GB / {{treeview.currentNode.Memory/1024 | number:1}} GB</td>
                        </tr>

                    </tbody>
                </table>
            </form>
            <form method="post"
                  asp-action="changeParent"
                  asp-controller="Resource"
                  enctype="multipart/form-data"
                  class="row"
                  style="padding:10px;">
                <input style="display:none" type="text" id="inpid" name="inpid" value="{{treeview.currentNode.Id}}" />

                <span style="padding:0px" class="col-sm-4">Change parent resource: </span>

                <select class="form-control col-sm-5"
                        style="width:200px"
                        id="inpidpar"
                        name="inpidpar"
                        ng-model="treeview.currentNode.ParentResourceId">
                    <option value="">None</option>
                    <option ng-repeat="group in groups | orderBy:'Name'"
                            value="{{group.Id}}"
                            ng-if="group.Id !=treeview.currentNode.Id && group.ParentResourceId != treeview.currentNode.Id">
                        {{group.Name}}
                    </option>

                </select>
                <button type="submit"
                        id="inpsaver"
                        class="btn btn-warning col-sm-3 pull-right"
                        style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                    <i class="fa fa-save"></i>
                    Change parent
                </button>
            </form>
        </div>
        <div class="panel-body row" style="text-align:center">

            <i ng-if="currentcal.length  === 0" class="fa fa-cog fa-5x fa-spin"></i>
            <div ng-if="currentcal.length != 0"
                 ui-calendar="uiConfig.calendar"
                 id="resourcecalendar"
                 style="font-size:medium"
                 class="span8 calendar"
                 ng-model="currentcal.down"></div>
            <table ng-if="selectedEventId != -1"
                   animate-on-change="selectedEventId"
                   class="table">
                <tr>
                    <th> Selected event</th>
                    <th>
                        <div class="btn btn-default"
                             ng-click="goToDate()"
                             ng-style="{'background-color':currentcal.down[0][selectedEventId].color }"
                             style="color:white;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;font-weight:bold;">
                            <i class="fa fa-calendar"></i> Go to date
                        </div>
                    </th>
                </tr>
                <tr>
                    <td>Time</td>
                    <td ng-if="!currentcal.down[0][selectedEventId].allDay">
                        {{currentcal.down[0][selectedEventId].start | date : 'HH:mm dd/MM/yy' : 'utc'}}
                        <span ng-if="currentcal.down[0][selectedEventId].end">
                            to {{currentcal.down[0][selectedEventId].end | date : 'HH:mm dd/MM/yy': 'utc'}}
                        </span>
                    </td>
                    <td ng-if="currentcal.down[0][selectedEventId].allDay">
                        All day {{currentcal.down[0][selectedEventId].start | date : 'dd/MM/yy' : 'utc'}}
                        <span ng-if="currentcal.down[0][selectedEventId].end">
                            to {{currentcal.down[0][selectedEventId].end | date : 'dd/MM/yy': 'utc'}}
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>Status</td>
                    <td>
                        <select class="content-select" ng-model="currentcal.down[0][selectedEventId].title" ng-change="setChanged(selectedEventId)">
                            <option value="Unavailable">Unavailable</option>
                            <option value="Shutdown">Shutdown command</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Recurrence</td>
                    <td>
                        <input type="checkbox" class="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.recurrence" ng-change="setChanged(selectedEventId)" />
                        <p ng-if="currentcal.down[0][selectedEventId].changed && currentcal.down[0][selectedEventId].rec.recurrence" style="color:darkred;font-weight:bold">
                            The recurrence itself will be made during saving, settings can be changed here.
                        </p>
                    </td>
                </tr>
                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
                    <td>
                        Start
                    </td>
                    <td>
                        <input type="date"
                               ng-model="currentcal.down[0][selectedEventId].rec.start"
                               ng-change="checkDateStartEnd()" />
                    </td>
                </tr>
                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
                    <td>
                        End
                    </td>
                    <td>
                        <input type="date"
                               ng-model="currentcal.down[0][selectedEventId].rec.end"
                               ng-change="checkDateStartEnd()"
                               min="{{currentcal.down[0][selectedEventId].rec.start | date:'yyyy-MM-dd'}}" />
                    </td>
                </tr>

                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
                    <td colspan="2">
                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[1]">Monday</label>
                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[2]">Tuesday</label>
                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[3]">Wednesday</label>
                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[4]">Thursday</label>
                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[5]">Friday</label>
                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[6]">Saturday</label>
                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[0]">Sunday</label>
                    </td>

                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button class="btn btn-info"
                                ng-click="pushRecurChanges(currentcal.down[0][selectedEventId].rec.recid)"
                                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                                ng-if="currentcal.down[0][selectedEventId].rec.recid != '0' &&
                                currentcal.down[0][selectedEventId].rec.recid != '00000000-0000-0000-0000-000000000000' &&
                                currentcal.down[0][selectedEventId].changed">
                            Push all changes to other recurrencies
                        </button>
                        <button class="btn btn-danger"
                                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                                ng-click="remove(selectedEventId)">
                            <i class="fa fa-trash-o"></i>
                            Delete
                        </button>
                        <button class="btn btn-danger"
                                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                                ng-click="deleteAllRecurrences(currentcal.down[0][selectedEventId].rec.recid)"
                                ng-if="currentcal.down[0][selectedEventId].rec.recid != '0'
                                        && currentcal.down[0][selectedEventId].rec.recid != '00000000-0000-0000-0000-000000000000'">
                            Delete all recurrencies
                        </button>
                    </td>
                </tr>
            </table>
            <table ng-if="selectedEventId === -1" class="table">
                <tr>
                    <th colspan="2"> Select an event to show information</th>

                </tr>
                <tr>
                    <td>Time / Select an event</td>
                </tr>
                <tr>
                    <td>Status / Select an event</td>
                </tr>
            </table>
            <div ng-if="calendarSaver">
                <i class="fa fa-save fa-4x fa-spin"></i>
            </div>
            <div ng-if="calendarDeleter">
                <i class="fa fa-trash-o fa-4x fa-spin"></i>
            </div>
            <div class="row">
                <h3>Current calendar - actions</h3>
                <div class="btn-group btn-group-justified"
                     role="group"
                     style="padding-bottom:20px;">

                    <div ng-if="treeview.currentNode.changes"
                         class="btn btn-success"
                         ng-click="saveCurrentCalendar()"
                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                        Save current changes
                    </div>
                    <div ng-if="treeview.currentNode.changes"
                         class="btn btn-warning"
                         ng-click="clearCurrentCalendar()"
                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                        Clear current changes
                    </div>
                    <div class="btn btn-danger"
                         ng-click="deleteAllPreviousEvents()"
                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                        Delete past events
                    </div>
                    <div class="btn btn-danger"
                         ng-click="deleteAllEvents()"
                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                        Delete all events
                    </div>
                </div>
            </div>
            <div class="row">
                <h3>All loaded calendars - actions</h3>
                <div class="btn-group btn-group-justified"
                     role="group"
                     style="padding-bottom:20px;">

                    <div class="btn btn-success"
                         ng-click="saveAllCalendars()"
                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                        Save all changes
                    </div>

                    <div class="btn btn-warning"
                         ng-click="clearAllCalendars()"
                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                        Clear all changes
                    </div>
                </div>
            </div>

        </div>

        <div class="row panel-footer">
            <h2>All events </h2><h5>(sorted by changed and start date)</h5>
            <div class="row" ng-repeat="ev in currentcal.down[0] | orderBy:['!changed','start'] track by $index"
                 style="margin-bottom:4px">
                <div class="btn-group-justified btn-block">

                    <div class="btn btn-default" ng-style="{'background-color': ev.color}"
                         ng-click="eventClickBtn(ev._id)"
                         style="width:6%;color:white;
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);text-shadow:2px 2px black;">
                        {{ev.title }}
                        <span ng-if="!ev.allDay">
                            from {{ev.start | date : 'HH:mm dd/MM/yy' : 'utc'}}
                            <span ng-if="ev.end">
                                to {{ev.end | date : 'HH:mm dd/MM/yy': 'utc'}}
                            </span>
                        </span>
                        <span ng-if="ev.allDay">
                            all day from {{ev.start | date : 'dd/MM/yy' : 'utc'}}
                            <span ng-if="ev.end">
                                to {{ev.end | date : 'dd/MM/yy': 'utc'}}
                            </span>
                        </span>
                        <span ng-if="ev.rec.recurrence">
                            | recurring event
                        </span>
                    </div>
                    <a id="del"
                       style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
                       class='btn btn-group btn-danger'
                       ng-click="removeList(ev._id)">
                        <span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
                    </a>
                </div>

            </div>

        </div>
    </div>
    <div ng-show="treeview.currentNode === undefined"
         style="margin-bottom:200px">
        <form method="post"
              ng-init="newName = ''"
              asp-action="newClientGroup"
              asp-controller="Resource"
              enctype="multipart/form-data"
              class="col-sm-8 panel panel-primary">
            <div class="row panel-heading"
                 style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                <h3>
                    Add new resource group
                </h3>
                <table class="table">
                    <tbody>
                        <tr>
                            <td>Heartbeat</td>
                            <td>
                                <i class="fa fa-clock-o fa-2x pull-left"></i> <input type="number" class="form-control" style="width:70px" name="inpheart" id="inpheart" value="60" placeholder="60" />


                            </td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td><input type="text" class="form-control" id="inpname" name="inpname" ng-model="newName" placeholder="Group name" /></td>
                        </tr>
                        <tr>
                            <td>Assign parent group</td>
                            <td>
                                <select class="form-control" id="inpparent" name="inpparent">
                                    <option value="">None</option>
                                    <option ng-repeat="group in groups | orderBy:'Name'" value="{{group.Id}}">{{group.Name}}</option>

                                </select>
                            </td>
                        </tr>
                    </tbody>

                </table>
                <button type="submit"
                        id="inpsaver"
                        ng-disabled="newName === ''"
                        class="btn btn-success"
                        style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;font-weight:bold;">
                    <i class="fa fa-save"></i>
                    Add {{newName}} group
                </button>
            </div>
            <div class="panel-body row">
                <h3>Choose resources </h3>
                <h5>(This will overwrite the group set for these resources)</h5>
                <table>
                    <tr ng-repeat="client in clients  | orderBy:['Name'] track by $index" class="checkbox col-md-6 col-lg-4">
                        <td>
                            <label>
                                <input type="checkbox"
                                       name="clientstoadd"
                                       value="{{client.Id}}">
                                <i class="fa fa-desktop" aria-hidden="true"></i> {{client.Name | limitTo : 7}} - {{client.Cores}}x {{client.CpuSpeed/1000 |  number:1}} GHz - {{client.Memory / 1024 | number:1}} GB
                            </label>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>

    <div ng-if="treeview.currentNode !== undefined && treeview.currentNode.Id === undefined"
         class="col-sm-8 panel  panel-primary"
         style="margin-bottom:200px">
        <div class="row panel-heading"
             style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
            <h2>
                Ungrouped
            </h2>
            <h4>
                All unassigned resources arrive here. Assign them to a group to remove them from this group.
            </h4>

        </div>
    </div>
    <script src="~/js/hubs/calendarhubber.js"></script>
</div>