288 lines
12 KiB
HTML
288 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Server Dashboard</title>
|
|
<link rel="stylesheet" href="/assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>My Home Server Dashboard</h1>
|
|
<div class="sub">Server & network controls (LAN/VPN)</div>
|
|
</header>
|
|
<div id="top-menu"></div>
|
|
<script>
|
|
(async function loadMenu(){
|
|
try {
|
|
const r = await fetch('/assets/page-elements/nav.html');
|
|
const html = await r.text();
|
|
const mount = document.getElementById('top-menu');
|
|
// Insert the HTML
|
|
mount.outerHTML = html;
|
|
|
|
// Now highlight the current page link
|
|
const nav = document.querySelector('.top-menu');
|
|
if (!nav) return;
|
|
|
|
// Normalize both sides (strip trailing index.html and trailing slash)
|
|
const normalize = (u) => {
|
|
const url = new URL(u, location.origin);
|
|
let p = url.pathname.replace(/index\.html$/i,'');
|
|
if (p.length > 1 && p.endsWith('/')) p = p.slice(0,-1);
|
|
return url.origin + p;
|
|
};
|
|
|
|
const here = normalize(location.href);
|
|
|
|
nav.querySelectorAll('a').forEach(a => {
|
|
const target = normalize(a.href);
|
|
|
|
// exact match OR “same origin + same base path” cases
|
|
const isExact = target === here;
|
|
const isRootMatch = (
|
|
target === normalize(location.origin + '/') &&
|
|
(here === normalize(location.origin + '/') || here === normalize(location.href))
|
|
);
|
|
|
|
if (isExact || isRootMatch) {
|
|
a.classList.add('is-active');
|
|
a.setAttribute('aria-current', 'page');
|
|
}
|
|
});
|
|
} catch(e) {
|
|
console.warn('Top menu load failed:', e);
|
|
}
|
|
})();
|
|
</script>
|
|
<div class="container">
|
|
<div class="grid">
|
|
<!-- Home Automation link -->
|
|
<div class="card" id="home-automation">
|
|
<h2>Home Automation</h2>
|
|
<div class="row">
|
|
<a class="btn" href="http://automation.richardjolley.co.uk" target="_blank">Open Home Automation</a>
|
|
<span class="chip">LAN/VPN only</span>
|
|
</div>
|
|
<p class="notice">MQTT device controls.</p>
|
|
</div>
|
|
|
|
<!-- Jellyfin (optional; guarded in JS) -->
|
|
<div class="card" id="jellyfin-card">
|
|
<div class="row" style="justify-content:space-between; align-items:center;">
|
|
<h2 style="margin:0;">Jellyfin</h2>
|
|
<div class="pill" id="jellyfin-pill"><span class="status-dot"></span><span id="jellyfin-status" class="label">Checking…</span></div>
|
|
</div>
|
|
<div class="row section">
|
|
<a class="btn" href="http://jellyfin.richardjolley.co.uk" target="_blank">Open Jellyfin</a>
|
|
<button class="btn ghost small" onclick="restartService('jellyfin')">Restart</button>
|
|
</div>
|
|
<div class="feedback" id="jellyfin-feedback"></div>
|
|
</div>
|
|
|
|
<!-- Pi-hole -->
|
|
<div class="card" id="pihole-card">
|
|
<div class="row" style="justify-content:space-between; align-items:center;">
|
|
<h2 style="margin:0;">Pi-hole</h2>
|
|
<div class="pill" id="pihole-FTL-pill"><span class="status-dot"></span><span id="pihole-FTL-status" class="label">Checking…</span></div>
|
|
</div>
|
|
<div class="row section">
|
|
<a class="btn" href="http://pihole.richardjolley.co.uk/admin" target="_blank">Open Pi-hole</a>
|
|
<button class="btn ghost small" onclick="restartService('pihole-FTL')">Restart</button>
|
|
</div>
|
|
<div class="feedback" id="pihole-FTL-feedback"></div>
|
|
</div>
|
|
|
|
<!-- Nextcloud (Apache) -->
|
|
<div class="card" id="nextcloud-card">
|
|
<div class="row" style="justify-content:space-between; align-items:center;">
|
|
<h2 style="margin:0;">Nextcloud</h2>
|
|
<div class="pill" id="apache2-pill"><span class="status-dot"></span><span id="apache2-status" class="label">Checking…</span></div>
|
|
</div>
|
|
<div class="row section">
|
|
<a class="btn" href="http://cloud.richardjolley.co.uk" target="_blank">Open Nextcloud</a>
|
|
<button class="btn ghost small" onclick="restartService('apache2')">Restart Apache</button>
|
|
</div>
|
|
<div class="feedback" id="apache2-feedback"></div>
|
|
</div>
|
|
|
|
<!-- File Browser -->
|
|
<div class="card" id="filebrowser-card">
|
|
<div class="row" style="justify-content:space-between; align-items:center;">
|
|
<h2 style="margin:0;">File Browser</h2>
|
|
<div class="pill" id="filebrowser-pill"><span class="status-dot"></span><span id="filebrowser-status" class="label">Checking…</span></div>
|
|
</div>
|
|
<div class="row section">
|
|
<a class="btn" href="http://filebrowser.richardjolley.co.uk" target="_blank">Open File Browser</a>
|
|
<button class="btn ghost small" onclick="restartService('filebrowser')">Restart</button>
|
|
</div>
|
|
<div class="feedback" id="filebrowser-feedback"></div>
|
|
</div>
|
|
|
|
<!-- WireGuard Tunnels -->
|
|
<div class="card" id="wireguard-tunnels-card">
|
|
<div class="row" style="justify-content:space-between; align-items:center;">
|
|
<h2 style="margin:0;">WireGuard Tunnels</h2>
|
|
<span class="notice">Bring interfaces up/down</span>
|
|
</div>
|
|
<div id="wg-tunnels" class="section"></div>
|
|
<div class="feedback ok" id="wg-tunnel-feedback"></div>
|
|
</div>
|
|
|
|
<!-- VPN (Surfshark) -->
|
|
<div class="card" id="vpn-card">
|
|
<div class="row" style="justify-content:space-between; align-items:center;">
|
|
<h2 style="margin:0;">VPN (Surfshark)</h2>
|
|
<span class="notice">OpenVPN via CGI</span>
|
|
</div>
|
|
<div class="section">
|
|
<label class="label" for="vpn-location">Location</label>
|
|
<select id="vpn-location" style="padding:8px; border:1px solid #e5e7eb; border-radius:8px; min-width:180px;">
|
|
<option value="uk-lon">London</option>
|
|
<option value="uk-man">Manchester</option>
|
|
<option value="uk-gla">Glasgow</option>
|
|
</select>
|
|
</div>
|
|
<div class="row" style="margin-top:8px; gap:8px;">
|
|
<button class="btn small" onclick="connectVPN()">Connect</button>
|
|
<button class="btn ghost small" onclick="disconnectVPN()">Disconnect</button>
|
|
<button class="btn ghost small" onclick="checkVPNStatus()">Check IP</button>
|
|
</div>
|
|
<div class="feedback ok" id="vpn-feedback"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function setStatusPill(idPrefix, statusText) {
|
|
const pill = document.getElementById(idPrefix + '-pill');
|
|
const label = document.getElementById(idPrefix + '-status');
|
|
if (!label || !pill) return; // guard if card not present
|
|
label.textContent = statusText || 'unknown';
|
|
pill.classList.remove('ok','bad');
|
|
if (/active|running|online|enabled/i.test(statusText)) pill.classList.add('ok');
|
|
else if (/inactive|failed|stopped|error/i.test(statusText)) pill.classList.add('bad');
|
|
}
|
|
|
|
function fetchStatus(serviceName, elementId) {
|
|
fetch(`/cgi-bin/control_service_status.cgi?service=${serviceName}`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const statusText = data.status || 'unknown';
|
|
const el = document.getElementById(elementId);
|
|
if (el) el.textContent = statusText; // keep API-compatible
|
|
setStatusPill(elementId.replace(/-status$/, ''), statusText);
|
|
})
|
|
.catch(() => {
|
|
const el = document.getElementById(elementId);
|
|
if (el) el.textContent = 'error';
|
|
setStatusPill(elementId.replace(/-status$/, ''), 'error');
|
|
});
|
|
}
|
|
|
|
function showFeedback(id, msg, ok=true){
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
el.textContent = msg;
|
|
el.classList.toggle('ok', ok);
|
|
el.classList.toggle('err', !ok);
|
|
el.style.display = 'block';
|
|
setTimeout(() => { el.style.transition = 'opacity 1s'; el.style.opacity = '0';
|
|
setTimeout(()=>{ el.style.display='none'; el.style.opacity='1'; }, 1000);
|
|
}, 5000);
|
|
}
|
|
|
|
function restartService(serviceName) {
|
|
fetch('/cgi-bin/control_service_restart.cgi', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `service=${encodeURIComponent(serviceName)}`
|
|
})
|
|
.then(r => r.text())
|
|
.then(() => {
|
|
showFeedback(`${serviceName}-feedback`, `Restarted ${serviceName} successfully`, true);
|
|
fetchStatus(serviceName, `${serviceName}-status`);
|
|
})
|
|
.catch(() => showFeedback(`${serviceName}-feedback`, `Error restarting ${serviceName}`, false));
|
|
}
|
|
|
|
// WireGuard helpers
|
|
function checkTunnelStatus(tunnel) {
|
|
fetch(`/cgi-bin/control_service_status.cgi?service=wg-quick@${tunnel}`)
|
|
.then(r => r.json())
|
|
.then(data => setStatusPill(`${tunnel}`, data.status || 'unknown'))
|
|
.catch(() => setStatusPill(`${tunnel}`, 'error'));
|
|
}
|
|
|
|
function manageTunnel(tunnel, action) {
|
|
fetch('/cgi-bin/control_wireguard_manage.cgi', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: `tunnel=${encodeURIComponent(tunnel)}&action=${encodeURIComponent(action)}`
|
|
})
|
|
.then(r => r.text())
|
|
.then(text => { showFeedback('wg-tunnel-feedback', `Tunnel ${tunnel} ${action}ed: ${text}`, true); checkTunnelStatus(tunnel); })
|
|
.catch(() => showFeedback('wg-tunnel-feedback', `Failed to ${action} ${tunnel}`, false));
|
|
}
|
|
|
|
function loadWireguardTunnels() {
|
|
fetch('/cgi-bin/control_wireguard_list.cgi')
|
|
.then(r => r.json())
|
|
.then(tunnels => {
|
|
const container = document.getElementById('wg-tunnels');
|
|
container.innerHTML = '';
|
|
tunnels.forEach(({ name, description }) => {
|
|
const row = document.createElement('div');
|
|
row.className = 'row';
|
|
row.style.justifyContent = 'space-between';
|
|
row.style.alignItems = 'center';
|
|
row.style.marginBottom = '10px';
|
|
row.innerHTML = `
|
|
<div class="row" style="gap:8px;">
|
|
<strong>${name}</strong>
|
|
<span class="notice">${description || ''}</span>
|
|
</div>
|
|
<div class="row">
|
|
<div class="pill" id="${name}-pill"><span class="status-dot"></span><span id="${name}-status" class="label">Checking…</span></div>
|
|
<button class="btn ghost small" onclick="manageTunnel('${name}','up')">Up</button>
|
|
<button class="btn ghost small" onclick="manageTunnel('${name}','down')">Down</button>
|
|
</div>`;
|
|
container.appendChild(row);
|
|
checkTunnelStatus(name);
|
|
});
|
|
});
|
|
}
|
|
|
|
// VPN (Surfshark)
|
|
function connectVPN(){
|
|
const location = document.getElementById('vpn-location').value;
|
|
fetch('/cgi-bin/vpn-connect.cgi', {
|
|
method:'POST', headers:{'Content-Type':'application/x-www-form-urlencoded'},
|
|
body:`location=${encodeURIComponent(location)}`
|
|
})
|
|
.then(r=>r.text())
|
|
.then(()=> showFeedback('vpn-feedback', `VPN connected to ${location}`, true))
|
|
.catch(()=> showFeedback('vpn-feedback', 'Failed to connect VPN.', false));
|
|
}
|
|
function disconnectVPN(){
|
|
fetch('/cgi-bin/vpn-disconnect.cgi', { method:'POST' })
|
|
.then(()=> showFeedback('vpn-feedback', 'VPN disconnected.', true))
|
|
.catch(()=> showFeedback('vpn-feedback', 'Failed to disconnect VPN.', false));
|
|
}
|
|
function checkVPNStatus(){
|
|
fetch('/cgi-bin/vpn-status.cgi')
|
|
.then(r=>r.text())
|
|
.then(text=> showFeedback('vpn-feedback', `VPN status: ${text}`, true))
|
|
.catch(()=> showFeedback('vpn-feedback', 'Failed to check VPN status.', false));
|
|
}
|
|
|
|
// Initial status checks (guarded if cards exist)
|
|
['jellyfin','pihole-FTL','apache2','filebrowser'].forEach(svc => {
|
|
const el = document.getElementById(`${svc}-status`);
|
|
if (el) fetchStatus(svc, `${svc}-status`);
|
|
});
|
|
|
|
loadWireguardTunnels();
|
|
</script>
|
|
</body>
|
|
</html>
|