Filter status: All, Available, Unavailable, Unconfigured, Pending, Reserved
[myslice.git] / portal / templates / slice-resource-view.html
index 27ac3c5..cbd8d1b 100644 (file)
@@ -6,53 +6,60 @@
 <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 %}
 
 {% block content %}
+{% widget '_widget-slice-sections.html' %}
+<div class="container-fluid container-resource">
+       <div class="row">
        <div class="col-md-2">
-               
-               <div class="list-group-item list-resources">
-                       <span class="list-group-item-heading">View</span>
-                       <a class="list-group-item active" data-panel="resources" href="#">All</a>
-                       <a class="list-group-item" data-panel="reserved" href="#">Reserved</a>
-                       <a class="list-group-item" data-panel="pending" href="#">Pending <span class="badge" id="badge-pending" data-number="0"></span></a>
-               </div>
-               
                <!-- <div id="select-platform" class="list-group"></div> -->
                {{filter_testbeds}}
        </div>
        <div class="col-md-10" style="height:100%;">
-               <div class="row">
-                       {% widget '_widget-slice-sections.html' %}
-               </div>
-               <!-- <div class="row slice-pending">
-                       <ul class="nav nav-pills">
-                               <li><a href="">Unreserved</a></li>
-                               <li><a href="">Reserved</a></li>
-                               <li><a href="">Pending<span class="badge" id="badge-pending" style="display:none;"></span></a></li>
-                               <li>
-                                       <button type="button" class="btn btn-primary apply" id="ApplyPendind">Apply</button>
-                                       <button type="button" class="btn btn-default clear">Clear</button>
-                               </li>
-                               <li>
-                                       <div id="loading" style="display:none;"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading" /></div>
-                               </li>
-                       </ul>
-               </div> -->
                <div class="row">
                        {% if msg %}
                        <div class="col-md-12"><p class="alert-success">{{ msg }}</p></div>
                        {% endif %}
                </div>
+       
                <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>
+                       <div class="col-md-8">
+                               {{ filter_status }}
+                       </div>
+                       <div class="col-md-1">
+                               {{ apply }}
+                       </div>
                </div>
+               <!--
+               <div class="list-group-item list-resources">
+                       <span class="list-group-item-heading" style="padding-left: 0;">Resource status:</span>
+                       <a class="list-group-item active" data-panel="resources" href="#" style='display: inline-block !important;'>All</a>
+                       <a class="list-group-item" data-panel="reserved" href="#" style='display: inline-block !important;'>Reserved</a>
+                       <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>
+               </div>
+               -->
 
+               <div class="row">
+                       <div class="col-md-12">
+                       <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>
+                         <!--<li> <a href="#resourcesasap" role="tab" data-toggle="tab">ASAP</a></li> -->
+                       </ul>
+                       </div>
+               </div>
+               
                <!-- Modal - columns selector -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                        </div>
                </div>
                
-               <div class="row" style="height:100%;">
-                       <div id="resources" class="panel">
-                                <!-- Button trigger modal - columns selector -->
-                               <button class="btn btn-primary btn-sm" style="float:right;" data-toggle="modal" data-target="#myModal">Select columns</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;">
-                <table width="80%">
-                    <tr><th width="50%" style="text-align:center;">resources</th><th width="50%" style="text-align:center;">leases</th></tr>
-                    <tr>
-                        <td style="text-align:center">{{list_reserved_resources}}</td>
-                        <td style="text-align:center">{{list_reserved_leases}}</td>
-                    </tr>
-                </table>
-                       </div>
-                       <div id="pending" class="panel" style="height:370px;display:none;">
-                {{pending_resources}}
-                       </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 class="row">
+                       <div class="col-md-12">
+                       <div class="tab-content" style="height:100%;">
+                               <div class="tab-pane active" id="resourcelist">
+                                        <!-- Button trigger modal - columns selector -->
+                                       <button class="btn btn-default 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 class="tab-pane" id="resourcemap">
+                       {{map_resources}}
+                               </div>
+                               <div class="tab-pane" id="resourcescheduler">
+                       {{scheduler}}
+                               </div>
+                                       <!-- <div class="tab-pane" id="resourcesasap">
+                       {{asap}}
+                               </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>
+                               <td style="text-align:center">{{list_reserved_resources}}</td>
+                               <td style="text-align:center">{{list_reserved_leases}}</td>
+                           </tr>
+                       </table>
+                               </div>
+                               <div id="pending" class="tab-pane" style="height:370px;display:none;">
+                       {{pending_resources}}
+                               </div>
+                               <div id="sla_dialog" class="tab-pane" style="height:370px;display:none;">
+                       {{sla_dialog}}
+                               </div>
+       -->
+       
                        </div>
                </div>
        </div>
+       </div>
+       </div>
+</div>
 {% endblock %}