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     linkedObjs1: "#linkedObjs1",
  16     linkedObjs2: "#linkedObjs2",
  17     linkedObjs3: "#linkedObjs3",
  18     linkedObjs4: "#linkedObjs4"
  19 });
  20
  21 TestApp.hideError = function(result) {
  22     $("#errorBox").hide();
  23     $("#successBox").hide();
  24 };
  25
  26 TestApp.showSuccess = function(result) {
  27      $("#successBox").show();
  28      $("#successBox").html(_.template($("#test-success-template").html())(result));
  29      $('#close-success-box').unbind().bind('click', function() {
  30          $('#successBox').hide();
  31      });
  32 };
  33
  34 TestApp.showError = function(result) {
  35      $("#errorBox").show();
  36      $("#errorBox").html(_.template($("#test-error-template").html())(result));
  37      $('#close-error-box').unbind().bind('click', function() {
  38          $('#errorBox').hide();
  39      });
  40 };
  41
  42 idToName = function(id, collectionName, fieldName) {
  43     linkedObject = xos[collectionName].get(id);
  44     if (linkedObject == undefined) {
  45         return "#" + id;
  46     } else {
  47         return linkedObject.attributes[fieldName];
  48     }
  49 };
  50
  51 idToOptions = function(id, collectionName, fieldName) {
  52     result=""
  53     for (index in xos[collectionName].models) {
  54         linkedObject = xos[collectionName].models[index];
  55         linkedId = linkedObject["id"];
  56         linkedName = linkedObject.attributes[fieldName];
  57         if (linkedId == id) {
  58             selected = " selected";
  59         } else {
  60             selected = "";
  61         }
  62         result = result + '<option value="' + linkedId + '"' + selected + '>' + linkedName + '</option>';
  63     }
  64     return result;
  65 };
  66
  67 idToSelect = function(variable, id, collectionName, fieldName) {
  68     result = '<select name="' + variable + '">' +
  69              idToOptions(id, collectionName, fieldName) +
  70              '</select>';
  71     return result;
  72 }
  73
  74 TestApp.on("start", function() {
  75      var objs = ['deployment', 'image', 'networkTemplate', 'network', 'networkSliver', 'networkDeployment', 'node', 'service', 'site', 'slice', 'sliceDeployment', 'slicePrivilege', 'sliver', 'user', 'sliceRole', 'userDeployment'];
  76
  77      for (var index in objs) {
  78          name = objs[index];
  79          tr_template = '#xosAdmin-' + name + '-listitem-template';
  80          table_template = '#xosAdmin-' + name + '-list-template';
  81          detail_template = '#xosAdmin-' + name + '-detail-template';
  82          collection_name = name + "s";
  83          region_name = name + "List";
  84
  85          detailClass = Marionette.ItemView.extend({
  86             template: detail_template,\r
  87             tagName: 'div',\r
  88 \r
  89             events: {"click button.js-submit": "submitClicked",\r
  90                      "change input": "inputChanged"},\r
  91 \r
  92             /* inputChanged is watching the onChange events of the input controls. We\r
  93                do this to track when this view is 'dirty', so we can throw up a warning\r
  94                if the user tries to change his slices without saving first.\r
  95             */\r
  96 \r
  97             inputChanged: function(e) {\r
  98                 this.dirty = true;\r
  99             },\r
 100 \r
 101             saveError: function(model, result, xhr) {\r
 102                 TestApp.showError(result);\r
 103             },\r
 104 \r
 105             saveSuccess: function(model, result, xhr) {\r
 106                 TestApp.showSuccess({status: xhr.xhr.status, statusText: xhr.xhr.statusText});\r
 107             },\r
 108 \r
 109             submitClicked: function(e) {\r
 110                 TestApp.hideError();\r
 111                 e.preventDefault();\r
 112                 var data = Backbone.Syphon.serialize(this);\r
 113                 var thisView = this;\r
 114                 this.model.save(data, {error: function(model, result, xhr) { thisView.saveError(model, result, xhr); },\r
 115                                        success: function(model, result, xhr) { thisView.saveSuccess(model, result, xhr); }});\r
 116                 this.dirty = false;\r
 117             },\r
 118          });
 119
 120          itemViewClass = Marionette.ItemView.extend({
 121              detailClass: detailClass,
 122              template: tr_template,
 123              tagName: 'tr',
 124              className: 'test-tablerow',
 125
 126              events: {"click": "changeItem"},
 127 \r
 128              changeItem: function(e) {\r
 129                     TestApp.hideError();\r
 130                     e.preventDefault();\r
 131                     e.stopPropagation();\r
 132 \r
 133                     index=0;\r
 134                     for (relatedName in this.model.collection.relatedCollections) {\r
 135                         relatedField = this.model.collection.relatedCollections[relatedName];\r
 136 \r
 137                         relatedListViewClassName = relatedName + "ListView";\r
 138                         if (TestApp[relatedListViewClassName] == undefined) {\r
 139                             console.log("warning: " + relatedListViewClassName + " not found");\r
 140                         }\r
 141                         relatedListViewClass = TestApp[relatedListViewClassName].extend({collection: xos[relatedName].filterBy(relatedField,this.model.id)});\r
 142                         TestApp["linkedObjs" + (index+1)].show(new relatedListViewClass());\r
 143                         index = index + 1;\r
 144                     }\r
 145 \r
 146                     while (index<4) {\r
 147                         TestApp["linkedObjs" + (index+1)].empty();\r
 148                         index = index + 1;\r
 149                     }\r
 150 \r
 151                     var detailView = new this.detailClass({\r
 152                         model: this.model,\r
 153                     });\r
 154                     $('#detailBox').show();\r
 155                     TestApp.detail.show(detailView);\r
 156               },
 157          });
 158
 159          listViewClass = Marionette.CompositeView.extend({
 160              childView: itemViewClass,
 161              childViewContainer: 'tbody',
 162              template: table_template,
 163              collection: xos[collection_name],
 164              title: name + "s",
 165
 166              initialize: function() {
 167                  this.listenTo(this.collection, 'change', this._renderChildren)
 168
 169                  // Because many of the templates use idToName(), we need to
 170                  // listen to the collections that hold the names for the ids
 171                  // that we want to display.
 172                  for (i in this.collection.foreignCollections) {
 173                      foreignName = this.collection.foreignCollections[i];
 174                      if (xos[foreignName] == undefined) {
 175                          console.log("Failed to find xos class " + foreignName);
 176                      }
 177                      this.listenTo(xos[foreignName], 'change', this._renderChildren);
 178                      this.listenTo(xos[foreignName], 'sort', this._renderChildren);
 179                  }
 180              },
 181
 182              templateHelpers: function() {
 183                 return { title: this.title };
 184              },
 185          });
 186          TestApp[collection_name + "ListView"] = listViewClass;
 187
 188          var listView = new listViewClass();
 189
 190          if (region_name in TestApp.getRegions()) {
 191              TestApp[region_name].show(listView);
 192          }
 193          xos[collection_name].fetch(); //startPolling();
 194      }
 195
 196      $('#close-detail-view').unbind().bind('click', function() {
 197          $('#detailBox').hide();
 198      });
 199 });
 200
 201 $(document).ready(function(){
 202     TestApp.start();
 203 });
 204