From cdffcd2a32d54137de96567f0d211eda6039a9d3 Mon Sep 17 00:00:00 2001
From: LarsVomMars
Date: Sat, 20 Feb 2021 17:42:04 +0100
Subject: Multiple images
ShouldTM work
---
db.js | 28 ++++++++++++++++++++++------
drop.sql | 1 +
profile.txt | 5 +++--
profile/index.js | 38 ++++++++++++++++----------------------
profile/public/script.js | 33 ++++++++-------------------------
tables.sql | 11 +++++++++++
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
--
cgit v1.2.3