From 0c45adc72d0f5c276509f2a6c5971be5dc7679aa Mon Sep 17 00:00:00 2001 From: LarsVomMars Date: Wed, 27 Jan 2021 22:16:22 +0100 Subject: Hm --- profile/public/index.html | 56 +++++++++++++++++++++++++++-------------------- profile/public/script.js | 32 ++++++++++++++++++++++++++- profile/public/style.css | 6 +++++ 3 files changed, 69 insertions(+), 25 deletions(-) (limited to 'profile/public') diff --git a/profile/public/index.html b/profile/public/index.html index 672f409..f8fdee5 100644 --- a/profile/public/index.html +++ b/profile/public/index.html @@ -1,32 +1,40 @@ - - - - + + + - - Steckbrief - + /> + + + + Steckbrief + - -
- Home - Logout -
-
-

-
-
- - -
-
-
- - + +
+ Home + Logout +
+
+

+
+
+ +
+
+
+
+ +
+ + diff --git a/profile/public/script.js b/profile/public/script.js index b927f9f..ba2284b 100644 --- a/profile/public/script.js +++ b/profile/public/script.js @@ -2,6 +2,21 @@ const fs = document.querySelector("fieldset"); const form = document.querySelector("form"); let init = true; +const popup = document.querySelector(".popup"); +const popupImage = document.querySelector("#popup-img"); +const cropper = new Cropper(popupImage, { // ration 2/3 + dragMode: 'move', + aspectRatio: 2 / 3, + autoCropArea: 0.65, + restore: false, + guides: false, + center: false, + highlight: false, + cropBoxMovable: false, + cropBoxResizable: false, + toggleDragModeOnDblclick: false, +}); + function updateHeading(user) { document.getElementById("username").textContent = `Steckbrief: ${user.name} ${user.middlename || ""} ${user.surname}`; } @@ -28,7 +43,22 @@ function appendQuestions(question) { field.value = question.answer || ""; field.placeholder = question.question; field.type = question.type; - if (question.type === "file") field.accept = "image/*"; + if (question.type === "file") { + 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; + }; + })(popupImage); + reader.readAsDataURL(file); + popupImage.style.display = "block !important"; + console.log(cropper); + }); + } div.appendChild(field); fs.insertBefore(div, fs.querySelector("button")); diff --git a/profile/public/style.css b/profile/public/style.css index 106e590..a30e7ef 100644 --- a/profile/public/style.css +++ b/profile/public/style.css @@ -132,3 +132,9 @@ img { height: 80%; margin-bottom: 12px; } + +.popup { + z-index: 10; + position: absolute; + display: none; +} \ No newline at end of file -- cgit v1.2.3 From 08adc7079833e15f5caf4594037bbf580644411b Mon Sep 17 00:00:00 2001 From: Marvin Borner Date: Thu, 28 Jan 2021 14:15:46 +0100 Subject: ez --- profile/index.js | 20 ++++++++++---- profile/public/index.html | 70 +++++++++++++++++++++++++---------------------- profile/public/script.js | 39 +++++++++++++++----------- 3 files changed, 75 insertions(+), 54 deletions(-) (limited to 'profile/public') diff --git a/profile/index.js b/profile/index.js index ee81632..d9ee068 100644 --- a/profile/index.js +++ b/profile/index.js @@ -182,10 +182,10 @@ app.delete("/api/comment", async (req, res) => { // Char API app.get("/api/char/:uid", async (req, res) => { const uid = req.params.uid; - const char = await db.query( - "SELECT txt FROM profile_char WHERE profile_id = ? AND user_id = ?", - [uid, req.session.uid], - ); + const char = await db.query("SELECT txt FROM profile_char WHERE profile_id = ? AND user_id = ?", [ + uid, + req.session.uid, + ]); res.json(char.length > 0 ? char[0] : {}); }); @@ -194,7 +194,11 @@ app.post("/api/char/:uid", async (req, res) => { const { char } = req.body; if (!char || char.length > 255) return res.json({ success: false }); try { - await db.query("INSERT INTO profile_char (profile_id, user_id, txt) VALUE (?,?,?)", [uid, req.session.uid, char]); + await db.query("INSERT INTO profile_char (profile_id, user_id, txt) VALUE (?,?,?)", [ + uid, + req.session.uid, + char, + ]); res.json({ success: true }); } catch (e) { console.error(e); @@ -207,7 +211,11 @@ app.put("/api/char/:uid", async (req, res) => { const { char } = req.body; if (!char || char.length > 255) return res.json({ success: false }); try { - await db.query("UPDATE profile_char SET txt = ? WHERE profile_id = ? AND user_id = ?", [char, uid, req.session.uid]); + await db.query("UPDATE profile_char SET txt = ? WHERE profile_id = ? AND user_id = ?", [ + char, + uid, + req.session.uid, + ]); res.json({ success: true }); } catch (e) { console.error(e); diff --git a/profile/public/index.html b/profile/public/index.html index f8fdee5..e6f2e6c 100644 --- a/profile/public/index.html +++ b/profile/public/index.html @@ -1,40 +1,46 @@ - - - - + + + - - - - Steckbrief - + /> + + + Steckbrief + - -
- Home - Logout -
-
-

-
-
- -
-
-
-
- -
- - + +
+ Home + Logout +
+
+

+
+
+ +
+
+
+
+ Picture +
+ + + + diff --git a/profile/public/script.js b/profile/public/script.js index ba2284b..1cfb6d3 100644 --- a/profile/public/script.js +++ b/profile/public/script.js @@ -4,21 +4,28 @@ let init = true; const popup = document.querySelector(".popup"); const popupImage = document.querySelector("#popup-img"); -const cropper = new Cropper(popupImage, { // ration 2/3 - dragMode: 'move', - aspectRatio: 2 / 3, - autoCropArea: 0.65, - restore: false, - guides: false, - center: false, - highlight: false, - cropBoxMovable: false, - cropBoxResizable: false, - toggleDragModeOnDblclick: false, -}); +const crop = () => { + var minAspectRatio = 0.5; + var maxAspectRatio = 1.5; + const cropper = new Cropper(document.getElementById("popup-img"), { + dragMode: "move", + aspectRatio: 2 / 3, + autoCropArea: 0.65, + restore: false, + guides: false, + center: false, + highlight: false, + cropBoxMovable: false, + cropBoxResizable: false, + toggleDragModeOnDblclick: false, + }); + return cropper; +}; function updateHeading(user) { - document.getElementById("username").textContent = `Steckbrief: ${user.name} ${user.middlename || ""} ${user.surname}`; + document.getElementById("username").textContent = `Steckbrief: ${user.name} ${user.middlename || ""} ${ + user.surname + }`; } function appendQuestions(question) { @@ -45,18 +52,18 @@ function appendQuestions(question) { field.type = question.type; if (question.type === "file") { field.accept = "image/*"; - field.addEventListener("input", e => { + 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.readAsDataURL(file); - popupImage.style.display = "block !important"; - console.log(cropper); }); } -- cgit v1.2.3 From 43bee3b95a6a8f06b53b45c908e3fd6e69f17089 Mon Sep 17 00:00:00 2001 From: LarsVomMars Date: Fri, 29 Jan 2021 11:10:25 +0100 Subject: Cropper, save and control buttons, rework --- profile/index.js | 92 ++++++++++++++++------------------------------- profile/public/index.html | 8 +++++ profile/public/script.js | 76 ++++++++++++++++++++++++++++----------- profile/public/style.css | 2 ++ 4 files changed, 97 insertions(+), 81 deletions(-) (limited to 'profile/public') diff --git a/profile/index.js b/profile/index.js index d9ee068..be0c232 100644 --- a/profile/index.js +++ b/profile/index.js @@ -38,87 +38,57 @@ app.get("/api/questions", async (req, res) => { res.json(questions); }); -app.post("/api/add", async (req, res) => { - try { - for (let qid in req.body) { - if (!req.body.hasOwnProperty(qid) || req.body[qid] === "dbg-image") continue; - let answer = req.body[qid].replace(//g, ">"); - try { - await db.query("INSERT INTO profile_answers (question_id, user_id, answer) VALUES (?, ?, ?)", [ - qid, - req.session.uid, - answer.replace(//g, ">"), - ]); - } catch (e) { - console.error(e); - } - } - for (let fid in req.files) { - if (!req.files.hasOwnProperty(fid)) return; - - let image, imageType, imageName; +app.post("/api/answer", async (req, res) => { + return await answer(req, res, "INSERT INTO profile_answers (answer, question_id, user_id) VALUE (?,?,?)"); +}); +app.put("/api/answer", async (req, res) => { + return await answer(req, res, "UPDATE profile_answers SET answer = ? WHERE question_id = ? AND user_id = ?"); +}); - image = req.files[fid]; - imageType = image.name.split(".").reverse()[0]; - imageName = `${req.session.uid}_${new Date().getTime()}.${imageType}`; - image.mv(__dirname + "/public/uploads/" + imageName); +async function answer(req, res, qs) { + try { + for (const qid of req.body) { + if (!req.body.hasOwnProperty(qid)/* || !req.body[qid]*/) continue; + const answer = req.body[qid]; try { - await db.query("INSERT INTO profile_answers (question_id, user_id, answer) VALUES (?, ?, ?)", [ - fid, - req.session.uid, - imageName, - ]); + await db.query(qs, [answer, qid, req.session.uid]); // TODO: Frontend display sanitize } catch (e) { console.error(e); } } - res.send("ok"); + res.json({ success: true }); } catch (e) { console.error(e); - res.send("error"); + res.json({ success: false }); } +} + +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.put("/api/update", async (req, res) => { +async function answerImage(req, res, qs) { try { - for (let qid in req.body) { - if (!req.body.hasOwnProperty(qid) || req.body[qid] === "dbg-image") continue; - let answer = req.body[qid].replace(//g, ">"); - try { - await db.query("UPDATE profile_answers SET answer = ? WHERE question_id = ? AND user_id = ?", [ - answer, - qid, - req.session.uid, - ]); - } catch (e) { - console.error(e); - } - } - for (let fid in req.files) { - if (!req.files.hasOwnProperty(fid)) return; - - let image, imageType, imageName; - - image = req.files[fid]; - imageType = image.name.split(".").reverse()[0]; - imageName = `${req.session.uid}_${new Date().getTime()}.${imageType}`; - image.mv(__dirname + "/public/uploads/" + imageName); + for (const fid in req.files) { + if (!req.files.hasOwnProperty(fid)) continue; + const image = req.files[fid]; + const name = `${req.session.uid}_${new Date().getTime()}.jpg`; try { - await db.query("UPDATE profile_answers SET answer = ? WHERE question_id = ? AND user_id = ?", [ - imageName, - fid, - req.session.uid, - ]); + await image.mv(`${__dirname}/public/uploads/${name}`); + await db.query(qs, [name, fid, req.session.uid]); } catch (e) { console.error(e); } } - res.send("ok"); + res.json({ success: true }); } catch (e) { console.error(e); - res.send("error"); + res.json({ success: false }); } -}); +} // Comments API app.get("/api/comments/:uid", async (req, res) => { 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 @@
Picture + + + +
+ + + +