misc commit

Included changes:

* Cache the fetched students
* Add level icons
* Improve mass-graduation interface
* Move utility functions from config.js to utils-ENV.js

3 files changed, 97 insertions, 31 deletions

diff --git a/mass-graducation/index.css b/mass-graducation/index.css
index c1c58a8..ef0e2ed 100644
--- a/mass-graducation/index.css
+++ b/mass-graducation/index.css
@@ -96,11 +96,19 @@
 }
 
 .group-member {
+  padding-left: 0;
   display: grid;
-  grid-template-columns: 30px 30px 200px repeat(3, 40px) auto 20px;
+  grid-template-columns: 30px 200px 30px repeat(3, 40px) auto 20px;
+}
+
+.group-member-icon {
+  width: 30px;
+  height: 30px;
+  align-self: center;
 }
 
 .group-member-name {
+  align-self: center;
 }
 
 .group-member-observation-icon {
@@ -144,7 +152,7 @@
 
 .group-member-observation-container {
 	background: lightgray;
-	width: 600px;
+	width: 100%;
 }
 
 .group-member-observation-table {
@@ -152,12 +160,27 @@
 
 }
 .group-member-observation-table-description {
-	width: 80%;
+	max-width: 70%;
 }
 
 .group-member-observation-table-yes,
-.group-member-observation-table-no {
+.group-member-observation-table-no,
+.group-member-observation-table-maybe {
 	width: 10%;
 	text-align: center;
 }
 
+.submit-mass-graduation-inprogress {
+  --size: 0.5px;
+  width: calc(48 * var(--size));
+  height: calc(48 * var(--size));
+  border: calc(5 * var(--size)) solid black;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline;
+  position: absolute;
+  margin-left: 0.25rem;
+  margin-top: 0.25rem;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
diff --git a/mass-graducation/src/main.js b/mass-graducation/src/main.js
index 4224942..3ed011e 100644
--- a/mass-graducation/src/main.js
+++ b/mass-graducation/src/main.js
@@ -13,24 +13,27 @@ import { getName, DATETIME_FMT, datetimeStringNow } from "../../js/utils-ENV.js"
 let group;
 let name;
 
-function toggle(btn, other) {
+function toggle(btn, others) {
 	if (btn.innerHTML === "X") {
 		btn.innerHTML = "o";
 	} else {
 		btn.innerHTML = "X";
-		if (other)
-			other.innerHTML = "o";
+		if (others) {
+			for (const other of others)
+				other.innerHTML = "o";
+		}
 	}
 
 	document.getElementById("submit-mass-graduation").style.display = "inline";
+	document.getElementById("submit-mass-graduation-state").innerHTML = "";
 }
 
-function observationClickHandler(ob, li) {
-	ob.style.background = "lightgray";
-
+function observationClickHandler(li) {
 	let observationDiv = li.observationDiv;
 	// Build the observation container
 	if(!observationDiv) {
+		li.style.background = "lightgray";
+
 		observationDiv = document.createElement("div");
 		// Remember the observation div for this student
 		li.observationDiv = observationDiv;
@@ -48,6 +51,7 @@ function observationClickHandler(ob, li) {
   <th></th>
   <th class="group-member-observation-table-yes">Ja</th>
   <th class="group-member-observation-table-no">Nein</th>
+  <th class="group-member-observation-table-maybe">Kann ich nicht beurteilen</th>
 </tr>`;
 
 		obsTbl.appendChild(obsTh);
@@ -75,11 +79,20 @@ function observationClickHandler(ob, li) {
 			obsNo.classList.add("group-member-observation-table-no");
 			obsTr.appendChild(obsNo);
 
+			const obsMaybe = document.createElement("td");
+			obsMaybe.innerHTML = "X";
+			obsMaybe.dataset.maybe = "true";
+			obsMaybe.classList.add("group-member-observation-table-maybe");
+			obsTr.appendChild(obsMaybe);
+
 			obsYes.addEventListener("click", () => {
-				toggle(obsYes, obsNo);
+				toggle(obsYes, [obsNo, obsMaybe]);
 			});
 			obsNo.addEventListener("click", () => {
-				toggle(obsNo, obsYes);
+				toggle(obsNo, [obsYes, obsMaybe]);
+			});
+			obsMaybe.addEventListener("click", () => {
+				toggle(obsMaybe, [obsYes, obsNo]);
 			});
 
 			obsTbdy.appendChild(obsTr);
@@ -88,8 +101,11 @@ function observationClickHandler(ob, li) {
 	} else {
 		if (observationDiv.style.display === "none") {
 			observationDiv.style.display = "block";
+			li.style.background = "lightgray";
+
 		} else {
 			observationDiv.style.display = "none";
+			li.style.background = "unset";
 		}
 	}
 }
@@ -105,38 +121,39 @@ async function loadGroup(selected) {
 	ul.innerHTML = "";
 
 	for (const student of students) {
+		const graduationPromise = student.getGraduation();
+
 		const li = document.createElement("li");
 		li.classList.add("group-member")
 		// Remember the student of the entry
 		li.student = student;
 
+		const i = document.createElement("img");
+		i.classList.add("group-member-icon")
+		graduationPromise.then((graduation) => {
+			i.src = graduation.getIcon();
+		});
+		li.appendChild(i);
+
+		const n = document.createElement("span");
+		n.classList.add("group-member-name")
+		n.innerHTML = `${student.name}`;
+		li.appendChild(n);
+
 		const ob = document.createElement("button");
 		ob.classList.add("group-member-observation-icon")
 
-		const graduationPromise = student.getGraduation();
 		graduationPromise.then((graduation) => {
 			if (!graduation.isObserved()) {
 				return;
 			}
 			ob.innerHTML = "&#128065"
-			ob.addEventListener("click", () => observationClickHandler(ob, li) );
+			ob.addEventListener("click", () => observationClickHandler(li) );
 		});
 		graduationPromises.push(graduationPromise);
 
 		li.appendChild(ob);
 
-		const i = document.createElement("img");
-		i.classList.add("group-member-icon")
-		graduationPromise.then((graduation) => {
-			i.src = graduation.getIcon();
-		});
-		li.appendChild(i);
-
-		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}`)
@@ -152,7 +169,7 @@ async function loadGroup(selected) {
 		const p = document.createElement("button");
 		p.classList.add("group-member-print")
 		p.innerHTML = "🖶";
-		p.addEventListener("click", () => printRedPointNote(li) );
+		p.addEventListener("click", () => printNote(li) );
 		li.appendChild(p);
 
 		ul.appendChild(li);
@@ -232,6 +249,13 @@ async function loadGroup(selected) {
 }
 
 function submitMassGraduation() {
+	const state = document.getElementById("submit-mass-graduation-state");
+	state.innerHTML = "";
+	state.classList.add("submit-mass-graduation-inprogress");
+	state.style.display = "unset";
+
+	// TODO(muhq): await graduation promises
+
 	let promises = [];
 	for(const li of document.querySelectorAll("li.group-member")) {
 		const reason = li.querySelector(".group-member-point-reason").value;
@@ -259,7 +283,6 @@ function submitMassGraduation() {
 		}
 	}
 
-	const state = document.getElementById("submit-mass-graduation-state");
 	Promise.all(promises).then(() => {
 		state.style.display = "inline";
 		state.innerHTML = "✓";
@@ -275,11 +298,13 @@ function submitMassGraduation() {
 		state.innerHTML = "X";
 		state.style.color = "red";
 		console.log(error);
+	}).finally(() => {
+		state.classList.remove("submit-mass-graduation-inprogress");
 	});
 }
 
 let prePrintBody = null;
-function printRedPointNote(li) {
+function printNote(li) {
 	// save the current DOM
 	prePrintBody = document.body;
 
@@ -287,14 +312,24 @@ function printRedPointNote(li) {
 	const printBdy = document.createElement("body");
 	const reason = li.querySelector(".group-member-point-reason").value;
 	const dateStr = datetimeStringNow();
+	let pointType = "";
+	if (li.querySelector(".group-member-orange").innerHTML === "X") {
+		pointType = "Oranger Punkt";
+	}
+	if (li.querySelector(".group-member-red").innerHTML === "X") {
+		pointType = "Roter Punkt";
+	}
 
 	printBdy.innerHTML = `
-<h2>Roter Punkt Dokumentation</h2>
+<h2>Dokuzettel</h2>
+<h3>${pointType}</h3>
 <p>Schüler*in: ${li.student.name}</p>
 <p>Datum: ${dateStr}</p>
+<p>Lehrkraft: ${name}</p>
+<p>Klassenleitung: TODO</p>
 <h3>Begründung</h3>
 <p>${reason}</p>
-<p>Lehrkraft: ${name}</p>`;
+`;
 
 	document.body = printBdy;
 	print();
diff --git a/mass-graducation/webpack.config.js b/mass-graducation/webpack.config.js
index 154c454..fae04c6 100644
--- a/mass-graducation/webpack.config.js
+++ b/mass-graducation/webpack.config.js
@@ -9,6 +9,14 @@ const config = {
     output: {
         path: path.resolve(__dirname, 'dist'),
     },
+    module: {
+        rules: [
+            {
+              test: /\.png/,
+              type: 'asset/inline',
+            },
+        ],
+    },
     plugins: [
         new webpack.NormalModuleReplacementPlugin(
             /-ENV.js/,