sliceEditor demo view

[plstackapi.git] / planetstack / core / xoslib / static / js / sliceEditor.js

diff --git a/planetstack/core/xoslib/static/js/sliceEditor.js b/planetstack/core/xoslib/static/js/sliceEditor.js
new file mode 100644 (file)
index 0000000..06575ae
--- /dev/null
+++ b/planetstack/core/xoslib/static/js/sliceEditor.js
@@ -0,0 +1,83 @@
+SliceEditorApp = new Marionette.Application();
+\r
+SliceEditorApp.addRegions({\r
+  sliceList: "#sliceEditorList",\r
+  sliceDetail: "#sliceEditorDetail",\r
+});
+
+SliceEditorApp.SliceListItemView = Marionette.ItemView.extend({
+  template: "#sliceeditor-listitem-template",\r
+  tagName: 'li',\r
+  className: 'sliceeditor-listitem',\r
+\r
+  events: {"click": "changeSlice"},\r
+\r
+  changeSlice: function(e) {\r
+        e.preventDefault();\r
+        e.stopPropagation();\r
+\r
+        if (SliceEditorApp.sliceDetail.currentView && SliceEditorApp.sliceDetail.currentView.dirty) {\r
+            if (!confirm("discard current changes?")) {\r
+                return;\r
+            }\r
+        }\r
+\r
+        var sliceDetailView = new SliceEditorApp.SliceDetailView({\r
+            model: this.model,\r
+        });\r
+        SliceEditorApp.sliceDetail.show(sliceDetailView);\r
+  },\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
+      this.listenTo(this.collection, 'change', this._renderChildren);\r
+  },\r
+\r
+  attachHtml: function(compositeView, childView, index) {\r
+      // The REST API will let admin users see everything. For the developer\r
+      // view we still want to hide slices we are not members of.\r
+      if (childView.model.get("sliceInfo").roles.length == 0) {\r
+          return;\r
+      }\r
+      SliceEditorApp.SliceListView.__super__.attachHtml(compositeView, childView, index);\r
+  },\r
+});\r
+\r
+SliceEditorApp.SliceDetailView = Marionette.ItemView.extend({\r
+    template: "#sliceeditor-sliceedit-template",\r
+    tagName: 'div',\r
+\r
+    events: {"click button.js-submit": "submitClicked",\r
+             "change input": "inputChanged"},\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
+});\r
+
+SliceEditorApp.on("start", function() {
+  var sliceListView = new SliceEditorApp.SliceListView({
+    collection: xos.slicesPlus\r
+  });\r
+  SliceEditorApp.sliceList.show(sliceListView);\r
+  xos.slicesPlus.startPolling();\r
+});
+
+$(document).ready(function(){
+  SliceEditorApp.start();
+});
+