Fix Calculate spinner (#540)

* Hide next button in last step * calculate spinner * button bugfix * Calculate only on form submit * removed double caöculate Button * Inserted Form Validation
cschlaffner · Nov 17, 2024 · 46bd04d · 46bd04d
1 parent a2d0bf6
commit 46bd04d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 29 deletions.
diff --git a/ui/runs/static/runs/runs.js b/ui/runs/static/runs/runs.js
@@ -33,21 +33,24 @@ $(document).ready(function () {
         $('#chosen-' + id).text(this.files[0].name);
     });
 
+    // control calculate button in footer
+    var calculateButton = $('#calculate_parameters_submit');
 
-    // control calculate buttons in footer
-    $('#calculate_parameters_submit_form_plot').click(function() {
-        $("#calc_form_plot").submit();
-    });
-    $('#calculate_parameters_submit_form').click(function() {
-        $("#calc_form_method").submit();
-    });
+    calculateButton.click(function() {
+        var form = $("#calculateForm")[0];
+
+        if (form.checkValidity()) {
+            form.submit();
 
-    // calculate button spinner
-    $('.calculateSpinner').on('click', function() {        
-        // Change button content to show 'Calculating...' with a spinner
-        $(this).html(`
-            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-            Calculating...
-        `);
+            // show loading spinner on calculate button
+            calculateButton.html(`
+                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                Calculating...
+            `);
+            calculateButton.prop('disabled', true);
+
+        } else {
+            form.reportValidity();
+        }
     });
 });
diff --git a/ui/runs/templates/runs/details.html b/ui/runs/templates/runs/details.html
@@ -124,7 +124,7 @@ <h3>{{ display_name }}</h3>
                         {# if there are plot parameters, display method and plot parameters next to each other #}
                         {% if plot_form %}
                             <div class="col">
-                                <form action="{% url 'runs:detail' run_name %}" id="calc_form_plot" method="post"
+                                <form id="calculateForm" action="{% url 'runs:detail' run_name %}" method="post"
                                       enctype="multipart/form-data">
                                     {% csrf_token %}
                                     <div class="mb-1">
@@ -155,7 +155,7 @@ <h3>{{ display_name }}</h3>
                         {% else %}
                             <div class="col-7">
                                 {% if step != "plot" %}
-                                    <form action="{% url 'runs:detail' run_name %}" id="calc_form_method" method="post"
+                                    <form id="calculateForm" action="{% url 'runs:detail' run_name %}" method="post"
                                           enctype="multipart/form-data">
                                         {% csrf_token %}
                                         <div class="mb-2">
@@ -244,20 +244,11 @@ <h3>{{ display_name }}</h3>
             <div class="footer border-top pt-3">
                 <div class="row align-items-center">
                     <div class="d-flex col-auto flex-column justify-content-end">
-
-                        {% if plot_form %}
-                            <button type="submit" id="calculate_parameters_submit_form_plot"
-                                class="btn btn-red calculateSpinner mr-auto">
-                                Calculate
-                            </button>
-                        {% else %}
-                            <button type="submit" id="calculate_parameters_submit_form"
-                                class="btn btn-red mr-auto calculateSpinner">
-                                Calculate
-                            </button>
-                        {% endif %}
+                        <button id="calculate_parameters_submit" type="submit"
+                            class="btn btn-red calculateSpinner mr-auto">
+                            Calculate
+                        </button>
                     </div>
-
                     <div class="justify-content-end d-flex col flex-column">
                         <div class="justify-content-end d-flex">
                         {% if results_exist %}