Cropper, save and control buttons, rework

3 files changed, 66 insertions, 20 deletions

diff --git a/profile/public/index.html b/profile/public/index.html
index e6f2e6c..a87fb77 100644
--- a/profile/public/index.html
+++ b/profile/public/index.html
@@ -34,6 +34,14 @@
         </main>
         <div class="popup">
             <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">
+            <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>
+                <button class="pure-button pure-button-primary" id="norm" data-value="0" data-rot="false">0</button>
+            </div>
         </div>
 
         <script
diff --git a/profile/public/script.js b/profile/public/script.js
index 1cfb6d3..eb5ff14 100644
--- a/profile/public/script.js
+++ b/profile/public/script.js
@@ -1,15 +1,20 @@
 const fs = document.querySelector("fieldset");
 const form = document.querySelector("form");
 let init = true;
+let imageInit = true;
+let imageID = -1;
 
 const popup = document.querySelector(".popup");
 const popupImage = document.querySelector("#popup-img");
+const saveBtn = document.querySelector("#save-btn");
+const slider = document.querySelector("#rotation-slider");
+const controlButtons = document.querySelectorAll(".control-btns button");
+let cropper = undefined;
+
 const crop = () => {
-    var minAspectRatio = 0.5;
-    var maxAspectRatio = 1.5;
-    const cropper = new Cropper(document.getElementById("popup-img"), {
+    cropper = new Cropper(document.getElementById("popup-img"), { // Consider dataset id
         dragMode: "move",
-        aspectRatio: 2 / 3,
+        aspectRatio: 10 / 13,
         autoCropArea: 0.65,
         restore: false,
         guides: false,
@@ -19,7 +24,12 @@ const crop = () => {
         cropBoxResizable: false,
         toggleDragModeOnDblclick: false,
     });
-    return cropper;
+};
+
+NodeList.prototype.on = function (listener, event) {
+    for (const node of this) {
+        node.addEventListener(listener, event);
+    }
 };
 
 function updateHeading(user) {
@@ -41,6 +51,7 @@ function appendQuestions(question) {
         img.src = "uploads/" + question.answer;
         img.alt = "Image";
         div.appendChild(img);
+        imageInit = false;
     }
 
     const field = document.createElement("input");
@@ -51,18 +62,17 @@ function appendQuestions(question) {
     field.placeholder = question.question;
     field.type = question.type;
     if (question.type === "file") {
+        imageID = question.id;
         field.accept = "image/*";
         field.addEventListener("input", (e) => {
             const file = e.target.files[0];
             popupImage.file = file;
             const reader = new FileReader();
-            reader.onload = (function (aImg) {
-                return function (e) {
-                    aImg.src = e.target.result;
-                    popup.style.display = "block";
-                    crop();
-                };
-            })(popupImage);
+            reader.addEventListener("load", (e) => {
+                popupImage.src = e.target.result;
+                popup.style.display = "block";
+                crop();
+            });
             reader.readAsDataURL(file);
         });
     }
@@ -73,20 +83,46 @@ function appendQuestions(question) {
 
 form.addEventListener("submit", async (evt) => {
     evt.preventDefault();
-    const url = init ? "api/add" : "api/update";
     const method = init ? "POST" : "PUT";
 
     const inputs = form.querySelectorAll("input");
-    const body = new FormData();
+    const rawBody = {}
     for (const input of inputs) {
-        if (input.type !== "file") body.append(input.name, input.value);
-        else body.append(input.name, input.files[0] ?? "dbg-image");
+        if (input.type !== "file") rawBody[input.name] = input.value;
     }
+    const body = JSON.stringify(rawBody);
+
+    const resp = await fetch("api/answer", { method, body });
+    const res = await resp.json();
+    if (!res.success) alert("AHHHH");
+    else init = false;
+    // else location.reload(); // BUT WHY?
+});
+
+saveBtn.addEventListener("click", (e) => {
+    cropper.getCroppedCanvas()
+        .toBlob(async (blob) => {
+            const url = "api/answerImage";
+            const method = imageInit ? "POST" : "PUT"; // Separate image init
+            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");
+});
+
+slider.addEventListener("input", (e) => {
+    cropper.rotateTo(-e.target.value);
+});
 
-    const resp = await fetch(url, { method, body });
-    const res = await resp.text();
-    if (res !== "ok") alert("AHHHH");
-    else location.reload();
+controlButtons.on("click", (e) => {
+    if (e.target.dataset.rot === "true") cropper.rotate(+e.target.dataset.value);
+    else cropper.rotateTo(+e.target.dataset.value);
 });
 
 fetch("/auth/api/self")
diff --git a/profile/public/style.css b/profile/public/style.css
index a30e7ef..66c0bdf 100644
--- a/profile/public/style.css
+++ b/profile/public/style.css
@@ -137,4 +137,6 @@ img {
     z-index: 10;
     position: absolute;
     display: none;
+    max-height: 600px;
+    max-width: 600px;
 }
\ No newline at end of file