Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/opaque into development

app/templates/base.html.j2

@@ -105,7 +105,7 @@
         DarkReader.enable({"brightness": 100, "contrast": 100, "sepia": 0});
         {% endif %}
         {% for flashed_message in get_flashed_messages() %}
-        toast("{{ flashed_message }}");
+        nopaque.toast("{{ flashed_message }}");
         {% endfor %}
       });
     </script>

app/templates/test/index.html.j2

@@ -7,7 +7,7 @@
 
 <div class="col s12">
   <div class="card">
-    <form id="test-form">
+    <form class="nopaque-form" data-loading-modal="test-progress-modal" id="test-form">
       {{ test_form.hidden_tag() }}
       <div class="card-content">
         <div class="row">
@@ -45,32 +45,27 @@
   </div>
 </div>
 
+<div class="modal" id="test-progress-modal">
+  <div class="modal-content">
+    <h4>Waiting for data transfer</h4>
+    <div class="progress">
+      <div class="indeterminate"></div>
+    </div>
+  </div>
+</div>
+
 <script>
 var testFormElement = document.forms.namedItem("test-form");
 
-testFormElement.addEventListener("submit", function(event) {
-  event.preventDefault();
-  let data = {};
-  for (let input of event.target.querySelectorAll("input")) {
-    if (input.type === "file") {
-      file = input.files[0];
-      data[input.name] = {"bytes": file, "name": file.name};
-    } else {
-      data[input.name] = input.value;
-    }
-  }
-  nopaque.socket.emit("submit-test-form", data);
-});
-
 nopaque.socket.on("submit-test-form", function(response) {
-  console.log(response);
-  if (response.status === "success") {
-     testFormElement.reset();
-     nopaque.toast("Success!");
-     for (let helperText of testFormElement.querySelectorAll(".helper-text")) {
-       helperText.remove();
-     }
-  } else if (response.status === "error") {
+  let loadingModalElement = document.getElementById(testFormElement.dataset.loadingModal);
+  if (response.status === 201) {
+    testFormElement.reset();
+    for (let helperText of testFormElement.querySelectorAll(".helper-text")) {
+      helperText.remove();
+    }
+    nopaque.toast("Success!");
+  } else if (response.status === 400) {
     let errorElement;
     for (let [field, error] of Object.entries(response.msg)) {
       errorElement = document.createElement("span");
@@ -79,6 +74,7 @@ nopaque.socket.on("submit-test-form", function(response) {
       testFormElement.querySelector(`input[name="${field}"]`).closest(".input-field").appendChild(errorElement);
     }
   }
+  M.Modal.getInstance(loadingModalElement).close();
 });
 </script>
 {% endblock %}