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

3 files changed, 43 insertions, 1 deletions

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);
 	}
 }