FRONTEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEND

3 files changed, 90 insertions, 26 deletions

diff --git a/poll/public/index.html b/poll/public/index.html
index 45379aa..c75899c 100644
--- a/poll/public/index.html
+++ b/poll/public/index.html
@@ -23,13 +23,19 @@
             <div class="pure-form pure-form-stacked">
                 <fieldset>
                     <legend>Schüler-Ranking</legend>
+
+                    <div class="bar" id="progress"></div>
+
                     <p>Welche/r Schüler/in...</p>
                     <label id="question_label" for="question"></label>
                     <input name="question" id="question" hidden />
                     <label for="answer">Antwort</label>
                     <select name="answer" id="answer" required></select>
                     <button type="submit" id="submit-btn" class="pure-button pure-button-primary">Antworten</button>
-                    <button id="skip-btn" class="pure-button pure-button-danger">Weiter</button>
+                    <div class="back-skip pure-button-group" role="group">
+                        <button id="prev-btn" class="pure-button">Zurück</button>
+                        <button id="skip-btn" class="pure-button">Weiter</button>
+                    </div>
                 </fieldset>
             </div>
         </main>
diff --git a/poll/public/script.js b/poll/public/script.js
index cdffa17..5ca8a98 100644
--- a/poll/public/script.js
+++ b/poll/public/script.js
@@ -7,20 +7,26 @@ const dropdown = document.getElementById("answer");
 const question_input = document.getElementById("question");
 const question_label = document.getElementById("question_label");
 const submit = document.getElementById("submit-btn");
+const prev = document.getElementById("prev-btn");
 const skip = document.getElementById("skip-btn");
+const progress = document.getElementById("progress");
 
 if (!["teacher", "pupil"].includes(type)) window.location.href = "/";
 
 dropdown.insertAdjacentHTML(
     "beforeend",
-    '<option value="" selected disabled>' +
-    (type === "teacher" ? "Lehrer" : "Schüler") +
-    "/in auswählen...</option>",
+    '<option value="" selected disabled>' + (type === "teacher" ? "Lehrer" : "Schüler") + "/in auswählen...</option>",
 );
 document.querySelector("legend").innerText = type === "teacher" ? "Lehrer-Ranking" : "Schüler-Ranking";
 document.querySelector("p").innerText = "Welche/r " + (type === "teacher" ? "Lehrer/in" : "Schüler/in") + "...";
 
 skip.addEventListener("click", () => getNext(parseInt(qid) + 1));
+prev.addEventListener("click", () => getNext(parseInt(qid) - 1));
+
+if (qid == 0) {
+    prev.style.display = "none";
+    skip.style.width = "100%";
+}
 
 function appendOption(response) {
     response.forEach((elem) => {
@@ -35,30 +41,43 @@ function appendOption(response) {
 
 fetch("/auth/api/list" + (type === "teacher" ? "?class=teacher" : ""))
     .then((response) => response.json())
-    .then((response) => appendOption(response));
-
-fetch(`/poll/api/question/${qid}?type=${type}`)
-    .then((response) => response.json())
-    .then((response) => {
-        if (!response.empty()) {
-            question_label.innerText = response["question"];
-            question_input.setAttribute("value", response["id"]);
-            if (response.answer) {
-                for (const c of dropdown.children) if (+c.value === response.answer) c.selected = true;
-                method = "PUT";
-            }
-            submit.addEventListener("click", async () => {
-                await request();
-                getNext(parseInt(qid) + 1);
-                if (method === "POST") method = "PUT";
+    .then((response) => appendOption(response))
+    .then(() => {
+        fetch(`/poll/api/question/${qid}?type=${type}`)
+            .then((response) => response.json())
+            .then((response) => {
+                if (!response.empty()) {
+                    question_label.innerText = response["question"];
+                    question_input.setAttribute("value", response["id"]);
+                    if (response.answer) {
+                        for (const c of dropdown.children) if (+c.value === response.answer) c.selected = true;
+                        method = "PUT";
+                    }
+                    submit.addEventListener("click", async () => {
+                        await request();
+                        getNext(parseInt(qid) + 1);
+                        if (method === "POST") method = "PUT";
+                    });
+                } else getNext(); // Resets
             });
-        } else getNext(); // Resets
     });
 
 fetch(`api/questions/${type}`)
-    .then(response => response.json())
-    .then(response => {
-        // TODO: PROGRESS POGGERS
+    .then((response) => response.json())
+    .then((response) => {
+        for (const elem of response) {
+            progress.insertAdjacentHTML(
+                "beforeend",
+                `<div data-current="${elem.id == qid}" data-answered="${elem.answered}">${elem.id + 1}</div>`,
+            );
+        }
+    })
+    .then(() => {
+        document.querySelectorAll("div.bar div").forEach((elem) => {
+            elem.addEventListener("click", () => {
+                getNext(+elem.innerText - 1);
+            });
+        });
     });
 
 function getNext(q = 0) {
@@ -80,5 +99,5 @@ async function request() {
 
 // I did this myself lel 🤨
 Object.prototype.empty = function () {
-    return Object.keys(this).length === 0
-}
\ No newline at end of file
+    return Object.keys(this).length === 0;
+};
diff --git a/poll/public/style.css b/poll/public/style.css
index 7ed68b6..89d9b2e 100644
--- a/poll/public/style.css
+++ b/poll/public/style.css
@@ -33,6 +33,45 @@ select {
     color: #424242;
 }
 
+div.bar {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+div.bar div {
+    width: 20px;
+    height: 20px;
+    margin: 2px;
+    padding: 2px;
+    color: white;
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+div.bar div[data-answered="true"] {
+    background: green;
+}
+
+div.bar div[data-answered="false"] {
+    background: red;
+}
+
+div.bar div[data-current="true"] {
+    background: #0078e7;
+}
+
+.back-skip {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.back-skip button {
+    width: 50%;
+}
+
 @media only screen and (max-width: 700px) {
     main {
         width: calc(100% - 20%);