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
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>
+</script>
+
diff --git a/planetstack/core/xoslib/static/js/sliceEditor.js b/planetstack/core/xoslib/static/js/sliceEditor.js
index 06575ae..c629944 100644
--- 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();
-
-SliceEditorApp.addRegions({
- sliceList: "#sliceEditorList",
- sliceDetail: "#sliceEditorDetail",
+
+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",
tagName: 'li',
@@ -22,21 +34,29 @@
}
}
+ /* create a new SliceDetailView and set the sliceDetail region to
+ display it.
+ */
+
var sliceDetailView = new SliceEditorApp.SliceDetailView({
model: this.model,
});
SliceEditorApp.sliceDetail.show(sliceDetailView);
},
});
+
+/* SliceListView: This displays a list of slice names.
+*/
SliceEditorApp.SliceListView = Marionette.CollectionView.extend({
tagName: "ul",
childView: SliceEditorApp.SliceListItemView,
- modelEvents: {"sync": "render"},
-
initialize: function() {
- this.dirty = false;
+ /* CollectionViews don't automatically listen for change events, but we
+ want to, so we pick up changes from the DetailView, and we pick up
+ changes from the server.
+ */
this.listenTo(this.collection, 'change', this._renderChildren);
},
@@ -50,6 +70,8 @@
},
});
+/* SliceDetailView: Display the slice and allow it to be edited */
+
SliceEditorApp.SliceDetailView = Marionette.ItemView.extend({
template: "#sliceeditor-sliceedit-template",
tagName: 'div',
@@ -57,6 +79,11 @@
events: {"click button.js-submit": "submitClicked",
"change input": "inputChanged"},
+ /* inputChanged is watching the onChange events of the input controls. We
+ do this to track when this view is 'dirty', so we can throw up a warning
+ if the user tries to change his slices without saving first.
+ */
+
inputChanged: function(e) {
this.dirty = true;
},
diff --git a/planetstack/core/xoslib/static/js/xosDeveloper.js b/planetstack/core/xoslib/static/js/xosDeveloper.js
index 9063518..68b9a58 100644
--- 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
+
view.
+
+
For an example that uses xoslib + datatables, see xosDeveloper_datatables.js
+
*/
+
+
DeveloperApp = new Marionette.Application();
DeveloperApp.addRegions({
mainRegion: "#developerView"
diff --git a/planetstack/core/xoslib/static/js/xosDeveloper_datatables.js b/planetstack/core/xoslib/static/js/xosDeveloper_datatables.js
new file mode 100644
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
+
view.
+
+
For an example that uses xoslib + marionette, see xosDeveloper.js
+
*/
+
+
function updateSliceTable(data) {
+
$('#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();
+});
+