idk

6 files changed, 57 insertions, 31 deletions

diff --git a/profile/public/index.html b/profile/public/index.html
index a87fb77..91cb545 100644
--- a/profile/public/index.html
+++ b/profile/public/index.html
@@ -26,6 +26,10 @@
         </div>
         <main>
             <h2 id="username"></h2>
+            <p>
+                Bitte fülle diese Seite nur mit korrekten Daten aus, da diese direkt in der Abizeitung dargestellt
+                werden. Auf dem Kinderbild solltest du gut sichtbar und nicht älter als 8 Jahre sein.
+            </p>
             <form class="pure-form pure-form-stacked">
                 <fieldset>
                     <button type="submit" class="pure-button pure-button-primary">Senden</button>
@@ -36,7 +40,7 @@
             <img id="popup-img" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture" />
             <button class="pure-button pure-button-primary" id="save-btn">Übernehmen</button>
             <label for="rotation-slider">Drehen</label>
-            <input id="rotation-slider" type="range" min="-180" max="180" value="0">
+            <input id="rotation-slider" type="range" min="-180" max="180" value="0" />
             <div class="control-btns">
                 <button class="pure-button pure-button-primary" id="rot45" data-value="-45" data-rot="true">45</button>
                 <button class="pure-button pure-button-primary" id="nrot45" data-value="45" data-rot="true">-45</button>
diff --git a/profile/public/script.js b/profile/public/script.js
index 91b723e..db9a277 100644
--- a/profile/public/script.js
+++ b/profile/public/script.js
@@ -12,17 +12,18 @@ const controlButtons = document.querySelectorAll(".control-btns button");
 let cropper = undefined;
 
 const crop = () => {
-    cropper = new Cropper(document.getElementById("popup-img"), { // Consider dataset id
-        dragMode: "move",
+    cropper = new Cropper(document.getElementById("popup-img"), {
+        // Consider dataset id
+        //dragMode: "move",
         aspectRatio: 10 / 13,
-        autoCropArea: 0.65,
-        restore: false,
-        guides: false,
-        center: false,
-        highlight: false,
-        cropBoxMovable: false,
-        cropBoxResizable: false,
-        toggleDragModeOnDblclick: false,
+        //autoCropArea: 0.65,
+        //restore: false,
+        //guides: false,
+        //center: false,
+        //highlight: false,
+        //cropBoxMovable: false,
+        //cropBoxResizable: false,
+        //toggleDragModeOnDblclick: false,
     });
 };
 
@@ -86,7 +87,7 @@ form.addEventListener("submit", async (evt) => {
     const method = init ? "POST" : "PUT";
 
     const inputs = form.querySelectorAll("input");
-    const rawBody = {}
+    const rawBody = {};
     for (const input of inputs) {
         if (input.type !== "file") rawBody[input.name] = input.value;
     }
@@ -94,25 +95,32 @@ form.addEventListener("submit", async (evt) => {
 
     const resp = await fetch("api/answer", { method, body, headers: { "Content-Type": "application/json" } });
     const res = await resp.json();
-    if (!res.success) alert("AHHHH");
+    if (!res.success) alert("An error occurred");
     else init = false;
 });
 
 saveBtn.addEventListener("click", (e) => {
-    cropper.getCroppedCanvas()
-        .toBlob(async (blob) => {
-            const url = "api/answerImage";
-            const method = imageInit ? "POST" : "PUT";
-            const body = new FormData();
-            if (imageID === -1) {
-                return;
-            }
-            body.append(imageID, blob);
-            const resp = await fetch(url, { method, body });
-            const res = await resp.json();
-            if (!res.success) alert("AHHH");
-            else imageInit = false;
-        }, "image/jpeg");
+    cropper.getCroppedCanvas().toBlob(async (blob) => {
+        const url = "api/answerImage";
+        const method = imageInit ? "POST" : "PUT";
+        const body = new FormData();
+        if (imageID === -1) {
+            return;
+        }
+        body.append(imageID, blob);
+        const resp = await fetch(url, { method, body });
+        const res = await resp.json();
+        if (!res.success) {
+            alert("An error occurred");
+        } else {
+            imageInit = false;
+            popup.style.display = "none";
+            cropper.destroy();
+            document.querySelectorAll("img").forEach((elem) => {
+                if (elem.src.startsWith("http")) elem.src += "#" + new Date().getTime();
+            });
+        }
+    }, "image/jpeg");
 });
 
 slider.addEventListener("input", (e) => {
diff --git a/profile/public/style.css b/profile/public/style.css
index db3457a..becb428 100644
--- a/profile/public/style.css
+++ b/profile/public/style.css
@@ -141,4 +141,8 @@ img {
     display: none;
     max-height: 600px;
     max-width: 600px;
-}
\ No newline at end of file
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    border: 1px solid black;
+}
diff --git a/profile/public/user.js b/profile/public/user.js
index 6dfb95b..963904c 100644
--- a/profile/public/user.js
+++ b/profile/public/user.js
@@ -13,7 +13,9 @@ function addUser(userData) {
         if (!questions.hasOwnProperty(questionID) || questions[questionID].type === "file") continue;
         const question = questions[questionID];
         const div = document.createElement("div");
-        div.innerHTML = `<b>${question.question.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</b> <span>${(question.answer || "Hitler").replace(/</g, "&lt;").replace(/>/g, "&gt;") || ""}</span>`;
+        div.innerHTML = `<b>${question.question.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</b> <span>${
+            (question.answer || "nichts").replace(/</g, "&lt;").replace(/>/g, "&gt;") || ""
+        }</span>`;
         divs.push(div);
     }
     const h1 = document.createElement("h1");
diff --git a/profile/public/users.html b/profile/public/users.html
index ebca429..f7bd346 100644
--- a/profile/public/users.html
+++ b/profile/public/users.html
@@ -19,12 +19,20 @@
         </div>
 
         <main>
-            <p>Nutzerliste</p>
+            <p>
+                Hier kannst du andere Schüler kommentieren und Erkennungsmerkmale schreiben. Diese werden dann auf dem
+                Steckbrief der jeweiligen Person in der Abizeitung dargestellt.
+            </p>
             <div id="student-list">
+                TGM13.1
                 <ul id="class_1"></ul>
+                TGM13.2
                 <ul id="class_2"></ul>
+                TGTM13.1
                 <ul id="class_3"></ul>
+                TGI13.1
                 <ul id="class_4"></ul>
+                TGI13.2
                 <ul id="class_5"></ul>
             </div>
         </main>
diff --git a/profile/public/users.js b/profile/public/users.js
index 77bc85c..73f0e4a 100644
--- a/profile/public/users.js
+++ b/profile/public/users.js
@@ -2,7 +2,7 @@ function addUser(user) {
     const li = document.createElement("li");
     li.textContent = `${user.name} ${user.middlename || ""} ${user.surname}`;
     li.addEventListener("click", () => window.location.assign(`./user.html?uid=${user.id}`));
-    document.getElementById("class_" + user.class_id).appendChild(li);
+    if (user.class_id < 6) document.getElementById("class_" + user.class_id).appendChild(li);
 }
 
 fetch("/auth/api/list?class=all")