mirror of
https://git.alemi.dev/mumble-stats-api.git
synced 2024-11-12 19:59:19 +01:00
chore: updated example widget with userlist
This commit is contained in:
parent
5cb7ca5193
commit
69a14793a1
1 changed files with 50 additions and 2 deletions
|
@ -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>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue