6 files changed, 201 insertions, 0 deletions
diff --git a/admin/public/index.html b/admin/public/index.html
new file mode 100644
index 0000000..815b6aa
--- /dev/null
+++ b/admin/public/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
+            integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="style.css" type="text/css" media="all" />
+
+        <title>Admin</title>
+    </head>
+    <body>
+        <div class="pure-menu pure-menu-horizontal">
+            <a href="/" class="pure-menu-item pure-menu-link">Home</a>
+            <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a>
+        </div>
+        <div class="card">
+            <h2>Admin</h2>
+            <ul>
+                <li><a href="ranking.html">Ranking</a></li>
+                <li><a href="votes.html">Votes</a></li>
+            </ul>
+        </div>
+    </body>
+</html>
diff --git a/admin/public/ranking.html b/admin/public/ranking.html
new file mode 100644
index 0000000..328f09a
--- /dev/null
+++ b/admin/public/ranking.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
+            integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="style.css" type="text/css" media="all" />
+
+        <title>Home</title>
+    </head>
+    <body>
+        <div class="pure-menu pure-menu-horizontal">
+            <a href="/" class="pure-menu-item pure-menu-link">Home</a>
+            <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a>
+        </div>
+
+        <!-- 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>
+        </div>
+
+        <script src="ranking.js"></script>
+    </body>
+</html>
diff --git a/admin/public/ranking.js b/admin/public/ranking.js
new file mode 100644
index 0000000..4281e23
--- /dev/null
+++ b/admin/public/ranking.js
@@ -0,0 +1,26 @@
+fetch("api/questions")
+    .then((questions) => questions.json())
+    .then((questions) => {
+        fetch("api/answers")
+            .then((answers) => answers.json())
+            .then((answers) => {
+                questions.forEach((question) => (question.answers = []));
+                answers.forEach((answer) => questions[answer.question_id - 1].answers.push(answer));
+                render(questions);
+            });
+    });
+
+function render(questions) {
+    const teacher = document.querySelector("ul#teacher");
+    const pupil = document.querySelector("ul#pupil");
+    questions.forEach((question) => {
+        const list = question.type === "teacher" ? teacher : pupil;
+        let answers = "";
+        question.answers.forEach((answer) => {
+            answers += `<li>${answer.name} ${answer.middlename ? answer.middlename + " " : ""}${answer.surname}: ${
+                answer.count
+            }</li>`;
+        });
+        list.insertAdjacentHTML("beforeend", `<li>${question.question}<br><ol>${answers}</ol></li>`);
+    });
+}
diff --git a/admin/public/style.css b/admin/public/style.css
new file mode 100644
index 0000000..4e3cffc
--- /dev/null
+++ b/admin/public/style.css
@@ -0,0 +1,33 @@
+html,
+body {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    background-color: #eec0c6;
+    background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
+}
+
+.card {
+    position: absolute;
+    max-height: 80%;
+    overflow: auto;
+    width: 40%;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    border-radius: 10px;
+    background: white;
+}
+
+div {
+    background: white;
+}
+
+@media only screen and (max-width: 800px) {
+    .card {
+        width: calc(100% - 50px);
+    }
+}
diff --git a/admin/public/votes.html b/admin/public/votes.html
new file mode 100644
index 0000000..b700ed9
--- /dev/null
+++ b/admin/public/votes.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
+            integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="style.css" type="text/css" media="all" />
+
+        <title>Votes</title>
+    </head>
+    <body>
+        <div class="pure-menu pure-menu-horizontal">
+            <a href="/" class="pure-menu-item pure-menu-link">Home</a>
+            <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a>
+        </div>
+        <div class="card">
+            <button class="pure-button" id="switch">Switch</button>
+            <br />
+            <canvas id="votes" width="400" height="400"></canvas>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script>
+        <script src="votes.js"></script>
+    </body>
+</html>
diff --git a/admin/public/votes.js b/admin/public/votes.js
new file mode 100644
index 0000000..62ff374
--- /dev/null
+++ b/admin/public/votes.js
@@ -0,0 +1,51 @@
+let date;
+let chart;
+
+fetch("api/votes")
+    .then((response) => response.json())
+    .then((response) => {
+        data = response;
+        render("bar");
+    });
+
+function render(type) {
+    const ctx = document.getElementById("votes").getContext("2d");
+    chart = new Chart(ctx, {
+        type,
+        data: {
+            labels: data.map((v) => v.name),
+            datasets: [
+                {
+                    label: "# of Votes",
+                    data: data.map((v) => v.votes || 0),
+                    backgroundColor: () => "#" + (Math.random().toString(16) + "0000000").slice(2, 8),
+                    borderWidth: 1,
+                },
+            ],
+        },
+        options: {
+            legend: {
+                display: false,
+            },
+            scales: {
+                yAxes: [
+                    {
+                        ticks: {
+                            beginAtZero: true,
+                            precision: 0,
+                        },
+                    },
+                ],
+            },
+        },
+    });
+}
+
+let index = 0;
+const types = ["pie", "doughnut", "polarArea", "radar", "line", "bar"];
+document.getElementById("switch").addEventListener("click", () => {
+    chart.destroy();
+    render(types[index]);
+    if (index + 1 < types.length) index++;
+    else index = 0;
+});