alemi/mumble-stats-api
1
0
Fork 0
mirror of https://git.alemi.dev/mumble-stats-api.git synced 2024-12-22 12:44:53 +01:00
Code Issues Projects Releases Packages Wiki Activity

chore: updated example widget with userlist

Browse source
This commit is contained in:
əlemi 2024-02-19 02:02:39 +01:00
parent 5cb7ca5193
commit 69a14793a1
Signed by: alemi
GPG key ID: A4895B84D311642C
1 changed files with 50 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
web/matrix_widget.html
View file

@ -1,5 +1,14 @@
<html>
<head>
<style>
img.marker {
height: 1em;
vertical-align: middle;
}
span.username:hover {
font-weight: bold;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.alemi.dev/web/alemi.css">
<title>mumble stats</title>
@ -14,15 +23,52 @@
let loading = document.getElementById("loading");
let stats = document.getElementById("stats");
let user_count = 0;
let user_list = [];
function htmlUser(user) {
let output = `<span style="margin-left: 2em">`;
if (user.user_id != null) {
output += `<img class="marker" src="https://cdn.fantabos.co/logo-color.png"> `;
} else {
output += `<img class="marker" src="https://cdn.fantabos.co/logo-gray.png"> `;
}
if (user.comment != null) {
output += `<span class="username" title="${user.comment}">${user.name}</span>`;
} else {
output += user.name;
}
return output + `</span>`;
}
async function pingServer() {
try {
let res = await fetch("https://api.alemi.dev/mumble/ping?host=<<YOUR_SERVER_HERE>>")
let doc = await res.json()
let res = await fetch("https://api.alemi.dev/mumble/ping?host=<<REPLACE_ME>>");
let doc = await res.json();
if (doc.users != user_count) {
let tmp = await fetch("https://api.alemi.dev/mumble/users?host=<<REPLACE_ME>>");
user_list = await tmp.json();
user_count = user_list.length;
}
let user_list_html = "";
for (let user of user_list) {
user_list_html += htmlUser(user) + ' ';
}
stats.innerHTML = `
<tr>
<td><code>users</code> ${doc.users}/${doc.max_users}</td>
<td><code>net</code> ${doc.bandwidth/1000}kbps ~ ${doc.latency}ms</td>
<td><code>version</code> ${doc.version}</td>
</tr>
<tr>
<td colspan="3" class="pt-1">
${user_list_html}
</td>
</tr>`;
} catch (e) {
stats.innerHTML = `<tr><td><b>error reaching api</b>: <code>${e}</code></td></tr>`;
@ -34,3 +80,5 @@ setInterval(pingServer, 1000 * 60);
</script>
</html>