1 files changed, 95 insertions, 2 deletions
diff --git a/src/mass-graduation.js b/src/mass-graduation.js
index 3bce288..ff30675 100644
--- a/src/mass-graduation.js
+++ b/src/mass-graduation.js
@@ -1,6 +1,11 @@
-import { GraduationChange, submitGraduationChange } from "./graduation-ENV.ts";
+import {
+	GraduationChange,
+	fetchGraduationChanges,
+	submitGraduationChange,
+	deleteGraduationChange,
+} from "./graduation-ENV.ts";
 import { fetchStudents } from "./student-ENV.ts";
-import { CourseLocalStorage, getName, splitmix32 } from "./utils-ENV.js";
+import { CourseLocalStorage, DATETIME_FMT, getName, splitmix32 } from "./utils-ENV.js";
 
 let name;
 
@@ -197,11 +202,99 @@ function submitMassGraduation() {
 		});
 }
 
+async function loadChanges() {
+	// TODO(muhq): deduplicate code with cockpit
+	const changesTbl = document.getElementById("graduation-changes");
+	const changes = await fetchGraduationChanges();
+
+	for (const change of changes) {
+		if (change.coach !== name) continue;
+
+		const changeTr = document.createElement("tr");
+
+		switch (change.change) {
+			case "Grün":
+				changeTr.style.background = "rgb(from green r g b / 50%)";
+				break;
+			case "Rot":
+				changeTr.style.background = "rgb(from red r g b / 50%)";
+				break;
+			case "Orange":
+				changeTr.style.background = "rgb(from orange r g b / 50%)";
+				break;
+		}
+
+		const tds = [];
+		const addTd = (s) => {
+			const changeTd = document.createElement("td");
+			changeTd.innerHTML = s;
+			changeTr.appendChild(changeTd);
+			tds.push(changeTd);
+		};
+
+		addTd(change.change);
+		addTd(DATETIME_FMT.format(change.date));
+		addTd(change.reason);
+		let ctxFmt = "";
+		switch (change.change) {
+			case "CoachZuweisung":
+				ctxFmt = change.context.zuweisungen[student.id];
+				break;
+			case "LevelÄnderung":
+				ctxFmt = LEVEL_NAMES[change.context.level];
+				break;
+			case "Grün":
+			case "Orange":
+			case "Rot":
+				ctxFmt = change.context.mandatory ? "erforderlich" : "";
+				break;
+			default:
+				ctxFmt = JSON.stringify(change.context);
+				break;
+		}
+		addTd(ctxFmt);
+
+		const delBtn = document.createElement("button");
+		delBtn.innerHTML = "Löschen";
+
+		delBtn.addEventListener("click", () => {
+			const state = document.createElement("span");
+			state.classList.add("graduation-delete-state");
+
+			const inprogress = document.createElement("span");
+			inprogress.classList.add("graduation-delete-inprogress");
+			state.appendChild(inprogress);
+
+			delBtn.replaceWith(state);
+			deleteGraduationChange(graduation, change)
+				.then(() => {
+					updateStudentInfo();
+					state.style.display = "inline";
+					state.innerHTML = "✓";
+					for (const td of tds) {
+						td.style["text-decoration"] = "line-through";
+					}
+				})
+				.catch(() => {
+					state.style.display = "inline";
+					state.innerHTML = "X";
+				})
+				.finally(() => {
+					inprogress.remove();
+				});
+		});
+		changeTr.appendChild(delBtn);
+
+		changesTbl.appendChild(changeTr);
+	}
+}
+
 async function init() {
 	document.getElementById("submit-mass-graduation").addEventListener("click", submitMassGraduation);
 	name = getName();
 
 	loadGroup();
+	loadChanges();
 }
 
 if (document.readyState === "loading") {