hnrx/manage-servers
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat: Initial commit of the server management tool

Browse Source
This commit is contained in:
Matthias
2025-09-08 20:36:50 +02:00
commit 75406bd56c
8 changed files with 474 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+97
View File
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<title>Server Management</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">
<div class="container mx-auto p-8">
<h1 class="text-4xl font-bold mb-8">Server Management</h1>
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Name</th>
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">IP</th>
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">MAC</th>
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Status</th>
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody id="server-table-body">
<!-- Server rows will be inserted here -->
</tbody>
</table>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
fetchServers();
});
function fetchServers() {
fetch("/servers")
.then(response => response.json())
.then(data => {
const tableBody = document.getElementById("server-table-body");
tableBody.innerHTML = ""; // Clear existing rows
data.forEach(server => {
const row = document.createElement("tr");
row.innerHTML = `
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">${server.name}</td>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">${server.ip}</td>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">${server.mac}</td>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" id="status-${server.name}">Checking...</td>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<button onclick="wakeServer('${server.name}')" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Wake</button>
<button onclick="shutdownServer('${server.name}')" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Shutdown</button>
<button onclick="rebootServer('${server.name}')" class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded">Reboot</button>
</td>
`;
tableBody.appendChild(row);
checkServerStatus(server.name);
});
});
}
function checkServerStatus(serverName) {
fetch(`/status?name=${serverName}`)
.then(response => response.text())
.then(status => {
const statusCell = document.getElementById(`status-${serverName}`);
statusCell.textContent = status;
if (status === "Online") {
statusCell.classList.add("text-green-500", "font-bold");
statusCell.classList.remove("text-red-500");
} else {
statusCell.classList.add("text-red-500", "font-bold");
statusCell.classList.remove("text-green-500");
}
});
}
function wakeServer(serverName) {
fetch(`/wake?name=${serverName}`).then(() => alert(`${serverName} wake signal sent.`));
}
function shutdownServer(serverName) {
if (confirm(`Are you sure you want to shutdown ${serverName}?`)) {
fetch(`/shutdown?name=${serverName}`).then(() => alert(`${serverName} is shutting down.`));
}
}
function rebootServer(serverName) {
if (confirm(`Are you sure you want to reboot ${serverName}?`)) {
fetch(`/reboot?name=${serverName}`).then(() => alert(`${serverName} is rebooting.`));
}
}
// Refresh server status every 30 seconds
setInterval(fetchServers, 30000);
</script>
</body>
</html>