158 lines
5.6 KiB
HTML
158 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Services</title>
|
|
<link rel="stylesheet" href="/assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>My Services</h1>
|
|
<div class="sub">Apps running on the home server</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">
|
|
<!-- Jellyfin -->
|
|
<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://richflix.co.uk" target="_blank">Open Jellyfin</a>
|
|
<span class="notice">Media server</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Audiobooks -->
|
|
<div class="card" id="audiobookshelf-card">
|
|
<div class="row" style="justify-content:space-between; align-items:center;">
|
|
<h2 style="margin:0;">Audiobooks</h2>
|
|
<div class="pill" id="audiobookshelf-pill">
|
|
<span class="status-dot"></span>
|
|
<span id="audiobookshelf-status" class="label">Checking…</span>
|
|
</div>
|
|
</div>
|
|
<div class="row section">
|
|
<a class="btn" href="http://audiobooks.richardjolley.co.uk" target="_blank">Open Audiobooks</a>
|
|
<span class="notice">Audiobook server</span>
|
|
</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>
|
|
<span class="notice">Files & collaboration</span>
|
|
</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>
|
|
<span class="notice">Web file manager</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Same pill logic as control page, trimmed to read-only.
|
|
function setStatusPill(idPrefix, statusText) {
|
|
const pill = document.getElementById(idPrefix + '-pill');
|
|
const label = document.getElementById(idPrefix + '-status');
|
|
if (!label || !pill) return;
|
|
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;
|
|
setStatusPill(elementId.replace(/-status$/, ''), statusText);
|
|
})
|
|
.catch(() => {
|
|
const el = document.getElementById(elementId);
|
|
if (el) el.textContent = 'error';
|
|
setStatusPill(elementId.replace(/-status$/, ''), 'error');
|
|
});
|
|
}
|
|
|
|
// Initial checks (read-only)
|
|
['jellyfin', 'audiobookshelf','apache2','filebrowser'].forEach(svc => {
|
|
const el = document.getElementById(`${svc}-status`);
|
|
if (el) fetchStatus(svc, `${svc}-status`);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|