Unify Form Submission

Creates a single way to do form submission with
hooks to run callbacks.

Change-Id: I470ab56219c28c35fe3236b30a0ac65e29236af6
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>

1 files changed, 44 insertions, 8 deletions

diff --git a/src/static/js/dashboard.js b/src/static/js/dashboard.js
index 9c99aa8..f1eff77 100644
--- a/src/static/js/dashboard.js
+++ b/src/static/js/dashboard.js
@@ -1,3 +1,46 @@
+///////////////////
+// Global Variables
+///////////////////
+
+form_submission_callbacks = [];  //all runnables will be executed before form submission
+
+
+///////////////////
+// Global Functions
+///////////////////
+
+function updatePage(data){
+    updateBreadcrumbs(data['meta']);
+    $("formContainer").html(data['content']);
+}
+
+function submitStepForm(next_step = "current"){
+    run_form_callbacks();
+    const step_form_data = $("#step_form").serialize();
+    const form_data = $.param({
+        "step": next_step,
+        "step_form": step_form_data,
+        "csrfmiddlewaretoken": $("[name=csrfmiddlewaretoken]").val()
+    });
+    console.log(form_data);
+    $.post(
+        '/workflow/manager/',
+        form_data,
+        (data) => updatePage(data),
+        'json'
+    ).fail(() => alert("failure"));
+}
+
+function run_form_callbacks(){
+    for(f of form_submission_callbacks)
+        f();
+    form_submission_callbacks = [];
+}
+
+///////////////////
+//Class Definitions
+///////////////////
+
 class MultipleSelectFilterWidget {
 
     constructor(neighbors, items, initial) {
@@ -826,16 +869,9 @@ class NetworkStep {
         this.graph.refresh(host);
     }
 
-    submitForm() {
-        const form = document.getElementById("xml_form");
+    prepareForm() {
         const input_elem = document.getElementById("hidden_xml_input");
         input_elem.value = this.encodeGraph(this.graph);
-        const req = new XMLHttpRequest();
-        req.open("POST", "/wf/workflow/", false);
-        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-        req.onerror = function() { alert("problem with form submission"); }
-        const formData = $("#xml_form").serialize();
-        req.send(formData);
     }
 }