Scott Baker | e41c908 | 2014-10-27 23:02:48 -0700 | [diff] [blame] | 1 | TestApp = new Marionette.Application(); |
| 2 | |
| 3 | TestApp.addRegions({ |
| 4 | deploymentList: "#deploymentList", |
| 5 | imageList: "#imageList", |
| 6 | networkTemplateList: "#networkTemplateList", |
| 7 | networkList: "#networkList", |
| 8 | nodeList: "#nodeList", |
| 9 | serviceList: "#serviceList", |
| 10 | siteList: "#siteList", |
| 11 | sliceList: "#sliceList", |
| 12 | sliverList: "#sliverList", |
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 13 | userList: "#userList", |
| 14 | detail: "#detail" |
Scott Baker | e41c908 | 2014-10-27 23:02:48 -0700 | [diff] [blame] | 15 | }); |
| 16 | |
| 17 | // ---- Deployment ---- |
| 18 | |
| 19 | TestApp.DeploymentListItemView = Marionette.ItemView.extend({ |
| 20 | template: '#test-deployment-listitem-template', |
| 21 | tagName: 'tr', |
| 22 | className: 'test-tablerow', |
| 23 | }); |
| 24 | |
| 25 | TestApp.DeploymentListView = Marionette.CompositeView.extend({ |
| 26 | childView: TestApp.DeploymentListItemView, |
| 27 | childViewContainer: 'tbody', |
| 28 | template: '#test-deployment-list-template', |
| 29 | |
| 30 | initialize: function() { |
| 31 | this.listenTo(this.collection, 'change', this._renderChildren) |
| 32 | }, |
| 33 | }); |
| 34 | |
Scott Baker | d044c8f | 2014-10-28 14:46:13 -0700 | [diff] [blame] | 35 | TestApp.hideError = function(result) { |
| 36 | $("#errorBox").hide(); |
| 37 | }; |
| 38 | |
| 39 | TestApp.showError = function(result) { |
| 40 | $("#errorBox").show(); |
| 41 | $("#errorBox").html(_.template($("#test-error-template").html())(result)); |
| 42 | $('#close-error-box').unbind().bind('click', function() { |
| 43 | $('#errorBox').hide(); |
| 44 | }); |
| 45 | }; |
| 46 | |
Scott Baker | e41c908 | 2014-10-27 23:02:48 -0700 | [diff] [blame] | 47 | TestApp.on("start", function() { |
Scott Baker | 6cea3a1 | 2014-10-28 15:06:54 -0700 | [diff] [blame^] | 48 | var objs = ['deployment', 'image', 'networkTemplate', 'network', 'node', 'service', 'site', 'slice', 'sliver', 'user']; |
Scott Baker | e41c908 | 2014-10-27 23:02:48 -0700 | [diff] [blame] | 49 | |
| 50 | for (var index in objs) { |
| 51 | name = objs[index]; |
| 52 | tr_template = '#test-' + name + '-listitem-template'; |
| 53 | table_template = '#test-' + name + '-list-template'; |
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 54 | detail_template = '#test-' + name + '-detail-template'; |
Scott Baker | e41c908 | 2014-10-27 23:02:48 -0700 | [diff] [blame] | 55 | collection_name = name + "s"; |
| 56 | region_name = name + "List"; |
| 57 | |
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 58 | detailClass = Marionette.ItemView.extend({ |
| 59 | template: detail_template,
|
| 60 | tagName: 'div',
|
| 61 |
|
| 62 | events: {"click button.js-submit": "submitClicked",
|
| 63 | "change input": "inputChanged"},
|
| 64 |
|
| 65 | /* inputChanged is watching the onChange events of the input controls. We
|
| 66 | do this to track when this view is 'dirty', so we can throw up a warning
|
| 67 | if the user tries to change his slices without saving first.
|
| 68 | */
|
| 69 |
|
| 70 | inputChanged: function(e) {
|
| 71 | this.dirty = true;
|
| 72 | },
|
| 73 |
|
Scott Baker | d044c8f | 2014-10-28 14:46:13 -0700 | [diff] [blame] | 74 | saveError: function(model, result, xhr) {
|
| 75 | TestApp.showError(result);
|
| 76 | },
|
| 77 |
|
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 78 | submitClicked: function(e) {
|
Scott Baker | d044c8f | 2014-10-28 14:46:13 -0700 | [diff] [blame] | 79 | TestApp.hideError();
|
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 80 | e.preventDefault();
|
| 81 | var data = Backbone.Syphon.serialize(this);
|
Scott Baker | d044c8f | 2014-10-28 14:46:13 -0700 | [diff] [blame] | 82 | var thisView = this;
|
| 83 | this.model.save(data, {error: function(model, result, xhr) { thisView.saveError(model, result, xhr); }});
|
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 84 | this.dirty = false;
|
| 85 | },
|
| 86 | }); |
| 87 | |
Scott Baker | e41c908 | 2014-10-27 23:02:48 -0700 | [diff] [blame] | 88 | itemViewClass = Marionette.ItemView.extend({ |
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 89 | detailClass: detailClass, |
Scott Baker | e41c908 | 2014-10-27 23:02:48 -0700 | [diff] [blame] | 90 | template: tr_template, |
| 91 | tagName: 'tr', |
| 92 | className: 'test-tablerow', |
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 93 | |
| 94 | events: {"click": "changeItem"}, |
| 95 |
|
| 96 | changeItem: function(e) {
|
Scott Baker | d044c8f | 2014-10-28 14:46:13 -0700 | [diff] [blame] | 97 | TestApp.hideError();
|
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 98 | e.preventDefault();
|
| 99 | e.stopPropagation();
|
| 100 |
|
| 101 | var detailView = new this.detailClass({
|
| 102 | model: this.model,
|
| 103 | });
|
| 104 | $('#detailBox').show();
|
| 105 | TestApp.detail.show(detailView);
|
| 106 | }, |
Scott Baker | e41c908 | 2014-10-27 23:02:48 -0700 | [diff] [blame] | 107 | }); |
| 108 | |
| 109 | listViewClass = Marionette.CompositeView.extend({ |
| 110 | childView: itemViewClass, |
| 111 | childViewContainer: 'tbody', |
| 112 | template: table_template, |
| 113 | collection: xos[collection_name], |
| 114 | |
| 115 | initialize: function() { |
| 116 | this.listenTo(this.collection, 'change', this._renderChildren) |
| 117 | }, |
| 118 | }); |
| 119 | |
| 120 | var listView = new listViewClass(); |
| 121 | |
| 122 | TestApp[region_name].show(listView); |
| 123 | xos[collection_name].startPolling(); |
| 124 | } |
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 125 | |
Scott Baker | d044c8f | 2014-10-28 14:46:13 -0700 | [diff] [blame] | 126 | $('#close-detail-view').unbind().bind('click', function() { |
Scott Baker | 3df4194 | 2014-10-28 12:44:13 -0700 | [diff] [blame] | 127 | $('#detailBox').hide(); |
| 128 | }); |
Scott Baker | e41c908 | 2014-10-27 23:02:48 -0700 | [diff] [blame] | 129 | }); |
| 130 | |
| 131 | $(document).ready(function(){ |
| 132 | TestApp.start();
|
| 133 | }); |
| 134 | |