143 lines
6.2 KiB
HTML
143 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Wake-on-LAN Interface</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- add this -->
|
|
<!-- Desktop styles: only for screens wider than 768px -->
|
|
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 768px)">
|
|
<!-- Mobile styles: only for screens up to 767px -->
|
|
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)">
|
|
<!-- Icon & Manifest -->
|
|
<link rel="icon" type="image/png" href="/icon/favicon-96x96.png" sizes="96x96" />
|
|
<link rel="icon" type="image/svg+xml" href="/icon/favicon.svg" />
|
|
<link rel="shortcut icon" href="/icon/favicon.ico" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon.png" />
|
|
<meta name="apple-mobile-web-app-title" content="WOL-Server" />
|
|
<link rel="manifest" href="/icon/site.webmanifest" />
|
|
</head>
|
|
<body>
|
|
<div class="main-container">
|
|
<h1>Wake-on-LAN Interface</h1>
|
|
<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');
|
|
}
|
|
|
|
function hideSpinner() {
|
|
spinner.classList.remove('visible');
|
|
}
|
|
|
|
const ping = () => {
|
|
showSpinner();
|
|
status.innerText = 'pinging';
|
|
status.className = "status-text";
|
|
fetch('/ping?host=192.168.178.41') // also here
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if(data.message == true){
|
|
status.innerText = 'server is active';
|
|
status.className = "status-text green";
|
|
} else {
|
|
status.innerText = 'server is dead';
|
|
status.className = "status-text red";
|
|
}
|
|
hideSpinner();
|
|
})
|
|
.catch(error => {
|
|
status.innerText = 'failed, unknown error';
|
|
status.className = "status-text red";
|
|
hideSpinner();
|
|
});
|
|
}
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
// 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";
|
|
|
|
// 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";
|
|
// });
|
|
// }
|
|
|
|
// 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>
|