3 files changed, 48 insertions, 2 deletions

diff --git a/profile/public/style.css b/profile/public/style.css
index c417a7e..106e590 100644
--- a/profile/public/style.css
+++ b/profile/public/style.css
@@ -64,12 +64,14 @@ img {
 }
 
 #user h1:after,
-#comments h2:after {
+#comments h2:after,
+#char h2:after {
     content: url(/feather/icons/chevron-up.svg);
 }
 
 #user h1.bananenkuchen:after,
-#comments h2.bananenkuchen:after {
+#comments h2.bananenkuchen:after,
+#char h2.bananenkuchen:after {
     content: url(/feather/icons/chevron-down.svg);
 }
 
diff --git a/profile/public/user.html b/profile/public/user.html
index 8a3e980..56464e1 100644
--- a/profile/public/user.html
+++ b/profile/public/user.html
@@ -21,6 +21,7 @@
         <main>
             <div id="user"></div>
             <div id="comments"></div>
+            <div id="char"></div>
         </main>
 
         <script src="user.js" charset="utf-8"></script>
diff --git a/profile/public/user.js b/profile/public/user.js
index 76aedc8..ba6952e 100644
--- a/profile/public/user.js
+++ b/profile/public/user.js
@@ -1,6 +1,7 @@
 const uid = new URL(window.location.href).searchParams.get("uid");
 const userDiv = document.getElementById("user");
 const commentsDiv = document.getElementById("comments");
+const charDiv = document.getElementById("char");
 
 if (uid < 1 || uid > 119) window.location.assign("./users.html"); // Well
 
@@ -146,6 +147,44 @@ async function addComments(comments) {
     commentsDiv.append(addDiv);
 }
 
+function addChar(char) {
+    let method = "POST";
+    const h2 = document.createElement("h2");
+    h2.textContent = "Erkennungsmerkmal";
+    h2.addEventListener("click", (evt) => {
+        const divs = evt.target.parentElement.querySelectorAll("div");
+        divs.forEach(
+            (div) => (div.style.display = !div.style.display || div.style.display === "flex" ? "none" : "flex"),
+        );
+        if (h2.classList.contains("bananenkuchen")) h2.classList.remove("bananenkuchen");
+        else h2.classList.add("bananenkuchen");
+    });
+    const inp = document.createElement("input");
+    const btn = document.createElement("button");
+    btn.textContent = "Senden";
+
+    if (char.hasOwnProperty("txt")) {
+        method = "PUT";
+        inp.value = char.txt;
+    }
+
+    inp.maxLength = 255;
+
+    btn.addEventListener("click", async e => {
+        const char = inp.value;
+        const body = JSON.stringify({ char });
+        await fetch(`api/char/${uid}`, {
+            method,
+            headers: { "Content-Type": "application/json" },
+            body,
+        });
+    });
+    const div = document.createElement("div");
+    div.style.display = "flex";
+    div.append(inp, btn);
+    charDiv.append(h2, div);
+}
+
 fetch(`api/user/${uid}`)
     .then((response) => response.json())
     .then(addUser);
@@ -153,3 +192,7 @@ fetch(`api/user/${uid}`)
 fetch(`api/comments/${uid}`)
     .then((response) => response.json())
     .then(addComments);
+
+fetch(`api/char/${uid}`)
+    .then((response) => response.json())
+    .then(addChar);
\ No newline at end of file