feat: füge Unterstützung für das Hinzufügen und Löschen von Servern hinzu, aktualisiere die Konfiguration und verbessere die Benutzeroberfläche
This commit is contained in:
Matthias Hinrichs
+124
-13
@@ -8,7 +8,7 @@
|
||||
<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">
|
||||
<div id="server-table-container" class="bg-white shadow-md rounded-lg overflow-hidden">
|
||||
<table class="min-w-full leading-normal">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -24,35 +24,131 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="no-servers-message" class="hidden bg-white shadow-md rounded-lg p-8 text-center">
|
||||
<p class="text-gray-600">No servers found. Please check your configuration.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<button id="add-server-button" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
|
||||
Add New Server
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="add-server-form-container" class="hidden mt-8 bg-white shadow-md rounded-lg p-8">
|
||||
<h2 class="text-2xl font-bold mb-4">Add New Server</h2>
|
||||
<form id="add-server-form">
|
||||
<div class="mb-4">
|
||||
<label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name</label>
|
||||
<input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="ip" class="block text-gray-700 text-sm font-bold mb-2">IP Address</label>
|
||||
<input type="text" id="ip" name="ip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="mac" class="block text-gray-700 text-sm font-bold mb-2">MAC Address</label>
|
||||
<input type="text" id="mac" name="mac" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="ssh_user" class="block text-gray-700 text-sm font-bold mb-2">SSH User</label>
|
||||
<input type="text" id="ssh_user" name="ssh_user" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="ssh_pass" class="block text-gray-700 text-sm font-bold mb-2">SSH Password</label>
|
||||
<input type="password" id="ssh_pass" name="ssh_pass" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
||||
Save Server
|
||||
</button>
|
||||
<button type="button" id="cancel-add-server" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
fetchServers();
|
||||
|
||||
const addServerButton = document.getElementById("add-server-button");
|
||||
const addServerFormContainer = document.getElementById("add-server-form-container");
|
||||
const cancelAddServerButton = document.getElementById("cancel-add-server");
|
||||
const addServerForm = document.getElementById("add-server-form");
|
||||
|
||||
addServerButton.addEventListener("click", () => {
|
||||
addServerFormContainer.classList.remove("hidden");
|
||||
addServerButton.classList.add("hidden");
|
||||
});
|
||||
|
||||
cancelAddServerButton.addEventListener("click", () => {
|
||||
addServerFormContainer.classList.add("hidden");
|
||||
addServerButton.classList.remove("hidden");
|
||||
addServerForm.reset();
|
||||
});
|
||||
|
||||
addServerForm.addEventListener("submit", function(event) {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(addServerForm);
|
||||
const serverData = Object.fromEntries(formData.entries());
|
||||
|
||||
fetch("/servers", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(serverData),
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
fetchServers();
|
||||
addServerFormContainer.classList.add("hidden");
|
||||
addServerButton.classList.remove("hidden");
|
||||
addServerForm.reset();
|
||||
} else {
|
||||
alert("Failed to add server.");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function fetchServers() {
|
||||
fetch("/servers")
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const tableContainer = document.getElementById("server-table-container");
|
||||
const noServersMessage = document.getElementById("no-servers-message");
|
||||
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">
|
||||
|
||||
if (data && data.length > 0) {
|
||||
tableContainer.classList.remove("hidden");
|
||||
noServersMessage.classList.add("hidden");
|
||||
|
||||
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>
|
||||
<button onclick="deleteServer('${server.name}')" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">Delete</button>
|
||||
</td>
|
||||
`;
|
||||
tableBody.appendChild(row);
|
||||
checkServerStatus(server.name);
|
||||
});
|
||||
`;
|
||||
tableBody.appendChild(row);
|
||||
checkServerStatus(server.name);
|
||||
});
|
||||
} else {
|
||||
tableContainer.classList.add("hidden");
|
||||
noServersMessage.classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -88,6 +184,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
function deleteServer(serverName) {
|
||||
if (confirm(`Are you sure you want to delete ${serverName}? This action cannot be undone.`)) {
|
||||
fetch(`/servers?name=${serverName}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
fetchServers(); // Refresh the server list
|
||||
} else {
|
||||
alert(`Failed to delete ${serverName}.`);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh server status every 30 seconds
|
||||
setInterval(fetchServers, 30000);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user