detail view
diff --git a/planetstack/core/xoslib/static/css/test.css b/planetstack/core/xoslib/static/css/test.css
index 3444fdb..157f2a8 100644
--- a/planetstack/core/xoslib/static/css/test.css
+++ b/planetstack/core/xoslib/static/css/test.css
@@ -2,3 +2,11 @@
border: 1px solid black;
}
+#detailBox {
+ position: fixed;
+ top: 1em;
+ right: 1em;
+ border: 1px;
+ background-color: #f0f0f0;
+}
+
diff --git a/planetstack/core/xoslib/static/js/test.js b/planetstack/core/xoslib/static/js/test.js
index bc7f955..7a1106c 100644
--- a/planetstack/core/xoslib/static/js/test.js
+++ b/planetstack/core/xoslib/static/js/test.js
@@ -10,7 +10,8 @@
siteList: "#siteList",
sliceList: "#sliceList",
sliverList: "#sliverList",
- userList: "#userList"
+ userList: "#userList",
+ detail: "#detail"
});
// ---- Deployment ----
@@ -38,13 +39,52 @@
name = objs[index];
tr_template = '#test-' + name + '-listitem-template';
table_template = '#test-' + name + '-list-template';
+ detail_template = '#test-' + name + '-detail-template';
collection_name = name + "s";
region_name = name + "List";
+ detailClass = Marionette.ItemView.extend({
+ template: detail_template,
+ tagName: 'div',
+
+ 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;
+ },
+
+ submitClicked: function(e) {
+ e.preventDefault();
+ var data = Backbone.Syphon.serialize(this);
+ this.model.save(data);
+ this.dirty = false;
+ },
+ });
+
itemViewClass = Marionette.ItemView.extend({
+ detailClass: detailClass,
template: tr_template,
tagName: 'tr',
className: 'test-tablerow',
+
+ events: {"click": "changeItem"},
+
+ changeItem: function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ var detailView = new this.detailClass({
+ model: this.model,
+ });
+ $('#detailBox').show();
+ TestApp.detail.show(detailView);
+ },
});
listViewClass = Marionette.CompositeView.extend({
@@ -63,6 +103,12 @@
TestApp[region_name].show(listView);
xos[collection_name].startPolling();
}
+
+ $('#close-detail-view').bind('click', function() {
+ $('#detailBox').hide();
+ });
+
+ $('#detailBox').hide();
});
$(document).ready(function(){