diff options
| author | Marvin Borner | 2020-10-10 17:05:27 +0200 |
|---|---|---|
| committer | Marvin Borner | 2020-10-10 17:05:27 +0200 |
| commit | 72f5731adeebf8d76c5c2dcc266f600ba57812d8 (patch) | |
| tree | 4d774eb3d0464411a1bb09472c597298aa8965e8 /admin/public | |
| parent | 167600b52eb03801bb7051a09dcb0e4f159cfb2a (diff) | |
Added basic admin interface
Diffstat (limited to 'admin/public')
| -rw-r--r-- | admin/public/index.html | 32 | ||||
| -rw-r--r-- | admin/public/script.js | 22 | ||||
| -rw-r--r-- | admin/public/style.css | 33 |
3 files changed, 87 insertions, 0 deletions
diff --git a/admin/public/index.html b/admin/public/index.html new file mode 100644 index 0000000..cf5d286 --- /dev/null +++ b/admin/public/index.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <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>Home</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> + + <!-- TODO: Class-based stats (easily solveable in frontend) --> + <div class="card"> + Welche/r Schüler/in... + <ul id="pupil"></ul> + Welche/r Lehrer/in... + <ul id="teacher"></ul> + </div> + + <script src="script.js"></script> + </body> +</html> diff --git a/admin/public/script.js b/admin/public/script.js new file mode 100644 index 0000000..ff6fa2b --- /dev/null +++ b/admin/public/script.js @@ -0,0 +1,22 @@ +fetch("api/questions").then(questions => questions.json()).then(questions => { + fetch("api/answers").then(answers => answers.json()).then(answers => { + questions.forEach(question => question.answers = []); + answers.forEach(answer => questions[answer.question_id - 1].answers.push(answer)); + render(questions); + }); +}); + +function render(questions) +{ + console.log(questions); + const teacher = document.querySelector("ul#teacher"); + const pupil = document.querySelector("ul#pupil"); + questions.forEach(question => { + const list = question.type === "teacher" ? teacher : pupil; + let answers = ""; + question.answers.forEach(answer => { + answers += `<li>${answer.name} ${answer.middlename ? answer.middlename + " " : ""}${answer.surname}: ${answer.count}</li>` + }); + list.insertAdjacentHTML("beforeend", `<li>${question.question}<br><ol>${answers}</ol></li>`); + }); +} diff --git a/admin/public/style.css b/admin/public/style.css new file mode 100644 index 0000000..77853bf --- /dev/null +++ b/admin/public/style.css @@ -0,0 +1,33 @@ +html, +body { + padding: 0; + margin: 0; + height: 100%; + width: 100%; + background-color: #eec0c6; + background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%); +} + +.card { + position: absolute; + max-height: 80%; + overflow: auto; + width: 30%; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + padding: 20px; + border-radius: 10px; + background: white; +} + +div { + background: white; +} + +@media only screen and (max-width: 600px) { + .card { + width: calc(100% - 50px); + } +} |