Merge pull request #15 from KacperFKorban/fix-submit

Fix the web form to display the result on the same page
KacperFKorban · Mar 5, 2024 · 563908c · 563908c
2 parents bd8bf9f + 54dfd64
commit 563908c
Showing 1 changed file with 28 additions and 6 deletions.
diff --git a/web/src/main/scala/web.scala b/web/src/main/scala/web.scala
@@ -25,12 +25,12 @@ class WebServer(val scripts: Map[String, Script]) {
     Method.POST / "run" ->
       handler { (req: Request) =>
         for {
-          form <- req.body.asURLEncodedForm
+          form <- req.body.asMultipartForm
           formMap = form.formData.map(fd => fd.name -> fd).toMap
-          scriptName = formMap.get("script@name").get.stringValue.get
+          scriptName <- formMap.get("script@name").get.asText
           inputsData = formMap.removed("script@name").toSeq.map(_._2)
           script = scripts(scriptName)
-          inputsValues = inputsData.map { (v: FormField) => v.stringValue.get }.toList
+          inputsValues <- ZIO.foreach(inputsData.toList) { (v: FormField) => v.asText }
           result = script.run(inputsValues)
         } yield Response.text(result)
       }
@@ -43,7 +43,8 @@ class WebServer(val scripts: Map[String, Script]) {
     html(
       head(
         title("GUInep"),
-        style("""
+        style(
+          """
           body { font-family: Arial, sans-serif; }
           .sidebar { position: fixed; left: 0; top: 0; width: 200px; height: 100vh; background-color: #f0f0f0; padding: 20px; }
           .sidebar a { display: block; padding: 10px; margin-bottom: 10px; background-color: #007bff; color: white; text-decoration: none; text-align: center; border-radius: 5px; }
@@ -55,7 +56,9 @@ class WebServer(val scripts: Map[String, Script]) {
           input[type=text] { width: 100%; padding: 8px; margin-bottom: 20px; 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; }
-        """),
+          .result { margin-top: 20px; font-weight: bold; }
+          """
+        ),
         script(Dom.raw(jsToChangeFormBasedOnPath)),
       ),
       body(
@@ -80,7 +83,8 @@ class WebServer(val scripts: Map[String, Script]) {
               id := "scriptForm",
               methodAttr := "post",
               actionAttr := "/run"
-            )
+            ),
+            div(id := "result", classAttr := List("result"))
           )
         )
       )
@@ -112,20 +116,38 @@ class WebServer(val scripts: Map[String, Script]) {
         nameInput.name = "script@name";
         nameInput.value = scriptName;
         form.appendChild(nameInput);
+        const br = document.createElement('br');
+        form.appendChild(br);
         // add the script inputs as text inputs
         selectedScript[1].forEach(inputName => {
           const input = document.createElement('input');
           input.type = 'text';
           input.name = inputName;
           input.placeholder = inputName;
           form.appendChild(input);
+          form.appendChild(br.cloneNode());
         });
         const submitButton = document.createElement('input');
         submitButton.type = 'submit';
         submitButton.value = 'Submit';
         form.appendChild(submitButton);
       }
     }
+    document.addEventListener("DOMContentLoaded", function() {
+      document.getElementById("scriptForm").addEventListener("submit", function(e) {
+        e.preventDefault(); // Prevent the default form submission and redirect
+        const formData = new FormData(e.target);
+        fetch("/run", {
+          method: "POST",
+          body: formData
+        })
+        .then(response => response.text())
+        .then(data => {
+          document.getElementById("result").textContent = 'Result: ' + data;
+        })
+        .catch(error => console.error('Error:', error));
+      });
+    });
     """
 
   def scriptsToJsonArray: String =