1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
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 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
}`;
}
function appendQuestions(question) {
const div = document.createElement("div");
const label = document.createElement("label");
label.for = "id_" + question.id;
label.textContent = question.question;
div.appendChild(label);
if (question.type === "file" && question.answer) {
const img = document.createElement("img");
img.src = "uploads/" + question.answer;
img.alt = "Image";
div.appendChild(img);
}
const field = document.createElement("input");
field.id = "id_" + question.id;
field.name = question.id;
if (question.answer !== undefined) init = false;
field.value = question.answer || "";
field.placeholder = question.question;
field.type = question.type;
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;
popup.style.display = "block";
crop();
};
})(popupImage);
reader.readAsDataURL(file);
});
}
div.appendChild(field);
fs.insertBefore(div, fs.querySelector("button"));
}
form.addEventListener("submit", async (evt) => {
evt.preventDefault();
const url = init ? "api/add" : "api/update";
const method = init ? "POST" : "PUT";
const inputs = form.querySelectorAll("input");
const body = new FormData();
for (const input of inputs) {
if (input.type !== "file") body.append(input.name, input.value);
else body.append(input.name, input.files[0] ?? "dbg-image");
}
const resp = await fetch(url, { method, body });
const res = await resp.text();
if (res !== "ok") alert("AHHHH");
else location.reload();
});
fetch("/auth/api/self")
.then((response) => response.json())
.then(updateHeading)
.catch(console.error);
fetch("api/questions")
.then((response) => response.json())
.then((response) => response.forEach(appendQuestions))
.catch(console.error);
|
