added db and list of servers

This commit is contained in:
Laptop-Luis
2026-02-16 20:57:40 +01:00
parent 6d41099c39
commit b6c752ce79
9 changed files with 1992 additions and 82 deletions

View File

@@ -17,28 +17,17 @@
<link rel="manifest" href="/icon/site.webmanifest" />
</head>
<body>
<div class="container">
<div class="main-container">
<h1>Wake-on-LAN Interface</h1>
<div class="button-group">
<button id="wake" type="button">Wake Server</button>
<button id="ping" type="button">Ping Server</button>
</div>
<div class="status-container">
Status:
<span id="status" class="status-text">Ready</span>
<svg id="spinner" class="spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" >
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4"/>
</svg>
<div class="servers-grid" id="serverlist">
</div>
</div>
<script>
const status = document.getElementById('status');
const spinner = document.getElementById('spinner');
const serverlist = document.getElementById('serverlist')
function showSpinner() {
spinner.classList.add('visible');
@@ -71,52 +60,83 @@
});
}
document.getElementById('wake').addEventListener('click', () => {
showSpinner();
fetch('/wake?mac=9C:7B:EF:A7:F2:F6') // replace with the MAC-Address of your PC
.then(response => response.json())
.then(data => {
status.innerText = 'waiting for boot';
status.className = "status-text";
const getServers = async () => {
try {
let response = await fetch('/api/server/getall')
let result = await response.json()
if(result.status == 'success') {
serverlist.innerHTML = result.data.map((server, index) => `
<div class="server-card">
<h2>Server ${index + 1}: ${server.name}</h2>
<div class="server-info">
<p><strong>MAC:</strong> ${server.mac}</p>
<p><strong>IP:</strong> ${server.ip}</p>
</div>
<div class="button-group">
<button id="wake-${index}" type="button">Wake Server</button>
<button id="ping-${index}" type="button">Ping Server</button>
</div>
<div class="status-container">
Status:
<span id="status-${index}" class="status-text">Ready</span>
<svg id="spinner-${index}" class="spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" >
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4"/>
</svg>
</div>
</div>`).join('')
} else throw 'DB-Error'
} catch (error) {
console.error(error)
}
}
setTimeout(async () => {
status.innerText = 'pinging';
let booted = false;
let trys = 0;
while (!booted && trys < 10) {
trys++;
await fetch('/ping?host=192.168.178.41') // set static IP in your Router to make Ping work, then enter IP-Address
.then(response => response.json())
.then(data => {
if (data.status == 'success' && data.message === true) {
booted = true;
}
})
.catch(error => {
status.innerText = 'failed, unknown error';
status.className = "status-text red";
});
}
// document.getElementById('wake').addEventListener('click', () => {
// showSpinner();
// fetch('/wake?mac=9C:7B:EF:A7:F2:F6') // replace with the MAC-Address of your PC
// .then(response => response.json())
// .then(data => {
// status.innerText = 'waiting for boot';
// status.className = "status-text";
if (booted) {
status.innerText = 'booted';
status.className = "status-text green";
} else {
status.innerText = 'failed, did not respond to ping';
status.className = "status-text red";
}
hideSpinner();
}, 25000);
})
.catch(error => {
status.innerText = 'failed, unknown error';
status.className = "status-text red";
hideSpinner();
});
});
// setTimeout(async () => {
// status.innerText = 'pinging';
// let booted = false;
// let trys = 0;
// while (!booted && trys < 10) {
// trys++;
// await fetch('/ping?host=192.168.178.41') // set static IP in your Router to make Ping work, then enter IP-Address
// .then(response => response.json())
// .then(data => {
// if (data.status == 'success' && data.message === true) {
// booted = true;
// }
// })
// .catch(error => {
// status.innerText = 'failed, unknown error';
// status.className = "status-text red";
// });
// }
document.getElementById('ping').addEventListener('click', ping);
ping();
// if (booted) {
// status.innerText = 'booted';
// status.className = "status-text green";
// } else {
// status.innerText = 'failed, did not respond to ping';
// status.className = "status-text red";
// }
// hideSpinner();
// }, 25000);
// })
// .catch(error => {
// status.innerText = 'failed, unknown error';
// status.className = "status-text red";
// hideSpinner();
// });
// });
// document.getElementById('ping').addEventListener('click', ping);
// ping();
getServers()
</script>
</body>
</html>