remove newlines and add comments

diff --git a/planetstack/core/xoslib/dashboards/xosDeveloper_datatables.html b/planetstack/core/xoslib/dashboards/xosDeveloper_datatables.html
new file mode 100644 (file)
index 0000000..a058ba6
--- /dev/null
+++ b/planetstack/core/xoslib/dashboards/xosDeveloper_datatables.html
@@ -0,0 +1,16 @@
+<script src="{{ STATIC_URL }}/js/vendor/underscore-min.js"></script>
+<script src="{{ STATIC_URL }}/js/vendor/backbone.js"></script>
+<script src="{{ STATIC_URL }}/js/vendor/backbone.wreqr.js"></script>
+<script src="{{ STATIC_URL }}/js/vendor/backbone.babysitter.js"></script>
+<script src="{{ STATIC_URL }}/js/vendor/backbone.marionette.js"></script>
+
+<script src="{{ STATIC_URL }}/js/xoslib/xos-backbone.js"></script>
+<script src="{{ STATIC_URL }}/js/xosDeveloper_datatables.js"></script>
+
+<div id="developerView">
+</div>
+
+<script type="text/template" id="developer-slicedetail-template">
+  <td><a href="http://{{request.get_host}}/admin/core/slice/<%= id %>/"><%= name %></a></td><td><%= sliceInfo.roles[0] %></td><td><%= sliceInfo.sliverCount %></td><td><%= sliceInfo.siteCount %></td>\r
+</script>\r
+

diff --git a/planetstack/core/xoslib/static/js/sliceEditor.js b/planetstack/core/xoslib/static/js/sliceEditor.js
index 06575ae..c629944 100644 (file)
--- a/planetstack/core/xoslib/static/js/sliceEditor.js
+++ b/planetstack/core/xoslib/static/js/sliceEditor.js
@@ -1,10 +1,22 @@
+/* This is a demo of using xoslib with Marionette
+
+   The main window is split into two halves. The left half has a CollectionView
+   (SliceListView) that lists all slices the user has access to. The right half
+   has an ItemView (SliceDetailView) that allows the user to edit the
+   name and description of a slice, as well as a <Save> button to save it.
+*/
+
 SliceEditorApp = new Marionette.Application();
-\r
-SliceEditorApp.addRegions({\r
-  sliceList: "#sliceEditorList",\r
-  sliceDetail: "#sliceEditorDetail",\r
+
+SliceEditorApp.addRegions({
+  sliceList: "#sliceEditorList",
+  sliceDetail: "#sliceEditorDetail",
 });
 
+/* SliceListItemView: This is the item view that is used by SliceListView to
+   display slice names.
+*/
+
 SliceEditorApp.SliceListItemView = Marionette.ItemView.extend({
   template: "#sliceeditor-listitem-template",\r
   tagName: 'li',\r
@@ -22,21 +34,29 @@ SliceEditorApp.SliceListItemView = Marionette.ItemView.extend({
             }\r
         }\r
 \r
+        /* create a new SliceDetailView and set the sliceDetail region to\r
+           display it.\r
+        */\r
+\r
         var sliceDetailView = new SliceEditorApp.SliceDetailView({\r
             model: this.model,\r
         });\r
         SliceEditorApp.sliceDetail.show(sliceDetailView);\r
   },\r
 });\r
+\r
+/* SliceListView: This displays a list of slice names.\r
+*/\r
 
 SliceEditorApp.SliceListView = Marionette.CollectionView.extend({
   tagName: "ul",\r
   childView: SliceEditorApp.SliceListItemView,\r
 \r
-  modelEvents: {"sync": "render"},\r
-\r
   initialize: function() {\r
-      this.dirty = false;\r
+      /* CollectionViews don't automatically listen for change events, but we\r
+         want to, so we pick up changes from the DetailView, and we pick up\r
+         changes from the server.\r
+      */\r
       this.listenTo(this.collection, 'change', this._renderChildren);\r
   },\r
 \r
@@ -50,6 +70,8 @@ SliceEditorApp.SliceListView = Marionette.CollectionView.extend({
   },\r
 });\r
 \r
+/* SliceDetailView: Display the slice and allow it to be edited */\r
+\r
 SliceEditorApp.SliceDetailView = Marionette.ItemView.extend({\r
     template: "#sliceeditor-sliceedit-template",\r
     tagName: 'div',\r
@@ -57,6 +79,11 @@ SliceEditorApp.SliceDetailView = Marionette.ItemView.extend({
     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

diff --git a/planetstack/core/xoslib/static/js/xosDeveloper.js b/planetstack/core/xoslib/static/js/xosDeveloper.js
index 9063518..68b9a58 100644 (file)
--- a/planetstack/core/xoslib/static/js/xosDeveloper.js
+++ b/planetstack/core/xoslib/static/js/xosDeveloper.js
@@ -1,4 +1,10 @@
-DeveloperApp = new Marionette.Application();
+/* This is an example that uses xoslib + marionette to display the developer
+\r   view.
+\r
+\r   For an example that uses xoslib + datatables, see xosDeveloper_datatables.js
+\r*/
+\r
+\rDeveloperApp = new Marionette.Application();
 \r
 DeveloperApp.addRegions({\r
   mainRegion: "#developerView"\r

diff --git a/planetstack/core/xoslib/static/js/xosDeveloper_datatables.js b/planetstack/core/xoslib/static/js/xosDeveloper_datatables.js
new file mode 100644 (file)
index 0000000..6da60da
--- /dev/null
+++ b/planetstack/core/xoslib/static/js/xosDeveloper_datatables.js
@@ -0,0 +1,41 @@
+/* This is an example that uses xoslib + datatables to display the developer
+\r   view.
+\r
+\r   For an example that uses xoslib + marionette, see xosDeveloper.js
+\r*/
+\r
+\rfunction updateSliceTable(data) {
+\r    $('#developerView').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="dynamicusersliceinfo"></table>' );
+    var actualEntries = [];
+
+    for (rowkey in data.models) {
+        row = data.models[rowkey];
+        slicename = row.get("name");
+        sliceid = row.get("id");
+        role = row.get("sliceInfo").roles[0] || "";
+        slivercount = row.get("sliceInfo").sliverCount;
+        sitecount = row.get("sliceInfo").siteCount;
+        actualEntries.push(['<a href="/admin/core/slice/' + sliceid + '">' + slicename + '</a>',
+                            role, slivercount, sitecount]);
+    }
+    oTable = $('#dynamicusersliceinfo').dataTable( {
+        "bJQueryUI": true,
+        "aaData":  actualEntries ,
+        "bStateSave": true,
+        "aoColumns": [
+            { "sTitle": "Slice" },
+            { "sTitle": "Privilege" , sClass: "alignCenter"},
+            { "sTitle": "Number of Slivers" , sClass: "alignCenter"},
+            { "sTitle": "Number of Sites" , sClass: "alignCenter"},
+        ]
+    } );
+}
+
+$(document).ready(function(){
+    xos.slicesPlus.on("change", function() { console.log("change"); updateSliceTable(xos.slicesPlus); });
+    xos.slicesPlus.on("remove", function() { console.log("sort"); updateSliceTable(xos.slicesPlus); });
+    xos.slicesPlus.on("sort", function() { console.log("sort"); updateSliceTable(xos.slicesPlus); });
+
+    xos.slicesPlus.startPolling();
+});
+