mass-graduation: initial commit

1 files changed, 110 insertions, 0 deletions

diff --git a/mass-graducation/src/main.js b/mass-graducation/src/main.js
new file mode 100644
index 0000000..244828b
--- /dev/null
+++ b/mass-graducation/src/main.js
@@ -0,0 +1,110 @@
+import {
+	GraduationChange,
+	submitGraduationChange
+} from "../../js/graduation-ENV.js";
+
+import { fetchBycsGroups } from "../../js/group.js";
+import { initSelection } from "../../js/selection.js";
+
+let group;
+
+function pointClickHandler(li, student, color) {
+	const textareaDiv = document.createElement("div");
+	textareaDiv.id = "group-member-point-reason-container";
+	li.appendChild(textareaDiv);
+
+	const textarea = document.createElement("textarea");
+	textarea.id = "group-member-point-reason";
+	textareaDiv.appendChild(textarea);
+
+	const submitBtn = document.createElement("button");
+	submitBtn.id = "group-member-point-reason-submit";
+	textareaDiv.appendChild(submitBtn);
+
+	// TODO(muhq): Prefill the textarea with common reasons
+	switch (color) {
+	case "green":
+		textarea.style.background = "rgb(from green r g b / 20%)"
+		textarea.value = "";
+		break;
+	case "orange":
+		textarea.style.background = "rgb(from orange r g b / 20%)"
+		textarea.value = "";
+		break;
+	case "red":
+		textarea.style.background = "rgb(from red r g b / 20%)"
+		textarea.value = "";
+		break;
+	}
+	textarea.focus();
+
+	let submit = function() {
+		let change;
+		switch (color) {
+		case "green":
+			change = GraduationChange.newGreenPointChange(student, textarea.value);
+			break;
+		case "orange":
+			change = GraduationChange.newOrangePointChange(student, textarea.value);
+			break;
+		case "red":
+			change = GraduationChange.newRedPointChange(student, textarea.value);
+			break;
+		default:
+			alert("Invalid color");
+			break;
+		}
+		submitGraduationChange(student, change);
+		li.removeChild(textareaDiv);
+	}
+
+	// Use onEVENT to override any previous handler
+	textarea.onkeydown = function(e) {
+		if (e.shiftKey && e.key === "Enter") {
+			submit();
+		}
+		if (e.key === "Escape") {
+			textareaDiv.style.display = "none";
+		}
+	};
+	submitBtn.onclick = submit;
+}
+
+async function loadGroup(selected) {
+	group = selected;
+	const students = await group.getStudents();
+	document.getElementById("group-content").style.display = "block";
+
+	const ul = document.getElementById("group-members");
+	// Clear group list
+	ul.innerHTML = "";
+
+	for (const student of students) {
+		const li = document.createElement("li");
+		li.classList.add("group-member")
+
+		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 b = document.createElement("button");
+			b.classList.add(`group-member-${col}`)
+			b.innerHTML = col;
+			b.addEventListener("click", () => pointClickHandler(li, student, col));
+			li.appendChild(b);
+		}
+
+		ul.appendChild(li);
+	}
+}
+
+window.onload = function() {
+	initSelection(
+		"group-selection",
+		async function() { return (await fetchBycsGroups()).values(); },
+		(group) => `${group.name}`,
+		loadGroup,
+	);
+}