diff options
| author | Lars Krönner | 2020-10-10 18:40:46 +0200 |
|---|---|---|
| committer | GitHub | 2020-10-10 18:40:46 +0200 |
| commit | c2cb67575c8ee623b775d1f5fd28c0a60a9288dc (patch) | |
| tree | a9285cef4e2dc3451ed609be2a34bbf21580c35e /profile/public | |
| parent | 16ebbb932c0b780c11d3e574bc24a515eb095f5f (diff) | |
| parent | 1f45ede8253421439e07790375b72a31ceef33ed (diff) | |
Merge pull request #4 from marvinborner/profile
Profile
Diffstat (limited to 'profile/public')
| -rw-r--r-- | profile/public/index.html | 34 | ||||
| -rw-r--r-- | profile/public/script.js | 62 | ||||
| -rw-r--r-- | profile/public/style.css | 44 | ||||
| -rw-r--r-- | profile/public/uploads/.gitkeep | 0 |
4 files changed, 140 insertions, 0 deletions
diff --git a/profile/public/index.html b/profile/public/index.html new file mode 100644 index 0000000..fd7b507 --- /dev/null +++ b/profile/public/index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="de"> + <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" + /> + <link rel="stylesheet" href="style.css" type="text/css" media="all" /> + <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> + <h1 id="username"></h1> + <form class="pure-form pure-form-stacked"> + <fieldset> + <legend>Steckbrief</legend> + + <!-- TODO: Consider autosave --> + <button type="submit" class="pure-button pure-button-primary">Wohooo</button> + </fieldset> + </form> + </main> + <script src="script.js"></script> + </body> +</html> diff --git a/profile/public/script.js b/profile/public/script.js new file mode 100644 index 0000000..a386f56 --- /dev/null +++ b/profile/public/script.js @@ -0,0 +1,62 @@ +const fs = document.querySelector("fieldset"); +const form = document.querySelector("form"); +let init = true; + +function updateHeading(user) { + document.getElementById("username").textContent = `${user.name} ${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/*"; + + 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"); +}); + +fetch("api/user") + .then((response) => response.json()) + .then(updateHeading) + .catch(console.error); + +fetch("api/questions") + .then((response) => response.json()) + .then((response) => response.forEach(appendQuestions)) + .catch(console.error); diff --git a/profile/public/style.css b/profile/public/style.css new file mode 100644 index 0000000..e674e71 --- /dev/null +++ b/profile/public/style.css @@ -0,0 +1,44 @@ +html, +body { + padding: 0; + margin: 0; + height: 100%; + width: 100%; + background-color: #eec0c6; + background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%); +} + +div { + background: white; +} + +main { + position: absolute; + max-height: 80%; + overflow-y: auto; + width: 50%; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + padding: 20px; + border-radius: 10px; + background: white; +} + +input, +button, +select { + width: 100%; +} + +img { + max-width: 80%; + max-height: 80%; +} + +@media only screen and (max-width: 600px) { + main { + width: calc(100% - 50px); + } +} diff --git a/profile/public/uploads/.gitkeep b/profile/public/uploads/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/profile/public/uploads/.gitkeep |