Some frontend things

8 files changed, 59 insertions, 22 deletions

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..1da7c92
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "overview/public/feather"]
+	path = overview/public/feather
+	url = https://github.com/feathericons/feather.git
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..7e22123
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+overview/public/feather/
diff --git a/overview/public/feather b/overview/public/feather
new file mode 160000
+Subproject 8263ca93c4b338dcfafed62321c27a88368ba7c
diff --git a/profile/public/style.css b/profile/public/style.css
index 600c2b5..b1bd964 100644
--- a/profile/public/style.css
+++ b/profile/public/style.css
@@ -63,7 +63,6 @@ img {
 
 #comments div {
     display: flex;
-    flex-flow: row wrap;
     justify-content: space-between;
 }
 
@@ -75,10 +74,17 @@ img {
     opacity: 0.8;
 }
 
+#comments span {
+    align-self: center;
+}
+
 #comments .edit-btn,
 #comments .delete-btn,
 #comments .add-btn {
     cursor: pointer;
+    width: 50px;
+    height: 50px;
+    transition: opacity 0.5s;
 }
 
 #comments .edit-btn:hover,
@@ -87,15 +93,36 @@ img {
     opacity: 0.8;
 }
 
-#comments #add-div {
+#comments .edit-btn {
+    background: url(/feather/icons/edit.svg) no-repeat center;
+}
+
+#comments .delete-btn {
+    background: url(/feather/icons/trash.svg) no-repeat center;
+}
+
+#comments .add-btn {
+    background: url(/feather/icons/plus.svg) no-repeat center;
+}
+
+#comments #add-div,
+#comments #edit-div {
     justify-content: center;
+    flex-flow: row wrap;
+    margin-top: 24px;
+    margin-bottom: 24px;
 }
 
-#comments #add-div div {
+#comments #add-div div,
+#comments #edit-div div {
     width: 100%;
+    height: 100%;
+    flex-flow: row wrap;
 }
 
-#comments #add-div div textarea {
+#comments #add-div div textarea,
+#comments #edit-div div textarea {
     width: 100%;
     height: 80%;
+    margin-bottom: 12px;
 }
diff --git a/profile/public/user.js b/profile/public/user.js
index 96215e7..1f93891 100644
--- a/profile/public/user.js
+++ b/profile/public/user.js
@@ -12,7 +12,7 @@ function addUser(userData) {
         if (!questions.hasOwnProperty(questionID)) continue;
         const question = questions[questionID];
         const div = document.createElement("div");
-        div.innerHTML = `<b>${question.question}</b>: <span>${question.answer || ""}</span>`;
+        div.innerHTML = `<b>${question.question}</b> <span>${question.answer || ""}</span>`;
         divs.push(div);
     }
     const h1 = document.createElement("h1");
@@ -27,9 +27,9 @@ function addUser(userData) {
 }
 
 async function addComments(comments) {
-    const h1 = document.createElement("h1");
-    h1.textContent = "Kommentare";
-    h1.addEventListener("click", (evt) => {
+    const h2 = document.createElement("h2");
+    h2.textContent = "Kommentare";
+    h2.addEventListener("click", (evt) => {
         const qDivs = evt.target.parentElement.querySelectorAll("div");
         qDivs.forEach(
             (div) => (div.style.display = !div.style.display || div.style.display === "flex" ? "none" : "flex"),
@@ -49,8 +49,8 @@ async function addComments(comments) {
 
             const del = document.createElement("span");
             del.classList.add("delete-btn");
-            del.textContent = "[Löschen]";
             del.addEventListener("click", async (evt) => {
+                if (!confirm("Bist du sicher, dass du den Kommentar löschen willst?")) return;
                 const body = JSON.stringify({
                     pid: uid,
                     cid: evt.target.parentElement.parentElement.dataset.id,
@@ -66,11 +66,13 @@ async function addComments(comments) {
 
             const edit = document.createElement("span");
             edit.classList.add("edit-btn");
-            edit.textContent = "[Bearbeiten]";
             edit.addEventListener("click", (evt) => {
                 const updateDiv = document.createElement("div");
+                updateDiv.id = "edit-div";
 
-                const input = document.createElement("input");
+                const inputDiv = document.createElement("div");
+                const input = document.createElement("textarea");
+                input.placeholder = "Dein Kommentar...";
                 input.value = comment.comment;
                 const submit = document.createElement("input");
                 submit.type = "submit";
@@ -92,7 +94,8 @@ async function addComments(comments) {
                     if (res.success) window.location.reload();
                 });
 
-                updateDiv.append(input, submit);
+                inputDiv.append(input, submit);
+                updateDiv.append(inputDiv);
                 div.insertAdjacentElement("beforebegin", updateDiv);
                 commentsDiv.removeChild(div);
             });
@@ -103,16 +106,16 @@ async function addComments(comments) {
         divs.push(div);
     }
 
-    commentsDiv.append(h1, ...divs);
+    commentsDiv.append(h2, ...divs);
 
     const addDiv = document.createElement("div");
     addDiv.id = "add-div";
     const add = document.createElement("span");
     add.classList.add("add-btn");
-    add.textContent = "[Neuen Kommentar hinzufügen]";
     add.addEventListener("click", (evt) => {
         const div = document.createElement("div");
         const input = document.createElement("textarea");
+        input.placeholder = "Dein Kommentar...";
         const submit = document.createElement("input");
         submit.type = "submit";
         submit.value = "Hinzufügen";
diff --git a/quotes/public/index.html b/quotes/public/index.html
index b2e4fa2..ae95468 100644
--- a/quotes/public/index.html
+++ b/quotes/public/index.html
@@ -32,17 +32,17 @@
             </form>
 
             <button id="open_TGI13.1">TGI13.1</button>
-            <ul style="display: none;" id="TGI13.1"></ul>
+            <ul style="display: none" id="TGI13.1"></ul>
             <button id="open_TGI13.2">TGI13.2</button>
-            <ul style="display: none;" id="TGI13.2"></ul>
+            <ul style="display: none" id="TGI13.2"></ul>
             <button id="open_TGM13.1">TGM13.1</button>
-            <ul style="display: none;" id="TGM13.1"></ul>
+            <ul style="display: none" id="TGM13.1"></ul>
             <button id="open_TGM13.2">TGM13.2</button>
-            <ul style="display: none;" id="TGM13.2"></ul>
+            <ul style="display: none" id="TGM13.2"></ul>
             <button id="open_TGTM13.1">TGTM13.1</button>
-            <ul style="display: none;" id="TGTM13.1"></ul>
+            <ul style="display: none" id="TGTM13.1"></ul>
             <button id="open_teacher">Lehrer</button>
-            <ul style="display: none;" id="teacher"></ul>
+            <ul style="display: none" id="teacher"></ul>
         </main>
 
         <script src="script.js" charset="utf-8"></script>
diff --git a/quotes/public/script.js b/quotes/public/script.js
index cf3229a..3e6f52e 100644
--- a/quotes/public/script.js
+++ b/quotes/public/script.js
@@ -29,12 +29,13 @@ function appendQuote(response) {
                 "beforeend",
                 `<li>${elem["name"]} ${elem["middlename"] ? elem["middlename"] + " " : ""}${elem["surname"]}: ${
                     elem["quote"]
-                }${elem["owner"] ? ' <span data-id="' + elem["id"] + '">[x]</span></li>' : ""}`,
+                }${elem["owner"] ? ' <span data-id="' + elem["id"] + '"></span></li>' : ""}`,
             );
 
         const span = document.querySelector(`li span[data-id="${elem["id"]}"]`);
         if (span)
             span.addEventListener("click", (event) => {
+                if (!confirm("Bist du dir sicher, dass du das Zitat löschen willst?")) return;
                 fetch("api/delete/" + event.target.getAttribute("data-id"), { method: "DELETE" })
                     .then((response) => response.text())
                     .then((response) => {
diff --git a/quotes/public/style.css b/quotes/public/style.css
index a4eaf19..f098bda 100644
--- a/quotes/public/style.css
+++ b/quotes/public/style.css
@@ -46,8 +46,10 @@ li {
 
 span {
     float: right;
-    color: red;
     cursor: pointer;
+    background: url("/feather/icons/trash.svg") no-repeat center;
+    width: 30px;
+    height: 30px;
 }
 
 input,