diff options
| author | LarsVomMars | 2020-10-10 13:17:45 +0200 |
|---|---|---|
| committer | LarsVomMars | 2020-10-10 13:17:58 +0200 |
| commit | 3b16ab7ebee3d432a66d7966a2e8a6c2541f3912 (patch) | |
| tree | 60ae113087491e7e6fbf094fa3a3d780407b29c5 /profile/public | |
| parent | fdb9bba6c88a4fd8981c30bf8ea06aa0709db45e (diff) | |
It's working
Kinda
Diffstat (limited to 'profile/public')
| -rw-r--r-- | profile/public/index.html | 56 | ||||
| -rw-r--r-- | profile/public/script.js | 43 |
2 files changed, 70 insertions, 29 deletions
diff --git a/profile/public/index.html b/profile/public/index.html index 5fcee74..fd7b507 100644 --- a/profile/public/index.html +++ b/profile/public/index.html @@ -1,32 +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> -<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> - <!-- TODO: JS switch method/action --> - <form class="pure-form pure-form-stacked" action="api/add" method="post"> - <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> + <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 index 7c72b69..b0434fa 100644 --- a/profile/public/script.js +++ b/profile/public/script.js @@ -1,13 +1,52 @@ 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; + const field = document.createElement("input"); + field.id = "id_" + question.id; field.name = question.id; - field.value = question.answer ?? ""; + if (question.answer !== undefined) init = false; + field.value = question.answer; field.placeholder = question.question; - fs.insertBefore(field, fs.querySelector("button")); + + div.append(label, 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 = {}; + for (const input of inputs) body[input.name] = input.value; + + const resp = await fetch(url, { + headers: { "Content-Type": "application/json" }, + method, + body: JSON.stringify(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)) |