diff options
Diffstat (limited to 'profile')
| -rw-r--r-- | profile/index.js | 38 | ||||
| -rw-r--r-- | profile/public/script.js | 33 |
2 files changed, 24 insertions, 47 deletions
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) => { |