From bb4961d71de56fa9c3423dd8837307948d8172b8 Mon Sep 17 00:00:00 2001
From: Scott Baker <smbaker@gmail.com>
Date: Mon, 14 Jul 2014 18:10:53 -0700
Subject: [PATCH] sliceEditor demo view

---
 .../core/xoslib/dashboards/sliceEditor.html   | 40 +++++++++
 .../core/xoslib/static/css/sliceEditor.css    |  1 +
 .../core/xoslib/static/js/sliceEditor.js      | 83 +++++++++++++++++++
 3 files changed, 124 insertions(+)
 create mode 100644 planetstack/core/xoslib/dashboards/sliceEditor.html
 create mode 100644 planetstack/core/xoslib/static/css/sliceEditor.css
 create mode 100644 planetstack/core/xoslib/static/js/sliceEditor.js

diff --git a/planetstack/core/xoslib/dashboards/sliceEditor.html b/planetstack/core/xoslib/dashboards/sliceEditor.html
new file mode 100644
index 0000000..bc3fa1b
--- /dev/null
+++ b/planetstack/core/xoslib/dashboards/sliceEditor.html
@@ -0,0 +1,40 @@
+<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.syphon.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>
+
+<link rel="stylesheet" type="text/css" href="{% static 'css/sliceEditor.css' %}" media="all">
+
+<script src="{{ STATIC_URL }}/js/xoslib/xos-backbone.js"></script>
+<script src="{{ STATIC_URL }}/js/sliceEditor.js"></script>
+
+<p>This is a demo of modifying objects using xoslib. Pick a slice in the list on
+the left. Then edit any of it's fields on the right, and press the (save)
+button.</p>
+
+<table class="table table-bordered"><tr><td valign=top>
+<div id="sliceEditorList">
+</div>
+</td>
+<td valign=top>
+<div id="sliceEditorDetail">
+</div>
+</td></tr></table>
+
+<script type="text/template" id="sliceeditor-listitem-template">
+  <%= name %>
+</script>
+
+<script type="text/template" id="sliceeditor-sliceedit-template">
+  <form>
+  <table>
+  <tr><td>Slice Name:</td><td><input type="text" name="name" value="<%= name %>" id="foo"></td></tr>
+  <tr><td>Description:</td><td><input type="text" name="description" value="<%= description %>"></td></tr>
+  <tr><td colspan=2><button class="btn js-submit">Save</button></td></tr>
+  </table>
+  </form>
+
+</script>
+
diff --git a/planetstack/core/xoslib/static/css/sliceEditor.css b/planetstack/core/xoslib/static/css/sliceEditor.css
new file mode 100644
index 0000000..6ef31c9
--- /dev/null
+++ b/planetstack/core/xoslib/static/css/sliceEditor.css
@@ -0,0 +1 @@
+.sliceeditor-listitem { cursor: pointer; }
diff --git a/planetstack/core/xoslib/static/js/sliceEditor.js b/planetstack/core/xoslib/static/js/sliceEditor.js
new file mode 100644
index 0000000..06575ae
--- /dev/null
+++ b/planetstack/core/xoslib/static/js/sliceEditor.js
@@ -0,0 +1,83 @@
+SliceEditorApp = new Marionette.Application();
+
+SliceEditorApp.addRegions({
+  sliceList: "#sliceEditorList",
+  sliceDetail: "#sliceEditorDetail",
+});
+
+SliceEditorApp.SliceListItemView = Marionette.ItemView.extend({
+  template: "#sliceeditor-listitem-template",
+  tagName: 'li',
+  className: 'sliceeditor-listitem',
+
+  events: {"click": "changeSlice"},
+
+  changeSlice: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (SliceEditorApp.sliceDetail.currentView && SliceEditorApp.sliceDetail.currentView.dirty) {
+            if (!confirm("discard current changes?")) {
+                return;
+            }
+        }
+
+        var sliceDetailView = new SliceEditorApp.SliceDetailView({
+            model: this.model,
+        });
+        SliceEditorApp.sliceDetail.show(sliceDetailView);
+  },
+});
+
+SliceEditorApp.SliceListView = Marionette.CollectionView.extend({
+  tagName: "ul",
+  childView: SliceEditorApp.SliceListItemView,
+
+  modelEvents: {"sync": "render"},
+
+  initialize: function() {
+      this.dirty = false;
+      this.listenTo(this.collection, 'change', this._renderChildren);
+  },
+
+  attachHtml: function(compositeView, childView, index) {
+      // The REST API will let admin users see everything. For the developer
+      // view we still want to hide slices we are not members of.
+      if (childView.model.get("sliceInfo").roles.length == 0) {
+          return;
+      }
+      SliceEditorApp.SliceListView.__super__.attachHtml(compositeView, childView, index);
+  },
+});
+
+SliceEditorApp.SliceDetailView = Marionette.ItemView.extend({
+    template: "#sliceeditor-sliceedit-template",
+    tagName: 'div',
+
+    events: {"click button.js-submit": "submitClicked",
+             "change input": "inputChanged"},
+
+    inputChanged: function(e) {
+        this.dirty = true;
+    },
+
+    submitClicked: function(e) {
+        e.preventDefault();
+        var data = Backbone.Syphon.serialize(this);
+        this.model.save(data);
+        this.dirty = false;
+    },
+});
+
+SliceEditorApp.on("start", function() {
+  var sliceListView = new SliceEditorApp.SliceListView({
+    collection: xos.slicesPlus
+  });
+  SliceEditorApp.sliceList.show(sliceListView);
+  xos.slicesPlus.startPolling();
+});
+
+$(document).ready(function(){
+  SliceEditorApp.start();
+});
+
-- 
2.43.0