Free cookie consent management tool by TermsFeed Policy Generator

Ignore:
Timestamp:
04/21/16 16:48:34 (8 years ago)
Author:
jlodewyc
Message:

#2582 Resource calendar and client group creation, control implemented

File:
1 edited

Legend:

Unmodified
Added
Removed

  • branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Resource/Index.cshtml

    r13775 r13782  
    55    @Html.Partial("Navbar", new HeuristicLab.Clients.Hive.WebJobManager.ViewModels.NavbarViewModel("Resource"))
    66
    7    
     7
    88
    99    <div class="col-sm-4">
     10        <div class="btn btn-block btn-success" ng-click="clearTreeSelect()">Add group</div>
    1011        <div data-angular-treeview="true"
    1112             data-tree-id="treeview"
    … …  
    1718        </div>
    1819    </div>
    19     <div ng-if="treeview.currentNode" class="col-sm-8 panel  panel-primary" style="margin-bottom:200px">
    20         <div class="row panel-heading">
    21             <h3>{{treeview.currentNode.Name}} <span ng-if="treeview.currentNode.IsDisposable === undefined"> - Client group</span></h3>
    22             <table class="table">
    23                 <tbody>
    24                     <tr>
    25                         <td>Heartbeat</td>
    26                         <td>
    27                             Every {{treeview.currentNode.HbInterval}} sec
    28                             <span ng-if="treeview.currentNode.IsDisposable !== undefined">
    29                                 - Last beat {{treeview.currentNode.LastHeartbeat | date:'HH:mm dd/MM/yyyy' }}
    30                             </span>
    31                         </td>
    32                     </tr>
    33                     <tr>
    34                         <td>Name</td>
    35                         <td>{{treeview.currentNode.Name}}</td>
    36                     </tr>
    37                     <tr>
    38                         <td>Id</td>
    39                         <td>{{treeview.currentNode.Id}}</td>
    40                     </tr>
    41                     <tr>
    42                         <td>Disposable</td>
    43                         <td><input type="checkbox" ng-checked="treeview.currentNode.IsDisposable" /></td>
    44                     </tr>
    45                 </tbody>
    46                 <tbody ng-if="treeview.currentNode.IsDisposable !== undefined">
    47                     <tr>
    48                         <td>Cores (free/total)</td>
    49                         <td>{{treeview.currentNode.FreeCores}} | {{treeview.currentNode.Cores}}</td>
    50 
    51 
    52                     </tr>
    53                     <tr>
    54                         <td>Memory (free/total)</td>
    55                         <td>{{treeview.currentNode.FreeMemory}} MB | {{treeview.currentNode.Memory}} MB</td>
    56                     </tr>
    57 
    58                 </tbody>
    59             </table>
     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>
    60128        </div>
    61129        <div class="panel-body row" style="text-align:center">
    62             <div class="row" style="padding-bottom:30px;">
    63                 <button class="btn btn-success" ng-click="saveCurrentCalendar()">Save current changes</button>
    64                 <button class="btn btn-success" ng-click="saveAllCalendars()">Save all changes</button>
    65                 <button class="btn btn-warning" ng-click="clearCurrentCalendar()">Clear current changes</button>
    66                 <button class="btn btn-warning" ng-click="clearAllCalendars()">Clear all changes</button>
    67             </div>
    68             <div class="row" style="padding-bottom:30px;">
    69                 <button class="btn btn-info" ng-click="deleteAllPreviousEvents()">Delete all previous events to date</button>
    70             </div>
     130
    71131            <i ng-if="currentcal.length  === 0" class="fa fa-cog fa-5x fa-spin"></i>
    72132            <div ng-if="currentcal.length != 0"
    … …  
    76136                 class="span8 calendar"
    77137                 ng-model="currentcal.down"></div>
    78             <table ng-if="selectedEventId != -1" class="table">
    79                 <tr>
    80                     <th colspan="2"> Selected event</th>
    81 
     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>
    82152                </tr>
    83153                <tr>
    … …  
    119189                    </td>
    120190                    <td>
    121                         <input type="date" 
    122                                ng-model="currentcal.down[0][selectedEventId].rec.start" 
     191                        <input type="date"
     192                               ng-model="currentcal.down[0][selectedEventId].rec.start"
    123193                               ng-change="checkDateStartEnd()" />
    124194                    </td>
    125195                </tr>
    126                 <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence" >
     196                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
    127197                    <td>
    128198                        End
    129199                    </td>
    130200                    <td>
    131                         <input type="date" 
    132                                ng-model="currentcal.down[0][selectedEventId].rec.end" 
    133                                ng-change="checkDateStartEnd()" 
    134                                min="{{currentcal.down[0][selectedEventId].rec.start | date:'yyyy-MM-dd'}}"/>
    135                     </td>
    136                 </tr>
    137                
     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
    138208                <tr ng-if="currentcal.down[0][selectedEventId].rec.recurrence">
    139209                    <td colspan="2">
    … …  
    146216                        <label class="checkbox-inline"><input type="checkbox" ng-model="currentcal.down[0][selectedEventId].rec.days[0]">Sunday</label>
    147217                    </td>
    148                    
     218
    149219                </tr>
    150220                <tr>
    … …  
    153223                        <button class="btn btn-info"
    154224                                ng-click="pushRecurChanges(currentcal.down[0][selectedEventId].rec.recid)"
    155                                 ng-if="currentcal.down[0][selectedEventId].rec.recid != '0' &&
     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' &&
    156228                                currentcal.down[0][selectedEventId].rec.recid != '00000000-0000-0000-0000-000000000000' &&
    157229                                currentcal.down[0][selectedEventId].changed">
    … …  
    159231                        </button>
    160232                        <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;"
    161235                                ng-click="remove(selectedEventId)">
    162236                            <i class="fa fa-trash-o"></i>
    … …  
    164238                        </button>
    165239                        <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;"
    166242                                ng-click="deleteAllRecurrences(currentcal.down[0][selectedEventId].rec.recid)"
    167243                                ng-if="currentcal.down[0][selectedEventId].rec.recid != '0'
    … …  
    173249            </table>
    174250            <table ng-if="selectedEventId === -1" class="table">
    175             <tr>
    176                 <th colspan="2"> Select an event to show information</th>
    177 
    178             </tr>
    179             <tr>
    180                 <td>Time / Select an event</td>
    181                    </tr>
    182             <tr>
    183                 <td>Status / Select an event</td>
    184             </tr>
     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>
    185261            </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
    186324        </div>
    187325
    188326        <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>
    189445
    190446        </div>
Note: See TracChangeset for help on using the changeset viewer.