refactor(panel.html): use new base template
This commit is contained in:
@@ -1,204 +1,16 @@
|
|||||||
<!doctype html>
|
{% extends "base/base.html" %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>judas panel</title>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="{{ url_for('static', filename='css/style.css') }}"
|
|
||||||
/>
|
|
||||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
||||||
<script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
|
|
||||||
<script>
|
|
||||||
$(document).ready(function () {
|
|
||||||
const socket = io();
|
|
||||||
|
|
||||||
const showNotify = (message) => {
|
{% block title %}panel{% endblock %}
|
||||||
$("#notify").stop().fadeIn();
|
|
||||||
$("#notify").text(message);
|
|
||||||
setTimeout(() => {
|
|
||||||
$("#notify").fadeOut();
|
|
||||||
}, 3000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadClientDetails = (clientId) => {
|
{% block content %}
|
||||||
fetch(`/client/${clientId}`)
|
<main class="flex grow h-full">
|
||||||
.then((response) => response.text())
|
<aside class="border-r-4 border-r-ctp-mantle">
|
||||||
.then((html) => {
|
<ul id="client-list"></ul>
|
||||||
$("#content").html(html);
|
</aside>
|
||||||
})
|
<div id="content" class="grow"></div>
|
||||||
.catch((error) => {
|
</main>
|
||||||
console.error("Error fetching client details:", error);
|
{% endblock %}
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// load client_details for the client specified in the URL
|
{% block scripts %}
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
<script src="{{ url_for('static', filename='js/panel.js') }}"></script>
|
||||||
const clientId = urlParams.get("client");
|
{% endblock %}
|
||||||
if (clientId) {
|
|
||||||
loadClientDetails(clientId);
|
|
||||||
$(`#client-list a[href="?client=${clientId}"]`).addClass("active");
|
|
||||||
}
|
|
||||||
|
|
||||||
$("#notify").hide();
|
|
||||||
|
|
||||||
socket.on("connect", () => {
|
|
||||||
console.log("Connected to server");
|
|
||||||
$("#no-connection-message").hide();
|
|
||||||
showNotify("Connected to server");
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("disconnect", () => {
|
|
||||||
console.log("Disconnected from server");
|
|
||||||
$("#no-connection-message").show();
|
|
||||||
showNotify("Disconnected from server");
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("update_data", (data) => {
|
|
||||||
const clientList = $("#client-list");
|
|
||||||
const existingItems = {};
|
|
||||||
|
|
||||||
// Index current <li> by clientId
|
|
||||||
clientList.children("li").each(function () {
|
|
||||||
const a = $(this).find("a");
|
|
||||||
if (a.length) {
|
|
||||||
const clientId = a.attr("href").substring(1);
|
|
||||||
existingItems[clientId] = $(this);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Track which clientIds are still present
|
|
||||||
const seen = new Set();
|
|
||||||
|
|
||||||
Object.entries(data).forEach(([clientId, client]) => {
|
|
||||||
seen.add(clientId);
|
|
||||||
|
|
||||||
// Build icon
|
|
||||||
const iconElement = document.createElement("i");
|
|
||||||
switch (client.status) {
|
|
||||||
case "online":
|
|
||||||
iconElement.className = "fi fi-sr-play";
|
|
||||||
iconElement.style.color = "var(--ctp-green)";
|
|
||||||
break;
|
|
||||||
case "offline":
|
|
||||||
iconElement.className = "fi fi-sr-stop";
|
|
||||||
iconElement.style.color = "var(--ctp-red)";
|
|
||||||
break;
|
|
||||||
case "pending":
|
|
||||||
iconElement.className = "fi fi-sr-pending";
|
|
||||||
iconElement.style.color = "var(--ctp-yellow)";
|
|
||||||
break;
|
|
||||||
case "stale":
|
|
||||||
iconElement.className = "fi fi-sr-skull";
|
|
||||||
iconElement.style.color = "var(--ctp-orange)";
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
iconElement.className = "fi fi-rr-question";
|
|
||||||
iconElement.style.color = "var(--ctp-gray)";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Time since last seen
|
|
||||||
const lastSeen = new Date(client.last_seen * 1000);
|
|
||||||
const now = new Date();
|
|
||||||
const timeSinceLastSeen = Math.floor((now - lastSeen) / 1000);
|
|
||||||
const days = Math.floor(timeSinceLastSeen / 86400);
|
|
||||||
const hours = Math.floor((timeSinceLastSeen % 86400) / 3600);
|
|
||||||
const minutes = Math.floor((timeSinceLastSeen % 3600) / 60);
|
|
||||||
const seconds = timeSinceLastSeen % 60;
|
|
||||||
let timeSinceLastSeenText = "";
|
|
||||||
if (days > 0) timeSinceLastSeenText += `${days}d `;
|
|
||||||
if (hours > 0) timeSinceLastSeenText += `${hours}h `;
|
|
||||||
if (minutes > 0) timeSinceLastSeenText += `${minutes}m `;
|
|
||||||
if (seconds > 0) timeSinceLastSeenText += `${seconds}s`;
|
|
||||||
|
|
||||||
timeSinceLastSeenText = timeSinceLastSeenText.trim() || "0s";
|
|
||||||
|
|
||||||
let statusText = `${client.id} (${timeSinceLastSeenText})`;
|
|
||||||
|
|
||||||
// check if <li> exists
|
|
||||||
if (existingItems[clientId]) {
|
|
||||||
// update if needed
|
|
||||||
const li = existingItems[clientId];
|
|
||||||
const a = li.find("a");
|
|
||||||
if (a.text() !== statusText) {
|
|
||||||
a.text(statusText);
|
|
||||||
}
|
|
||||||
|
|
||||||
li.attr(
|
|
||||||
"title",
|
|
||||||
`Status: ${client.status}\nLast Seen: ${lastSeen.toISOString()}`,
|
|
||||||
);
|
|
||||||
|
|
||||||
// update icon
|
|
||||||
const icon = li.find("i")[0];
|
|
||||||
if (icon) {
|
|
||||||
icon.className = iconElement.className;
|
|
||||||
icon.style.color = iconElement.style.color;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// add new <li>
|
|
||||||
const li = $("<li></li>");
|
|
||||||
li.append(iconElement);
|
|
||||||
const a = $("<a></a>")
|
|
||||||
.text(statusText)
|
|
||||||
.attr("href", `?client=${clientId}`);
|
|
||||||
|
|
||||||
li.attr(
|
|
||||||
"title",
|
|
||||||
`Status: ${client.status}\nLast Seen: ${lastSeen.toISOString()}`,
|
|
||||||
);
|
|
||||||
|
|
||||||
li.append(a);
|
|
||||||
clientList.append(li);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Remove <li> for clients no longer present
|
|
||||||
Object.keys(existingItems).forEach((clientId) => {
|
|
||||||
if (!seen.has(clientId)) {
|
|
||||||
existingItems[clientId].remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Re-bind click handlers
|
|
||||||
$("#client-list li > a")
|
|
||||||
.off("click")
|
|
||||||
.on("click", function (e) {
|
|
||||||
let clientId = $(this).attr("href").substring(1);
|
|
||||||
// this is client=clientId
|
|
||||||
|
|
||||||
clientId = clientId.replace("client=", "");
|
|
||||||
|
|
||||||
loadClientDetails(clientId);
|
|
||||||
$("#client-list a").removeClass("active");
|
|
||||||
$(this).addClass("active");
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
let newUrl = `${window.location.pathname}?client=${clientId}`;
|
|
||||||
window.history.pushState({ path: newUrl }, "", newUrl);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="wrapper">
|
|
||||||
<header>
|
|
||||||
<h2><a href="{{ url_for('index.index') }}">judas</a></h2>
|
|
||||||
<p id="no-connection-message">
|
|
||||||
<i class="fi fi-rr-link-slash"></i>
|
|
||||||
<span> No connection to server </span>
|
|
||||||
</p>
|
|
||||||
<a class="button" href="{{ url_for('auth.logout') }}">Logout</a>
|
|
||||||
</header>
|
|
||||||
<div id="notify"></div>
|
|
||||||
<main>
|
|
||||||
<aside>
|
|
||||||
<ul id="client-list"></ul>
|
|
||||||
</aside>
|
|
||||||
<div id="content"></div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user