From b2eeb5346cb7b75f9b2b3aafad2917a91184148d Mon Sep 17 00:00:00 2001
From: Kacper Korban <kacper.f.korban@gmail.com>
Date: Tue, 5 Mar 2024 21:46:54 +0100
Subject: [PATCH 1/2] Fix the web form to display the result on the same page

closes #14
---
 web/src/main/scala/web.scala | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/src/main/scala/web.scala b/web/src/main/scala/web.scala
index 41b1bb2..332dc97 100644
--- 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)
       }
@@ -55,6 +55,7 @@ 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)),
       ),
@@ -80,7 +81,8 @@ class WebServer(val scripts: Map[String, Script]) {
               id := "scriptForm",
               methodAttr := "post",
               actionAttr := "/run"
-            )
+            ),
+            div(id := "result", classAttr := List("result"))
           )
         )
       )
@@ -126,6 +128,21 @@ class WebServer(val scripts: Map[String, Script]) {
         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 =

From 54dfd643725cd069efe2ad5a59c2050b0dd7b5ba Mon Sep 17 00:00:00 2001
From: Kacper Korban <kacper.f.korban@gmail.com>
Date: Tue, 5 Mar 2024 22:01:28 +0100
Subject: [PATCH 2/2] Add br elements after each input, so that custom styles
 are easier later

---
 web/src/main/scala/web.scala | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/src/main/scala/web.scala b/web/src/main/scala/web.scala
index 332dc97..c1b2521 100644
--- a/web/src/main/scala/web.scala
+++ b/web/src/main/scala/web.scala
@@ -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; }
@@ -56,7 +57,8 @@ class WebServer(val scripts: Map[String, Script]) {
           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(
@@ -114,6 +116,8 @@ 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');
@@ -121,6 +125,7 @@ class WebServer(val scripts: Map[String, Script]) {
           input.name = inputName;
           input.placeholder = inputName;
           form.appendChild(input);
+          form.appendChild(br.cloneNode());
         });
         const submitButton = document.createElement('input');
         submitButton.type = 'submit';