fioushgisuehgisoyuhiuh

3 files changed, 45 insertions, 12 deletions

diff --git a/admin/public/ranking.html b/admin/public/ranking.html
index 328f09a..adb05f2 100644
--- a/admin/public/ranking.html
+++ b/admin/public/ranking.html
@@ -21,10 +21,26 @@
 
         <!-- TODO: Class-based stats (easily solveable in frontend) -->
         <div class="card">
-            Welche/r Schüler/in...
-            <ul id="pupil"></ul>
-            Welche/r Lehrer/in...
-            <ul id="teacher"></ul>
+            <h2>Ranking</h2>
+            <div id="list">
+                <span>Lehrer</span>
+                <ul></ul>
+                <br />
+                <span>TGM13.1</span>
+                <ul></ul>
+                <br />
+                <span>TGM13.2</span>
+                <ul></ul>
+                <br />
+                <span>TGTM13.1</span>
+                <ul></ul>
+                <br />
+                <span>TGI13.1</span>
+                <ul></ul>
+                <br />
+                <span>TGI13.2</span>
+                <ul></ul>
+            </div>
         </div>
 
         <script src="ranking.js"></script>
diff --git a/admin/public/ranking.js b/admin/public/ranking.js
index 4281e23..ba44db6 100644
--- a/admin/public/ranking.js
+++ b/admin/public/ranking.js
@@ -1,3 +1,5 @@
+const classes = ["teacher", "TGM13.1", "TGM13.2", "TGTM13.1", "TGI13.1", "TGI13.2"];
+
 fetch("api/questions")
     .then((questions) => questions.json())
     .then((questions) => {
@@ -11,16 +13,27 @@ fetch("api/questions")
     });
 
 function render(questions) {
-    const teacher = document.querySelector("ul#teacher");
-    const pupil = document.querySelector("ul#pupil");
+    const list = document.querySelectorAll("#list ul");
+
+    list.forEach((elem) => {
+        elem.style.display = "none";
+        elem.previousElementSibling.addEventListener("click", () => {
+            elem.style.display = elem.style.display === "none" ? "block" : "none";
+            console.log(elem.nextElementSibling);
+        });
+    });
+
     questions.forEach((question) => {
-        const list = question.type === "teacher" ? teacher : pupil;
-        let answers = "";
+        let answers = ["", "", "", "", "", ""];
         question.answers.forEach((answer) => {
-            answers += `<li>${answer.name} ${answer.middlename ? answer.middlename + " " : ""}${answer.surname}: ${
-                answer.count
-            }</li>`;
+            answers[classes.indexOf(answer.class)] += `<li>${answer.name} ${
+                answer.middlename ? answer.middlename + " " : ""
+            }${answer.surname}: ${answer.count}</li>`;
+        });
+
+        answers.forEach((elem, ind) => {
+            if ((question.type != "teacher" || ind == 0) && (question.type == "teacher" || ind != 0))
+                list[ind].insertAdjacentHTML("beforeend", `<li>${question.question}<br><ol>${answers[ind]}</ol></li>`);
         });
-        list.insertAdjacentHTML("beforeend", `<li>${question.question}<br><ol>${answers}</ol></li>`);
     });
 }
diff --git a/admin/public/style.css b/admin/public/style.css
index e18342e..f1bbc9e 100644
--- a/admin/public/style.css
+++ b/admin/public/style.css
@@ -28,6 +28,10 @@ div {
     background: white;
 }
 
+#list span {
+    cursor: pointer;
+}
+
 @media only screen and (max-width: 700px) {
     .card {
         width: calc(100% - 20%);