102 lines
3.8 KiB
Plaintext
102 lines
3.8 KiB
Plaintext
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LiteNet Extension Status</title>
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #121212;
|
|
color: #e0e0e0;
|
|
}
|
|
.table {
|
|
color: #e0e0e0;
|
|
}
|
|
.table thead {
|
|
background-color: #333333;
|
|
}
|
|
.table tbody tr {
|
|
background-color: #1e1e1e;
|
|
}
|
|
.table tbody tr:nth-child(even) {
|
|
background-color: #2a2a2a;
|
|
}
|
|
.table tbody tr:hover {
|
|
background-color: #3a3a3a;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 class="text-center" style="font-size: 3em; font-weight: bold; padding-top: 20px;">LiteNet Extension Status</h1>
|
|
<h2 class="text-center" style="font-size: 1.5em; font-weight: bold; padding-top: 10px;">
|
|
<%= endpoints.length %> Endpoints connected to <%= Object.keys(userInfo).length %> Extensions. With an average latency of
|
|
<%= (endpoints.reduce((sum, ep) => {
|
|
const avgLatency = ep.contacts.reduce((contactSum, contact) => contactSum + contact.ping, 0) / ep.contacts.length;
|
|
return sum + (isNaN(avgLatency) ? 0 : avgLatency);
|
|
}, 0) / endpoints.filter(ep => ep.contacts.length > 0).length).toFixed(2) %>ms
|
|
</h2>
|
|
<h3 class="text-center" style="font-size: 1.2em;"><%= endpoints.filter(ep => ep.state !== 'Unavailable').length %> online / <%= endpoints.length %> total</h3>
|
|
<h3 class="text-center" style="font-size: 1.2em;"><%= endpoints.filter(ep => ep.state === 'In use').length %> In-use</h3>
|
|
<div class="container text-center mt-3">
|
|
<p><span style="color: green;">● Not in use</span> <span style="color: red;">● Unavailable</span> <span style="color: orange;">● In use</span></p>
|
|
</div>
|
|
<div class="container text-center mt-3">
|
|
<p id="timestamp">Last Updated: </p>
|
|
<p id="updatingCountdown" style="font-size: .8em">Updating in 10</p>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const serverTimestamp = <%= Date.now() %>;
|
|
const localTime = new Date(serverTimestamp).toLocaleString();
|
|
const timestampElement = document.getElementById('timestamp');
|
|
timestampElement.textContent = `Last updated: ${localTime}`;
|
|
|
|
const now = Date.now();
|
|
if (now - serverTimestamp > 60000) {
|
|
timestampElement.style.color = 'red';
|
|
}
|
|
});
|
|
|
|
let countdown = 10;
|
|
const countdownElement = document.getElementById('updatingCountdown');
|
|
const countdownInterval = setInterval(() => {
|
|
countdown--;
|
|
countdownElement.textContent = `Updating in ${countdown}`;
|
|
if (countdown === 0) {
|
|
clearInterval(countdownInterval);
|
|
location.reload();
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
<div class="container mt-5">
|
|
<table class="table table-bordered">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Extension Number</th>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
<th>Endpoints</th>
|
|
<th>Avg Latency</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<% endpoints.forEach(function(ep) { %>
|
|
<tr>
|
|
<td style="color: <%= ep.state === 'Not in use' ? 'green' : ep.state === 'Unavailable' ? 'red' : 'orange' %>;">● <%= ep.endpoint %></td>
|
|
<td><%= userInfo[ep.endpoint] %></td>
|
|
<td><%= ep.state %></td>
|
|
<td><%= ep.contacts.length %></td>
|
|
<td><%= isNaN(ep.contacts.reduce((sum, contact) => sum + contact.ping, 0) / ep.contacts.length) ? 'No Data' : `${(ep.contacts.reduce((sum, contact) => sum + contact.ping, 0) / ep.contacts.length).toFixed(2)}ms` %></td>
|
|
</tr>
|
|
<% }); %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@5.3.3/dist/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.3/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html>
|