diff options
| -rw-r--r-- | admin/index.js | 7 | ||||
| -rw-r--r-- | admin/public/index.html | 1 | ||||
| -rw-r--r-- | admin/public/participation.html | 30 | ||||
| -rw-r--r-- | admin/public/participation.js | 52 |
4 files changed, 90 insertions, 0 deletions
diff --git a/admin/index.js b/admin/index.js index 407bbcf..99c876a 100644 --- a/admin/index.js +++ b/admin/index.js @@ -52,4 +52,11 @@ app.get("/api/votes", checkAdmin, async (req, res) => { res.json(votes); }); +app.get("/api/participation", checkAdmin, async (req, res) => { + const participation = await db.query( + "SELECT c.name, CAST(COUNT(DISTINCT user_id) AS float) / CAST((SELECT COUNT(*) FROM users WHERE class_id = u.class_id) AS float) * 100 percentage FROM motto_votes INNER JOIN users u ON user_id = u.id INNER JOIN class c ON class_id = c.id GROUP BY class_id", + ); + res.json(participation); +}); + module.exports = app; diff --git a/admin/public/index.html b/admin/public/index.html index 389157c..d88d38d 100644 --- a/admin/public/index.html +++ b/admin/public/index.html @@ -24,6 +24,7 @@ <ul class="pure-menu-list"> <li class="pure-menu-item"><a href="ranking.html" class="pure-menu-link">Ranking</a></li> <li class="pure-menu-item"><a href="votes.html" class="pure-menu-link">Votes</a></li> + <li class="pure-menu-item"><a href="participation.html" class="pure-menu-link">Teilnahme</a></li> </ul> </div> </div> diff --git a/admin/public/participation.html b/admin/public/participation.html new file mode 100644 index 0000000..2b132f2 --- /dev/null +++ b/admin/public/participation.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>Participation</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="participation" 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="participation.js"></script> + </body> +</html> diff --git a/admin/public/participation.js b/admin/public/participation.js new file mode 100644 index 0000000..84525a4 --- /dev/null +++ b/admin/public/participation.js @@ -0,0 +1,52 @@ +let date; +let chart; + +fetch("api/participation") + .then((response) => response.json()) + .then((response) => { + data = response; + console.log(data); + render("bar"); + }); + +function render(type) { + const ctx = document.getElementById("participation").getContext("2d"); + chart = new Chart(ctx, { + type, + data: { + labels: data.map((v) => v.name), + datasets: [ + { + label: "% of Participation", + data: data.map((v) => Math.round(v.percentage * 100) / 100 || 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; +}); |