1e99/2b2t-queue-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

small rework of the web ui

Browse source
This commit is contained in:
1e99 2025-06-29 13:30:52 +02:00
parent 6539d1e6ce
commit 55f3ab538a
6 changed files with 79 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -53,3 +53,8 @@ sqlite3 ./data.sqlite
sqlite> INSERT INTO worker (name, token) VALUES ("name", "secret_token"); sqlite> INSERT INTO worker (name, token) VALUES ("name", "secret_token");
sqlite> .exit sqlite> .exit
``` ```
## Further improvements
- Scrape actual queue waiting times
- Use a bot that rejoins all the time when it completed the queue
- Reports the time that it actually took to join the server to the master

8
static/index.html
View file

@ -11,9 +11,9 @@
<script src="https://cdn.jsdelivr.net/npm/moment"></script> <script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
<!-- My scripts --> <!-- My stuff -->
<script src="/js/api.js"></script> <script src="/main.js"></script>
<script src="/js/main.js"></script> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
@ -26,7 +26,7 @@
<option value="356d">356d</option> <option value="356d">356d</option>
</select> </select>
<canvas id="player-counts"></canvas> <canvas id="chart"></canvas>
</body> </body>
</html> </html>

9
static/js/api.js
View file

@ -1,9 +0,0 @@
async function getPlayerCounts(range) {
const res = await fetch(`/api/player-count?range=${range}`)
if (!res.ok) {
throw new Error(`Failed to get player counts, got status ${res.status}`)
}
const json = await res.json()
return json
}

54
static/js/main.js
View file

@ -1,54 +0,0 @@
async function initChart() {
const datasets = ["Playing", "Normal queue", "Priority queue"]
.map(label => ({ label, data: [] }))
const chart = new Chart(document.querySelector("#player-counts"), {
type: "line",
data: {
datasets: datasets,
},
options: {
scales: {
x: {
type: "time",
time: {
unit: "minute"
},
},
y: {
beginAtZero: true,
},
},
},
})
const range = document.querySelector("select#range")
const updateChart = async () => {
const data = await getPlayerCounts(range.value)
datasets[0].data = data.map(point => ({
x: point["time"] * 60 * 1_000,
y: point["playing"],
}))
datasets[1].data = data.map(point => ({
x: point["time"] * 60 * 1_000,
y: point["normal_queue"],
}))
datasets[2].data = data.map(point => ({
x: point["time"] * 60 * 1_000,
y: point["priority_queue"],
}))
chart.update()
}
range.addEventListener("change", e => updateChart())
updateChart()
}
document.addEventListener("DOMContentLoaded", () => {
initChart()
})

67
static/main.js Normal file
View file

@ -0,0 +1,67 @@
async function getPlayerCounts(range) {
const res = await fetch(`/api/player-count?range=${range}`)
if (!res.ok) {
throw new Error(`Failed to get player counts, got status ${res.status}`)
}
const json = await res.json()
return json
}
function initChart() {
const range = document.querySelector("select#range")
const canvas = document.querySelector("canvas#chart")
const chart = new Chart(canvas, {
type: "line",
data: {
datasets: [],
},
options: {
scales: {
x: {
type: "time",
},
y: {
beginAtZero: true,
time: {
unit: "minute"
},
},
},
},
plugins: [],
})
const updateChart = async () => {
try {
const data = await getPlayerCounts(range.value)
const datasets = new Map([
["Playing", "playing"],
["Normal queue", "normal_queue"],
["Priority queue", "priority_queue"],
])
chart.data.datasets = Array
.from(datasets.entries())
.map(([name, key]) => ({
label: name,
data: data.map(point => ({
x: point["time"] * 60_000,
y: point[key],
}))
}))
chart.update()
} catch (e) {
alert(`Failed to fetch data: ${e}`)
}
}
range.addEventListener("input", () => updateChart())
updateChart()
}
document.addEventListener("DOMContentLoaded", () => {
initChart()
})

3
static/style.css Normal file
View file

@ -0,0 +1,3 @@
* {
font-family: sans-serif;
}