Free cookie consent management tool by TermsFeed Policy Generator

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

Last change on this file since 13782 was 13782, checked in by jlodewyc, 8 years ago

#2582 Resource calendar and client group creation, control implemented

File size: 22.5 KB
Line 
1
2<div ng-app="wjm" ng-controller="resourceCtrl" data-ng-init="init()">
3    <div id="userId" style="display:none">@ViewBag.SessionId</div>
4
5    @Html.Partial("Navbar", new HeuristicLab.Clients.Hive.WebJobManager.ViewModels.NavbarViewModel("Resource"))
6
7
8
9    <div class="col-sm-4">
10        <div class="btn btn-block btn-success" ng-click="clearTreeSelect()">Add group</div>
11        <div data-angular-treeview="true"
12             data-tree-id="treeview"
13             data-tree-model="tree"
14             data-node-id="Id"
15             data-node-label="Name"
16             data-node-children="children"
17             ng-class="">
18        </div>
19    </div>
20    <div ng-if="treeview.currentNode && treeview.currentNode.Id !== undefined" class="col-sm-8 panel  panel-primary" style="margin-bottom:200px">
21        <div class="row panel-heading"
22             style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
23                            text-shadow:2px 2px black;">
24            <h3>
25                {{treeview.currentNode.Name}}
26                <span ng-if="treeview.currentNode.IsDisposable === undefined"> - Client group</span>
27                <a ng-if="treeview.currentNode.IsDisposable !== undefined"
28                   class="btn pull-right"
29                   style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
30                            text-shadow:2px 2px black;font-weight:bold;margin-bottom:5px"
31                   ng-class="{ 'btn-success': treeview.currentNode.IsDisposable, 'btn-warning': !treeview.currentNode.IsDisposable }"
32                   ng-click="toggleDisposable()">
33                    <span ng-if="calendarDispose"><i class="fa fa-save fa-spin"></i> </span> {{ treeview.currentNode.IsDisposable | disp}}
34                </a>
35            </h3>
36            <form method="post"
37                  asp-action="deleteClientGroup"
38                  ng-init="checkDel = false"
39                  asp-controller="Resource"
40                  enctype="multipart/form-data"
41                  class="row panel-heading"
42                  style="padding:10px">
43                <table class="table" style="margin-bottom:0px">
44                    <tbody>
45                        <tr>
46                            <td>Heartbeat</td>
47                            <td>
48                                Every {{treeview.currentNode.HbInterval}} sec
49                                <span ng-if="treeview.currentNode.IsDisposable !== undefined">
50                                    - Last beat {{treeview.currentNode.LastHeartbeat | date:'HH:mm dd/MM/yyyy' }}
51                                </span>
52                            </td>
53                        </tr>
54                        <tr>
55                            <td>Name</td>
56                            <td>{{treeview.currentNode.Name}}</td>
57                        </tr>
58                        <tr>
59                            <td>Id</td>
60                            <td>{{treeview.currentNode.Id}}</td>
61                        </tr>
62                        <tr ng-if="treeview.currentNode.IsDisposable === undefined">
63
64                            <td>
65
66                                <input style="display:none" type="text" id="inpid" name="inpid" value="{{treeview.currentNode.Id}}" />
67                                <input type="checkbox" ng-model="checkDel" /> I want to delete this group
68                            </td>
69                            <td>
70                                <button type="submit"
71                                        id="inpsaver"
72                                        ng-disabled="!checkDel"
73                                        class="btn btn-danger">
74                                    <i class="fa fa-trash-o"></i>
75                                    Delete group (irriversible action!)
76                                </button>
77
78                            </td>
79
80                        </tr>
81                    </tbody>
82                    <tbody ng-if="treeview.currentNode.IsDisposable !== undefined">
83                        <tr>
84                            <td>Cores (free/total)</td>
85                            <td>{{treeview.currentNode.FreeCores}} / {{treeview.currentNode.Cores}} @@ {{treeview.currentNode.CpuSpeed/1000 | number:1}} GHz</td>
86
87
88                        </tr>
89                        <tr>
90                            <td>Memory (free/total)</td>
91                            <td>{{treeview.currentNode.FreeMemory/1024 | number:1}} GB / {{treeview.currentNode.Memory/1024 | number:1}} GB</td>
92                        </tr>
93
94                    </tbody>
95                </table>
96            </form>
97            <form method="post"
98                  asp-action="changeParent"
99                  asp-controller="Resource"
100                  enctype="multipart/form-data"
101                  class="row"
102                  style="padding:10px"
103                  >
104                <input style="display:none" type="text" id="inpid" name="inpid" value="{{treeview.currentNode.Id}}" />
105
106                <span style="padding:0px" class="col-sm-4">Change parent resource: </span>
107               
108                <select class="form-control col-sm-5"
109                        style="width:200px"
110                        id="inpidpar"
111                        name="inpidpar"
112                        ng-model="treeview.currentNode.ParentResourceId">
113                    <option value="">None</option>
114                    <option ng-repeat="group in groups | orderBy:'Name'"
115                            value="{{group.Id}}"
116                            ng-if="group.Id !=treeview.currentNode.Id && group.ParentResourceId != treeview.currentNode.Id">
117                        {{group.Name}}
118                    </option>
119
120                </select>
121                <button type="submit"
122                        id="inpsaver"
123                        class="btn btn-warning col-sm-3 pull-right">
124                    <i class="fa fa-save"></i>
125                    Change parent
126                </button>
127            </form>
128        </div>
129        <div class="panel-body row" style="text-align:center">
130
131            <i ng-if="currentcal.length  === 0" class="fa fa-cog fa-5x fa-spin"></i>
132            <div ng-if="currentcal.length != 0"
133                 ui-calendar="uiConfig.calendar"
134                 id="resourcecalendar"
135                 style="font-size:medium"
136                 class="span8 calendar"
137                 ng-model="currentcal.down"></div>
138            <table ng-if="selectedEventId != -1"
139                   animate-on-change="selectedEventId"
140                   class="table">
141                <tr>
142                    <th> Selected event</th>
143                    <th>
144                        <div class="btn btn-default"
145                             ng-click="goToDate()"
146                             ng-style="{'background-color':currentcal.down[0][selectedEventId].color }"
147                             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);
148                            text-shadow:2px 2px black;font-weight:bold;">
149                            <i class="fa fa-calendar"></i> Go to date
150                        </div>
151                    </th>
152                </tr>
153                <tr>
154                    <td>Time</td>
155                    <td ng-if="!currentcal.down[0][selectedEventId].allDay">
156                        {{currentcal.down[0][selectedEventId].start | date : 'HH:mm dd/MM/yy' : 'utc'}}
157                        <span ng-if="currentcal.down[0][selectedEventId].end">
158                            to {{currentcal.down[0][selectedEventId].end | date : 'HH:mm dd/MM/yy': 'utc'}}
159                        </span>
160                    </td>
161                    <td ng-if="currentcal.down[0][selectedEventId].allDay">
162                        All day {{currentcal.down[0][selectedEventId].start | date : 'dd/MM/yy' : 'utc'}}
163                        <span ng-if="currentcal.down[0][selectedEventId].end">
164                            to {{currentcal.down[0][selectedEventId].end | date : 'dd/MM/yy': 'utc'}}
165                        </span>
166                    </td>
167                </tr>
168                <tr>
169                    <td>Status</td>
170                    <td>
171                        <select class="content-select" ng-model="currentcal.down[0][selectedEventId].title" ng-change="setChanged(selectedEventId)">
172                            <option value="Unavailable">Unavailable</option>
173                            <option value="Shutdown">Shutdown command</option>
174                        </select>
175                    </td>
176                </tr>
177                <tr>
178                    <td>Recurrence</td>
179                    <td>
180                        <input type="checkbox" class="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.recurrence" ng-change="setChanged(selectedEventId)" />
181                        <p ng-if="currentcal.down[0][selectedEventId].changed && currentcal.down[0][selectedEventId].rec.recurrence" style="color:darkred;font-weight:bold">
182                            The recurrence itself will be made during saving, settings can be changed here.
183                        </p>
184                    </td>
185                </tr>
186                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
187                    <td>
188                        Start
189                    </td>
190                    <td>
191                        <input type="date"
192                               ng-model="currentcal.down[0][selectedEventId].rec.start"
193                               ng-change="checkDateStartEnd()" />
194                    </td>
195                </tr>
196                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
197                    <td>
198                        End
199                    </td>
200                    <td>
201                        <input type="date"
202                               ng-model="currentcal.down[0][selectedEventId].rec.end"
203                               ng-change="checkDateStartEnd()"
204                               min="{{currentcal.down[0][selectedEventId].rec.start | date:'yyyy-MM-dd'}}" />
205                    </td>
206                </tr>
207
208                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
209                    <td colspan="2">
210                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[1]">Monday</label>
211                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[2]">Tuesday</label>
212                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[3]">Wednesday</label>
213                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[4]">Thursday</label>
214                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[5]">Friday</label>
215                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[6]">Saturday</label>
216                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[0]">Sunday</label>
217                    </td>
218
219                </tr>
220                <tr>
221                    <td></td>
222                    <td>
223                        <button class="btn btn-info"
224                                ng-click="pushRecurChanges(currentcal.down[0][selectedEventId].rec.recid)"
225                                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
226                            text-shadow:2px 2px black;"
227                                ng-if="currentcal.down[0][selectedEventId].rec.recid != '0' &&
228                                currentcal.down[0][selectedEventId].rec.recid != '00000000-0000-0000-0000-000000000000' &&
229                                currentcal.down[0][selectedEventId].changed">
230                            Push all changes to other recurrencies
231                        </button>
232                        <button class="btn btn-danger"
233                                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
234                            text-shadow:2px 2px black;"
235                                ng-click="remove(selectedEventId)">
236                            <i class="fa fa-trash-o"></i>
237                            Delete
238                        </button>
239                        <button class="btn btn-danger"
240                                style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
241                            text-shadow:2px 2px black;"
242                                ng-click="deleteAllRecurrences(currentcal.down[0][selectedEventId].rec.recid)"
243                                ng-if="currentcal.down[0][selectedEventId].rec.recid != '0'
244                                        && currentcal.down[0][selectedEventId].rec.recid != '00000000-0000-0000-0000-000000000000'">
245                            Delete all recurrencies
246                        </button>
247                    </td>
248                </tr>
249            </table>
250            <table ng-if="selectedEventId === -1" class="table">
251                <tr>
252                    <th colspan="2"> Select an event to show information</th>
253
254                </tr>
255                <tr>
256                    <td>Time / Select an event</td>
257                </tr>
258                <tr>
259                    <td>Status / Select an event</td>
260                </tr>
261            </table>
262            <div ng-if="calendarSaver">
263                <i class="fa fa-save fa-4x fa-spin"></i>
264            </div>
265            <div ng-if="calendarDeleter">
266                <i class="fa fa-trash-o fa-4x fa-spin"></i>
267            </div>
268            <div class="row">
269                <h3>Current calendar - actions</h3>
270                <div class="btn-group btn-group-justified"
271                     role="group"
272                     style="padding-bottom:20px;">
273
274                    <div ng-if="treeview.currentNode.changes"
275                         class="btn btn-success"
276                         ng-click="saveCurrentCalendar()"
277                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
278                            text-shadow:2px 2px black;">
279                        Save current changes
280                    </div>
281                    <div ng-if="treeview.currentNode.changes"
282                         class="btn btn-warning"
283                         ng-click="clearCurrentCalendar()"
284                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
285                            text-shadow:2px 2px black;">
286                        Clear current changes
287                    </div>
288                    <div class="btn btn-danger"
289                         ng-click="deleteAllPreviousEvents()"
290                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
291                            text-shadow:2px 2px black;">
292                        Delete past events
293                    </div>
294                    <div class="btn btn-danger"
295                         ng-click="deleteAllEvents()"
296                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
297                            text-shadow:2px 2px black;">
298                        Delete all events
299                    </div>
300                </div>
301            </div>
302            <div class="row">
303                <h3>All loaded calendars - actions</h3>
304                <div class="btn-group btn-group-justified"
305                     role="group"
306                     style="padding-bottom:20px;">
307
308                    <div class="btn btn-success"
309                         ng-click="saveAllCalendars()"
310                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
311                            text-shadow:2px 2px black;">
312                        Save all changes
313                    </div>
314
315                    <div class="btn btn-warning"
316                         ng-click="clearAllCalendars()"
317                         style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
318                            text-shadow:2px 2px black;">
319                        Clear all changes
320                    </div>
321                </div>
322            </div>
323
324        </div>
325
326        <div class="row panel-footer">
327            <h2>All events </h2><h5>(sorted by changed and start date)</h5>
328            <div class="row" ng-repeat="ev in currentcal.down[0] | orderBy:['!changed','start'] track by $index">
329                <div class="btn-group-justified btn-block">
330
331                    <div class="btn btn-default" ng-style="{'background-color': ev.color}"
332                         ng-click="eventClickBtn(ev._id)"
333                         style="width:6%;color:white;
334                            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;">
335                        {{ev.title }}
336                        <span ng-if="!ev.allDay">
337                            from {{ev.start | date : 'HH:mm dd/MM/yy' : 'utc'}}
338                            <span ng-if="ev.end">
339                                to {{ev.end | date : 'HH:mm dd/MM/yy': 'utc'}}
340                            </span>
341                        </span>
342                        <span ng-if="ev.allDay">
343                            all day from {{ev.start | date : 'dd/MM/yy' : 'utc'}}
344                            <span ng-if="ev.end">
345                                to {{ev.end | date : 'dd/MM/yy': 'utc'}}
346                            </span>
347                        </span>
348                        <span ng-if="ev.rec.recurrence">
349                            | recurring event
350                        </span>
351                    </div>
352                    <a id="del"
353                       style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
354                            text-shadow:2px 2px black;"
355                       class='btn btn-group btn-danger'
356                       ng-click="removeList(ev._id)">
357                        <span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
358                    </a>
359                </div>
360
361            </div>
362
363        </div>
364    </div>
365    <div ng-show="treeview.currentNode === undefined"
366         style="margin-bottom:200px">
367        <form method="post"
368              ng-init="newName = ''"
369              asp-action="newClientGroup"
370              asp-controller="Resource"
371              enctype="multipart/form-data"
372              class="col-sm-8 panel  panel-primary">
373            <div class="row panel-heading"
374                 style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
375                            text-shadow:2px 2px black;">
376                <h3>
377                    Add new client group
378                </h3>
379                <table class="table">
380                    <tbody>
381                        <tr>
382                            <td>Heartbeat</td>
383                            <td>
384                                <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" />
385
386
387                            </td>
388                        </tr>
389                        <tr>
390                            <td>Name</td>
391                            <td><input type="text" class="form-control" id="inpname" name="inpname" ng-model="newName" placeholder="Group name" /></td>
392                        </tr>
393                        <tr>
394                            <td>Assign parent group</td>
395                            <td>
396                                <select class="form-control" id="inpparent" name="inpparent">
397                                    <option value="">None</option>
398                                    <option ng-repeat="group in groups | orderBy:'Name'" value="{{group.Id}}">{{group.Name}}</option>
399
400                                </select>
401                            </td>
402                        </tr>
403                    </tbody>
404
405                </table>
406                <button type="submit"
407                        id="inpsaver"
408                        ng-disabled="newName === ''"
409                        class="btn btn-success">
410                    <i class="fa fa-save"></i>
411                    Add {{newName}} group
412                </button>
413            </div>
414            <div class="panel-body row">
415                <h3>Choose clients </h3>
416                <h5>(This will overwrite the group set for these clients)</h5>
417                <table>
418                    <tr ng-repeat="client in clients  | orderBy:['Name'] track by $index" class="checkbox col-md-6 col-lg-4">
419                        <td>
420                            <label>
421                                <input type="checkbox"
422                                       name="clientstoadd"
423                                       value="{{client.Id}}">
424                                <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
425                            </label>
426                        </td>
427                    </tr>
428                </table>
429            </div>
430        </form>
431    </div>
432
433    <div ng-if="treeview.currentNode !== undefined && treeview.currentNode.Id === undefined"
434         class="col-sm-8 panel  panel-primary"
435         style="margin-bottom:200px">
436        <div class="row panel-heading"
437             style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
438                            text-shadow:2px 2px black;">
439            <h2>
440                Ungrouped
441            </h2>
442            <h3>
443                All unassigned clients arrive here. Assign them to a group to remove them from this group.
444            </h3>
445
446        </div>
447    </div>
448    <script src="~/js/hubs/calendarhubber.js"></script>
449</div>
Note: See TracBrowser for help on using the repository browser.