Add admin view

This commit is contained in:
Dominic Zimmer 2020-07-18 00:54:19 +02:00
parent 2bc842665d
commit 3174465be2
2 changed files with 121 additions and 11 deletions

View File

@ -8,8 +8,8 @@
<title>Waschmarken.io</title>
<meta name="description" content="Waschmarken Scoreboard">
<link rel="stylesheet" href="static/css/normalize.css">
<link rel="stylesheet" href="static/css/sakura-dark.css">
<link rel="stylesheet" href="../../static/css/normalize.css">
<link rel="stylesheet" href="../../static/css/sakura-dark.css">
<style>
.heading {
@ -24,36 +24,49 @@
height: 1.2em;
border-radius: 0.6em;
}
.number {
width: 8rem;
}
.plusbutton {
width: 3rem;
}
</style>
</head>
<body>
<h1 class="heading">Waschmarken Scoreboard</h1>
<h1 class="heading">Waschmarken Admin Interface</h1>
<table id="scoreboard">
<thead>
<tr>
<th>Name</th>
<th style="width: 100%;"></th>
<th class="score">Name</th>
<th class="score">Score</th>
<th class="score">Max</th>
<th class="score">Increase</th>
</tr>
</thead>
<tbody></tbody>
<template>
<tr class="row">
<td class="name"></td>
<td>
<div class="bar"></div>
<td class="score" id="name"></td>
<td class="score" id="cur"></td>
<td class="score" id="max"></td>
<td class="score" id="incr">
<div>
<input type="number" id="number" value = "25" >
<input type="button" id="plusbutton" value="+">
</div>
</td>
<td class="score">42069</td>
</tr>
</template>
</table>
<script src="static/js/main.js"></script>
<script src="../../static/js/admin.js"></script>
</body>
</html>
<!doctype html>
</html>

97
static/js/admin.js Normal file
View File

@ -0,0 +1,97 @@
"use strict"
const token = document.location.pathname.split("/").pop();
const api_path = `../../api/`;
const admin_api_path = `../../api/token${token}/`;
const greeting = document.getElementById("greeting"),
currentcoins = document.getElementById("currentcoins"),
maxcoins = document.getElementById("maxcoins"),
sellvalue = document.getElementById("sellvalue");
// https://stackoverflow.com/a/7616484
Object.defineProperty(String.prototype, 'hashCode', {
value: function () {
var hash = 0, i, chr;
for (i = 0; i < this.length; i++) {
chr = this.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
}
});
function render_table(data) {
const users = Object.values(data.users);
const tbody = document.querySelector("#scoreboard tbody");
while (tbody.children.length) {
tbody.removeChild(tbody.firstChild);
}
const template = document.querySelector("#scoreboard template");
for (const user of users) {
const clone = template.content.cloneNode(true);
const name = clone.querySelector("#name"),
cur = clone.querySelector("#cur"),
max = clone.querySelector("#max"),
incr = clone.querySelector("#inc"),
number = clone.querySelector("#number"),
plusbutton = clone.querySelector("#plusbutton")
;
name.innerText = user.name;
cur.innerText = user.score;
max.innerText = user.maxscore;
//const button = document.getElementById("plusbutton");
plusbutton.addEventListener("click", async () => {
const newmaxscore = parseInt(max.innerText) + parseInt(number.value);
console.log(newmaxscore);
console.log(user.uuid);
const r = await fetch(admin_api_path + 'set_max_score', {
method: "POST",
body: JSON.stringify({
uuid: user.uuid,
newmaxscore: newmaxscore,
}),
});
if (r.status !== 200) {
console.log("something went wrong");
return;
}
update_table();
})
tbody.appendChild(clone);
}
}
async function update_table() {
const r = await fetch('../api/get_public_model', {
method: 'POST',
body: JSON.stringify({}),
});
if (r.status !== 200) {
console.log("oh no");
return;
}
const data = await r.json();
render_table(data);
}
update_table();
// setInterval(update_scoreboard, 1000);