move stuff out of test and into xosHelper.js for better code reuse

diff --git a/planetstack/core/xoslib/dashboards/test.html b/planetstack/core/xoslib/dashboards/test.html
index 1e41fe9..ca60567 100644 (file)
--- a/planetstack/core/xoslib/dashboards/test.html
+++ b/planetstack/core/xoslib/dashboards/test.html
@@ -8,6 +8,7 @@
 <link rel="stylesheet" type="text/css" href="{% static 'css/test.css' %}" media="all" >
 
 <script src="{{ STATIC_URL }}/js/xoslib/xos-backbone.js"></script>
+<script src="{{ STATIC_URL }}/js/xoslib/xosHelper.js"></script>
 <script src="{{ STATIC_URL }}/js/test.js"></script>
 
 <p>This shows all of the things you can see using xosLib</p>
@@ -58,22 +59,4 @@
 </div>
 </div>
 
-<script type="text/template" id="test-error-template">
-  <button id="close-error-box">Close Error Message</button>
-  <h3>An error has occurred.</h3>
-  <table class="test-error-table">
-  <tr><td>Code:</td><td><%= status %></td></tr>
-  <tr><td>Message:</td><td><%= statusText %></td></tr>
-  </table>
-</script>
-
-<script type="text/template" id="test-success-template">
-  <button id="close-success-box">Close Success Message</button>
-  <h3>Success!</h3>
-  <table class="test-success-table">
-  <tr><td>Code:</td><td><%= status %></td></tr>
-  <tr><td>Message:</td><td><%= statusText %></td></tr>
-  </table>
-</script>
-
 {% include 'xosAdmin.html' %}

diff --git a/planetstack/core/xoslib/static/js/test.js b/planetstack/core/xoslib/static/js/test.js
index 9de80b7..c0f4146 100644 (file)
--- a/planetstack/core/xoslib/static/js/test.js
+++ b/planetstack/core/xoslib/static/js/test.js
@@ -1,4 +1,4 @@
-TestApp = new Marionette.Application();
+TestApp = new XOSApplication();
 
 TestApp.addRegions({
     deploymentList: "#deploymentList",
@@ -18,59 +18,6 @@ TestApp.addRegions({
     linkedObjs4: "#linkedObjs4"
 });
 
-TestApp.hideError = function(result) {
-    $("#errorBox").hide();
-    $("#successBox").hide();
-};
-
-TestApp.showSuccess = function(result) {
-     $("#successBox").show();
-     $("#successBox").html(_.template($("#test-success-template").html())(result));
-     $('#close-success-box').unbind().bind('click', function() {
-         $('#successBox').hide();
-     });
-};
-
-TestApp.showError = function(result) {
-     $("#errorBox").show();
-     $("#errorBox").html(_.template($("#test-error-template").html())(result));
-     $('#close-error-box').unbind().bind('click', function() {
-         $('#errorBox').hide();
-     });
-};
-
-idToName = function(id, collectionName, fieldName) {
-    linkedObject = xos[collectionName].get(id);
-    if (linkedObject == undefined) {
-        return "#" + id;
-    } else {
-        return linkedObject.attributes[fieldName];
-    }
-};
-
-idToOptions = function(id, collectionName, fieldName) {
-    result=""
-    for (index in xos[collectionName].models) {
-        linkedObject = xos[collectionName].models[index];
-        linkedId = linkedObject["id"];
-        linkedName = linkedObject.attributes[fieldName];
-        if (linkedId == id) {
-            selected = " selected";
-        } else {
-            selected = "";
-        }
-        result = result + '<option value="' + linkedId + '"' + selected + '>' + linkedName + '</option>';
-    }
-    return result;
-};
-
-idToSelect = function(variable, id, collectionName, fieldName) {
-    result = '<select name="' + variable + '">' +
-             idToOptions(id, collectionName, fieldName) +
-             '</select>';
-    return result;
-}
-
 TestApp.on("start", function() {
      var objs = ['deployment', 'image', 'networkTemplate', 'network', 'networkSliver', 'networkDeployment', 'node', 'service', 'site', 'slice', 'sliceDeployment', 'slicePrivilege', 'sliver', 'user', 'sliceRole', 'userDeployment'];
 

diff --git a/planetstack/core/xoslib/static/js/xoslib/xosHelper.js b/planetstack/core/xoslib/static/js/xoslib/xosHelper.js
new file mode 100644 (file)
index 0000000..c799794
--- /dev/null
+++ b/planetstack/core/xoslib/static/js/xoslib/xosHelper.js
@@ -0,0 +1,81 @@
+XOSApplication = Marionette.Application.extend({
+    errorBoxId: "#errorBox",
+    errorCloseButtonId: "#close-error-box",
+    successBoxId: "#successBox",
+    successCloseButtonId: "#close-success-box",
+    errorTemplate: "#xos-error-template",
+    successTemplate: "#xos-success-template",
+
+    hideError: function(result) {
+        $(this.errorBoxId).hide();
+        $(this.successBoxId).hide();
+    },
+
+    showSuccess: function(result) {
+         $(this.successBoxId).show();
+         $(this.successBoxId).html(_.template($(this.successTemplate).html())(result));
+         $(this.successCloseButtonId).unbind().bind('click', function() {
+             $(this.successBoxId).hide();
+         });
+    },
+
+    showError: function(result) {
+         $(this.errorBoxId).show();
+         $(this.errorBoxId).html(_.template($(this.errorTemplate).html())(result));
+         $(this.errorCloseButtonId).unbind().bind('click', function() {
+             $(this.errorBoxId).hide();
+         });
+    },
+});
+
+/* Give an id, the name of a collection, and the name of a field for models
+   within that collection, lookup the id and return the value of the field.
+*/
+
+idToName = function(id, collectionName, fieldName) {
+    linkedObject = xos[collectionName].get(id);
+    if (linkedObject == undefined) {
+        return "#" + id;
+    } else {
+        return linkedObject.attributes[fieldName];
+    }
+};
+
+/* Constructs lists of <option> html blocks for items in a collection.
+
+   selectedId = the id of an object that should be selected, if any
+   collectionName = name of collection
+   fieldName = name of field within models of collection that will be displayed
+*/
+
+idToOptions = function(selectedId, collectionName, fieldName) {
+    result=""
+    for (index in xos[collectionName].models) {
+        linkedObject = xos[collectionName].models[index];
+        linkedId = linkedObject["id"];
+        linkedName = linkedObject.attributes[fieldName];
+        if (linkedId == selectedId) {
+            selected = " selected";
+        } else {
+            selected = "";
+        }
+        result = result + '<option value="' + linkedId + '"' + selected + '>' + linkedName + '</option>';
+    }
+    return result;
+};
+
+/* Constructs an html <select> and the <option>s to go with it.
+
+   variable = variable name to return to form
+   selectedId = the id of an object that should be selected, if any
+   collectionName = name of collection
+   fieldName = name of field within models of collection that will be displayed
+*/
+
+idToSelect = function(variable, selectedId, collectionName, fieldName) {
+    result = '<select name="' + variable + '">' +
+             idToOptions(selectedId, collectionName, fieldName) +
+             '</select>';
+    return result;
+}
+

diff --git a/planetstack/core/xoslib/templates/xosAdmin.html b/planetstack/core/xoslib/templates/xosAdmin.html
index 0ba63ec..b1c5074 100644 (file)
--- a/planetstack/core/xoslib/templates/xosAdmin.html
+++ b/planetstack/core/xoslib/templates/xosAdmin.html
@@ -1,3 +1,23 @@
+<!-- Error and Success templates -->
+
+<script type="text/template" id="test-error-template">
+  <button id="close-error-box">Close Error Message</button>
+  <h3>An error has occurred.</h3>
+  <table class="test-error-table">
+  <tr><td>Code:</td><td><%= status %></td></tr>
+  <tr><td>Message:</td><td><%= statusText %></td></tr>
+  </table>
+</script>
+
+<script type="text/template" id="test-success-template">
+  <button id="close-success-box">Close Success Message</button>
+  <h3>Success!</h3>
+  <table class="test-success-table">
+  <tr><td>Code:</td><td><%= status %></td></tr>
+  <tr><td>Message:</td><td><%= statusText %></td></tr>
+  </table>
+</script>
+
 <!-- Deployment -->
 
 <script type="text/template" id="xosAdmin-deployment-list-template">