From ac868ac4bff741431be65c27e4dd9627f05ce6d9 Mon Sep 17 00:00:00 2001 From: Scott Baker Date: Tue, 15 Jul 2014 10:29:17 -0700 Subject: [PATCH] remove newlines and add comments --- .../dashboards/xosDeveloper_datatables.html | 16 ++++++++ .../core/xoslib/static/js/sliceEditor.js | 41 +++++++++++++++---- .../core/xoslib/static/js/xosDeveloper.js | 8 +++- .../static/js/xosDeveloper_datatables.js | 41 +++++++++++++++++++ 4 files changed, 98 insertions(+), 8 deletions(-) create mode 100644 planetstack/core/xoslib/dashboards/xosDeveloper_datatables.html create mode 100644 planetstack/core/xoslib/static/js/xosDeveloper_datatables.js 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 @@ + + + + + + + + + +
+
+ + + 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 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 @@ SliceEditorApp.SliceListItemView = Marionette.ItemView.extend({ } } + /* 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 @@ SliceEditorApp.SliceListView = Marionette.CollectionView.extend({ }, }); +/* 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 @@ SliceEditorApp.SliceDetailView = Marionette.ItemView.extend({ 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( '
' ); + 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(['' + slicename + '', + 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(); +}); + -- 2.43.0