diff options
| -rw-r--r-- | Makefile | 2 | ||||
| -rw-r--r-- | coaching.css | 40 | ||||
| -rw-r--r-- | coaching.html | 16 | ||||
| -rw-r--r-- | src/coaching.js | 81 | ||||
| -rw-r--r-- | webpack.config.js | 1 |
5 files changed, 139 insertions, 1 deletions
@@ -1,4 +1,4 @@ -HTML := cockpit.html mass-graduation.html admin-tools.html +HTML := cockpit.html mass-graduation.html admin-tools.html coaching.html SITES := $(addprefix dist/,$(HTML)) dist/%.html: %.html %.css dist/%.js diff --git a/coaching.css b/coaching.css new file mode 100644 index 0000000..943b695 --- /dev/null +++ b/coaching.css @@ -0,0 +1,40 @@ +#group-content { +} + +#group-members { + padding-left: 0; +} + +.group-member { + display: grid; + grid-template-columns: 30px 200px repeat(4, 40px); +} + +.group-member-icon { + width: 30px; + height: 30px; + align-self: center; +} + +.group-member-name { + align-self: center; +} + +.group-member-green, +.group-member-orange, +.group-member-red, +.group-member-points { + margin: 1px; + align-self: center; + text-align: center; +} + +.group-member-green { + background: green; +} +.group-member-orange { + background: orange; +} +.group-member-red { + background: red; +} diff --git a/coaching.html b/coaching.html new file mode 100644 index 0000000..34ba01b --- /dev/null +++ b/coaching.html @@ -0,0 +1,16 @@ +<!doctype html> +<html lang="de"> + <head> + <meta charset="utf-8" /> + <title>Coaching</title> + <link rel="stylesheet" href="coaching.css" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <script src="./dist/coaching.js"></script> + </head> + <body> + <div id="group-content" style="display: none"> + <h4 id="group-members-headline">Deine Coachees</h4> + <ul id="group-members"></ul> + </div> + </body> +</html> diff --git a/src/coaching.js b/src/coaching.js new file mode 100644 index 0000000..8b97784 --- /dev/null +++ b/src/coaching.js @@ -0,0 +1,81 @@ +import { fetchStudents } from "./student-ENV.ts"; + +import { getName } from "./utils-ENV.js"; + +let name; + +async function loadGroup() { + const students = await fetchStudents(); + const graduationPromises = []; + document.getElementById("group-content").style.display = "block"; + + const ul = document.getElementById("group-members"); + + ul.innerHTML = ""; + + const listEntries = []; + for (const student of students) { + const graduationPromise = student.getGraduation(); + graduationPromises.push(graduationPromise); + + const li = document.createElement("li"); + li.student = student; + listEntries.push(li); + + const i = document.createElement("img"); + i.classList.add("group-member-icon"); + graduationPromise.then((graduation) => { + i.src = graduation.getIcon(); + }); + li.appendChild(i); + } + + const graduations = await Promise.all(graduationPromises); + + for (const li of listEntries) { + const student = li.student; + if (!student.graduation.coaches.includes(name)) + continue; + + const n = document.createElement("span"); + n.classList.add("group-member-name"); + n.innerHTML = `${student.name}`; + li.appendChild(n); + + for (const col of ["green", "orange", "red"]) { + const s = document.createElement("span"); + s.classList.add(`group-member-${col}`); + switch (col) { + case "green": + s.innerHTML = student.graduation.green; + break; + case "orange": + s.innerHTML = student.graduation.orange; + break; + case "red": + s.innerHTML = student.graduation.red; + break; + } + li.appendChild(s); + } + + const p = document.createElement("span"); + p.classList.add("group-member-points"); + p.innerHTML = `∑ ${student.graduation.getNettoPoints()}`; + li.appendChild(p); + + li.classList.add("group-member"); + ul.appendChild(li); + } +} + +async function init() { + name = getName(); + loadGroup(); +} + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", init); +} else { + init(); +} diff --git a/webpack.config.js b/webpack.config.js index 3e947d6..cafc835 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -11,6 +11,7 @@ const config = { cockpit: "./src/cockpit.js", "mass-graduation": "./src/mass-graduation.js", "admin-tools": "./src/admin-tools.js", + coaching: "./src/coaching.js", }, output: { path: path.resolve(__dirname, "dist"), |