FRONTEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEND

4 files changed, 116 insertions, 39 deletions

diff --git a/poll/index.js b/poll/index.js
index ee4f375..4fb1eab 100644
--- a/poll/index.js
+++ b/poll/index.js
@@ -7,17 +7,23 @@ app.use("/", checkUser, express.static(__dirname + "/public"));
 
 app.get("/api/question/:id", checkUser, async (req, res) => {
     try {
-        const questions = await db.query(`SELECT rq.id, rq.question
+        const questions = await db.query(
+            `SELECT rq.id, rq.question
                                           FROM ranking_questions rq
                                                    INNER JOIN types t on rq.type_id = t.id
-                                          WHERE t.name = ?`, [req.query.type]);
+                                          WHERE t.name = ?`,
+            [req.query.type],
+        );
         const id = req.params.id;
         if (id >= 0 && id < questions.length) {
             const question = questions[id];
-            const answers = await db.query(`SELECT *
+            const answers = await db.query(
+                `SELECT *
                                             FROM ranking_answers
                                             WHERE question_id = ?
-                                              AND user_id = ?`, [question.id, req.session.uid]);
+                                              AND user_id = ?`,
+                [question.id, req.session.uid],
+            );
             question.answer = answers.length > 0 ? answers[0].answer_id : undefined;
             res.json(question); // 😜
         } else {
@@ -35,17 +41,23 @@ app.get("/api/questions/:type", checkUser, async (req, res) => {
     const fail = { success: false };
     if (types.includes(type)) {
         try {
-            const questions = await db.query(`SELECT id
+            const questions = await db.query(
+                `SELECT id
                                               FROM ranking_questions rq
-                                              WHERE type_id = ?`, [types.indexOf(type) + 1]);
-            const answers = await db.query(`SELECT question_id
+                                              WHERE type_id = ?`,
+                [types.indexOf(type) + 1],
+            );
+            const answers = await db.query(
+                `SELECT question_id
                                             FROM ranking_answers
-                                            WHERE user_id = ?`, [req.session.uid]);
+                                            WHERE user_id = ?`,
+                [req.session.uid],
+            );
             const resp = [];
+            let i = 0;
             for (const question of questions) {
                 const qid = answers.findIndex((answer) => question.id === answer.question_id);
-                console.log(qid);
-                resp.push({ id: question.id, answered: qid >= 0 });
+                resp.push({ id: i++, answered: qid >= 0 });
             }
             res.json(resp);
         } catch (e) {
@@ -53,7 +65,7 @@ app.get("/api/questions/:type", checkUser, async (req, res) => {
             res.json(fail);
         }
     } else res.json(fail);
-})
+});
 
 app.post("/api/answer/:type", checkUser, async (req, res) => {
     return await answer(req, res, "INSERT INTO ranking_answers (answer_id, question_id, user_id) VALUE (?,?,?)");
@@ -77,10 +89,11 @@ async function answer(req, res, qu) {
             if (!answerTypes.length > 0) return res.json(fail);
             if (type !== types[answerTypes[0].type_id - 1]) return res.json(fail);
             if (type === types[0]) {
-                const userClass = (await db.query("SELECT class_id FROM users WHERE id = ?", [req.session.uid]))[0].class_id;
+                const userClass = (await db.query("SELECT class_id FROM users WHERE id = ?", [req.session.uid]))[0]
+                    .class_id;
                 const answerUsers = await db.query("SELECT class_id FROM users WHERE id = ?", [answer]);
                 if (!answerUsers.length > 0 || userClass !== answerUsers[0].class_id) return res.json(fail);
-            } else if (type !== types[1]) return res.json(fail)
+            } else if (type !== types[1]) return res.json(fail);
             await db.query(qu, [answer, question, req.session.uid]);
             res.json({ success: true });
         } catch (e) {
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%);