From 4ff7855e0d6824d2dda2abae79521f1dfd28eb08 Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fischer@muhq.space>
Date: Thu, 24 Sep 2026 12:16:03 +0200
Subject: coaching: add simple coaching overview page

---
 Makefile          |  2 +-
 coaching.css      | 40 +++++++++++++++++++++++++++
 coaching.html     | 16 +++++++++++
 src/coaching.js   | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 webpack.config.js |  1 +
 5 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 coaching.css
 create mode 100644 coaching.html
 create mode 100644 src/coaching.js

diff --git a/Makefile b/Makefile
index 573616d..74ec434 100644
--- a/Makefile
+++ b/Makefile
@@ -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 = `&sum; ${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"),
-- 
cgit v1.2.3