tabs working

diff --git a/planetstack/core/xoslib/dashboards/xosAdminSite.html b/planetstack/core/xoslib/dashboards/xosAdminSite.html
index 1096a2a..ec37300 100644 (file)
--- a/planetstack/core/xoslib/dashboards/xosAdminSite.html
+++ b/planetstack/core/xoslib/dashboards/xosAdminSite.html
@@ -20,13 +20,15 @@ nav
 </div>
 
 <div id="contentPanel">
-<div id="detailBox">
+<div id="contentTitle">
+</div>
+<div id="tabs">
+</div>
 <div id="detail"></div>
 <div id="linkedObjs1"></div>
 <div id="linkedObjs2"></div>
 <div id="linkedObjs3"></div>
 <div id="linkedObjs4"></div>
-</div>
 
 </div>
 

diff --git a/planetstack/core/xoslib/static/css/xosAdminSite.css b/planetstack/core/xoslib/static/css/xosAdminSite.css
index 5148def..1a6680f 100644 (file)
--- a/planetstack/core/xoslib/static/css/xosAdminSite.css
+++ b/planetstack/core/xoslib/static/css/xosAdminSite.css
@@ -56,3 +56,55 @@
 .btn-xosnav {
     width: 120px;
 }
+
+.xos-nav-list {
+    list-style:none;
+    border-bottom-style: solid;
+    border-bottom-color: #105E9E;
+    color: #105E93;
+    margin: 0px 4px 15px 5px;
+}
+
+.xos-nav-item {
+    background-color: #E0E0E0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+
+    display: inline-block;
+    content: normal;
+    clear: none;
+
+    padding:8px 20px 7px;
+
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    font-weight: bold;
+    color: #105E9E;
+    border: none;
+    box-shadow: none;
+    cursor: pointer;
+}
+
+.xos-nav-item:hover {
+    background-color: #A0A0A0;
+    letter-spacing: 1px;
+}
+
+.xos-nav-item.active  {
+    background-color: #105E9E;
+    color:#ffffff;
+    font-weight:normal;
+    padding-top:10px;
+    text-decoration:none;
+}
+
+.xos-list-title {
+    display: none;
+}
+
+.xos-detail-title {
+    display: none;
+}
+

diff --git a/planetstack/core/xoslib/static/js/xosAdminSite.js b/planetstack/core/xoslib/static/js/xosAdminSite.js
index 660556e..820459e 100644 (file)
--- a/planetstack/core/xoslib/static/js/xosAdminSite.js
+++ b/planetstack/core/xoslib/static/js/xosAdminSite.js
@@ -90,13 +90,13 @@ XOSAdminApp.initRouter = function() {
         listViewName = collection_name + "ListView";\r
         detailViewName = collection_name + "DetailView";\r
 \r
-        api[api_command] = XOSAdminApp.listViewShower(listViewName, "detail");\r
+        api[api_command] = XOSAdminApp.listViewShower(listViewName, collection_name, "detail", collection_name);\r
         routes[nav_url] = api_command;\r
 \r
         nav_url = collection_name + "/:id";\r
         api_command = "detail" + collection_name.charAt(0).toUpperCase() + collection_name.slice(1);\r
 \r
-        api[api_command] = XOSAdminApp.detailShower(detailViewName, collection_name, "detail");\r
+        api[api_command] = XOSAdminApp.detailShower(detailViewName, collection_name, "detail", name);\r
         routes[nav_url] = api_command;\r
     };\r
 \r

diff --git a/planetstack/core/xoslib/static/js/xoslib/xos-backbone.js b/planetstack/core/xoslib/static/js/xoslib/xos-backbone.js
index b2395d7..8cac922 100644 (file)
--- a/planetstack/core/xoslib/static/js/xoslib/xos-backbone.js
+++ b/planetstack/core/xoslib/static/js/xoslib/xos-backbone.js
@@ -197,7 +197,7 @@ if (! window.XOSLIB_LOADED ) {
 
         this.slice = XOSModel.extend({ urlRoot: SLICE_API, modelName: "slice" });
         this.sliceCollection = XOSCollection.extend({ urlRoot: SLICE_API,
-                                                       relatedCollections: {"slivers": "slice", "sliceDeployments": "slice", "slicePrivileges": "slice"},
+                                                       relatedCollections: {"slivers": "slice", "sliceDeployments": "slice", "slicePrivileges": "slice", "networks": "owner"},
                                                        foreignCollections: ["services", "sites"],
                                                        model: this.slice});
         this.slices = new this.sliceCollection();

diff --git a/planetstack/core/xoslib/static/js/xoslib/xosHelper.js b/planetstack/core/xoslib/static/js/xoslib/xosHelper.js
index 0ba1c3d..c5ec0fe 100644 (file)
--- a/planetstack/core/xoslib/static/js/xoslib/xosHelper.js
+++ b/planetstack/core/xoslib/static/js/xoslib/xosHelper.js
@@ -4,6 +4,10 @@ function assert(outcome, description) {
     }
 }
 
+function templateFromId(id) {
+    return _.template($(id).html());
+}
+
 HTMLView = Marionette.ItemView.extend({
   render: function() {
       this.$el.append(this.options.html);
@@ -35,8 +39,9 @@ XOSApplication = Marionette.Application.extend({
          } else {
              $(this.successBoxId).show();
              $(this.successBoxId).html(_.template($(this.successTemplate).html())(result));
+             var that=this;
              $(this.successCloseButtonId).unbind().bind('click', function() {
-                 $(this.successBoxId).hide();
+                 $(that.successBoxId).hide();
              });
          }
     },
@@ -48,8 +53,9 @@ XOSApplication = Marionette.Application.extend({
          } else {
              $(this.errorBoxId).show();
              $(this.errorBoxId).html(_.template($(this.errorTemplate).html())(result));
+             var that=this;
              $(this.errorCloseButtonId).unbind().bind('click', function() {
-                 $(this.errorBoxId).hide();
+                 $(that.errorBoxId).hide();
              });
          }
     },
@@ -78,8 +84,6 @@ XOSApplication = Marionette.Application.extend({
             // We were passed the logMessageId of an informational message,
             // and the caller wants us to replace that message with our own.
             // i.e. replace an informational message with a success or an error.
-            console.log(result["infoMsgId"]);
-            console.log($("."+result["infoMsgId"]));
             $("#"+result["infoMsgId"]).replaceWith(newRow);
         } else {
             // Create a brand new log message rather than replacing one.
@@ -90,32 +94,36 @@ XOSApplication = Marionette.Application.extend({
     },
 
     hideLinkedItems: function(result) {
-        index=0;
+        var index=0;
         while (index<4) {\r
             this["linkedObjs" + (index+1)].empty();\r
             index = index + 1;\r
         }\r
     },\r
 \r
-    listViewShower: function(listViewName, regionName) {\r
+    listViewShower: function(listViewName, collection_name, regionName, title) {\r
         var app=this;\r
         return function() {\r
             app[regionName].show(new app[listViewName]);\r
             app.hideLinkedItems();\r
+            $("#contentTitle").html(templateFromId("#xos-title-list")({"title": title}));\r
+            $("#detail").show();\r
+            $("#tabs").hide();\r
         }\r
     },\r
 \r
-    detailShower: function(detailName, collection_name, regionName) {\r
+    detailShower: function(detailName, collection_name, regionName, title) {\r
         var app=this;\r
         showModelId = function(model_id) {\r
             showModel = function(model) {\r
-                                console.log(app);\r
                 detailViewClass = app[detailName];\r
                 detailView = new detailViewClass({model: model});\r
                 app[regionName].show(detailView);\r
                 detailView.showLinkedItems();\r
             }\r
 \r
+            $("#contentTitle").html(templateFromId("#xos-title-detail")({"title": title}));\r
+\r
             collection = xos[collection_name];\r
             model = collection.get(model_id);\r
             if (model == undefined) {\r
@@ -193,26 +201,66 @@ XOSDetailView = Marionette.ItemView.extend({
                 this.dirty = false;\r
             },
 
+            tabClick: function(tabId, regionName) {
+                    region = this.app[regionName];\r
+                    if (this.currentTabRegion != undefined) {\r
+                        this.currentTabRegion.$el.hide();\r
+                    }\r
+                    if (this.currentTabId != undefined) {\r
+                        $(this.currentTabId).removeClass('active');\r
+                    }\r
+                    this.currentTabRegion = region;\r
+                    this.currentTabRegion.$el.show();\r
+\r
+                    this.currentTabId = tabId;\r
+                    $(tabId).addClass('active');\r
+            },
+
+            showTabs: function(tabs) {
+                template = templateFromId("#xos-tabs-template", {tabs: tabs});
+                $("#tabs").html(template(tabs));
+                var that = this;
+
+                _.each(tabs, function(tab) {
+                    var regionName = tab["region"];
+                    var tabId = '#xos-nav-'+regionName;
+                    $(tabId).bind('click', function() { that.tabClick(tabId, regionName); });
+                });
+
+                $("#tabs").show();
+            },
+
             showLinkedItems: function() {
-                    index=0;\r
+                    tabs=[];
+
+                    tabs.push({name: "details", region: "detail"});
+
+                    var index=0;
                     for (relatedName in this.model.collection.relatedCollections) {\r
                         relatedField = this.model.collection.relatedCollections[relatedName];\r
+                        regionName = "linkedObjs" + (index+1);\r
 \r
                         relatedListViewClassName = relatedName + "ListView";\r
-                        if (this.app[relatedListViewClassName] == undefined) {\r
-                            console.log("warning: " + relatedListViewClassName + " not found");\r
-                        }\r
+                        assert(this.app[relatedListViewClassName] != undefined, relatedListViewClassName + " not found");\r
                         relatedListViewClass = this.app[relatedListViewClassName].extend({collection: xos[relatedName].filterBy(relatedField,this.model.id)});\r
-                        this.app["linkedObjs" + (index+1)].show(new relatedListViewClass());\r
+                        this.app[regionName].show(new relatedListViewClass());\r
+                        this.app[regionName].$el.hide();\r
+                        tabs.push({name: relatedName, region: regionName});\r
                         index = index + 1;\r
                     }\r
 \r
+                    console.log(index);\r
+\r
                     while (index<4) {\r
                         this.app["linkedObjs" + (index+1)].empty();\r
                         index = index + 1;\r
                     }\r
-              },
-});
+\r
+                    this.showTabs(tabs);\r
+                    this.tabClick('#xos-nav-detail', 'detail');\r
+              },\r
+\r
+});\r
 
 /* XOSItemView
       This is for items that will be displayed as table rows.

diff --git a/planetstack/core/xoslib/templates/xosAdmin.html b/planetstack/core/xoslib/templates/xosAdmin.html
index 8e4588c..57c024e 100644 (file)
--- a/planetstack/core/xoslib/templates/xosAdmin.html
+++ b/planetstack/core/xoslib/templates/xosAdmin.html
@@ -31,6 +31,23 @@
   </tr>
 </script>
 
+<script type="text/template" id="xos-tabs-template">
+  <ul class="xos-nav-list">
+  <% _.each(tabs, function(tab) { %>
+      <li class="xos-nav-item" id="xos-nav-<%= tab["region"] %>"><%= tab["name"] %></li>
+  <% }); %>
+  </ul>
+</script>
+
+<script type="text/template" id="xos-title-list">
+  <h3><%= title %></h3>
+</script>
+
+<script type="text/template" id="xos-title-detail">
+  <h3><%= title %></h3>
+</script>
+
+
 <script type="text/template" id="xos-navbutton">
   <li>
       <a href="<%= routeUrl %>">
@@ -43,7 +60,7 @@
 <!-- Deployment -->
 
 <script type="text/template" id="xosAdmin-deployment-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -66,7 +83,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-deployment-detail-template">
-  <h3>Detail View: Deployment</h3>
+  <h3 class="xos-detail-title">Detail View: Deployment</h3>
   <form>\r
   <table>\r
   <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
@@ -80,7 +97,7 @@
 <!-- Image -->
 
 <script type="text/template" id="xosAdmin-image-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -102,7 +119,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-image-detail-template">
-  <h3>Detail View: Image</h3>
+  <h3 class="xos-detail-title">Detail View: Image</h3>
   <form>\r
   <table>\r
   <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
@@ -116,7 +133,7 @@
 <!-- NetworkTemplate -->
 
 <script type="text/template" id="xosAdmin-networkTemplate-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -143,7 +160,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-networkTemplate-detail-template">
-  <h3>Detail View: NetworkTemplate</h3>
+  <h3 class="xos-detail-title">Detail View: NetworkTemplate</h3>
   <form>\r
   <table>\r
   <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
@@ -160,7 +177,7 @@
 <!-- Network -->
 
 <script type="text/template" id="xosAdmin-network-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -184,7 +201,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-network-detail-template">
-  <h3>Detail View: Network</h3>
+  <h3 class="xos-detail-title">Detail View: Network</h3>
   <form>\r
   <table>\r
   <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
@@ -200,7 +217,7 @@
 <!-- NetworkSliver -->
 
 <script type="text/template" id="xosAdmin-networkSliver-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -222,7 +239,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-networkSliver-detail-template">
-  <h3>Detail View: Network</h3>
+  <h3 class="xos-detail-title">Detail View: Network</h3>
   <form>\r
   <table>\r
   <tr><td>Network:</td><td><input type="text" name="network" value="<%= network %>"></td></tr>\r
@@ -237,7 +254,7 @@
 <!-- NetworkDeployment -->
 
 <script type="text/template" id="xosAdmin-networkDeployment-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -257,7 +274,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-networkDeployment-detail-template">
-  <h3>Detail View: Network</h3>
+  <h3 class="xos-detail-title">Detail View: Network</h3>
   <form>\r
   <table>\r
   <tr><td>Network:</td><td><input type="text" name="network" value="<%= network %>"></td></tr>\r
@@ -271,7 +288,7 @@
 <!-- Node -->
 
 <script type="text/template" id="xosAdmin-node-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -292,7 +309,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-node-detail-template">
-  <h3>Detail View: Node</h3>
+  <h3 class="xos-detail-title">Detail View: Node</h3>
   <form>\r
   <table>\r
   <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
@@ -306,7 +323,7 @@
 <!-- SliceRole -->
 
 <script type="text/template" id="xosAdmin-sliceRole-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -323,7 +340,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-sliceRole-detail-template">
-  <h3>Detail View: Service</h3>
+  <h3 class="xos-detail-title">Detail View: Service</h3>
   <form>\r
   <table>\r
   <tr><td>Role:</td><td><input type="text" name="role" value="<%= role %>"></td></tr>\r
@@ -335,7 +352,7 @@
 <!-- Service -->
 
 <script type="text/template" id="xosAdmin-service-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -360,7 +377,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-service-detail-template">
-  <h3>Detail View: Service</h3>
+  <h3 class="xos-detail-title">Detail View: Service</h3>
   <form>\r
   <table>\r
   <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
@@ -374,7 +391,7 @@
 <!-- Site -->
 
 <script type="text/template" id="xosAdmin-site-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -400,7 +417,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-site-detail-template">
-  <h3>Detail View: Site</h3>
+  <h3 class="xos-detail-title">Detail View: Site</h3>
   <form>\r
   <table>\r
   <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
@@ -414,7 +431,7 @@
 <!-- Slice -->
 
 <script type="text/template" id="xosAdmin-slice-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -444,7 +461,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-slice-detail-template">
-  <h3>Detail View: Slice</h3>
+  <h3 class="xos-detail-title">Detail View: Slice</h3>
   <form>\r
   <table>\r
   <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
@@ -460,7 +477,7 @@
 <!-- SliceDeployment -->
 
 <script type="text/template" id="xosAdmin-sliceDeployment-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -480,7 +497,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-sliceDeployment-detail-template">
-  <h3>Detail View: Slice Deployment</h3>
+  <h3 class="xos-detail-title">Detail View: Slice Deployment</h3>
   <form>\r
   <table>\r
   <tr><td>Slice:</td><td><input type="text" name="slice" value="<%= slice %>"></td></tr>\r
@@ -494,7 +511,7 @@
 <!-- SlicePrivilege -->
 
 <script type="text/template" id="xosAdmin-slicePrivilege-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -514,7 +531,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-slicePrivilege-detail-template">
-  <h3>Detail View: Slice Privilege</h3>
+  <h3 class="xos-detail-title">Detail View: Slice Privilege</h3>
   <form>\r
   <table>\r
   <tr><td>User:</td><td><input type="text" name="user" value="<%= user %>"></td></tr>\r
@@ -528,7 +545,7 @@
 <!-- Sliver -->
 
 <script type="text/template" id="xosAdmin-sliver-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -563,7 +580,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-sliver-detail-template">
-  <h3>Detail View: Sliver</h3>
+  <h3 class="xos-detail-title">Detail View: Sliver</h3>
   <form>\r
   <table>\r
   <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
@@ -580,7 +597,7 @@
 <!-- User -->
 
 <script type="text/template" id="xosAdmin-user-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -607,7 +624,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-user-detail-template">
-  <h3>Detail View: User</h3>
+  <h3 class="xos-detail-title">Detail View: User</h3>
   <form>\r
   <table>\r
   <tr><td>User Name:</td><td><input type="text" name="username" value="<%= username %>"></td></tr>\r
@@ -624,7 +641,7 @@
 <!-- UserDeployments -->
 
 <script type="text/template" id="xosAdmin-userDeployment-list-template">
-  <h3><%= title %></h3>
+  <h3 class="xos-list-title"><%= title %></h3>
   <table class="test-table">
   <thead><tr>
      <th>id</th>
@@ -645,7 +662,7 @@
 </script>
 
 <script type="text/template" id="xosAdmin-userDeployment-detail-template">
-  <h3>Detail View: UserDeployment</h3>
+  <h3 class="xos-detail-title">Detail View: UserDeployment</h3>
   <form>\r
   <table>\r
   <tr><td>User:</td><td><input type="text" name="user" value="<%= user %>"></td></tr>\r