64 lines
1.9 KiB
HTML
64 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>WOL</title>
|
|
<style>
|
|
body {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: #111;
|
|
color: #eee;
|
|
}
|
|
a {
|
|
color: #7295f6;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Targets</h2>
|
|
<table border="1" cellpadding="6">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>MAC</th>
|
|
<th>Status</th>
|
|
<th></th>
|
|
</tr>
|
|
<tbody id="targets"></tbody>
|
|
</body>
|
|
<script>
|
|
async function loadTargets() {
|
|
const res = await fetch("/targets");
|
|
const targets = await res.json();
|
|
const tbody = document.getElementById("targets");
|
|
|
|
for (const [name, t] of Object.entries(targets)) {
|
|
const tr = document.createElement("tr");
|
|
tr.innerHTML = `
|
|
<td>${name}</td>
|
|
<td>${t.mac}</td>
|
|
<td id="status-${name}">checking...</td>
|
|
<td><a href="#" onclick="fetch('/wake/${name}')">Send WOL</a></td>
|
|
`;
|
|
|
|
tbody.appendChild(tr);
|
|
|
|
const checkStatus = async () => {
|
|
fetch("/status/" + name)
|
|
.then(res => res.ok ? res.json() : Promise.reject())
|
|
.then(json => document.getElementById("status-" + name).textContent = json.isUp ? "online" : "offline")
|
|
.catch(() => document.getElementById("status-" + name).textContent = "unknown");
|
|
}
|
|
|
|
checkStatus();
|
|
setInterval(checkStatus, 5000);
|
|
}
|
|
}
|
|
|
|
loadTargets();
|
|
</script>
|
|
</html> |