Multiple images

ShouldTM work

6 files changed, 61 insertions, 55 deletions

diff --git a/db.js b/db.js
index 70e1e09..5cd8810 100644
--- a/db.js
+++ b/db.js
@@ -66,12 +66,14 @@ class DB {
         const tables = await this.getTables();
         await this.query("DROP TABLE IF EXISTS profile_comments");
         await this.query("DROP TABLE IF EXISTS profile_answers");
+        await this.query("DROP TABLE IF EXISTS profile_image_ratios");
         await this.query("DROP TABLE IF EXISTS profile_questions");
         await this.query("DROP TABLE IF EXISTS profile_input_types");
         await this.query(tables[8]);
         await this.query(tables[9]);
         await this.query(tables[10]);
         await this.query(tables[11]);
+        await this.query(tables[18]);
         await this.initProfiles();
     }
 
@@ -81,7 +83,7 @@ class DB {
             try {
                 await this.query("INSERT INTO profile_input_types (type) VALUES (?)", type);
             } catch (e) {
-                continue;
+                console.log(e);
             }
         }
 
@@ -89,11 +91,25 @@ class DB {
         const questions = data.split("\n");
         for (const question of questions) {
             if (question) {
-                const [q, type] = question.split(" - ");
-                await this.query("INSERT INTO profile_questions (question, question_type) VALUE (?, ?)", [
-                    q,
-                    types.indexOf(type) + 1,
-                ]).catch(() => console.log("Profile question already exists!"));
+                const [q, type, ...parameters] = question.split(" - ");
+                let insertId;
+                try {
+                    insertId = (await this.query("INSERT INTO profile_questions (question, question_type) VALUE (?, ?)", [
+                        q,
+                        types.indexOf(type) + 1,
+                    ])).insertId;
+                } catch (e) {
+                    console.log("Profile question already exists!");
+                }
+                if (type === "image") {
+                    const [x, y] = parameters[0].split("/").map(v => parseInt(v));
+                    console.log(insertId, x, y);
+                    try {
+                        await this.query("INSERT INTO profile_image_ratios (question_id, x, y) VALUE (?,?,?)", [insertId, x, y]);
+                    } catch (e) {
+                        console.log(e);
+                    }
+                }
             }
         }
     }
diff --git a/drop.sql b/drop.sql
index 0b0055e..f6a7115 100644
--- a/drop.sql
+++ b/drop.sql
@@ -5,6 +5,7 @@ DROP TABLE IF EXISTS ranking_questions;
 DROP TABLE IF EXISTS ranking_answers;
 DROP TABLE IF EXISTS profile_comments;
 DROP TABLE IF EXISTS profile_answers;
+DROP TABLE IF EXISTS profile_image_ratios;
 DROP TABLE IF EXISTS profile_questions;
 DROP TABLE IF EXISTS profile_input_types;
 DROP TABLE IF EXISTS question_answers;
diff --git a/profile.txt b/profile.txt
index 49a903f..8deffa5 100644
--- a/profile.txt
+++ b/profile.txt
@@ -8,5 +8,6 @@ Lebensmotto/Seniorquote - text
 Lieblingsbands/-musiker/-genre - text
 Lieblingsfach - text
 Hassfach - text
-Kinderbild - file
-QR-Code Text (z.B. Social Media Links, random Text, whatever) - text
\ No newline at end of file
+Kinderbild - file - 10/13
+QR-Code Text (z.B. Social Media Links, random Text, whatever) - text
+Aktuelles Bild - file - 1/1
\ No newline at end of file
diff --git a/profile/index.js b/profile/index.js
index 6bc2221..3240c77 100644
--- a/profile/index.js
+++ b/profile/index.js
@@ -35,6 +35,13 @@ app.get("/api/questions", async (req, res) => {
         const qid = questions.findIndex((question) => question.id === answer.question_id);
         if (qid >= 0) questions[qid].answer = answer.answer;
     }
+
+    const ratios = await db.query("SELECT question_id, x, y FROM profile_image_ratios");
+    for (const { question_id, x, y } of ratios) {
+        const qid = questions.findIndex((question) => question.id === question_id);
+        if (qid >= 0) questions[qid].ratio = { x, y };
+    }
+
     res.json(questions);
 });
 
@@ -78,45 +85,32 @@ async function answer(req, res, qs) {
     }
 }
 
-app.post("/api/answerImage", async (req, res) => {
-    return await answerImage(req, res, "INSERT INTO profile_answers (answer, question_id, user_id) VALUE (?,?,?)");
-});
-app.put("/api/answerImage", async (req, res) => {
-    return await answerImage(req, res, "UPDATE profile_answers SET answer = ? WHERE question_id = ? AND user_id = ?");
-});
+app.post("/api/answerImage", async (req, res) => await answerImage(req, res));
 
-async function answerImage(req, res, qs) {
+async function answerImage(req, res) {
     try {
         for (const fid in req.files) {
             if (!req.files.hasOwnProperty(fid)) continue;
             const image = req.files[fid];
-            const name = `child_${req.session.uid}.jpg`;
+            const name = `${fid}_${req.session.uid}.jpg`;
             const params = [name, fid, req.session.uid];
             try {
-                await image.mv(`${__dirname}/public/uploads/${name}`); // Overwrite anyway - tbh we don't need update stmt
-                await db.query(qs, params);
+                await image.mv(`${__dirname}/public/uploads/${name}`); // Overwrite anyway
+                await db.query("INSERT INTO profile_answers (answer, question_id, user_id) VALUE (?,?,?)", params);
             } catch (e) {
                 if (e.code === "ER_DUP_ENTRY") {
-                    // Fix strange POST behaviour
-                    try {
-                        await db.query(
-                            "UPDATE profile_answers SET answer = ? WHERE question_id = ? AND user_id = ?",
-                            params,
-                        );
-                    } catch (e) {
-                        console.error(e);
-                        return res.json({ success: false });
-                    }
+                    console.log("Image already in db!");
+                    return res.json({ success: true });
                 } else {
                     console.error(e);
                     return res.json({ success: false });
                 }
             }
         }
-        res.json({ success: true });
+        return res.json({ success: true });
     } catch (e) {
         console.error(e);
-        res.json({ success: false });
+        return res.json({ success: false });
     }
 }
 
diff --git a/profile/public/script.js b/profile/public/script.js
index 8910746..767b2f2 100644
--- a/profile/public/script.js
+++ b/profile/public/script.js
@@ -1,8 +1,6 @@
 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");
@@ -11,20 +9,9 @@ const slider = document.querySelector("#rotation-slider");
 const controlButtons = document.querySelectorAll(".control-btns button");
 let cropper = undefined;
 
-const crop = () => {
-    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,
-    });
+const crop = (ratio, imageID) => {
+    popupImage.dataset.id = imageID;
+    return new Cropper(popupImage, { aspectRatio: ratio.x / ratio.y });
 };
 
 NodeList.prototype.on = function (listener, event) {
@@ -51,8 +38,7 @@ function appendQuestions(question) {
         const img = document.createElement("img");
         img.src = "uploads/" + question.answer;
         img.alt = "Image";
-        div.appendChild(img);
-        imageInit = false;
+        div.appendChild(img); // TODO: Max size
     }
 
     const field = document.createElement("input");
@@ -64,7 +50,7 @@ function appendQuestions(question) {
     field.type = question.type;
     field.maxLength = 100;
     if (question.type === "file") {
-        imageID = question.id;
+        const imageID = question.id;
         field.accept = "image/*";
         field.addEventListener("input", (e) => {
             const file = e.target.files[0];
@@ -73,7 +59,7 @@ function appendQuestions(question) {
             reader.addEventListener("load", (e) => {
                 popupImage.src = e.target.result;
                 popup.style.display = "block";
-                crop();
+                cropper = crop(question.ratio, imageID);
             });
             reader.readAsDataURL(file);
         });
@@ -107,18 +93,15 @@ form.addEventListener("submit", async (evt) => {
 saveBtn.addEventListener("click", (e) => {
     cropper.getCroppedCanvas().toBlob(async (blob) => {
         const url = "api/answerImage";
-        const method = imageInit ? "POST" : "PUT";
+        const method = "POST";
         const body = new FormData();
-        if (imageID === -1) {
-            return;
-        }
+        const imageID = popupImage.dataset.id;
         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) => {
diff --git a/tables.sql b/tables.sql
index c638cab..66363b6 100644
--- a/tables.sql
+++ b/tables.sql
@@ -198,3 +198,14 @@ CREATE TABLE IF NOT EXISTS secrets
     CONSTRAINT `fk_user_secret` FOREIGN KEY (user_id) REFERENCES users (id)
 ) ENGINE = InnoDB
   DEFAULT CHARSET = utf8;
+
+CREATE TABLE IF NOT EXISTS profile_image_ratios
+(
+  id INTEGER PRIMARY KEY AUTO_INCREMENT,
+  question_id INTEGER NOT NULL UNIQUE,
+  x INTEGER NOT NULL,
+  y INTEGER NOT NULL,
+
+  CONSTRAINT `fk_profile_image_question` FOREIGN KEY (question_id) REFERENCES profile_questions (id)
+) ENGINE = InnoDB
+  DEFAULT CHARSET = utf8;
\ No newline at end of file