diff options
| author | LarsVomMars | 2020-10-03 12:14:33 +0200 |
|---|---|---|
| committer | LarsVomMars | 2020-10-03 12:14:33 +0200 |
| commit | 30dd80aa4e7310c3f7958f2db261233583ded909 (patch) | |
| tree | da6a23b811a2c32b78a760a53ede86249ed91acc | |
| parent | 7639f176abe404cad1a3c9a3b8e2b4918b86087e (diff) | |
Style
| -rw-r--r-- | mottovote/index.js | 7 | ||||
| -rw-r--r-- | mottovote/public/index.html | 12 | ||||
| -rw-r--r-- | mottovote/public/script.js | 4 | ||||
| -rw-r--r-- | mottovote/public/style.css | 55 |
4 files changed, 74 insertions, 4 deletions
diff --git a/mottovote/index.js b/mottovote/index.js index a485a8b..d22ba29 100644 --- a/mottovote/index.js +++ b/mottovote/index.js @@ -20,6 +20,7 @@ app.get("/api/list", checkUser, async (req, res) => { app.put("/api/vote", checkUser, async (req, res) => { await db.query("DELETE FROM motto_votes WHERE user_id = ?", [req.session.uid]); try { + if (req.body.entries().length > 3) return res.send("error"); for (const mid in req.body) { await db.query( "INSERT INTO motto_votes (user_id, motto_id, votes) VALUES (?, ?, ?)", @@ -33,4 +34,10 @@ app.put("/api/vote", checkUser, async (req, res) => { } }); +// Vote result - admin +app.get("/api/get", checkUser, async (req, res) => { + const votes = await db.query("SELECT m.id, m.name, m.description, SUM(votes) votes FROM motto_votes mv RIGHT JOIN mottos m on mv.motto_id = m.id GROUP BY m.id, m.name, m.description ORDER BY SUM(votes) DESC"); + res.json(votes); +}); + module.exports = app;
\ No newline at end of file diff --git a/mottovote/public/index.html b/mottovote/public/index.html index 27ea837..4e64cb8 100644 --- a/mottovote/public/index.html +++ b/mottovote/public/index.html @@ -1,15 +1,23 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Motto Vote</title> + <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" /> </head> + <body> - <div id="vote"></div> - <button id="voteButton">Vote!</button> + <main> + <div id="vote"></div> + <button class="pure-button pure-button-primary" id="voteButton">Vote!</button> + </main> <script src="script.js"></script> </body> + </html>
\ No newline at end of file diff --git a/mottovote/public/script.js b/mottovote/public/script.js index 338b26b..c8432c5 100644 --- a/mottovote/public/script.js +++ b/mottovote/public/script.js @@ -12,7 +12,7 @@ async function get() { for (let i = 0; i < maxVotes; i++) { const cb = document.createElement("input"); cb.type = "checkbox"; - cb.name = id; + cb.value = id; cb.checked = motto.votes && motto.votes-- > 0 row.append(cb); } @@ -40,7 +40,7 @@ function addListeners() { const checked = document.querySelectorAll("input[type=checkbox]:checked"); if (checked.length > maxVotes) return; // Shouldn't be necessary const req = {}; - for (const box of checked) req[box.name] = box.name in req ? req[box.name] + 1 : 1; // Amount of votes + for (const box of checked) req[box.value] = box.value in req ? req[box.value] + 1 : 1; // Amount of votes const resp = await fetch("api/vote", { method: "PUT", headers: { "Content-Type": "application/json" }, diff --git a/mottovote/public/style.css b/mottovote/public/style.css new file mode 100644 index 0000000..bf4eac7 --- /dev/null +++ b/mottovote/public/style.css @@ -0,0 +1,55 @@ +html, +body { + padding: 0; + margin: 0; + height: 100%; + width: 100%; + background-color: #eec0c6; + background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%); +} + +main { + display: flex; + flex-flow: row wrap; + position: absolute; + height: 40%; + width: 50%; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + padding: 20px; + border-radius: 10px; + background: white; +} + +#voteButton { + height: 10%; +} + +#vote { + margin-bottom: 20px; + overflow-y: scroll; + width: 100%; +} + +#vote div { + padding: 5px; + display: flex; + align-items: center; +} + +#vote div input { + margin-right: 5px; +} + +button, +select { + width: 100%; +} + +@media only screen and (max-width: 600px) { + div { + width: calc(100% - 50px); + } +} |