Initial commit

app/Http/Controllers/Home Server/services/index.html

@@ -0,0 +1,157 @@
+<!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>