From ee5d9712f447f0ef0386976aafcdaf82d348885e Mon Sep 17 00:00:00 2001
From: Elias Schriefer <schriefer@fim.uni-passau.de>
Date: Fri, 21 Jun 2024 11:27:26 +0200
Subject: [PATCH 1/4] Implement JS + add URL field

---
 src/main/resources/static/add.css     | 81 ++++++++++++++++++++-------
 src/main/resources/static/add.js      | 56 ++++++++++++++++++
 src/main/resources/templates/add.html | 18 ++++--
 3 files changed, 130 insertions(+), 25 deletions(-)
 create mode 100644 src/main/resources/static/add.js

diff --git a/src/main/resources/static/add.css b/src/main/resources/static/add.css
index a4b4b92..6d62a6f 100644
--- a/src/main/resources/static/add.css
+++ b/src/main/resources/static/add.css
@@ -4,20 +4,6 @@
     --accent-color: oklch(65.33% 0.158 247.76);
 }
 
-form label:after {
-    content: ":";
-}
-
-form :is(input[type=text], textarea) {
-    background-color: var(--fg-color);
-    border: none;
-    border-radius: .25lh;
-    color: var(--text-color, white);
-    padding: .5em;
-    font-family: sans-serif;
-}
-
-/* quick info box */
 form {
     display: grid;
     grid-template-columns: 1fr 1fr auto;
@@ -30,17 +16,57 @@ form > * {
     gap: 1rem;
 }
 
-form :is(input[type=text], textarea) {
+form label:after {
+    content: ":";
+}
+
+/* text entries */
+form :is(input[type=text], input[type=url], textarea) {
+    background-color: var(--fg-color);
+    border: none;
+    border-radius: .25lh;
+    color: var(--text-color, white);
+    padding: .5em;
+    font-family: sans-serif;
     flex-grow: 1;
 }
 
+/* focus outlines */
+:is(form :is(input[type=text], input[type=url], textarea), .btn):focus-visible {
+    outline: 2px solid var(--accent-color);
+}
+
+.btn, #is-dataset-toggle {
+    transition: outline ease-in 100ms;
+}
+
+/* input validation */
+form :is(input[type=text], input[type=url], textarea):user-valid {
+    --validation-color: lime;
+}
+
+form :is(input[type=text], input[type=url], textarea):user-invalid {
+    --validation-color: red;
+    outline-style: solid;
+}
+
+form :is(input[type=text], input[type=url], textarea):is(:user-valid, :user-invalid) {
+    outline-color: var(--validation-color);
+}
+
+form :is(input[type=text], input[type=url], textarea):is(:user-valid, :user-invalid):not(:focus-visible) {
+    outline-width: 1px;
+}
+
 /* switch */
 label:has(#is-dataset) {
     gap: 0;
 }
 
 #is-dataset {
-    display: none;
+    top: -100vh;
+    left: -100vw;
+    position: absolute;
 }
 
 #is-dataset-toggle {
@@ -69,6 +95,10 @@ label:has(#is-dataset) {
     filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
 }
 
+#is-dataset:focus-visible + #is-dataset-toggle {
+    outline: 2px solid var(--accent-color);
+}
+
 #is-dataset:not(:checked) + #is-dataset-toggle::before {
     left: 0;
 }
@@ -79,7 +109,11 @@ label:has(#is-dataset) {
 
 /* short description box */
 form :has(#short-description) {
-    grid-column: 1 / 3;
+    grid-column: 1 / 2;
+}
+
+form :has(#url) {
+    grid-column: 2 / 4;
 }
 
 /* full description box */
@@ -116,13 +150,18 @@ form :has(#short-description) {
     --drop-shadow-opacity: .5;
     --drop-shadow-offset-y: 0;
     --drop-shadow-blur: .25rem;
-    filter: drop-shadow(
+    --drop-shadow: drop-shadow(
         rgba(0, 0, 0, var(--drop-shadow-opacity))
         0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
     );
+    filter: var(--drop-shadow);
 }
 
-.btn:hover {
+.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle {
+    outline-offset: 2px;
+}
+
+.btn:not(:disabled):hover {
     background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
     --drop-shadow-opacity: .8;
     --drop-shadow-offset-y: .25rem;
@@ -132,3 +171,7 @@ form :has(#short-description) {
 .btn.suggested {
     --btn-color: var(--accent-color);
 }
+
+.btn:disabled {
+    filter: var(--drop-shadow) grayscale(.5) brightness(.5);
+}
diff --git a/src/main/resources/static/add.js b/src/main/resources/static/add.js
new file mode 100644
index 0000000..f35c62d
--- /dev/null
+++ b/src/main/resources/static/add.js
@@ -0,0 +1,56 @@
+const form = document.forms[0];
+const {
+    title: titleEntry,
+    author: authorEntry,
+    ["is-dataset"]: isDatasetSwitch,
+    ["short-description"]: shortDescriptionEntry,
+    url: urlEntry,
+    ["full-description"]: fullDescriptionEntry,
+    ["btn-add"]: addBtn,
+    ["btn-cancel"]: cancelBtn,
+} = form.elements;
+
+const validationListener = () => {
+    addBtn.disabled = !form.checkValidity();
+};
+
+// Register validationListener on all required inputs that must be valid
+[
+    titleEntry,
+    authorEntry,
+    shortDescriptionEntry,
+    urlEntry,
+    fullDescriptionEntry,
+].forEach(input => input.addEventListener("input", validationListener));
+
+form.addEventListener("submit", e => {
+    e.preventDefault();
+    if (!form.reportValidity()) return;
+
+    // Create the request body
+    const newContent = {
+        title: titleEntry.value,
+        author: authorEntry.value,
+        abst: shortDescriptionEntry.value,
+        url: urlEntry.value,
+        description: fullDescriptionEntry.value,
+        type: isDatasetSwitch.checked ? "API" : "DATASET",
+        categories: [],
+    };
+
+    console.debug(newContent);
+
+    // Don't allow several requests to be sent at the same time
+    addBtn.disabled = true;
+
+    fetch("/api/v1/datasets", {
+        method: "POST",
+        body: JSON.stringify(newContent),
+    }).then(response => {
+        if (response.status == 200) {
+            location.assign("/");
+        } else {
+            addBtn.disabled = !checkValidity();
+        }
+    });
+});
diff --git a/src/main/resources/templates/add.html b/src/main/resources/templates/add.html
index d8472c1..eb8cd36 100644
--- a/src/main/resources/templates/add.html
+++ b/src/main/resources/templates/add.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DataDash – Add dataset/API</title>
     <link rel="stylesheet" href="add.css">
+    <script type="module" src="add.js"></script>
 </head>
 <body>
     <main>
@@ -21,13 +22,13 @@
 
             <form action="/api/add" method="post">
                 <span>
-                    <label for="text">Title</label>
-                    <input type="text" name="title" id="title">
+                    <label for="title">Title</label>
+                    <input type="text" name="title" id="title" minlength="1" maxlength="50" required>
                 </span>
 
                 <span id="author-box">
                     <label for="author">Author</label>
-                    <input type="text" name="author" id="author">
+                    <input type="text" name="author" id="author" required>
                 </span>
 
                 <label>
@@ -39,16 +40,21 @@
 
                 <span>
                     <label for="short-description">Short description</label>
-                    <input type="text" name="short-description" id="short-description">
+                    <input type="text" name="short-description" id="short-description" maxlength="100" required spellcheck="true">
+                </span>
+
+                <span>
+                    <label for="url">URL</label>
+                    <input type="url" name="url" id="url" required>
                 </span>
 
                 <span id="full-description-box">
                     <label for="full-description">Full description</label>
-                    <textarea name="full-description" id="full-description"></textarea>
+                    <textarea name="full-description" id="full-description" spellcheck="true"></textarea>
                 </span>
 
                 <span id="btn-bar">
-                    <input type="submit" value="Add" id="btn-add" class="btn suggested">
+                    <input type="submit" value="Add" id="btn-add" class="btn suggested" disabled>
                     <input type="reset" value="Cancel" id="btn-cancel" class="btn">
                 </span>
             </form>

From 4c8437be92eb96eab9f3f9362d1096540830fdd9 Mon Sep 17 00:00:00 2001
From: Elias Schriefer <schriefer@fim.uni-passau.de>
Date: Mon, 24 Jun 2024 17:40:07 +0200
Subject: [PATCH 2/4] Integrate add content page into backend

The page can be found under `/add`.
---
 .../group3/DataDash/controler/PageController.java    | 12 ++++++++++++
 src/main/resources/static/add.js                     |  5 ++++-
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/controler/PageController.java

diff --git a/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/controler/PageController.java b/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/controler/PageController.java
new file mode 100644
index 0000000..a5c0817
--- /dev/null
+++ b/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/controler/PageController.java
@@ -0,0 +1,12 @@
+package de.uni_passau.fim.PADAS.group3.DataDash.controler;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class PageController {
+    @GetMapping("add")
+    public String getAddPage() {
+        return "add";
+    }    
+}
diff --git a/src/main/resources/static/add.js b/src/main/resources/static/add.js
index f35c62d..280eb67 100644
--- a/src/main/resources/static/add.js
+++ b/src/main/resources/static/add.js
@@ -46,11 +46,14 @@ form.addEventListener("submit", e => {
     fetch("/api/v1/datasets", {
         method: "POST",
         body: JSON.stringify(newContent),
+        headers: {
+            "Content-Type": "application/json;charset=utf-8"
+        }
     }).then(response => {
         if (response.status == 200) {
             location.assign("/");
         } else {
-            addBtn.disabled = !checkValidity();
+            addBtn.disabled = !form.checkValidity();
         }
     });
 });

From e400b7e9ce808f6c9d04405d1b8c33484bb22629 Mon Sep 17 00:00:00 2001
From: Erik Foris <erikfor@outlook.de>
Date: Tue, 25 Jun 2024 11:33:36 +0200
Subject: [PATCH 3/4] feat: Update URL construction for add page navigation

The code changes modify the `PageController` class to update the URL construction for navigating to the add page. The `getAddPage()` method now maps to the `/add` endpoint instead of the previous `add` endpoint. This change ensures that the URL matches the correct route for the add page.

Recent commits:
- Integrate add content page into backend
- Add base URL to URL construction
- Rework URL construction

Recent repository commits:
- Integrate add content page into backend
- Merge branch 'main' into 15-make-content-adding-page-functional-js
- Merge branch '11-add-api-for-getting-home-page-data' into 'main'
- Merge branch '22-integrate-api-and-frontend' into '11-add-api-for-getting-home-page-data'
- Merge branch '11-add-api-for-getting-home-page-data' into '22-integrate-api-and-frontend'
- feature: add ability to vote on datasets
- Merge remote-tracking branch 'origin/implement-js' into 22-integrate-api-and-frontend
- Add base URL to URL construction
- Merge remote-tracking branch 'origin/implement-js' into 22-integrate-api-and-frontend
- Rework URL construction
---
 .../fim/PADAS/group3/DataDash/controler/PageController.java     | 2 +-
 src/main/resources/static/main.js                               | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/controler/PageController.java b/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/controler/PageController.java
index a5c0817..f1a0f6f 100644
--- a/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/controler/PageController.java
+++ b/src/main/java/de/uni_passau/fim/PADAS/group3/DataDash/controler/PageController.java
@@ -5,7 +5,7 @@ import org.springframework.web.bind.annotation.GetMapping;
 
 @Controller
 public class PageController {
-    @GetMapping("add")
+    @GetMapping("/add")
     public String getAddPage() {
         return "add";
     }    
diff --git a/src/main/resources/static/main.js b/src/main/resources/static/main.js
index 91dd9e0..771ca3c 100644
--- a/src/main/resources/static/main.js
+++ b/src/main/resources/static/main.js
@@ -75,6 +75,7 @@ for (const downvoteButton of downvoteButtons) {
 // functions of the main page
 function navigateToAdd() {
     //TODO: url to add page not yet implemented, add here
+    window.location.href = "/add";
 }
 
 function filter(filterString) {

From d23e007518f5cf559998898a941862542cfa2a3a Mon Sep 17 00:00:00 2001
From: Erik Foris <erikfor@outlook.de>
Date: Tue, 25 Jun 2024 11:35:58 +0200
Subject: [PATCH 4/4] feat: remove unused action in form

---
 src/main/resources/templates/add.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/templates/add.html b/src/main/resources/templates/add.html
index eb8cd36..30888c3 100644
--- a/src/main/resources/templates/add.html
+++ b/src/main/resources/templates/add.html
@@ -20,7 +20,7 @@
                 how to use it.
             </p>
 
-            <form action="/api/add" method="post">
+            <form>
                 <span>
                     <label for="title">Title</label>
                     <input type="text" name="title" id="title" minlength="1" maxlength="50" required>