Plugin UnivBristol by Frederic Francois
[myslice.git] / portal / templates / slice-resource-view.html
1 {% extends "layout_wide.html" %}
2 {% load portal_filters %}
3
4 {% block head %}
5 <!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1RUj824JAiHRVqgc2CSIg4CpKHhh84Lw&sensor=false"></script> -->
6 <script src="{{ STATIC_URL }}js/onelab_slice-resource-view.js"></script>
7 <script>
8         //myslice.slice = "{{ slice }}";
9
10 $(document).ready(function() {
11             $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
12         // find the plugin object inside the tab content referenced by the current tabs
13         $('.plugin', $($(e.target).attr('href'))).trigger('shown.bs.tab');
14         $('.plugin', $($(e.target).attr('href'))).trigger('show');
15             });
16 });
17 </script>
18 {% endblock %}
19
20 {% block content %}
21 {% widget '_widget-slice-sections.html' %}
22 <div class="container-fluid container-resource">
23         <div class="row">
24         <div class="col-md-2">
25                 <!-- <div id="select-platform" class="list-group"></div> -->
26                 {{filter_testbeds}}
27         </div>
28         <div class="col-md-10" style="height:100%;">
29                 <div class="row">
30                         {% if msg %}
31                         <div class="col-md-12"><p class="alert-success">{{ msg }}</p></div>
32                         {% endif %}
33                 </div>
34         
35                 <div class="row">
36                         <div class="col-md-6">
37                                 {{ filter_status }}
38                         </div>
39                         <div class="col-md-1">
40                                 {{ apply }}
41                         </div>
42                 </div>
43                 <!--
44                 <div class="list-group-item list-resources">
45                         <span class="list-group-item-heading" style="padding-left: 0;">Resource status:</span>
46                         <a class="list-group-item active" data-panel="resources" href="#" style='display: inline-block !important;'>All</a>
47                         <a class="list-group-item" data-panel="reserved" href="#" style='display: inline-block !important;'>Reserved</a>
48                         <a class="list-group-item" data-panel="pending" href="#" style='display: inline-block !important;'>Pending <span class="badge" id="badge-pending" data-number="0"></span></a>
49                 </div>
50                 -->
51
52                 <div class="row">
53                         <div class="col-md-12">
54                         <ul class="nav nav-tabs">
55                           <li class="active"><a href="#resourcelist" role="tab" data-toggle="tab">Table</a></li>
56                           <li> <a href="#resourcemap" role="tab" data-toggle="tab">Map</a></li>
57                           <li> <a href="#resourcescheduler" role="tab" data-toggle="tab">Scheduler</a></li>
58                         </ul>
59                         </div>
60                 </div>
61                 
62                 <!-- Modal - columns selector -->
63                 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
64                         <div class="modal-dialog">
65                         <div class="modal-content">
66                                 <div class="modal-header">
67                                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
68                                                 <h4 class="modal-title" id="myModalLabel">Columns selector</h4>
69                                 </div>
70                                 <div class="modal-body">
71                                         {{columns_editor}}
72                                 </div>
73                                 <div class="modal-footer">
74                                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
75                                 </div>
76                         </div>
77                         </div>
78                 </div>
79                 
80                 
81                 <div class="row">
82                         <div class="col-md-12">
83                         <div class="tab-content" style="height:100%;">
84                                 <div class="tab-pane active" id="resourcelist">
85                                          <!-- Button trigger modal - columns selector -->
86                                         <button class="btn btn-default btn-sm" style="float:right;" data-toggle="modal" data-target="#myModal">...</button>
87                         {{list_resources}}
88                                         <!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
89                                 </div>
90                                 <div class="tab-pane" id="resourcemap">
91                         {{map_resources}}
92                                 </div>
93                                 <div class="tab-pane" id="resourcescheduler">
94                         {{scheduler}}
95                                 </div>
96         
97                                 <!--
98                                 <div id="reserved" class="tab-pane" style="height:370px;display:none;">
99                         <table width="80%">
100                             <tr><th width="50%" style="text-align:center;">resources</th><th width="50%" style="text-align:center;">leases</th></tr>
101                             <tr>
102                                 <td style="text-align:center">{{list_reserved_resources}}</td>
103                                 <td style="text-align:center">{{list_reserved_leases}}</td>
104                             </tr>
105                         </table>
106                                 </div>
107                                 <div id="pending" class="tab-pane" style="height:370px;display:none;">
108                         {{pending_resources}}
109                                 </div>
110                                 <div id="sla_dialog" class="tab-pane" style="height:370px;display:none;">
111                         {{sla_dialog}}
112                                 </div>
113         -->
114         
115                         </div>
116                 </div>
117         </div>
118         </div>
119         </div>
120 </div>
121 {% endblock %}