Add progress indicator and clear the result after resubmitting the form

KacperFKorban · Jun 10, 2024 · 6d67896 · 6d67896
1 parent 0e9f067
commit 6d67896
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 15 deletions.
diff --git a/web/src/main/resources/default.css b/web/src/main/resources/default.css
@@ -1,14 +1,118 @@
-body { font-family: Arial, sans-serif; margin: 0; display: flex; height: 100vh; }
-.sidebar { width: 20%; background-color: #f0f0f0; padding: 20px; overflow-y: auto; }
-.sidebar a { display: block; padding: 10px; margin-bottom: 10px; background-color: #007bff; color: white; text-decoration: none; text-align: center; border-radius: 5px; overflow-x: hidden; text-overflow: ellipsis; }
-.sidebar a:hover { background-color: #0056b3; }
-.main-content { margin-left: 20%; padding: 40px; display: flex; justify-content: center; padding-top: 20px; }
-.form-container { width: 600px; }
-label { display: inline-block; margin-right: 10px; vertical-align: middle; }
-input:not([type=submit]) { display: inline-block; padding: 8px; margin-bottom: 10px; box-sizing: border-box; }
-input[type=submit] { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
-input[type=submit]:hover { background-color: #45a049; }
-select { display: inline-block; margin-bottom: 10px; padding: 8px; box-sizing: border-box; }
-.result { margin-top: 20px; font-weight: bold; }
-.add-button { text-decoration: none; background-color: #AAAAAA; color: white; padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; }
-.add-button:hover { background-color: #BBBBBB; }
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  display: flex;
+  height: 100vh;
+}
+
+.sidebar {
+  width: 20%;
+  background-color: #f0f0f0;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.sidebar a {
+  display: block;
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: #007bff;
+  color: white;
+  text-decoration: none;
+  text-align: center;
+  border-radius: 5px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar a:hover {
+  background-color: #0056b3;
+}
+
+.main-content {
+  margin-left: 20%;
+  padding: 40px;
+  display: flex;
+  justify-content: center;
+  padding-top: 20px;
+}
+
+.form-container {
+  width: 600px;
+}
+
+label {
+  display: inline-block;
+  margin-right: 10px;
+  vertical-align: middle;
+}
+
+input:not([type=submit]) {
+  display: inline-block;
+  padding: 8px;
+  margin-bottom: 10px;
+  box-sizing: border-box;
+}
+
+input[type=submit] {
+  background-color: #4CAF50;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+input[type=submit]:hover {
+  background-color: #45a049;
+}
+
+select {
+  display: inline-block;
+  margin-bottom: 10px;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.result {
+  margin-top: 20px;
+  font-weight: bold;
+}
+
+.add-button {
+  text-decoration: none;
+  background-color: #AAAAAA;
+  color: white;
+  padding: 5px 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.add-button:hover {
+  background-color: #BBBBBB;
+}
+
+.progress-indicator {
+  display: inline-block;
+  margin-left: 10px;
+  vertical-align: middle;
+}
+
+.spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.hidden {
+  display: none;
+}
diff --git a/web/src/main/resources/default.js b/web/src/main/resources/default.js
@@ -152,13 +152,36 @@ function changeForm(funName, funsToJsonArray, config) {
     submitButton.type = 'submit';
     submitButton.value = 'Submit';
     form.appendChild(submitButton);
+    const progressIndicator = document.createElement('div');
+    progressIndicator.id = 'progress-indicator';
+    progressIndicator.classList.add('progress-indicator');
+    progressIndicator.classList.add('hidden');
+    const spinner = document.createElement('div');
+    spinner.classList.add('spinner');
+    progressIndicator.appendChild(spinner);
+    form.appendChild(progressIndicator);
   }
 }
 
+function clearResult() {
+  document.getElementById("result").textContent = '';
+}
+
+function showProgressIndicator() {
+  document.getElementById('progress-indicator').classList.remove('hidden');
+}
+
+function hideProgressIndicator() {
+  document.getElementById('progress-indicator').classList.add('hidden');
+}
+
 document.addEventListener("DOMContentLoaded", function() {
   document.getElementById("guinepForm").addEventListener("submit", function(e) {
     e.preventDefault(); // Prevent the default form submission and redirect
 
+    showProgressIndicator();
+    clearResult();
+
     const form = this;
     const jsonData = {};
     const funName = form.funName;
@@ -248,8 +271,12 @@ document.addEventListener("DOMContentLoaded", function() {
     })
     .then(response => response.text())
     .then(data => {
+      hideProgressIndicator();
       document.getElementById("result").textContent = 'Result: ' + data;
     })
-    .catch(error => console.error('Error:', error));
+    .catch(error => {
+      hideProgressIndicator();
+      console.error('Error:', error);
+    });
   });
 });