aboutsummaryrefslogtreecommitdiff
path: root/profile
diff options
context:
space:
mode:
authorLarsVomMars2020-10-10 13:17:45 +0200
committerLarsVomMars2020-10-10 13:17:58 +0200
commit3b16ab7ebee3d432a66d7966a2e8a6c2541f3912 (patch)
tree60ae113087491e7e6fbf094fa3a3d780407b29c5 /profile
parentfdb9bba6c88a4fd8981c30bf8ea06aa0709db45e (diff)
It's working
Kinda
Diffstat (limited to 'profile')
-rw-r--r--profile/index.js41
-rw-r--r--profile/public/index.html56
-rw-r--r--profile/public/script.js43
3 files changed, 107 insertions, 33 deletions
diff --git a/profile/index.js b/profile/index.js
index 2f1cb50..f5e8373 100644
--- a/profile/index.js
+++ b/profile/index.js
@@ -2,10 +2,15 @@ const express = require("express");
const db = require("../db");
const app = express.Router();
-app.use("/", express.static(__dirname + "/public"));
+app.use("/", express.static(__dirname + "/public/"));
+
+app.get("/user/:uid", async (req, res) => {});
// Basic API
-app.get("/api/user", async (req, res) => {});
+app.get("/api/user", async (req, res) => {
+ const user = (await db.query("SELECT name, surname FROM users WHERE id = ?", [req.session.uid]))[0];
+ res.json(user);
+});
app.get("/api/questions", async (req, res) => {
const questions = await db.query("SELECT id, question FROM profile_questions");
@@ -21,10 +26,38 @@ app.get("/api/questions", async (req, res) => {
});
app.post("/api/add", async (req, res) => {
- await db.query("INSERT INTO profile_answers (question_id, user_id, answer) VALUES (?, ?, ?)");
+ try {
+ for (let qid in req.body) {
+ if (!req.body.hasOwnProperty(qid)) continue;
+ await db.query("INSERT INTO profile_answers (question_id, user_id, answer) VALUES (?, ?, ?)", [
+ qid,
+ req.session.uid,
+ req.body[qid].replace(/</g, "&lt;").replace(/>/g, "&gt;"),
+ ]);
+ }
+ res.send("ok");
+ } catch (e) {
+ console.error(e);
+ res.send("error");
+ }
});
-app.put("/api/update", async (req, res) => {});
+app.put("/api/update", async (req, res) => {
+ try {
+ for (let qid in req.body) {
+ if (!req.body.hasOwnProperty(qid)) continue;
+ await db.query("UPDATE profile_answers SET answer = ? WHERE question_id = ? AND user_id = ?", [
+ req.body[qid].replace(/</g, "&lt;").replace(/>/g, "&gt;"),
+ qid,
+ req.session.uid,
+ ]);
+ }
+ res.send("ok");
+ } catch (e) {
+ console.error(e);
+ res.send("error");
+ }
+});
// Comments API
app.get("/api/comments/:uid", async (req, res) => {});
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))