aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMarvin Borner2021-01-28 14:15:46 +0100
committerMarvin Borner2021-01-28 14:15:46 +0100
commit08adc7079833e15f5caf4594037bbf580644411b (patch)
tree3e240525158658389292da4cd875235ae24560de
parent0bfd98fa5efd429288460e5714926cf574fb13a0 (diff)
ez
Diffstat
-rw-r--r--profile/index.js20
-rw-r--r--profile/public/index.html70
-rw-r--r--profile/public/script.js39
3 files changed, 75 insertions, 54 deletions
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 @@
<!DOCTYPE html>
<html lang="de">
-<head>
- <meta charset="UTF-8"/>
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- <link
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link
rel="stylesheet"
href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
crossorigin="anonymous"
- />
- <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js"
- integrity="sha512-9pGiHYK23sqK5Zm0oF45sNBAX/JqbZEP7bSDHyt+nT3GddF+VFIcYNqREt0GDpmFVZI3LZ17Zu9nMMc9iktkCw=="
- crossorigin="anonymous"></script>
- <link rel="stylesheet" href="style.css" type="text/css" media="all"/>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css"
- integrity="sha512-w+u2vZqMNUVngx+0GVZYM21Qm093kAexjueWOv9e9nIeYJb1iEfiHC7Y+VvmP/tviQyA5IR32mwN/5hTEJx6Ng=="
- crossorigin="anonymous"/>
- <title>Steckbrief</title>
-</head>
+ />
+ <link rel="stylesheet" href="style.css" type="text/css" media="all" />
+ <link
+ rel="stylesheet"
+ href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.css"
+ integrity="sha512-w+u2vZqMNUVngx+0GVZYM21Qm093kAexjueWOv9e9nIeYJb1iEfiHC7Y+VvmP/tviQyA5IR32mwN/5hTEJx6Ng=="
+ crossorigin="anonymous"
+ />
+ <title>Steckbrief</title>
+ </head>
-<body>
-<div class="pure-menu pure-menu-horizontal">
- <a href="/" class="pure-menu-item pure-menu-link">Home</a>
- <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a>
-</div>
-<main>
- <h2 id="username"></h2>
- <form class="pure-form pure-form-stacked">
- <fieldset>
- <button type="submit" class="pure-button pure-button-primary">Senden!?</button>
- </fieldset>
- </form>
-</main>
-<div class="popup">
- <img id="popup-img">
-</div>
-<script src="script.js"></script>
-</body>
+ <body>
+ <div class="pure-menu pure-menu-horizontal">
+ <a href="/" class="pure-menu-item pure-menu-link">Home</a>
+ <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a>
+ </div>
+ <main>
+ <h2 id="username"></h2>
+ <form class="pure-form pure-form-stacked">
+ <fieldset>
+ <button type="submit" class="pure-button pure-button-primary">Senden</button>
+ </fieldset>
+ </form>
+ </main>
+ <div class="popup">
+ <img id="popup-img" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture" />
+ </div>
+
+ <script
+ src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.9/cropper.min.js"
+ integrity="sha512-9pGiHYK23sqK5Zm0oF45sNBAX/JqbZEP7bSDHyt+nT3GddF+VFIcYNqREt0GDpmFVZI3LZ17Zu9nMMc9iktkCw=="
+ crossorigin="anonymous"
+ ></script>
+ <script src="script.js"></script>
+ </body>
</html>
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);
});
}