cockpit: finish prototype UI

* remove process and calendar
* add observation period
* improve mocking

9 files changed, 120 insertions, 14 deletions

diff --git a/js/graduation-common.js b/js/graduation-common.js
index 4716e6d..4479bec 100644
--- a/js/graduation-common.js
+++ b/js/graduation-common.js
@@ -1,6 +1,8 @@
 import { GRADUATION_DB_ID, GRADUATION_ACTIVITY_ID, GRADUATION_DB_PARAMS_MAP } from "./config.js";
 import { loadFromDatabase, addEntryToDatabaseActivity } from "./database.js"
 
+const LEVEL_NAMES = ["Beginner", "Entdecker"];
+
 class GraduationChange {
 	constructor(date, id, name, group, change, reason, coach, json) {
 		this.date = date;
@@ -34,20 +36,21 @@ class GraduationChange {
 	static newRedPointChange(student, reason, coach) {
 		return new GraduationChange(
 			new Date(),
-			student.id, student.name, student.group,
+			student.id, student.name,
 			"Rot", reason, coach, ""
 		);
 	}
 }
 
 class Graduation {
-	constructor(student, green, orange, red, level, stickers, changes) {
+	constructor(student, green, orange, red, level, stickers, observed, changes) {
 		this.student = student;
 		this.green = green;
 		this.orange = orange;
 		this.red = red;
 		this.level = level;
 		this.stickers = stickers;
+		this.observed = observed;
 		this.changes = changes;
 
 		student.graduation = this;
@@ -57,7 +60,8 @@ class Graduation {
 		let green = 0;
 		let orange = 0;
 		let red = 0;
-		let level = "Beginner";
+		let level = 1;
+		let observed = false;
 		let stickers = [];
 		for (const change of changes) {
 			switch (change.change) {
@@ -74,13 +78,20 @@ class Graduation {
 				orange = 0;
 				break;
 			case "Änderung":
-				// TODO:
+				let ctx = JSON.parse(change.json)
+				switch (ctx.type) {
+				case "ObservationStart":
+					observed = true;
+					break;
+				default:
+					alert(`Unexpected ctx type: ${ctx.type}`);
+				}
 				break;
 			default:
 				alert(`Unexpected change: ${change}`);
 			}
 		}
-		return new Graduation(student, green, orange, red, level, stickers, changes);
+		return new Graduation(student, green, orange, red, level, stickers, observed, changes);
 	}
 
 	addChange(change) {
@@ -90,6 +101,36 @@ class Graduation {
 		// This updates the student.graduation reference as well
 		Graduation.from(this.student, changes);
 	}
+
+	/**
+	 * Request observation
+	 */
+	async requestObservation() {
+		// TODO(muhq): Implement observation mark
+		this.observed = true;
+	}
+
+	/**
+	 * Return if the student is in observation.
+	 */
+	isObserved() {
+		return this.observed;
+	}
+
+	/**
+	 * Return the URI of the icon representing the graduation level.
+	 */
+	getIcon() {
+		return "";
+	}
+
+	/**
+	 * Return the name of the current graduation level.
+	 * @return {String} The name of the current level.
+	 */
+	getLevelName() {
+		return LEVEL_NAMES[this.level - 1];
+	}
 }
 
 async function fetchGraduationChanges(student) {
@@ -125,6 +166,7 @@ async function submitGraduationChange(student, change) {
 }
 
 export {
+	LEVEL_NAMES,
 	GraduationChange,
 	Graduation,
 	fetchGraduation,
diff --git a/js/graduation-mock.js b/js/graduation-mock.js
index 9f67185..d35901e 100644
--- a/js/graduation-mock.js
+++ b/js/graduation-mock.js
@@ -1,6 +1,6 @@
-import { Graduation, GraduationChange, } from "./graduation-common.js";
+import { LEVEL_NAMES, Graduation, GraduationChange, } from "./graduation-common.js";
 import {
 	fetchGraduationMock as fetchGraduation,
 	submitGraduationChangeMock as  submitGraduationChange
 } from "./mock.js";
-export { GraduationChange, Graduation, fetchGraduation, submitGraduationChange};
\ No newline at end of file
+export { LEVEL_NAMES, GraduationChange, Graduation, fetchGraduation, submitGraduationChange};
\ No newline at end of file
diff --git a/js/graduation-prod.js b/js/graduation-prod.js
index de7cbf4..cbc8d48 100644
--- a/js/graduation-prod.js
+++ b/js/graduation-prod.js
@@ -1,2 +1,2 @@
-import { GraduationChange, Graduation, fetchGraduation, submitGraduationChange } from "./graduation-common.js";
-export { GraduationChange, Graduation, fetchGraduation, submitGraduationChange };
\ No newline at end of file
+import { LEVEL_NAMES, GraduationChange, Graduation, fetchGraduation, submitGraduationChange } from "./graduation-common.js";
+export { LEVEL_NAMES, GraduationChange, Graduation, fetchGraduation, submitGraduationChange };
\ No newline at end of file
diff --git a/js/mock.js b/js/mock.js
index fe60ef3..e4aca53 100644
--- a/js/mock.js
+++ b/js/mock.js
@@ -48,6 +48,7 @@ for (const s of students) {
 		graduationChanges[s.name] = [
 			GraduationChange.newGreenPointChange(s, "", "Florian Fischer"),
 			GraduationChange.newGreenPointChange(s, "", "Florian Fischer"),
+			new GraduationChange(new Date(), s.id, s.name, "Änderung", "", "", '{"type": "ObservationStart"}'),
 		];
 		break;
 	case "b b b":
@@ -55,6 +56,8 @@ for (const s of students) {
 			GraduationChange.newRedPointChange(s, "", "Florian Fischer"),
 		];
 	}
+	// Build the student's graduation
+	Graduation.from(s, graduationChanges[s.name]);
 }
 
 function fetchGraduationMock(s) {
diff --git a/js/student-common.js b/js/student-common.js
index 48f7d60..f0d8ed3 100644
--- a/js/student-common.js
+++ b/js/student-common.js
@@ -1,8 +1,11 @@
 import { getUserIconUrl, getCourseParticipantsUrl } from "./config.js";
+import { fetchGraduation } from "./graduation-common.js";
 /**
  * Class to represent Students.
  */
 class Student {
+	graduation = null;
+
 	constructor(id, name, groups) {
 		this.id = id;
 		this.name = name;
@@ -23,6 +26,14 @@ class Student {
 		}
 		return this.groups.filter((g) => g !== this.getGroupName());
 	}
+
+	async getGraduation() {
+		if(!this.graduation) {
+			// fetchGraduation(this) sets this.graduation
+			await fetchGraduation(this);
+		}
+		return this.graduation;
+	}
 }
 
 async function fetchStudent(idFilter, nameFilter, groupFilter) {
diff --git a/js/student-mock.js b/js/student-mock.js
index 0ea12ea..7c79e12 100644
--- a/js/student-mock.js
+++ b/js/student-mock.js
@@ -1,3 +1,9 @@
-import { Student, fetchStudent } from "./student-common.js";
+import { Student } from "./student-common.js";
 import { fetchStudentsMock as fetchStudents } from "./mock.js";
-export { Student, fetchStudents, fetchStudent };
\ No newline at end of file
+
+async function fetchStudent(idFilter, nameFilter, groupFilter) {
+	const students = await fetchStudents(idFilter, nameFilter, groupFilter);
+	return students[0];
+}
+
+export { Student, fetchStudents, fetchStudent };
diff --git a/js/student-prod.js b/js/student-prod.js
index f9c430c..9c8d7cb 100644
--- a/js/student-prod.js
+++ b/js/student-prod.js
@@ -1,2 +1,2 @@
 import { Student, fetchStudent, fetchStudents } from "./student-common.js";
-export { Student, fetchStudents, fetchStudent };
\ No newline at end of file
+export { Student, fetchStudents, fetchStudent };
diff --git a/js/utils-mock.js b/js/utils-mock.js
index 4f5348d..7859a1e 100644
--- a/js/utils-mock.js
+++ b/js/utils-mock.js
@@ -1,3 +1,31 @@
+import { fetchStudent } from "./student-ENV.js";
+
 export function isTeacher() {
-	return true;
+	return !(new URLSearchParams(document.location.search)).has("student");
+}
+
+export function getCurrentName() {
+	let firstname = "";
+	let lastname = "";
+
+	const autoNameDiv = document.getElementById("auto-name");
+	if (autoNameDiv) {
+		firstname = autoNameDiv.children[0].innerHTML;
+		lastname = autoNameDiv.children[1].innerHTML;
+		autoNameDiv.remove();
+	}
+
+	const params = new URLSearchParams(document.location.search);
+	if (params.has("firstname"))
+		firstname = params.get("firstname")
+	if (params.has("lastname"))
+		lastname = params.get("lastname")
+
+	return [firstname, lastname];
+}
+
+export function getUserId() {
+	const [firstname, lastname] = getCurrentName();
+
+	return fetchStudent(null, firstname + " " + lastname).id;
 }
diff --git a/js/utils-prod.js b/js/utils-prod.js
index 1dd7e8e..119870c 100644
--- a/js/utils-prod.js
+++ b/js/utils-prod.js
@@ -1,5 +1,21 @@
 export function isTeacher() {
 	return Boolean(document.querySelector('.editmode-switch-form'))
-		|| Boolean(document.querySelector('a[href*="templates.php"]'))
 		|| document.body.classList.contains('editing');
 }
+
+export function getCurrentName() {
+	let firstname = "";
+	let lastname = "";
+
+	const autoNameDiv = document.getElementById("auto-name");
+	firstname = autoNameDiv.children[0].innerHTML;
+	lastname = autoNameDiv.children[1].innerHTML;
+	autoNameDiv.remove();
+
+	return [firstname, lastname];
+}
+
+export function getUserId() {
+	// M is exported by Moodle
+	return M.cfg.userid;
+}