many cosmetic changes
[myslice.git] / plugins / scheduler2 / templates / scheduler.html
index 4e58fcd..928b2da 100755 (executable)
-<div id="plugin-{{ domid }}" class="" ng-app="myApp">\r
+<div id="plugin-{{ domid }}-loader" style="text-align:center;">\r
+    <img src="../../static/img/loading-7b6dc55620a355b55b835f6b4c300f9b.gif" alt="loading" style="width:100px;" />\r
+    <h3>Loading Data...</h3>\r
+</div>\r
+<div id="plugin-{{ domid }}-empty" style="text-align: center; display: none;">\r
+    <img src="../../static/img/no-data.png" alt="no data found" style="width:100px;" />\r
+    <h3>no data found...</h3>\r
+</div>\r
+<div id="plugin-{{ domid }}" class="">\r
     <div class="row m-b">\r
-        <div class="col-md-1">\r
-            <label for="inputEmail3" class="col-sm-2 control-label">Date</label>\r
-        </div>\r
-        <div class="col-md-9">\r
-            <input id="DateToRes" type="text" class="form-control" placeholder="Reservation Date">\r
-            <span class="glyphicon glyphicon-calendar"></span>\r
-        </div>\r
-        <div class="col-md-2 text-center">\r
-            <div id="TopologyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">\r
-                <div class="modal-dialog">\r
-                    <div class="modal-header">\r
-                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\r
-                        <h4 class="modal-title" id="myModalLabel">Topology</h4>\r
-                    </div>\r
-                    <div class="modal-body">\r
-                        <img src="../../static/img/nitos_topo.png" alt="nitos topology" style="width:100%;" />\r
-                    </div>\r
-                </div><!-- /.modal-dialog -->\r
-            </div><!-- /.modal TopologyModal -->\r
-            <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#TopologyModal">Topology</button>\r
-\r
-        </div>\r
+        <div class="col-md-4">\r
+               <div class="row">\r
+                       <div class="col-md-1">\r
+                       <label for="inputEmail3" class="control-label">Day:</label>\r
+                       </div>\r
+                               <div class="col-md-11">\r
+                                       <input id="DateToRes" type="text" placeholder="Reservation Date">\r
+                                       <span class="glyphicon glyphicon-calendar" style="position:absolute;margin-left:-20px;margin-top:4px;"></span>\r
+                                       <!-- <input id="DateToRes" type="text" class="form-control" placeholder="Reservation Date"> -->\r
+                               </div>\r
+                       </div>\r
+               </div>\r
+        <div class="col-md-8">\r
+               <div class="row">\r
+                       <div class="col-md-2">\r
+                       <label for="inputEmail3" class="control-label">Time of day:</label>\r
+                       </div>\r
+                       <div class="col-md-10">\r
+                                       <div class="sliderContainer">\r
+                                               <div id="tblSlider"></div>\r
+                                       </div>\r
+                               </div>\r
+                       </div>\r
+               </div>\r
     </div>\r
-    <!--<div class="row m-b">\r
-        <div class="col-md-1">\r
-            <label for="inputEmail3" class="col-sm-1 control-label">Time</label>\r
-        </div>\r
-        <div class="col-md-9">\r
-            <div id="time-range"></div>\r
-        </div>\r
-        <div class="col-md-2">\r
-            <span id="lbltime" class="label label-primary"></span>\r
-        </div>\r
-    </div>-->\r
     <div id="SchedulerCtrl" ng-controller="SchedulerCtrl" class='query-editor-spacer'>\r
-        <div class="sliderContainer">\r
-            <div id="tblSlider"></div>\r
-        </div>\r
         <div class="table-responsive">\r
+\r
             <table id="scheduler-reservation-table" class="table table-bordered table-condensed">\r
                 <thead>\r
                     <tr>\r
-                        <th>#</th>\r
-                        <th ng-repeat="slot in slots>\r
+                        <th>Resource name</th>\r
+                        <th ng-repeat="slot in slots | offset: from | limitTo: num_visible_cells ">\r
                             {[{ slot.time }]}\r
                         </th>\r
                     </tr>\r
                 </thead>\r
                 <tbody>\r
-                    <tr ng-repeat="resource in resources" ng-class-odd="''" ng-class-even="'even'">\r
-                        <th data-resourceid="{[{ resource.id }]}">{[{ resource.name }]}</th>\r
-                        <td ng-repeat="lease in resource.leases" data-slotid="{[{ lease.id }]}" ng-class="{{ 'lease.status' }}"></td>\r
+                    <tr ng-repeat="resource in resources | filter: filter_visible | offset: (current_page-1) * items_per_page | limitTo: items_per_page" \r
+                                               ng-class-odd="''" \r
+                                               ng-class-even="'even'">\r
+                        <th data-resourceid="{[{ resource.urn }]}" \r
+                                                       data-rowindex="{[{ $index }]}" \r
+                                                       data-resourceindex="{[{ resource.index }]}" \r
+                                                       style="word-wrap: break-word; word-break: break-all; ">\r
+                                                       {[{ resource.hostname }]}\r
+                                               </th>\r
+                        <td ng-repeat="lease in resource.leases | offset: from / (resource.granularity / slot_length)  | limitTo: num_visible_cells / (resource.granularity / slot_length)"\r
+                                                       data-slotid="{[{ lease.id }]}" \r
+                                                       data-groupid="{[{ lease.groupid }]}" \r
+                                                       ng-class="{{ 'lease.status' }}"\r
+                                                       ng-class="{{ 'lease.success' }}"\r
+                                                       colspan="{[{resource.granularity / slot_length}]}"\r
+                                                       ng-click="select(from+$index, lease, $parent.resource)">\r
+                                               </td>\r
                     </tr>\r
                 </tbody>\r
             </table>\r
-        </div>\r
-        {% comment %}\r
-        <div id="reservation-table-scroll-container">\r
-            <table id='{{domid}}-reservation-table' class='table table-bordered'>\r
-                <thead>\r
-                    <tr>\r
-                        {% for ts in time_slots %}\r
-                        <th class='center info'>{{ ts|safe }}</th>\r
-                        {% endfor %}\r
-                    </tr>\r
-                </thead>\r
-                <tbody>\r
 \r
-                    {% for itms in nodes %}\r
-                    {% for n in itms.1 %}\r
-                    <tr data-trindex="">\r
-                        {% for ts in time_slots %}\r
-                        {% if n == 'node020' %}\r
-                        <td class="maintenance closed" data-tdindex="{{forloop.counter}}"></td>\r
-                        {% elif n == 'node023' or n == 'node030' %}\r
-                        <td class="closed" data-tdindex="{{forloop.counter}}"></td>\r
-                        {% else %}\r
-                        <td class="" data-tdindex="{{forloop.counter}}"></td>\r
-                        {% endif %}\r
+            <div class="row">\r
+                <div class="col-xs-5">\r
+                    <div id="resources-list__table_length" class="dataTables_length">\r
+                        <label>Total pages : {[{page_count()}]}</label>\r
+                    </div>\r
+                </div>\r
+                <div class="col-xs-7">\r
+                    <div class="dataTables_paginate paging_bootstrap">\r
+                        <ul class="pagination">\r
+                                                       <li ng-class="prevPageDisabled()">\r
+                                                         <a href ng-click="prevPage()">« Prev</a>\r
+                                                       </li>\r
+                            <li ng-repeat="n in range()" \r
+                                                           ng-class="{active: n==current_page}" \r
+                                                               ng-click="setPage(n)"><a href="#">{[{n}]}</a></li>\r
+                                                       <li ng-class="nextPageDisabled()">\r
+                                             <a href ng-click="nextPage()">Next »</a>\r
+                                           </li>\r
+                        </ul>\r
+                    </div>\r
+                </div>\r
+            </div>\r
+            {% comment %}\r
+            <div id="reservation-table-scroll-container">\r
+                <table id='{{domid}}-reservation-table' class='table table-bordered'>\r
+                    <thead>\r
+                        <tr>\r
+                            {% for ts in time_slots %}\r
+                            <th class='center info'>{{ ts|safe }}</th>\r
+                            {% endfor %}\r
+                        </tr>\r
+                    </thead>\r
+                    <tbody>\r
+\r
+                        {% for itms in nodes %}\r
+                        {% for n in itms.1 %}\r
+                        <tr data-trindex="">\r
+                            {% for ts in time_slots %}\r
+                            {% if n == 'node020' %}\r
+                            <td class="maintenance closed" data-tdindex="{{forloop.counter}}"></td>\r
+                            {% elif n == 'node023' or n == 'node030' %}\r
+                            <td class="closed" data-tdindex="{{forloop.counter}}"></td>\r
+                            {% else %}\r
+                            <td class="" data-tdindex="{{forloop.counter}}"></td>\r
+                            {% endif %}\r
+                            {% endfor %}\r
+                        </tr>\r
                         {% endfor %}\r
-                    </tr>\r
-                    {% endfor %}\r
-                    {% endfor %}\r
-                </tbody>\r
-            </table>\r
-        </div>\r
-        {% endcomment  %}\r
+                        {% endfor %}\r
+                    </tbody>\r
+                </table>\r
+            </div>\r
+            {% endcomment  %}\r
 \r
-        <div class="legend">\r
-            <ol>\r
-                <li class="free">free</li>\r
-                <li class="selected">selected</li>\r
-                <li class="closed">reserved</li>\r
-                <li class="maintenance">maintenance</li>\r
-            </ol>\r
-        </div>\r
-    </div><!-- / scheduler plugin -->\r
-    <script type="text/javascript">\r
-        //alert("1");\r
-    </script>\r
-</div>
\ No newline at end of file
+            <div class="legend">\r
+                <ol>\r
+                    <li class="free">Free</li>\r
+                    <li class="selected">Reserved</li>\r
+                    <li class="pendingin">Reservation pending</li>\r
+                    <li class="pendingout">Reservation cancellation pending</li>\r
+                    <li class="closed">Unavailable</li>\r
+                                       <li class="disabled">Forbidden</li>\r
+                    <li class="maintenance">Maintenance</li>\r
+                </ol>\r
+            </div>\r
+        </div><!-- / scheduler plugin -->\r
+        <script type="text/javascript">\r
+            //alert("1");\r
+        </script>\r
+    </div>\r