diff options
| author | Marvin Borner | 2020-10-10 17:49:51 +0200 |
|---|---|---|
| committer | Marvin Borner | 2020-10-10 17:49:51 +0200 |
| commit | 897b4173c5cc190805a96aafe5f9258610332e39 (patch) | |
| tree | ffd3e52712e2a8decfa2ec882c0110b0c10e61fd | |
| parent | b2d9cf884f2aff3445d6619939186e48a683e5a9 (diff) | |
Added vote stats
| -rw-r--r-- | admin/public/index.html | 15 | ||||
| -rw-r--r-- | admin/public/ranking.html | 32 | ||||
| -rw-r--r-- | admin/public/ranking.js (renamed from admin/public/script.js) | 1 | ||||
| -rw-r--r-- | admin/public/style.css | 4 | ||||
| -rw-r--r-- | admin/public/votes.html | 28 | ||||
| -rw-r--r-- | admin/public/votes.js | 37 |
6 files changed, 105 insertions, 12 deletions
diff --git a/admin/public/index.html b/admin/public/index.html index a611291..815b6aa 100644 --- a/admin/public/index.html +++ b/admin/public/index.html @@ -11,22 +11,19 @@ /> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> - <title>Home</title> + <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> - - <!-- 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>Admin</h2> + <ul> + <li><a href="ranking.html">Ranking</a></li> + <li><a href="votes.html">Votes</a></li> + </ul> </div> - - <script src="script.js"></script> </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/script.js b/admin/public/ranking.js index d9fd30e..4281e23 100644 --- a/admin/public/script.js +++ b/admin/public/ranking.js @@ -11,7 +11,6 @@ fetch("api/questions") }); function render(questions) { - console.log(questions); const teacher = document.querySelector("ul#teacher"); const pupil = document.querySelector("ul#pupil"); questions.forEach((question) => { diff --git a/admin/public/style.css b/admin/public/style.css index 77853bf..4e3cffc 100644 --- a/admin/public/style.css +++ b/admin/public/style.css @@ -12,7 +12,7 @@ body { position: absolute; max-height: 80%; overflow: auto; - width: 30%; + width: 40%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); @@ -26,7 +26,7 @@ div { background: white; } -@media only screen and (max-width: 600px) { +@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..cd9563c --- /dev/null +++ b/admin/public/votes.html @@ -0,0 +1,28 @@ +<!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"> + <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..3f1284c --- /dev/null +++ b/admin/public/votes.js @@ -0,0 +1,37 @@ +fetch("api/votes") + .then((response) => response.json()) + .then((response) => { + const ctx = document.getElementById("votes").getContext("2d"); + new Chart(ctx, { + type: "bar", + data: { + labels: response.map((v) => v.name), + datasets: [ + { + label: "# of Votes", + data: response.map((v) => v.votes || 0), + backgroundColor: () => "#" + (Math.random().toString(16) + "0000000").slice(2, 8), + borderWidth: 1, + }, + ], + }, + options: { + legend: { + display: false, + }, + tooltips: { + enabled: false, + }, + scales: { + yAxes: [ + { + ticks: { + beginAtZero: true, + precision: 0, + }, + }, + ], + }, + }, + }); + }); |