From fb5d9cbf7d0afcf73da37014557f44a2a0b23e41 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Tue, 19 Nov 2019 09:54:31 +0100
Subject: [PATCH] Add errors to form, if they occur

---
 app/static/js/add_job.js | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/static/js/add_job.js b/app/static/js/add_job.js
index 874c29f7..29dae6e8 100644
--- a/app/static/js/add_job.js
+++ b/app/static/js/add_job.js
@@ -1,34 +1,39 @@
 function SubmitAddJobForm(newJobFormElement, progressModalElement, request) {
-  var formData;
-  var progress;
-  var progressModal;
-
-  formData = new FormData(newJobFormElement);
-  progressModal = M.Modal.getInstance(progressModalElement);
+  var formData = new FormData(newJobFormElement);
+  var progressModal = M.Modal.getInstance(progressModalElement);
 
   progressModal.options.dismissible = false;
   progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value;
-  request.upload.addEventListener("progress", function(event) {
-    progressInPercent = Math.floor(100 * event.loaded / event.total).toString() + "%";
-    progressModalElement.querySelector(".progress-in-percent").innerHTML = progressInPercent;
-    progressModalElement.querySelector(".determinate").style.width = progressInPercent;
+
+  request.addEventListener("abort", function(event) {
+    progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%";
+    progressModalElement.querySelector(".determinate").style.width = "0%";
   });
   request.addEventListener("load", function(event) {
     if (request.status === 201) {
       window.location.href = JSON.parse(this.responseText)['redirect_url'];
     }
     if (request.status === 400) {
-      console.log(JSON.parse(this.responseText));
-      // TODO print errors under input fields.
+      progressModal.close();
+      progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%";
+      progressModalElement.querySelector(".determinate").style.width = "0%";
+      for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
+        let fieldElement = document.getElementById(field).closest('.input-field');
+        for (let error of errors) {
+          fieldElement.insertAdjacentHTML('beforeend', '<span class="helper-text red-text">' + error + '</span>');
+        }
+      }
     }
     if (request.status === 500) {
       location.reload();
     }
   });
-  request.addEventListener("abort", function(event) {
-    progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%";
-    progressModalElement.querySelector(".determinate").style.width = "0%";
+  request.upload.addEventListener("progress", function(event) {
+    progressInPercent = Math.floor(100 * event.loaded / event.total).toString() + "%";
+    progressModalElement.querySelector(".progress-in-percent").innerHTML = progressInPercent;
+    progressModalElement.querySelector(".determinate").style.width = progressInPercent;
   });
+
   progressModal.open();
   request.open("POST", window.location.href);
   request.send(formData);