major updates to slice reservation page and plugins

[myslice.git] / portal / templates / slice-resource-view.html

diff --git a/portal/templates/slice-resource-view.html b/portal/templates/slice-resource-view.html
index 12af9bf..4ecf483 100644 (file)
--- a/portal/templates/slice-resource-view.html
+++ b/portal/templates/slice-resource-view.html
@@ -6,6 +6,14 @@
 <script src="{{ STATIC_URL }}js/onelab_slice-resource-view.js"></script>
 <script>
        //myslice.slice = "{{ slice }}";
+
+$(document).ready(function() {
+            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+        // find the plugin object inside the tab content referenced by the current tabs
+        $('.plugin', $($(e.target).attr('href'))).trigger('shown.bs.tab');
+        $('.plugin', $($(e.target).attr('href'))).trigger('show');
+            });
+});
 </script>
 {% endblock %}
 
@@ -50,10 +58,10 @@
                -->
 
                <div class="row">
-                       <ul class="nav nav-pills nav-resources">
-                         <li class="active"><a data-panel="resources" href="#">Table</a></li>
-                         <li id="GoogleMap"><a data-panel="map" href="#">Map</a></li>
-                         <li id="Scheduler"><a data-panel="scheduler-tab" href="#">Scheduler</a></li>
+                       <ul class="nav nav-tabs">
+                         <li class="active"><a href="#resourcelist" role="tab" data-toggle="tab">Table</a></li>
+                         <li> <a href="#resourcemap" role="tab" data-toggle="tab">Map</a></li>
+                         <li> <a href="#resourcescheduler" role="tab" data-toggle="tab">Scheduler</a></li>
                        </ul>
                </div>
 
@@ -75,14 +83,22 @@
                        </div>
                </div>
                
-               <div class="row" style="height:100%;">
-                       <div id="resources" class="panel">
+               <div class="tab-content" style="height:100%;">
+                       <div class="tab-pane active" id="resourcelist">
                                 <!-- Button trigger modal - columns selector -->
                                <button class="btn btn-primary btn-sm" style="float:right;" data-toggle="modal" data-target="#myModal">...</button>
                 {{list_resources}}
                                <!-- <table cellpadding="0" cellspacing="0" border="0" class="table" id="objectList"></table> -->
                        </div>
-                       <div id="reserved" class="panel" style="height:370px;display:none;">
+                       <div class="tab-pane" id="resourcemap">
+                {{map_resources}}
+                       </div>
+                       <div class="tab-pane" id="resourcescheduler">
+                {{scheduler}}
+                       </div>
+
+                       <!--
+                       <div id="reserved" class="tab-pane" style="height:370px;display:none;">
                 <table width="80%">
                     <tr><th width="50%" style="text-align:center;">resources</th><th width="50%" style="text-align:center;">leases</th></tr>
                     <tr>
@@ -91,18 +107,14 @@
                     </tr>
                 </table>
                        </div>
-                       <div id="pending" class="panel" style="height:370px;display:none;">
+                       <div id="pending" class="tab-pane" style="height:370px;display:none;">
                 {{pending_resources}}
                        </div>
-                       <div id="sla_dialog" class="panel" style="height:370px;display:none;">
+                       <div id="sla_dialog" class="tab-pane" style="height:370px;display:none;">
                 {{sla_dialog}}
                        </div>
-                       <div id="map" class="panel" style="height:370px;display:none;">
-                {{map_resources}}
-                       </div>
-                       <div id="scheduler-tab" class="panel" style="height:370px;display:none;">
-                {{scheduler}}
-                       </div>
+-->
+
                </div>
        </div>
 {% endblock %}