Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Resource/Index.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Resource/Index.cshtml	(revision 13775)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Resource/Index.cshtml	(revision 13782)
@@ -5,7 +5,8 @@
     @Html.Partial("Navbar", new HeuristicLab.Clients.Hive.WebJobManager.ViewModels.NavbarViewModel("Resource"))
 
-    
+
 
     <div class="col-sm-4">
+        <div class="btn btn-block btn-success" ng-click="clearTreeSelect()">Add group</div>
         <div data-angular-treeview="true"
              data-tree-id="treeview"
@@ -17,56 +18,115 @@
         </div>
     </div>
-    <div ng-if="treeview.currentNode" class="col-sm-8 panel  panel-primary" style="margin-bottom:200px">
-        <div class="row panel-heading">
-            <h3>{{treeview.currentNode.Name}} <span ng-if="treeview.currentNode.IsDisposable === undefined"> - Client group</span></h3>
-            <table class="table">
-                <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>
-                        <td>Disposable</td>
-                        <td><input type="checkbox" ng-checked="treeview.currentNode.IsDisposable" /></td>
-                    </tr>
-                </tbody>
-                <tbody ng-if="treeview.currentNode.IsDisposable !== undefined">
-                    <tr>
-                        <td>Cores (free/total)</td>
-                        <td>{{treeview.currentNode.FreeCores}} | {{treeview.currentNode.Cores}}</td>
-
-
-                    </tr>
-                    <tr>
-                        <td>Memory (free/total)</td>
-                        <td>{{treeview.currentNode.FreeMemory}} MB | {{treeview.currentNode.Memory}} MB</td>
-                    </tr>
-
-                </tbody>
-            </table>
+    <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"> - Client 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>
+            <form 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">
+                                    <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">
+                    <i class="fa fa-save"></i>
+                    Change parent
+                </button>
+            </form>
         </div>
         <div class="panel-body row" style="text-align:center">
-            <div class="row" style="padding-bottom:30px;">
-                <button class="btn btn-success" ng-click="saveCurrentCalendar()">Save current changes</button>
-                <button class="btn btn-success" ng-click="saveAllCalendars()">Save all changes</button>
-                <button class="btn btn-warning" ng-click="clearCurrentCalendar()">Clear current changes</button>
-                <button class="btn btn-warning" ng-click="clearAllCalendars()">Clear all changes</button>
-            </div>
-            <div class="row" style="padding-bottom:30px;">
-                <button class="btn btn-info" ng-click="deleteAllPreviousEvents()">Delete all previous events to date</button>
-            </div>
+
             <i ng-if="currentcal.length  === 0" class="fa fa-cog fa-5x fa-spin"></i>
             <div ng-if="currentcal.length != 0"
@@ -76,8 +136,18 @@
                  class="span8 calendar"
                  ng-model="currentcal.down"></div>
-            <table ng-if="selectedEventId != -1" class="table">
-                <tr>
-                    <th colspan="2"> Selected event</th>
-
+            <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>
@@ -119,21 +189,21 @@
                     </td>
                     <td>
-                        <input type="date" 
-                               ng-model="currentcal.down[0][selectedEventId].rec.start" 
+                        <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" >
+                <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>
-                
+                        <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">
@@ -146,5 +216,5 @@
                         <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[0]">Sunday</label>
                     </td>
-                    
+
                 </tr>
                 <tr>
@@ -153,5 +223,7 @@
                         <button class="btn btn-info"
                                 ng-click="pushRecurChanges(currentcal.down[0][selectedEventId].rec.recid)"
-                                ng-if="currentcal.down[0][selectedEventId].rec.recid != '0' && 
+                                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">
@@ -159,4 +231,6 @@
                         </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>
@@ -164,4 +238,6 @@
                         </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'
@@ -173,18 +249,198 @@
             </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>
+                <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">
+                <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 client 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">
+                    <i class="fa fa-save"></i>
+                    Add {{newName}} group
+                </button>
+            </div>
+            <div class="panel-body row">
+                <h3>Choose clients </h3>
+                <h5>(This will overwrite the group set for these clients)</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>
+            <h3>
+                All unassigned clients arrive here. Assign them to a group to remove them from this group.
+            </h3>
 
         </div>
