Wow! So cool! Amazing!

2 files changed, 25 insertions, 4 deletions

diff --git a/admin/public/prediction.html b/admin/public/prediction.html
index 99e35e3..c48f5cf 100644
--- a/admin/public/prediction.html
+++ b/admin/public/prediction.html
@@ -20,7 +20,7 @@
         </div>
         <div class="card">
             <h2>Wo sieht mich mein Lehrer in 10 Jahren?</h2>
-            <ul id="list"></ul>
+            <div id="list"></div>
         </div>
 
         <script src="prediction.js"></script>
diff --git a/admin/public/prediction.js b/admin/public/prediction.js
index 66afb06..914f910 100644
--- a/admin/public/prediction.js
+++ b/admin/public/prediction.js
@@ -4,8 +4,29 @@ fetch("api/prediction")
     .then((r) => r.json())
     .then((r) => {
         r.forEach((d) => {
-            const elem = document.createElement("li");
-            elem.innerText = `${d.uname} ${d.umid || ""} ${d.usur}: ${d.tname} ${d.tmid || ""} ${d.tsur}`;
-            list.appendChild(elem);
+            const teacherList = list.querySelector(`div[data-teacher="${d.tid}"]`);
+            if (teacherList) {
+                const ul = teacherList.querySelector("ul");
+                addLI(d, ul);
+            } else {
+                const div = document.createElement("div");
+                div.dataset.teacher = `${d.tid}`;
+                const h3 = document.createElement("h3");
+                const email = `${san(d.tname)}.${san(d.tsur)}@rbs-ulm.de`;
+                h3.textContent = `${d.tname} ${d.tsur}: ${email}`;
+                const ul = document.createElement("ul");
+                addLI(d, ul);
+                div.append(h3, ul);
+                list.appendChild(div);
+            }
         });
     });
+
+function addLI(d, ul) {
+    const li = document.createElement("li");
+    li.textContent = `${d.uname} ${d.umid || ""} ${d.usur} (${d.class})`;
+    ul.appendChild(li);
+}
+
+const san = (name) =>
+    name.toLowerCase().replace(/ß/g, "ss").replace(/ä/g, "ae").replace(/ü/g, "ue").replace(/ö/g, "oe");