Revised version of the resource page + related plugins
[unfold.git] / plugins / scheduler2 / templates / scheduler.html
1 <div id="plugin-{{ domid }}-loader" style="text-align:center;">\r
2     <img src="../../static/img/loading-7b6dc55620a355b55b835f6b4c300f9b.gif" alt="loading" style="width:100px;" />\r
3     <h3>Loading Data...</h3>\r
4 </div>\r
5 <div id="plugin-{{ domid }}-empty" style="text-align: center; display: none;">\r
6     <img src="../../static/img/no-data.png" alt="no data found" style="width:100px;" />\r
7     <h3>no data found...</h3>\r
8 </div>\r
9 <div id="plugin-{{ domid }}" class="" ng-app="myApp" style="display:none;">\r
10     <div class="row m-b">\r
11         <div class="col-md-1">\r
12             <label for="inputEmail3" class="col-sm-2 control-label">Date</label>\r
13         </div>\r
14         <div class="col-md-9">\r
15             <input id="DateToRes" type="text" class="form-control" placeholder="Reservation Date">\r
16             <span class="glyphicon glyphicon-calendar"></span>\r
17         </div>\r
18         <div class="col-md-2 text-center">\r
19             {% comment %}\r
20             <div id="TopologyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">\r
21                 <div class="modal-dialog">\r
22                     <div class="modal-header">\r
23                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\r
24                         <h4 class="modal-title" id="myModalLabel">Topology</h4>\r
25                     </div>\r
26                     <div class="modal-body">\r
27                         <img src="../../static/img/nitos_topo.png" alt="nitos topology" style="width:100%;" />\r
28                     </div>\r
29                 </div><!-- /.modal-dialog -->\r
30             </div><!-- /.modal TopologyModal -->\r
31             <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#TopologyModal">Topology</button>\r
32             {% endcomment  %}\r
33             <button id="btnSchedulerSubmit" type="button" class="btn btn-primary btn-md">Submit Leases</button>\r
34 \r
35         </div>\r
36     </div>\r
37     <!--<div class="row m-b">\r
38         <div class="col-md-1">\r
39             <label for="inputEmail3" class="col-sm-1 control-label">Time</label>\r
40         </div>\r
41         <div class="col-md-9">\r
42             <div id="time-range"></div>\r
43         </div>\r
44         <div class="col-md-2">\r
45             <span id="lbltime" class="label label-primary"></span>\r
46         </div>\r
47     </div>-->\r
48     <div id="SchedulerCtrl" ng-controller="SchedulerCtrl" class='query-editor-spacer'>\r
49         <div class="sliderContainer">\r
50             <div id="tblSlider"></div>\r
51         </div>\r
52         <div class="table-responsive">\r
53 \r
54             <table id="scheduler-reservation-table" class="table table-bordered table-condensed">\r
55                 <thead>\r
56                     <tr>\r
57                         <th>#</th>\r
58                         <th ng-repeat="slot in slots | offset: from | limitTo: num_visible_cells ">\r
59                             {[{ slot.time }]}\r
60                         </th>\r
61                     </tr>\r
62                 </thead>\r
63                 <tbody>\r
64                     <tr ng-repeat="resource in resources | filter: filter_visible | offset: (current_page-1) * items_per_page | limitTo: items_per_page" \r
65                                                 ng-class-odd="''" \r
66                                                 ng-class-even="'even'">\r
67                         <th data-resourceid="{[{ resource.urn }]}" \r
68                                                         data-rowindex="{[{ $index }]}" \r
69                                                         data-resourceindex="{[{ resource.index }]}" \r
70                                                         style="word-wrap: break-word; word-break: break-all; ">\r
71                                                         {[{ resource.hostname }]}\r
72                                                 </th>\r
73                         <td ng-repeat="lease in resource.leases | offset: from / lcm_colspan  | limitTo: num_visible_cells / lcm_colspan"\r
74                                                         data-slotid="{[{ lease.id }]}" \r
75                                                         data-groupid="{[{ lease.groupid }]}" \r
76                                                         ng-class="{{ 'lease.status' }}"\r
77                                                         colspan="{[{resource.granularity / granularity}]}"\r
78                                                         ng-click="select(from+$index, lease, $parent.resource)">\r
79                                                 </td>\r
80                     </tr>\r
81                 </tbody>\r
82             </table>\r
83 \r
84             <div class="row">\r
85                 <div class="col-xs-5">\r
86                     <div id="resources-list__table_length" class="dataTables_length">\r
87                         <label>Total pages : {[{page_count()}]}</label>\r
88                     </div>\r
89                 </div>\r
90                 <div class="col-xs-7">\r
91                     <div class="dataTables_paginate paging_bootstrap">\r
92                         <ul class="pagination">\r
93                                                         <li ng-class="prevPageDisabled()">\r
94                                                           <a href ng-click="prevPage()">« Prev</a>\r
95                                                         </li>\r
96                             <li ng-repeat="n in range()" \r
97                                                             ng-class="{active: n==current_page}" \r
98                                                                 ng-click="setPage(n)"><a href="#">{[{n}]}</a></li>\r
99                                                         <li ng-class="nextPageDisabled()">\r
100                                               <a href ng-click="nextPage()">Next »</a>\r
101                                             </li>\r
102                         </ul>\r
103                     </div>\r
104                 </div>\r
105             </div>\r
106             {% comment %}\r
107             <div id="reservation-table-scroll-container">\r
108                 <table id='{{domid}}-reservation-table' class='table table-bordered'>\r
109                     <thead>\r
110                         <tr>\r
111                             {% for ts in time_slots %}\r
112                             <th class='center info'>{{ ts|safe }}</th>\r
113                             {% endfor %}\r
114                         </tr>\r
115                     </thead>\r
116                     <tbody>\r
117 \r
118                         {% for itms in nodes %}\r
119                         {% for n in itms.1 %}\r
120                         <tr data-trindex="">\r
121                             {% for ts in time_slots %}\r
122                             {% if n == 'node020' %}\r
123                             <td class="maintenance closed" data-tdindex="{{forloop.counter}}"></td>\r
124                             {% elif n == 'node023' or n == 'node030' %}\r
125                             <td class="closed" data-tdindex="{{forloop.counter}}"></td>\r
126                             {% else %}\r
127                             <td class="" data-tdindex="{{forloop.counter}}"></td>\r
128                             {% endif %}\r
129                             {% endfor %}\r
130                         </tr>\r
131                         {% endfor %}\r
132                         {% endfor %}\r
133                     </tbody>\r
134                 </table>\r
135             </div>\r
136             {% endcomment  %}\r
137 \r
138             <div class="legend">\r
139                 <ol>\r
140                     <li class="free">free</li>\r
141                     <li class="selected">selected</li>\r
142                     <li class="closed">reserved</li>\r
143                     <li class="maintenance">maintenance</li>\r
144                 </ol>\r
145             </div>\r
146         </div><!-- / scheduler plugin -->\r
147         <script type="text/javascript">\r
148             //alert("1");\r
149         </script>\r
150     </div>\r