planetstack/core/xoslib/static/js/test.js

   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",
  13     userList: "#userList",
  14     detail: "#detail"
  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
  35 TestApp.hideError = function(result) {
  36     $("#errorBox").hide();
  37     $("#successBox").hide();
  38 };
  39
  40 TestApp.showSuccess = function(result) {
  41      $("#successBox").show();
  42      $("#successBox").html(_.template($("#test-success-template").html())(result));
  43      $('#close-success-box').unbind().bind('click', function() {
  44          $('#successBox').hide();
  45      });
  46 };
  47
  48 TestApp.showError = function(result) {
  49      $("#errorBox").show();
  50      $("#errorBox").html(_.template($("#test-error-template").html())(result));
  51      $('#close-error-box').unbind().bind('click', function() {
  52          $('#errorBox').hide();
  53      });
  54 };
  55
  56 TestApp.on("start", function() {
  57      var objs = ['deployment', 'image', 'networkTemplate', 'network', 'node', 'service', 'site', 'slice', 'sliver', 'user'];
  58
  59      for (var index in objs) {
  60          name = objs[index];
  61          tr_template = '#test-' + name + '-listitem-template';
  62          table_template = '#test-' + name + '-list-template';
  63          detail_template = '#test-' + name + '-detail-template';
  64          collection_name = name + "s";
  65          region_name = name + "List";
  66
  67          detailClass = Marionette.ItemView.extend({
  68             template: detail_template,\r
  69             tagName: 'div',\r
  70 \r
  71             events: {"click button.js-submit": "submitClicked",\r
  72                      "change input": "inputChanged"},\r
  73 \r
  74             /* inputChanged is watching the onChange events of the input controls. We\r
  75                do this to track when this view is 'dirty', so we can throw up a warning\r
  76                if the user tries to change his slices without saving first.\r
  77             */\r
  78 \r
  79             inputChanged: function(e) {\r
  80                 this.dirty = true;\r
  81             },\r
  82 \r
  83             saveError: function(model, result, xhr) {\r
  84                 TestApp.showError(result);\r
  85             },\r
  86 \r
  87             saveSuccess: function(model, result, xhr) {\r
  88                 TestApp.showSuccess({status: xhr.xhr.status, statusText: xhr.xhr.statusText});\r
  89             },\r
  90 \r
  91             submitClicked: function(e) {\r
  92                 TestApp.hideError();\r
  93                 e.preventDefault();\r
  94                 var data = Backbone.Syphon.serialize(this);\r
  95                 var thisView = this;\r
  96                 this.model.save(data, {error: function(model, result, xhr) { thisView.saveError(model, result, xhr); },\r
  97                                        success: function(model, result, xhr) { thisView.saveSuccess(model, result, xhr); }});\r
  98                 this.dirty = false;\r
  99             },\r
 100          });
 101
 102          itemViewClass = Marionette.ItemView.extend({
 103              detailClass: detailClass,
 104              template: tr_template,
 105              tagName: 'tr',
 106              className: 'test-tablerow',
 107
 108              events: {"click": "changeItem"},
 109 \r
 110              changeItem: function(e) {\r
 111                     TestApp.hideError();\r
 112                     e.preventDefault();\r
 113                     e.stopPropagation();\r
 114 \r
 115                     var detailView = new this.detailClass({\r
 116                         model: this.model,\r
 117                     });\r
 118                     $('#detailBox').show();\r
 119                     TestApp.detail.show(detailView);\r
 120               },
 121          });
 122
 123          listViewClass = Marionette.CompositeView.extend({
 124              childView: itemViewClass,
 125              childViewContainer: 'tbody',
 126              template: table_template,
 127              collection: xos[collection_name],
 128
 129              initialize: function() {
 130                  this.listenTo(this.collection, 'change', this._renderChildren)
 131              },
 132          });
 133
 134          var listView = new listViewClass();
 135
 136          TestApp[region_name].show(listView);
 137          xos[collection_name].fetch(); //startPolling();
 138      }
 139
 140      $('#close-detail-view').unbind().bind('click', function() {
 141          $('#detailBox').hide();
 142      });
 143 });
 144
 145 $(document).ready(function(){
 146   TestApp.start();\r
 147 });
 148