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>

6 files changed, 55 insertions, 31 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);
     }
 }
 
diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html
index f1ba491..50ec59a 100644
--- a/src/templates/booking/quick_deploy.html
+++ b/src/templates/booking/quick_deploy.html
@@ -55,10 +55,7 @@
 <script type="text/javascript">
     function submit_form()
     {
-        //formats data for form submission
-        multi_filter_widget.finish();
-        // Submit the form manually since confirm button is type="button" now
-        // due to the form submitting before the data was even created by finish()
+        run_form_callbacks();
         document.getElementById("quick_booking_form").submit();
     }
 
@@ -148,4 +145,4 @@
         }
     }
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/src/templates/dashboard/multiple_select_filter_widget.html b/src/templates/dashboard/multiple_select_filter_widget.html
index 7fb8bcf..4a65bd9 100644
--- a/src/templates/dashboard/multiple_select_filter_widget.html
+++ b/src/templates/dashboard/multiple_select_filter_widget.html
@@ -39,8 +39,9 @@ function multipleSelectFilterWidgetEntry() {
     const filter_items = {{ filter_items|safe }};
     const initial_value = {{ initial_value|default_if_none:"{}"|safe }};
 
-    //global variable
+    //global variables
     multi_filter_widget = new MultipleSelectFilterWidget(graph_neighbors, filter_items, initial_value);
+    form_submission_callbacks.push(() => multi_filter_widget.finish());
 }
 
 multipleSelectFilterWidgetEntry();
diff --git a/src/templates/resource/steps/pod_definition.html b/src/templates/resource/steps/pod_definition.html
index 4c9aa83..bd0a539 100644
--- a/src/templates/resource/steps/pod_definition.html
+++ b/src/templates/resource/steps/pod_definition.html
@@ -77,6 +77,7 @@
             document.getElementById('toolbarContainer'),
             document.getElementById('sidebarContainer')
         );
+        form_submission_callbacks.push(() => network_step.prepareForm());
     </script>
 {% endblock content %}
 {% block onleave %}
diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html
index ed367c7..103a095 100644
--- a/src/templates/workflow/viewport-base.html
+++ b/src/templates/workflow/viewport-base.html
@@ -11,7 +11,7 @@
         <nav>
             <ul class="pagination d-flex flex-row" id="topPagination">
                 <li class="page-item flex-shrink-1 page-control">
-                    <a class="page-link" href="#" id="gob" onclick="go('prev')">
+                    <a class="page-link" href="#" id="gob" onclick="submit_and_go('prev')">
                         <i class="fas fa-backward"></i> Back
                     </a>
                 </li>
@@ -41,7 +41,7 @@
                     </a>
                 </li>
                 <li class="page-item flex-shrink-1 page-control">
-                    <a class="page-link text-right" href="#" id="gof" onclick="go('next')">
+                    <a class="page-link text-right" href="#" id="gof" onclick="submit_and_go('next')">
                         Next <i class="fas fa-forward"></i>
                     </a>
                 </li>
@@ -91,11 +91,9 @@
     update_context();
     var step = 0;
     var page_count = 0;
-    var context_data = false;
 
-    function go(to) {
-        step_on_leave();
-        request_leave(to);
+    function submit_and_go(to) {
+        submitStepForm(to);
     }
 
     function request_leave(to) {
@@ -165,8 +163,7 @@
         });
     }
 
-    function update_page(data) {
-        context_data = data;
+    function updateBreadcrumbs(data) {
         update_breadcrumbs(data);
         if (data["workflow_count"] == 1) {
             document.getElementById("cancel_btn").innerText = "Exit Workflow";
@@ -326,4 +323,4 @@
         {% csrf_token %}
     </form>
 </div>
-{% endblock content %}
\ No newline at end of file
+{% endblock content %}
diff --git a/src/templates/workflow/viewport-element.html b/src/templates/workflow/viewport-element.html
index 2c917e1..bf13304 100644
--- a/src/templates/workflow/viewport-element.html
+++ b/src/templates/workflow/viewport-element.html
@@ -42,14 +42,6 @@
 
     {% endblock validate_step %}
 
-    <script>
-    step_on_leave = function() {
-        {% block onleave %}
-            alert("override onleave");
-        {% endblock %}
-    }
-    </script>
-
     <div class="messages">
         {% block element_messages %}
         {% bootstrap_messages %}