db: add DB class and adapt to only store a single JSON blob per entry

4 files changed, 67 insertions, 9 deletions

diff --git a/js/database.js b/js/database.js
index 3297a11..e6f85da 100644
--- a/js/database.js
+++ b/js/database.js
@@ -1,6 +1,19 @@
-async function loadFromDatabase(id, params) {
-	let dbUrl = `/mod/data/view.php?d=${id}`;
-	dbUrl += "&perpage=1000";
+class DB {
+	constructor(id) {
+		this.id = id;
+	}
+
+	async fetchEntries(params) {
+		return loadFromDatabaseActivity(this.id, params)
+	}
+
+	async saveEntry(json) {
+		return addEntryToDatabaseActivity(this.id, json);
+	}
+}
+
+async function loadFromDatabaseActivity(id, params) {
+	let dbUrl = `${window.location.origin}/mod/data/view.php?id=${id}&mode=list&perpage=1000`;
 	// TODO(muhq): Why does this not include entries?
 	if (params) {
 		dbUrl += "&filter=1&advanced=1";
@@ -24,7 +37,7 @@ async function loadFromDatabase(id, params) {
 	return data;
 }
 
-async function addEntryToDatabaseActivity(id, params) {
+async function addEntryToDatabaseActivity(id, json) {
 	const url = `/mod/data/edit.php?id=${id}`;
 	const editRes = await fetch(url);
 	const editDoc = new DOMParser().parseFromString(await editRes.text(), 'text/html');
@@ -32,9 +45,12 @@ async function addEntryToDatabaseActivity(id, params) {
 
 	const formData = new FormData(form);
 
-	for (const key in params) {
-		const formKey = key.replace("f_", "field_");
-		formData.set(formKey, params[key]);
+	for (const key in formData.keys()) {
+		if (k.startsWith("field_")) {
+			formData.set(key, json);
+			// We found our json key
+			break;
+		}
 	}
 	formData.set("saveandview", "Speichern");
 
@@ -45,4 +61,4 @@ async function addEntryToDatabaseActivity(id, params) {
 	});
 }
 
-export { loadFromDatabase, addEntryToDatabaseActivity };
+export { DB, loadFromDatabaseActivity, addEntryToDatabaseActivity };
diff --git a/mass-graducation/index.css b/mass-graducation/index.css
index e9cca02..e5abccf 100644
--- a/mass-graducation/index.css
+++ b/mass-graducation/index.css
@@ -77,6 +77,11 @@
 .group-member-name {
 }
 
+.group-member-observation-icon {
+  border: none;
+  background: none;
+}
+
 .group-member-green, .group-member-orange, .group-member-red {
 	margin: 5px;
 }
diff --git a/mass-graducation/index.html b/mass-graducation/index.html
index 4fbd669..88ac916 100644
--- a/mass-graducation/index.html
+++ b/mass-graducation/index.html
@@ -8,7 +8,7 @@
   <script src="./dist/main.js"></script>
 </head>
 <body>
-  <div id="group-selection-container" data-availability="if-lehrer">
+  <div id="group-selection-container">
     <div id="group-selection-search-container">
       <input
         type="text"
diff --git a/mass-graducation/src/main.js b/mass-graducation/src/main.js
index 244828b..86d2165 100644
--- a/mass-graducation/src/main.js
+++ b/mass-graducation/src/main.js
@@ -8,6 +8,17 @@ import { initSelection } from "../../js/selection.js";
 
 let group;
 
+function observationClickHandler(li, student) {
+	const observationDiv = document.createElement("div");
+	observationDiv.id = "group-member-observation-container";
+	observationDiv.popover = true;
+	li.appendChild(observationDiv);
+
+	const submitBtn = document.createElement("button");
+	submitBtn.id = "group-member-observation-submit";
+	observationDiv.appendChild(submitBtn);
+}
+
 function pointClickHandler(li, student, color) {
 	const textareaDiv = document.createElement("div");
 	textareaDiv.id = "group-member-point-reason-container";
@@ -83,6 +94,26 @@ async function loadGroup(selected) {
 		const li = document.createElement("li");
 		li.classList.add("group-member")
 
+		const ob = document.createElement("button");
+		ob.classList.add("group-member-observation-icon")
+		ob.popovertarget="group-member-observation-popover"
+		student.getGraduation().then((graduation) => {
+			if (!graduation.isObserved()) {
+				return;
+			}
+			ob.innerHTML = "&#128065"
+			ob.addEventListener("click", () => observationClickHandler(li, student) );
+		});
+		li.appendChild(ob);
+
+		const i = document.createElement("img");
+		i.classList.add("group-member-icon")
+		student.getGraduation().then((graduation) => {
+			i.src = graduation.getIcon();
+		});
+		// TODO: fetch the students state icon
+		li.appendChild(i);
+
 		const n = document.createElement("span");
 		n.classList.add("group-member-name")
 		n.innerHTML = `${student.name}`;
@@ -96,6 +127,12 @@ async function loadGroup(selected) {
 			li.appendChild(b);
 		}
 
+		const p = document.createElement("button");
+		p.classList.add("group-member-print")
+		p.innerHTML = `print`;
+		p.addEventListener("click", () => print() );
+		li.appendChild(p);
+
 		ul.appendChild(li);
 	}
 }