implment observation period handling

2 files changed, 82 insertions, 10 deletions

diff --git a/cockpit/index.html b/cockpit/index.html
index dab2c89..cea2c60 100644
--- a/cockpit/index.html
+++ b/cockpit/index.html
@@ -123,6 +123,14 @@
          <tbody id="graduation-current-observation-period">
          </tbody>
        </table>
+
+       <div id="graduation-current-observation-period-end" style="display:none;">
+         <textarea id="graduation-current-observation-period-end-reason" rows="5" spellcheck="default">
+         </textarea>
+         Aktuellen Beobachtungszeitraum abschließen:
+         <button id="graduation-current-observation-period-end-success">Erfolreich</button>
+         <button id="graduation-current-observation-period-end-failure">Nicht Erfolreich</button>
+       </div>
     </details>
 
     <details id="graduation-observation-periods-container" class="graduation-dropdown">
diff --git a/cockpit/js/cockpit.js b/cockpit/js/cockpit.js
index c0b20c2..15219cd 100644
--- a/cockpit/js/cockpit.js
+++ b/cockpit/js/cockpit.js
@@ -4,6 +4,7 @@
 // } from "../../js/mock.js";
 
 import {
+	OBSERVATION_TYPES,
 	LEVEL_NAMES,
 	GraduationChange,
 	fetchGraduation,
@@ -11,7 +12,7 @@ import {
 	submitGraduationChange
 } from "../../js/graduation-ENV.js";
 
-import { fetchStudent, fetchStudents } from "../../js/student-ENV.js";
+import { fetchStudent, fetchStudents, Student } from "../../js/student-ENV.js";
 import { 
 	isTeacher as getIsTeacher,
 	getName,
@@ -32,11 +33,6 @@ async function loadStudent(studentToLoad) {
 	updateStudentGraduation();
 }
 
-async function loadNewStudent(id) {
-	student = await fetchStudent(id);
-	await loadStudent(student);
-}
-
 function initStudentSelection() {
 	initSelection(
 		"student-selection",
@@ -174,11 +170,13 @@ function renderObservationStatus(graduation, node) {
 	node.innerHTML = "";
 
 	let status;
-	if (isTeacher || graduation.isObserved()) {
+	if (isTeacher || graduation.isObserved() || graduation.observationRequested) {
 		status = document.createElement("span");
 		status.classList.add("student-observation-status");
 		if (graduation.isObserved()) {
 			status.innerHTML = '<span style="font-size: larger;">&#128065</span> Ich befinde mich in der Beobachtungsphase zum Levelaufstieg.';
+		} else if (graduation.observationRequested) {
+			status.innerHTML = 'Beobachtungsphase noch nicht begonnen.';
 		} else {
 			status.innerHTML = "Nicht in Beobachtung.";
 		}
@@ -274,6 +272,69 @@ async function updateStudentGraduation() {
 		}
 		changesTbl.appendChild(changeTr);
 	}
+
+	const observtionsTbl = document.getElementById("graduation-current-observation-period");
+	observtionsTbl.innerHTML = "";
+	if (graduation.observation) {
+		const sums = graduation.observation.getObservationsSums();
+		for (let i = 0; i < OBSERVATION_TYPES.length; i++) {
+			const tr = document.createElement("tr");
+			const typeTd = document.createElement("td");
+			typeTd.innerHTML = OBSERVATION_TYPES[i];
+			tr.appendChild(typeTd);
+
+			const yesTd = document.createElement("td");
+			yesTd.innerHTML = sums[i].yes;
+			tr.appendChild(yesTd);
+
+			const noTd = document.createElement("td");
+			noTd.innerHTML = sums[i].no;
+			tr.appendChild(noTd);
+
+			observtionsTbl.appendChild(tr);
+		}
+
+		const endDiv = document.getElementById("graduation-current-observation-period-end");
+		if (!graduation.observation.ready()) {
+			endDiv.style.display = "none";
+			return;
+		}
+
+		endDiv.style.display = "block";
+
+		const reason = document.getElementById("graduation-current-observation-period-end-reason").value;
+		const successBtn = document.getElementById("graduation-current-observation-period-end-success");
+		successBtn.addEventListener("click", () => {
+			submitGraduationChange(graduation.student, GraduationChange.newObservationEnd(reason, true));
+		});
+		const failureBtn = document.getElementById("graduation-current-observation-period-end-failure");
+		failureBtn.addEventListener("click", () => {
+			submitGraduationChange(graduation.student, GraduationChange.newObservationEnd(reason, false));
+		});
+	}
+
+	const pastObservtionsTbl = document.getElementById("graduation-observation-periods");
+	pastObservtionsTbl.innerHTML = "";
+	if (graduation.pastObservations.length > 0) {
+		for (const period of graduation.pastObservations) {
+			const tr = document.createElement("tr");
+			const periodTd = document.createElement("td");
+			const startDate = new Intl.DateTimeFormat("de-DE", { month: "numeric", day: "numeric" }).format(period.start);
+			const endDate = new Intl.DateTimeFormat("de-DE", { month: "numeric", day: "numeric", year: "numeric" }).format(period.end);
+			periodTd.innerHTML = `${startDate} - ${endDate}`;
+			tr.appendChild(periodTd);
+
+			const successTd = document.createElement("td");
+			if (period.success) {
+				successTd.innerHTML = "Graduierung erfolgreich"
+			} else {
+				successTd.innerHTML = "Graduierung nicht erfolgreich"
+			}
+			tr.appendChild(successTd);
+
+			pastObservtionsTbl.appendChild(tr);
+		}
+	}
 }
 
 async function initCockpit() {
@@ -281,15 +342,18 @@ async function initCockpit() {
 		initStudentSelection();
 		const params = new URLSearchParams(location.search);
 		const userId = params.get("userToLoad");
-		if (userId)
-			loadNewStudent(userId);
+		if (userId) {
+			student = await fetchStudent(userId);
+			await loadStudent(student);
+		}
 	} else {
 		// Remove all elements only suitable for teachers
 		for(const elem of document.querySelectorAll("[data-availability=if-lehrer]")) {
 			elem.remove();
 		}
 
-		loadNewStudent(getUserId());
+		const student = await Student.fetchById(getUserId());
+		await loadStudent(student);
 	}
 }