detail view

diff --git a/planetstack/core/xoslib/dashboards/test.html b/planetstack/core/xoslib/dashboards/test.html
index f176ecc..9eb005a 100644 (file)
--- a/planetstack/core/xoslib/dashboards/test.html
+++ b/planetstack/core/xoslib/dashboards/test.html
@@ -48,6 +48,13 @@
 <div id="sliverList">
 </div>
 
+<div id="detailBox">
+<button id="close-detail-view">Close Detail View</button>
+<div id="detail"></div>\r
+<div id="linkedObjs1"></div>
+<div id="linkedObjs2"></div>
+</div>
+
 <!-- Deployment -->
 
 <script type="text/template" id="test-deployment-list-template">
@@ -72,6 +79,18 @@
   <td><%= sites.length %></td>
 </script>
 
+<script type="text/template" id="test-deployment-detail-template">
+  <h3>Detail View: Deployment</h3>
+  <form>\r
+  <table>\r
+  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
+  <tr><td>Backend:</td><td><input type="text" name="backend_type" value="<%= backend_type %>"></td></tr>\r
+  <tr><td>Admin Tenant:</td><td><input type="text" name="admin_tenant" value="<%= admin_tenant %>"></td></tr>\r
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>\r
+  </table>\r
+  </form>\r
+</script>
+
 <!-- Image -->
 
 <script type="text/template" id="test-image-list-template">
@@ -87,7 +106,6 @@
   </table>
 </script>
 
-
 <script type="text/template" id="test-image-listitem-template">
   <td><%= id %></td>
   <td><%= name %></td>
@@ -96,6 +114,18 @@
   <td><%= path %></td>
 </script>
 
+<script type="text/template" id="test-image-detail-template">
+  <h3>Detail View: Image</h3>
+  <form>\r
+  <table>\r
+  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
+  <tr><td>Disk Format:</td><td><input type="text" name="backend_type" value="<%= disk_format %>"></td></tr>\r
+  <tr><td>Container Format:</td><td><input type="text" name="admin_tenant" value="<%= container_format %>"></td></tr>\r
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>\r
+  </table>\r
+  </form>\r
+</script>
+
 <!-- NetworkTemplate -->
 
 <script type="text/template" id="test-networkTemplate-list-template">
@@ -124,6 +154,21 @@
   <td><%= sharedNetworkId %></td>
 </script>
 
+<script type="text/template" id="test-networkTemplate-detail-template">
+  <h3>Detail View: NetworkTemplate</h3>
+  <form>\r
+  <table>\r
+  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
+  <tr><td>description:</td><td><input type="text" name="description" value="<%= description %>"></td></tr>\r
+  <tr><td>Visibility:</td><td><input type="text" name="visibility" value="<%= visibility %>"></td></tr>\r
+  <tr><td>Translation:</td><td><input type="text" name="translation" value="<%= translation %>"></td></tr>\r
+  <tr><td>Shared Network Name:</td><td><input type="text" name="sharedNetworkName" value="<%= sharedNetworkName %>"></td></tr>\r
+  <tr><td>Shared Network Id:</td><td><input type="text" name="sharedNetworkId" value="<%= sharedNetworkId %>"></td></tr>\r
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>\r
+  </table>\r
+  </form>\r
+</script>
+
 <!-- Network -->
 
 <script type="text/template" id="test-network-list-template">
@@ -150,6 +195,20 @@
   <td><%= owner %></td>
 </script>
 
+<script type="text/template" id="test-network-detail-template">
+  <h3>Detail View: Network</h3>
+  <form>\r
+  <table>\r
+  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
+  <tr><td>Template:</td><td><input type="text" name="template" value="<%= template %>"></td></tr>\r
+  <tr><td>Ports:</td><td><input type="text" name="ports" value="<%= ports %>"></td></tr>\r
+  <tr><td>Labels:</td><td><input type="text" name="labels" value="<%= labels %>"></td></tr>\r
+  <tr><td>Owner:</td><td><input type="text" name="owner" value="<%= owner %>"></td></tr>\r
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>\r
+  </table>\r
+  </form>\r
+</script>
+
 <!-- Node -->
 
 <script type="text/template" id="test-node-list-template">
@@ -172,6 +231,18 @@
   <td><%= deployment %></td>
 </script>
 
+<script type="text/template" id="test-node-detail-template">
+  <h3>Detail View: Node</h3>
+  <form>\r
+  <table>\r
+  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
+  <tr><td>Site:</td><td><input type="text" name="site" value="<%= site %>"></td></tr>\r
+  <tr><td>Deployment:</td><td><input type="text" name="deployment" value="<%= deployment %>"></td></tr>\r
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>\r
+  </table>\r
+  </form>\r
+</script>
+
 <!-- Service -->
 
 <script type="text/template" id="test-service-list-template">
@@ -198,6 +269,18 @@
   <td><%= published %></td>
 </script>
 
+<script type="text/template" id="test-service-detail-template">
+  <h3>Detail View: Service</h3>
+  <form>\r
+  <table>\r
+  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
+  <tr><td>description:</td><td><input type="text" name="description" value="<%= description %>"></td></tr>\r
+  <tr><td>Version Number:</td><td><input type="text" name="versionNumber" value="<%= versionNumber %>"></td></tr>\r
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>\r
+  </table>\r
+  </form>\r
+</script>
+
 <!-- Site -->
 
 <script type="text/template" id="test-site-list-template">
@@ -226,6 +309,18 @@
   <td><%= abbreviated_name %></td>
 </script>
 
+<script type="text/template" id="test-site-detail-template">
+  <h3>Detail View: Site</h3>
+  <form>\r
+  <table>\r
+  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
+  <tr><td>url:</td><td><input type="text" name="site_url" value="<%= site_url %>"></td></tr>\r
+  <tr><td>login_base:</td><td><input type="text" name="login_base" value="<%= login_base %>"></td></tr>\r
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>\r
+  </table>\r
+  </form>\r
+</script>
+
 <!-- Slice -->
 
 <script type="text/template" id="test-slice-list-template">
@@ -245,7 +340,6 @@
   </table>
 </script>
 
-
 <script type="text/template" id="test-slice-listitem-template">
   <td><%= id %></td>
   <td><%= name %></td>
@@ -258,6 +352,20 @@
   <td><%= service %></td>
 </script>
 
+<script type="text/template" id="test-slice-detail-template">
+  <h3>Detail View: Slice</h3>
+  <form>\r
+  <table>\r
+  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
+  <tr><td>Enabled:</td><td><input type="checkbox" name="enabled" <% if (enabled) print("checked"); %>></td></tr>\r
+  <tr><td>Description:</td><td><input type="text" name="description" value="<%= description %>"></td></tr>\r
+  <tr><td>Url:</td><td><input type="text" name="slice_url" value="<%= slice_url %>"></td></tr>\r
+  <tr><td>Max Slivers:</td><td><input type="text" name="max_slivers" value="<%= max_slivers %>"></td></tr>\r
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>\r
+  </table>\r
+  </form>\r
+</script>
+
 <!-- Sliver -->
 
 <script type="text/template" id="test-sliver-list-template">
@@ -294,5 +402,20 @@
   <td><%= userData %></td>
 </script>
 
+<script type="text/template" id="test-sliver-detail-template">
+  <h3>Detail View: Sliver</h3>
+  <form>\r
+  <table>\r
+  <tr><td>Name:</td><td><input type="text" name="name" value="<%= name %>"></td></tr>\r
+  <tr><td>instance_id:</td><td><input type="text" name="instance_id" value="<%= instance_id %>"></td></tr>\r
+  <tr><td>instance_name:</td><td><input type="text" name="instance_name" value="<%= instance_name %>"></td></tr>\r
+  <tr><td>Image:</td><td><input type="text" name="image" value="<%= image %>"></td></tr>\r
+  <tr><td>Creator:</td><td><input type="text" name="creator" value="<%= creator %>"></td></tr>\r
+  <tr><td>Slice:</td><td><input type="text" name="slice" value="<%= slice %>"></td></tr>\r
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>\r
+  </table>\r
+  </form>\r
+</script>
+
 </script>
 

diff --git a/planetstack/core/xoslib/static/css/test.css b/planetstack/core/xoslib/static/css/test.css
index 3444fdb..157f2a8 100644 (file)
--- a/planetstack/core/xoslib/static/css/test.css
+++ b/planetstack/core/xoslib/static/css/test.css
@@ -2,3 +2,11 @@
     border: 1px solid black;
 }
 
+#detailBox {
+    position: fixed;
+    top: 1em;
+    right: 1em;
+    border: 1px;
+    background-color: #f0f0f0;
+}
+

diff --git a/planetstack/core/xoslib/static/js/test.js b/planetstack/core/xoslib/static/js/test.js
index bc7f955..7a1106c 100644 (file)
--- a/planetstack/core/xoslib/static/js/test.js
+++ b/planetstack/core/xoslib/static/js/test.js
@@ -10,7 +10,8 @@ TestApp.addRegions({
     siteList: "#siteList",
     sliceList: "#sliceList",
     sliverList: "#sliverList",
-    userList: "#userList"
+    userList: "#userList",
+    detail: "#detail"
 });
 
 // ---- Deployment ----
@@ -38,13 +39,52 @@ TestApp.on("start", function() {
          name = objs[index];
          tr_template = '#test-' + name + '-listitem-template';
          table_template = '#test-' + name + '-list-template';
+         detail_template = '#test-' + name + '-detail-template';
          collection_name = name + "s";
          region_name = name + "List";
 
+         detailClass = Marionette.ItemView.extend({
+            template: detail_template,\r
+            tagName: 'div',\r
+\r
+            events: {"click button.js-submit": "submitClicked",\r
+                     "change input": "inputChanged"},\r
+\r
+            /* inputChanged is watching the onChange events of the input controls. We\r
+               do this to track when this view is 'dirty', so we can throw up a warning\r
+               if the user tries to change his slices without saving first.\r
+            */\r
+\r
+            inputChanged: function(e) {\r
+                this.dirty = true;\r
+            },\r
+\r
+            submitClicked: function(e) {\r
+                e.preventDefault();\r
+                var data = Backbone.Syphon.serialize(this);\r
+                this.model.save(data);\r
+                this.dirty = false;\r
+            },\r
+         });
+
          itemViewClass = Marionette.ItemView.extend({
+             detailClass: detailClass,
              template: tr_template,
              tagName: 'tr',
              className: 'test-tablerow',
+
+             events: {"click": "changeItem"},
+\r
+             changeItem: function(e) {\r
+                    e.preventDefault();\r
+                    e.stopPropagation();\r
+\r
+                    var detailView = new this.detailClass({\r
+                        model: this.model,\r
+                    });\r
+                    $('#detailBox').show();\r
+                    TestApp.detail.show(detailView);\r
+              },
          });
 
          listViewClass = Marionette.CompositeView.extend({
@@ -63,6 +103,12 @@ TestApp.on("start", function() {
          TestApp[region_name].show(listView);
          xos[collection_name].startPolling();
      }
+
+     $('#close-detail-view').bind('click', function() {
+         $('#detailBox').hide();
+     });
+
+     $('#detailBox').hide();
 });
 
 $(document).ready(function(){