From 46bd04df26509cdd9b3548633bf3615b2e85b9d2 Mon Sep 17 00:00:00 2001
From: Jonas0000 <40774974+Jonas0000@users.noreply.github.com>
Date: Sun, 17 Nov 2024 17:51:24 +0100
Subject: [PATCH] Fix Calculate spinner (#540)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Hide next button in last step

* calculate spinner

* button bugfix

* Calculate only on form submit

* removed double caöculate Button

* Inserted Form Validation
---
 ui/runs/static/runs/runs.js         | 31 ++++++++++++++++-------------
 ui/runs/templates/runs/details.html | 21 ++++++-------------
 2 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/ui/runs/static/runs/runs.js b/ui/runs/static/runs/runs.js
index 51d0df34..f876ddf5 100644
--- 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();
+        }
     });
 });
\ No newline at end of file
diff --git a/ui/runs/templates/runs/details.html b/ui/runs/templates/runs/details.html
index 3f945952..e60a42d6 100644
--- 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 %}