Matthias
96 lines
4.8 KiB
HTML
96 lines
4.8 KiB
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> |