remove observations and present mandatory candidates in the mass view

6 files changed, 90 insertions, 563 deletions

diff --git a/src/cockpit.js b/src/cockpit.js
index 97d6fed..e78d50b 100644
--- a/src/cockpit.js
+++ b/src/cockpit.js
@@ -4,7 +4,6 @@
 // } from "../../js/mock.ts";
 
 import {
-	OBSERVATION_TYPES,
 	LEVEL_NAMES,
 	GraduationChange,
 	fetchGraduation,
@@ -12,7 +11,7 @@ import {
 } from "./graduation-ENV.ts";
 
 import { fetchStudent, fetchStudents } from "./student-ENV.ts";
-import { getName, DATE_FMT, DATETIME_FMT } from "./utils-ENV.js";
+import { getName, DATETIME_FMT } from "./utils-ENV.js";
 import { initSelection } from "./selection.js";
 
 let name;
@@ -261,71 +260,6 @@ 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 = DATE_FMT.format(period.start);
-			const endDate = DATE_FMT.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() {
diff --git a/src/graduation-common.ts b/src/graduation-common.ts
index 2c0fb69..bb74dc1 100644
--- a/src/graduation-common.ts
+++ b/src/graduation-common.ts
@@ -29,14 +29,14 @@ class GraduationChange {
 		change: string,
 		reason: string,
 		coach: string,
-		context: any,
+		context?: any,
 	) {
 		this.date = date;
 		this.studentId = studentId;
 		this.change = change;
 		this.reason = reason;
 		this.coach = coach;
-		this.context = context;
+		this.context = context || {};
 	}
 
 	dbFields() {
@@ -61,46 +61,24 @@ class GraduationChange {
 		);
 	}
 
-	static newObservationRequest() {
-		return new GraduationChange(new Date(), -1, "ObservationRequest", "", "", "");
+	static newLevelChange(level: number, reason?: string, coach?: string) {
+		const ctx = { level: level };
+		return new GraduationChange(new Date(), -1, "LevelChange", reason || "", coach || "", ctx);
 	}
 
-	static newObservationStart() {
-		return new GraduationChange(new Date(), -1, "ObservationStart", "", "", "");
+	static newGreenPointChange(mandatory: boolean, reason?: string, coach?: string) {
+		const ctx = { mandatory: mandatory };
+		return new GraduationChange(new Date(), -1, "Grün", reason || "", coach || "", ctx);
 	}
 
-	static newObservationEnd(reason: string, success: boolean) {
-		return new GraduationChange(
-			new Date(),
-			-1,
-			"ObservationEnd",
-			reason,
-			"",
-			JSON.stringify(success),
-		);
-	}
-
-	static newObservationChange(observation: Observation) {
-		return new GraduationChange(
-			observation.date,
-			-1,
-			"Observation",
-			"",
-			"",
-			JSON.stringify(observation.status),
-		);
-	}
-
-	static newGreenPointChange(reason: string, coach: string) {
-		return new GraduationChange(new Date(), -1, "Grün", reason, coach, "");
-	}
-
-	static newOrangePointChange(reason: string, coach: string) {
-		return new GraduationChange(new Date(), -1, "Orange", reason, coach, "");
+	static newOrangePointChange(mandatory: boolean, reason?: string, coach?: string) {
+		const ctx = { mandatory: mandatory };
+		return new GraduationChange(new Date(), -1, "Orange", reason || "", coach || "", ctx);
 	}
 
-	static newRedPointChange(reason: string, coach: string) {
-		return new GraduationChange(new Date(), -1, "Rot", reason, coach, "");
+	static newRedPointChange(mandatory: boolean, reason?: string, coach?: string) {
+		const ctx = { mandatory: mandatory };
+		return new GraduationChange(new Date(), -1, "Rot", reason || "", coach || "", ctx);
 	}
 }
 
@@ -109,10 +87,8 @@ class Graduation {
 	green: number;
 	orange: number;
 	red: number;
+	mandatory: number;
 	level: number;
-	observationRequested: Date | null;
-	observation: ObservationPeriod | null;
-	pastObservations: Array<ObservationPeriod>;
 	changes: Array<GraduationChange>;
 
 	constructor(
@@ -120,10 +96,8 @@ class Graduation {
 		green: number,
 		orange: number,
 		red: number,
+		mandatory: number,
 		level: number,
-		observationRequested: Date | null,
-		observation: ObservationPeriod | null,
-		pastObservations: Array<ObservationPeriod>,
 		changes: Array<GraduationChange>,
 	) {
 		this.student = student;
@@ -131,9 +105,7 @@ class Graduation {
 		this.orange = orange;
 		this.red = red;
 		this.level = level;
-		this.observationRequested = observationRequested;
-		this.observation = observation;
-		this.pastObservations = pastObservations;
+		this.mandatory = mandatory;
 		this.changes = changes;
 
 		student.graduation = this;
@@ -143,10 +115,8 @@ class Graduation {
 		let green = 0;
 		let orange = 0;
 		let red = 0;
+		let mandatory = 0;
 		let level = 1;
-		let openObservationRequest = null;
-		let observationPeriod = null;
-		let pastObservations = [];
 
 		// The parsing logic assumes that changes are ordered chronologically
 		changes.sort((a, b) => a.date.valueOf() - b.date.valueOf());
@@ -165,39 +135,6 @@ class Graduation {
 					red++;
 					break;
 
-				case "ObservationRequest":
-					openObservationRequest = change.date;
-					break;
-
-				case "ObservationStart":
-					console.assert(openObservationRequest === null, "No request for observation start");
-
-					observationPeriod = new ObservationPeriod(change.date);
-					openObservationRequest = null;
-					break;
-
-				case "ObservationEnd":
-					if (observationPeriod === null) {
-						console.error("No active observation period");
-						continue;
-					}
-					observationPeriod.finishPeriod(change.context.success);
-					if (change.context.success) {
-						level++;
-					}
-					pastObservations.push(observationPeriod);
-					observationPeriod = null;
-					break;
-
-				case "Observation":
-					if (observationPeriod === null) {
-						console.error("No active observation period");
-						continue;
-					}
-					const observation = Observation.fromChange(change);
-					observationPeriod.addObservation(observation);
-					break;
-
 				case "LevelChange":
 					level = change.context.level;
 					break;
@@ -205,18 +142,12 @@ class Graduation {
 				default:
 					throw new Error(`Unexpected change: ${change}`);
 			}
+
+			if (change.context.mandatory) {
+				mandatory++;
+			}
 		}
-		return new Graduation(
-			student,
-			green,
-			orange,
-			red,
-			level,
-			openObservationRequest,
-			observationPeriod,
-			pastObservations,
-			changes,
-		);
+		return new Graduation(student, green, orange, red, mandatory, level, changes);
 	}
 
 	addChange(change: GraduationChange) {
@@ -229,50 +160,6 @@ class Graduation {
 	}
 
 	/**
-	 * Request observation
-	 */
-	async requestObservation() {
-		const request = GraduationChange.newObservationRequest();
-		this.observationRequested = request.date;
-		const db = await getGraduationDb();
-		await db.saveEntry(JSON.stringify(request.dbFields()));
-	}
-
-	/**
-	 * Start an observation
-	 */
-	async startObservation() {
-		if (this.observationRequested === null) {
-			console.error("No observation requested");
-			return;
-		}
-		this.observationRequested = null;
-		this.observation = new ObservationPeriod(new Date());
-		return submitGraduationChange(this, GraduationChange.newObservationStart());
-	}
-
-	/**
-	 * End an observation
-	 */
-	async endObservation(reason: string, success: boolean) {
-		if (this.observation === null) {
-			console.error("No active observation");
-			return;
-		}
-		this.observation.end = new Date();
-		this.pastObservations.push(this.observation);
-		this.observation = null;
-		return submitGraduationChange(this, GraduationChange.newObservationEnd(reason, success));
-	}
-
-	/**
-	 * Return if the student is in observation.
-	 */
-	isObserved() {
-		return Boolean(this.observation);
-	}
-
-	/**
 	 * Return the URI of the icon representing the graduation level.
 	 */
 	getIcon() {
@@ -285,83 +172,12 @@ class Graduation {
 	getLevelName() {
 		return LEVEL_NAMES[this.level - 1];
 	}
-}
-
-class ObservationPeriod {
-	start: Date;
-	end: Date | null;
-	observations: Array<Observation>;
-	success = false;
-
-	constructor(start: Date) {
-		this.start = start;
-		this.end = null;
-		this.observations = [];
-	}
 
-	finishPeriod(success: boolean) {
-		this.end = new Date();
-		this.success = success;
-	}
-
-	ended() {
-		return Boolean(this.end);
-	}
-
-	ready() {
-		if (this.observations.length < 10) return false;
-
-		// at least 10 observation on different days
-		let days = new Map();
-		for (const observation of this.observations) {
-			const d = observation.date;
-			days.set(`${d.getFullYear()}${d.getMonth()}${d.getDate()}`, true);
-		}
-		return days.size >= 10;
-	}
-
-	getObservationsSums() {
-		let sums = Array(OBSERVATION_TYPES.length)
-			.fill(null)
-			.map(() => ({ yes: 0, no: 0 }));
-		for (const observation of this.observations) {
-			for (let i = 0; i < sums.length; i++) {
-				if (observation.status[i]) {
-					if (observation.status[i] === "yes") sums[i].yes++;
-					else sums[i].no++;
-				}
-			}
-		}
-		return sums;
-	}
-
-	addObservation(observation: Observation) {
-		this.observations.push(observation);
-	}
-}
-
-const OBSERVATION_TYPES = [
-	"Arbeitet konzentriert an Aufgaben",
-	"Arbeitet zunehmend selbstständig",
-	"Führt das Logbuch zuverlässig",
-	"Bringt Material mit",
-	"Hält Regeln ein",
-	"Geht verantwortungsvoll mit Materialien und LernRaum um",
-	"Nimmt Rückmeldungen an und setzt sie um",
-];
-
-class Observation {
-	date: Date;
-	status: Array<string>;
-
-	constructor(date: Date, status: Array<string>) {
-		console.assert(status.length == OBSERVATION_TYPES.length, "invalid observation status");
-		this.date = date;
-		this.status = status;
-	}
-
-	static fromChange(change: GraduationChange) {
-		return new Observation(change.date, JSON.parse(change.context));
+	/**
+	 * Return the combined value of all points.
+	 */
+	getNettoPoints(): number {
+		return this.green - this.orange - this.red;
 	}
 }
 
@@ -371,20 +187,4 @@ async function submitGraduationChange(graduation: Graduation, change: Graduation
 	return db.saveEntry(JSON.stringify(change.dbFields()));
 }
 
-async function submitObservation(graduation: Graduation, observation: Observation) {
-	if (graduation.observation === null) throw new Error("no active observation");
-	graduation.observation.addObservation(observation);
-	await submitGraduationChange(graduation, GraduationChange.newObservationChange(observation));
-}
-
-export {
-	LEVEL_NAMES,
-	LEVEL_IMAGES,
-	GraduationChange,
-	Graduation,
-	submitGraduationChange,
-	submitObservation,
-	OBSERVATION_TYPES,
-	Observation,
-	ObservationPeriod,
-};
+export { LEVEL_NAMES, LEVEL_IMAGES, GraduationChange, Graduation, submitGraduationChange };
diff --git a/src/graduation-mock.ts b/src/graduation-mock.ts
index 5c48a81..dcd15b2 100644
--- a/src/graduation-mock.ts
+++ b/src/graduation-mock.ts
@@ -1,26 +1,8 @@
-import {
-	LEVEL_NAMES,
-	GraduationChange,
-	Graduation,
-	OBSERVATION_TYPES,
-	Observation,
-	ObservationPeriod,
-} from "./graduation-common.ts";
+import { LEVEL_NAMES, GraduationChange, Graduation } from "./graduation-common.ts";
 
 import {
 	fetchGraduationMock as fetchGraduation,
 	submitGraduationChangeMock as submitGraduationChange,
-	submitObservationMock as submitObservation,
 } from "./mock.ts";
 
-export {
-	LEVEL_NAMES,
-	GraduationChange,
-	Graduation,
-	fetchGraduation,
-	submitGraduationChange,
-	submitObservation,
-	OBSERVATION_TYPES,
-	Observation,
-	ObservationPeriod,
-};
+export { LEVEL_NAMES, GraduationChange, Graduation, fetchGraduation, submitGraduationChange };
diff --git a/src/graduation-prod.ts b/src/graduation-prod.ts
index 663493a..5fe9bf8 100644
--- a/src/graduation-prod.ts
+++ b/src/graduation-prod.ts
@@ -35,8 +35,4 @@ export {
 	GraduationChange,
 	Graduation,
 	submitGraduationChange,
-	submitObservation,
-	OBSERVATION_TYPES,
-	Observation,
-	ObservationPeriod,
 } from "./graduation-common.ts";
diff --git a/src/mass-graduation.js b/src/mass-graduation.js
index 48d23ad..a761130 100644
--- a/src/mass-graduation.js
+++ b/src/mass-graduation.js
@@ -1,111 +1,59 @@
-import {
-	OBSERVATION_TYPES,
-	GraduationChange,
-	submitGraduationChange,
-	Observation,
-	submitObservation,
-} from "./graduation-ENV.ts";
+import { GraduationChange, submitGraduationChange } from "./graduation-ENV.ts";
 
 import { fetchGroups } from "./group-fetch.ts";
 import { initSelection } from "./selection.js";
-import { getName, DATETIME_FMT, datetimeStringNow } from "./utils-ENV.js";
+import { getName } from "./utils-ENV.js";
 
 let group;
 let name;
 
-function toggle(btn, others) {
+function toggle(btn) {
 	if (btn.innerHTML === "X") {
 		btn.innerHTML = "o";
 	} else {
 		btn.innerHTML = "X";
-		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(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;
-		observationDiv.id = `${li.student.name}-observation-container`;
-		observationDiv.classList.add("group-member-observation-container");
-		li.appendChild(observationDiv);
-
-		const obsTbl = document.createElement("table");
-		obsTbl.classList.add("group-member-observation-table");
-		observationDiv.appendChild(obsTbl);
-
-		const obsTh = document.createElement("thead");
-		obsTh.innerHTML = `
-<tr>
-  <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);
-
-		const obsTbdy = document.createElement("tbody");
-		obsTbl.appendChild(obsTbdy);
-
-		for (const obsType of OBSERVATION_TYPES) {
-			const obsTr = document.createElement("tr");
-
-			const obsDesc = document.createElement("td");
-			obsDesc.innerHTML = obsType;
-			obsDesc.classList.add("group-member-observation-table-description");
-			obsTr.appendChild(obsDesc);
-
-			const obsYes = document.createElement("td");
-			obsYes.innerHTML = "o";
-			obsYes.dataset.yes = "true";
-			obsYes.classList.add("group-member-observation-table-yes");
-			obsTr.appendChild(obsYes);
-
-			const obsNo = document.createElement("td");
-			obsNo.innerHTML = "o";
-			obsNo.dataset.no = "true";
-			obsNo.classList.add("group-member-observation-table-no");
-			obsTr.appendChild(obsNo);
+// https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
+function shuffleArray(array) {
+	for (let i = array.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[array[i], array[j]] = [array[j], array[i]];
+	}
+	return array;
+}
 
-			const obsMaybe = document.createElement("td");
-			obsMaybe.innerHTML = "X";
-			obsMaybe.dataset.maybe = "true";
-			obsMaybe.classList.add("group-member-observation-table-maybe");
-			obsTr.appendChild(obsMaybe);
+function chooseMandatory(graduations) {
+	graduations.sort((g1, g2) => g1.mandatory - g2.mandatory);
 
-			obsYes.addEventListener("click", () => {
-				toggle(obsYes, [obsNo, obsMaybe]);
-			});
-			obsNo.addEventListener("click", () => {
-				toggle(obsNo, [obsYes, obsMaybe]);
-			});
-			obsMaybe.addEventListener("click", () => {
-				toggle(obsMaybe, [obsYes, obsNo]);
-			});
+	// Get all graduations with smaller mandatory amount than the one with the highest amount
+	const mandatoryCandidates = graduations.filter(
+		(g) => g.mandatory < graduations[graduations.length - 1].mandatory,
+	);
+	let rest;
 
-			obsTbdy.appendChild(obsTr);
-		}
-		// Toggle the observation container visibility
+	// All graduations have the same mandatory amount
+	if (mandatoryCandidates.length === 0) {
+		mandatoryCandidates = graduations;
+		rest = [];
 	} else {
-		if (observationDiv.style.display === "none") {
-			observationDiv.style.display = "block";
-			li.style.background = "lightgray";
-		} else {
-			observationDiv.style.display = "none";
-			li.style.background = "unset";
-		}
+		rest = graduations.filter((g) => !mandatoryCandidates.includes(g));
 	}
+
+	// Get a random list of possible indexes
+	const candidatesIdxs = shuffleArray([...Array(mandatoryCandidates.length).keys()]);
+	let chosen = candidatesIdxs.slice(0, 5).map((i) => mandatoryCandidates[i]);
+	if (chosen.length < 5) {
+		const missing = 5 - chosen.length;
+		const restIdxs = shuffleArray([...Array(rest.length).keys()]);
+		chosen = chosen.concat(restIdxs.slice(0, missing).map((i) => rest[i]));
+	}
+
+	return chosen;
 }
 
 async function loadGroup(selected) {
@@ -114,17 +62,20 @@ async function loadGroup(selected) {
 	const graduationPromises = [];
 	document.getElementById("group-content").style.display = "block";
 
+	const mul = document.getElementById("group-mandatory-members");
 	const ul = document.getElementById("group-members");
-	// Clear group list
+
+	mul.innerHTML = "";
 	ul.innerHTML = "";
 
+	const listEntries = [];
 	for (const student of students) {
 		const graduationPromise = student.getGraduation();
+		graduationPromises.push(graduationPromise);
 
 		const li = document.createElement("li");
-		li.classList.add("group-member");
-		// Remember the student of the entry
 		li.student = student;
+		listEntries.push(li);
 
 		const i = document.createElement("img");
 		i.classList.add("group-member-icon");
@@ -132,26 +83,19 @@ async function loadGroup(selected) {
 			i.src = graduation.getIcon();
 		});
 		li.appendChild(i);
+	}
+
+	const graduations = await Promise.all(graduationPromises);
+	const chosen = chooseMandatory(graduations);
+
+	for (const li of listEntries) {
+		const student = li.student;
 
 		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");
-
-		graduationPromise.then((graduation) => {
-			if (!graduation.isObserved()) {
-				return;
-			}
-			ob.innerHTML = "&#128065";
-			ob.addEventListener("click", () => observationClickHandler(li));
-		});
-		graduationPromises.push(graduationPromise);
-
-		li.appendChild(ob);
-
 		for (const col of ["green", "orange", "red"]) {
 			const b = document.createElement("button");
 			b.classList.add(`group-member-${col}`);
@@ -160,91 +104,13 @@ async function loadGroup(selected) {
 			li.appendChild(b);
 		}
 
-		const textarea = document.createElement("textarea");
-		textarea.classList.add("group-member-point-reason");
-		li.appendChild(textarea);
-
-		const p = document.createElement("button");
-		p.classList.add("group-member-print");
-		p.innerHTML = "🖶";
-		p.addEventListener("click", () => printNote(li));
-		li.appendChild(p);
-
-		ul.appendChild(li);
-	}
-
-	const graduations = await Promise.all(graduationPromises);
-	const observations = graduations.filter(
-		(g) => g.observationRequested || (g.observation && !g.observation.end),
-	);
-
-	const observationReuqestsContainer = document.getElementById("observation-requests-container");
-
-	if (observations.length == 0) {
-		observationReuqestsContainer.style.display = "none";
-		return;
-	} else {
-		observationReuqestsContainer.style.display = "unset";
-	}
-
-	const observationReuqestsNode = document.getElementById("observation-requests");
-	observationReuqestsNode.innerHTML = "";
-	observations.sort((g1, g2) => {
-		const g1D = g1.observationRequested ? g1.observationRequested : g1.observation.start;
-		const g2D = g2.observationRequested ? g2.observationRequested : g2.observation.start;
-		return g1D - g2D;
-	});
-
-	for (const graduation of observations) {
-		const row = document.createElement("tr");
-		const iconCell = document.createElement("td");
-		const icon = document.createElement("img");
-		icon.src = graduation.getIcon();
-		row.appendChild(iconCell);
-
-		const nameCell = document.createElement("td");
-		nameCell.innerHTML = `${graduation.student.name}`;
-		row.appendChild(nameCell);
-
-		const dateCell = document.createElement("td");
-		let date;
-		if (graduation.observationRequested) {
-			date = graduation.observationRequested;
-		} else {
-			date = graduation.observation.start;
-		}
-		dateCell.innerHTML = DATETIME_FMT.format(date);
-		row.appendChild(dateCell);
-
-		const btnCell = document.createElement("td");
-		if (graduation.observation && !graduation.observation.ready()) {
-			btnCell.innerHTML = "In Beobachtungsphase";
+		if (chosen.includes(student.graduation)) {
+			li.classList.add("group-mandatory-member");
+			mul.appendChild(li);
 		} else {
-			const startBtn = document.createElement("button");
-			if (graduation.observationRequested) {
-				startBtn.addEventListener("click", () => {
-					graduation.startObservation();
-					//TODO(muhq): Add observation icon-button.
-					startBtn.remove();
-					btnCell.innerHTML = "In Beobachtungsphase";
-				});
-				startBtn.innerHTML = `Beobachtungsphase beginnen`;
-				startBtn.classList.add("start-observation");
-			} else {
-				startBtn.addEventListener("click", () => {
-					window.open(
-						`/mod/page/view.php?id=93017047&userToLoad=${graduation.student.id}`,
-						"_blank",
-					);
-				});
-				startBtn.innerHTML = `Graduierung abschließen`;
-				startBtn.classList.add("end-observation");
-			}
-			btnCell.appendChild(startBtn);
+			li.classList.add("group-member");
+			ul.appendChild(li);
 		}
-		row.appendChild(btnCell);
-
-		observationReuqestsNode.appendChild(row);
 	}
 }
 
@@ -275,15 +141,6 @@ function submitMassGraduation() {
 				submitGraduationChange(student, GraduationChange.newRedPointChange(reason, name)),
 			);
 		}
-		if (li.observationDiv) {
-			const status = [];
-			for (const row of li.observationDiv.querySelectorAll("tbody > tr")) {
-				if (row.querySelector('td[data-yes="true"]').innerHTML === "X") status.push("yes");
-				else if (row.querySelector('td[data-no="true"]').innerHTML === "X") status.push("no");
-				else status.push("");
-			}
-			promises.push(submitObservation(student, new Observation(new Date(), status)));
-		}
 	}
 
 	Promise.all(promises)
@@ -308,40 +165,6 @@ function submitMassGraduation() {
 		});
 }
 
-let prePrintBody = null;
-function printNote(li) {
-	// save the current DOM
-	prePrintBody = document.body;
-
-	// prepare the printable red point notice
-	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>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>
-`;
-
-	document.body = printBdy;
-	print();
-	// Restore the DOM after printing the red point note
-	document.body = prePrintBody;
-}
-
 async function init() {
 	document.getElementById("submit-mass-graduation").addEventListener("click", submitMassGraduation);
 	name = getName();
diff --git a/src/mock.ts b/src/mock.ts
index 5afe1db..6b12217 100644
--- a/src/mock.ts
+++ b/src/mock.ts
@@ -1,4 +1,4 @@
-import { Graduation, GraduationChange, Observation } from "./graduation-common.ts";
+import { Graduation, GraduationChange } from "./graduation-common.ts";
 import { Student } from "./student-common.ts";
 import { buildGroups } from "./group.ts";
 
@@ -40,8 +40,8 @@ for (const s of students) {
 			graduations.set(
 				s,
 				Graduation.from(s, [
-					GraduationChange.newGreenPointChange("Gute Arbeit", "Florian Fischer"),
-					GraduationChange.newOrangePointChange("", "Florian Fischer"),
+					GraduationChange.newGreenPointChange(false, "Gute Arbeit", "Florian Fischer"),
+					GraduationChange.newOrangePointChange(true, "", "Florian Fischer"),
 				]),
 			);
 			break;
@@ -49,16 +49,15 @@ for (const s of students) {
 			graduations.set(
 				s,
 				Graduation.from(s, [
-					GraduationChange.newGreenPointChange("", "Florian Fischer"),
-					GraduationChange.newGreenPointChange("", "Florian Fischer"),
-					new GraduationChange(new Date(), s.id, "ObservationStart", "", "Florian Fischer", ""),
+					GraduationChange.newGreenPointChange(false, "", "Florian Fischer"),
+					GraduationChange.newGreenPointChange(false, "", "Florian Fischer"),
 				]),
 			);
 			break;
 		case "b b b":
 			graduations.set(
 				s,
-				Graduation.from(s, [GraduationChange.newRedPointChange("", "Florian Fischer")]),
+				Graduation.from(s, [GraduationChange.newRedPointChange(false, "", "Florian Fischer")]),
 			);
 	}
 }
@@ -72,17 +71,10 @@ function submitGraduationChangeMock(s: Student, c: GraduationChange) {
 	s.graduation.addChange(c);
 }
 
-function submitObservationMock(s: Student, o: Observation) {
-	if (s.graduation === null) throw new Error("no graduation");
-	if (s.graduation.observation === null) throw new Error("no observation period");
-	s.graduation.observation.addObservation(o);
-}
-
 export {
 	fetchStudentsMock,
 	fetchSubjectsMock,
 	fetchProgressMock,
 	fetchGraduationMock,
 	submitGraduationChangeMock,
-	submitObservationMock,
 };