signalk-maintenance-tracker 1.0.0

package/public/app/lib/router.js

@@ -0,0 +1,105 @@
+/**
+ * Tiny hand-rolled hash router (§7.1). Everything after '#' is client-side:
+ * '#/tasks/oil-change?page=2' → { path: '/tasks/oil-change', query: {page:'2'} }.
+ */
+import { signal } from '../../vendor/signals.js';
+
+/** @typedef {{ path: string, query: Record<string, string> }} Route */
+
+/**
+ * @param {string} hash
+ * @returns {Route}
+ */
+export function parseHash(hash) {
+  let h = hash || '';
+  if (h.charAt(0) === '#') h = h.slice(1);
+  if (h === '') h = '/';
+  let path = h;
+  let queryString = '';
+  const qIndex = h.indexOf('?');
+  if (qIndex >= 0) {
+    path = h.slice(0, qIndex);
+    queryString = h.slice(qIndex + 1);
+  }
+  if (path.charAt(0) !== '/') path = '/' + path;
+  /** @type {Record<string, string>} */
+  const query = {};
+  new URLSearchParams(queryString).forEach(function (value, key) {
+    query[key] = value;
+  });
+  return { path: path, query: query };
+}
+
+/**
+ * @param {string} path
+ * @param {Record<string, string|number|undefined|null>} [query]
+ * @returns {string} location.hash value, always starting with '#/'
+ */
+export function formatHash(path, query) {
+  const usp = new URLSearchParams();
+  if (query) {
+    for (const key of Object.keys(query)) {
+      const value = query[key];
+      if (value !== undefined && value !== null && value !== '')
+        usp.set(key, String(value));
+    }
+  }
+  const qs = usp.toString();
+  return '#' + path + (qs ? '?' + qs : '');
+}
+
+/**
+ * Match '/tasks/:slug' against '/tasks/oil-change' → {slug:'oil-change'},
+ * or null when the pattern does not match.
+ * @param {string} pattern
+ * @param {string} path
+ * @returns {Record<string, string>|null}
+ */
+export function matchPath(pattern, path) {
+  const patternParts = pattern.split('/').filter(Boolean);
+  const pathParts = path.split('/').filter(Boolean);
+  if (patternParts.length !== pathParts.length) return null;
+  /** @type {Record<string, string>} */
+  const params = {};
+  for (let i = 0; i < patternParts.length; i++) {
+    if (patternParts[i].charAt(0) === ':') {
+      params[patternParts[i].slice(1)] = decodeURIComponent(pathParts[i]);
+    } else if (patternParts[i] !== pathParts[i]) {
+      return null;
+    }
+  }
+  return params;
+}
+
+/** The current route; components read route.value to re-render on navigation. */
+export const route = signal(
+  parseHash(typeof location !== 'undefined' ? location.hash : ''),
+);
+
+/** Install the hashchange listener and sync the signal to the current hash. */
+export function initRouter() {
+  window.addEventListener('hashchange', function () {
+    route.value = parseHash(location.hash);
+  });
+  route.value = parseHash(location.hash);
+}
+
+/**
+ * @param {string} path
+ * @param {Record<string, string|number|undefined|null>} [query]
+ */
+export function navigate(path, query) {
+  location.hash = formatHash(path, query);
+}
+
+/**
+ * Replace the current route's query string without adding a history entry
+ * (used by list params so every keystroke doesn't pollute Back).
+ * @param {Record<string, string|number|undefined|null>} query
+ */
+export function replaceQuery(query) {
+  const target = formatHash(route.value.path, query);
+  const url = location.pathname + location.search + target;
+  history.replaceState(null, '', url);
+  route.value = parseHash(target);
+}

package/public/app/lib/sanitize.js

@@ -0,0 +1,64 @@
+/**
+ * HTML sanitizer for markdown output (§7.8). snarkdown emits HTML; before it
+ * is inserted via dangerouslySetInnerHTML, strip anything that could run
+ * script: blocked elements, on* handler attributes, and javascript: URLs.
+ * Only <MarkdownView/> consumes this.
+ */
+
+/** @type {Record<string, boolean>} */
+const BLOCKED_TAGS = {
+  SCRIPT: true,
+  STYLE: true,
+  IFRAME: true,
+  OBJECT: true,
+  EMBED: true,
+  LINK: true,
+  META: true,
+  BASE: true,
+  FORM: true,
+};
+
+/** @type {Record<string, boolean>} */
+const URL_ATTRS = {
+  href: true,
+  src: true,
+  'xlink:href': true,
+  action: true,
+  formaction: true,
+};
+
+/**
+ * @param {string} dirty raw HTML from snarkdown
+ * @returns {string} sanitized HTML
+ */
+export function sanitizeHtml(dirty) {
+  const doc = new DOMParser().parseFromString(dirty, 'text/html');
+  cleanElement(doc.body);
+  return doc.body.innerHTML;
+}
+
+/** @param {Element} root */
+function cleanElement(root) {
+  // Snapshot children first: removing while iterating a live collection skips nodes.
+  const children = Array.prototype.slice.call(root.children);
+  for (let i = 0; i < children.length; i++) {
+    const el = children[i];
+    if (BLOCKED_TAGS[el.tagName]) {
+      el.parentNode && el.parentNode.removeChild(el);
+      continue;
+    }
+    const attrs = Array.prototype.slice.call(el.attributes);
+    for (let j = 0; j < attrs.length; j++) {
+      const name = attrs[j].name.toLowerCase();
+      if (name.indexOf('on') === 0) {
+        el.removeAttribute(attrs[j].name);
+      } else if (
+        URL_ATTRS[name] &&
+        /^\s*(javascript|vbscript|data):/i.test(attrs[j].value)
+      ) {
+        el.removeAttribute(attrs[j].name);
+      }
+    }
+    cleanElement(el);
+  }
+}

package/public/app/lib/slug.js

@@ -0,0 +1,16 @@
+/**
+ * Client-side mirror of the backend slugifier (src/domain/slug.ts) for the
+ * live slug preview in the task form (§6.4). The server remains authoritative.
+ * @param {string} input
+ * @returns {string}
+ */
+export function slugify(input) {
+  const slug = input
+    .normalize('NFKD')
+    .replace(/[̀-ͯ]/g, '') // strip diacritics after decomposition
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/-{2,}/g, '-')
+    .replace(/^-+|-+$/g, '');
+  return slug || 'task';
+}

package/public/app/lib/theme.js

@@ -0,0 +1,52 @@
+/**
+ * Light/dark theme via data-theme on <html> + CSS custom properties (§7.3).
+ * index.html sets the attribute before first paint; this module owns it after.
+ */
+import { signal } from '../../vendor/signals.js';
+
+const STORAGE_KEY = 'smt-theme';
+
+/** @returns {'light'|'dark'} */
+function initialTheme() {
+  // B&G / Navico MFDs pass ?mode=night or ?mode=day instead of honoring
+  // prefers-color-scheme; the param overrides everything, including the
+  // saved preference. Must match the first-paint script in index.html.
+  const modeMatch = /[?&]mode=([^&]*)/.exec(window.location.search);
+  if (modeMatch) {
+    return decodeURIComponent(modeMatch[1]) === 'night' ? 'dark' : 'light';
+  }
+  let stored;
+  try {
+    stored = localStorage.getItem(STORAGE_KEY);
+  } catch {
+    stored = null; // storage can be blocked; fall through to media query
+  }
+  if (stored === 'light' || stored === 'dark') return stored;
+  // Progressive enhancement: prefers-color-scheme is Chrome 76+. On the
+  // Chromium 69 floor it never matches and we default to light (§7.9).
+  if (
+    typeof window !== 'undefined' &&
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  ) {
+    return 'dark';
+  }
+  return 'light';
+}
+
+/** @type {import('../../vendor/signals.js').Signal<'light'|'dark'>} */
+export const theme = signal(initialTheme());
+
+export function applyTheme() {
+  document.documentElement.setAttribute('data-theme', theme.value);
+}
+
+export function toggleTheme() {
+  theme.value = theme.value === 'dark' ? 'light' : 'dark';
+  try {
+    localStorage.setItem(STORAGE_KEY, theme.value);
+  } catch {
+    // non-fatal: theme just won't persist
+  }
+  applyTheme();
+}

package/public/app/lib/toasts.js

@@ -0,0 +1,33 @@
+/**
+ * Signal-backed toast queue (§7.2); rendered by <Toaster/> in the shell.
+ */
+import { signal } from '../../vendor/signals.js';
+
+/** @typedef {{ id: number, message: string, kind: 'info'|'success'|'error' }} Toast */
+
+let nextId = 1;
+
+/** @type {import('../../vendor/signals.js').Signal<Toast[]>} */
+export const toasts = signal([]);
+
+/**
+ * @param {string} message
+ * @param {'info'|'success'|'error'} [kind]
+ */
+export function toast(message, kind) {
+  const id = nextId++;
+  toasts.value = toasts.value.concat([
+    { id: id, message: message, kind: kind || 'info' },
+  ]);
+  setTimeout(function () {
+    dismissToast(id);
+  }, 5000);
+  return id;
+}
+
+/** @param {number} id */
+export function dismissToast(id) {
+  toasts.value = toasts.value.filter(function (t) {
+    return t.id !== id;
+  });
+}

package/public/app/lib/useListParams.js

@@ -0,0 +1,28 @@
+/**
+ * List state (search, tags, sort, page) lives in the hash query string so
+ * views are shareable and survive refresh (§7.4). Updates use replaceQuery so
+ * typing in a filter doesn't flood browser history.
+ */
+import { route, replaceQuery } from './router.js';
+
+/**
+ * @returns {{
+ *   params: Record<string, string>,
+ *   update: (patch: Record<string, string|number|undefined|null>) => void,
+ * }}
+ */
+export function useListParams() {
+  const params = route.value.query;
+
+  /** @param {Record<string, string|number|undefined|null>} patch */
+  const update = (patch) => {
+    /** @type {Record<string, string|number|undefined|null>} */
+    const next = {};
+    const current = route.value.query;
+    for (const key of Object.keys(current)) next[key] = current[key];
+    for (const key of Object.keys(patch)) next[key] = patch[key];
+    replaceQuery(next);
+  };
+
+  return { params: params, update: update };
+}

package/public/app/main.js

@@ -0,0 +1,20 @@
+/**
+ * App root (§7.2): install the router, sync the theme, establish the auth
+ * session, and mount <App/> into #app.
+ *
+ * Importing the vendored @preact/signals integrates signal reads with Preact
+ * rendering; it happens transitively through every module that uses signals.
+ */
+import { render } from '../vendor/preact.js';
+import { html } from './lib/html.js';
+import { App } from './app.js';
+import { initRouter } from './lib/router.js';
+import { applyTheme } from './lib/theme.js';
+import { refreshLoginStatus } from './auth/auth.js';
+
+initRouter();
+applyTheme();
+refreshLoginStatus();
+
+const root = document.getElementById('app');
+if (root) render(html`<${App} />`, root);

package/public/app/pages/MasterLogPage.js

@@ -0,0 +1,279 @@
+/**
+ * Master log (§7.4): one row per log entry across all tasks. Server-side
+ * search/sort/pagination, truncated-but-expandable notes.
+ */
+import { html } from '../lib/html.js';
+import { useState, useEffect } from '../../vendor/preact-hooks.js';
+import { useLogs } from '../api/hooks.js';
+import { apiFetch, buildQuery } from '../api/client.js';
+import { useListParams } from '../lib/useListParams.js';
+import { formatDate, formatHours, truncate } from '../lib/format.js';
+import { Table } from '../components/Table.js';
+import { Pagination } from '../components/Pagination.js';
+import { MarkdownView } from '../components/MarkdownView.js';
+
+/** @typedef {import('../types.js').LogDTO} LogDTO */
+
+const PAGE_SIZE = 25;
+const NOTE_PREVIEW_CHARS = 120;
+/** Server-side pageSize cap (see MAX_PAGE_SIZE in src/service.ts). */
+const EXPORT_PAGE_SIZE = 200;
+
+/** @param {string|number|null|undefined} value */
+function csvField(value) {
+  const s = value === null || value === undefined ? '' : String(value);
+  return /[",\n\r]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+}
+
+/** @param {LogDTO[]} entries */
+function buildCsv(entries) {
+  const rows = [['Task', 'Date', 'Runtime Hours', 'Logged By', 'Notes']];
+  for (const e of entries) {
+    rows.push([
+      csvField(e.task_name),
+      csvField(e.maintenance_date),
+      csvField(e.runtime_hours),
+      csvField(e.logged_by),
+      csvField(e.notes),
+    ]);
+  }
+  return rows.map((r) => r.join(',')).join('\r\n') + '\r\n';
+}
+
+/** Fetch every log entry, paging past the server's pageSize cap. */
+async function fetchAllLogs() {
+  /** @type {LogDTO[]} */
+  const entries = [];
+  for (let page = 1; ; page += 1) {
+    /** @type {import('../types.js').Page<LogDTO>} */
+    const res = await apiFetch(
+      '/logs' + buildQuery({ page, pageSize: EXPORT_PAGE_SIZE }),
+    );
+    entries.push(...res.data);
+    if (res.data.length === 0 || entries.length >= res.total) break;
+  }
+  return entries;
+}
+
+export function MasterLogPage() {
+  const { params, update } = useListParams();
+
+  const page = parseInt(params.page || '1', 10) || 1;
+  const search = params.search || '';
+  const sort = params.sort || '';
+  const order = params.order || '';
+
+  const [searchText, setSearchText] = useState(search);
+  useEffect(() => {
+    setSearchText(search);
+  }, [search]);
+  useEffect(() => {
+    if (searchText === search) return undefined;
+    const timer = setTimeout(
+      () => update({ search: searchText, page: undefined }),
+      300,
+    );
+    return () => clearTimeout(timer);
+  }, [searchText]);
+
+  const logsRes = useLogs({
+    search: search || undefined,
+    sort: sort || undefined,
+    order: order || undefined,
+    page: page,
+    pageSize: PAGE_SIZE,
+  });
+
+  const [downloading, setDownloading] = useState(false);
+  const [downloadError, setDownloadError] = useState(
+    /** @type {string|null} */ (null),
+  );
+  const downloadCsv = async () => {
+    if (downloading) return;
+    setDownloading(true);
+    setDownloadError(null);
+    try {
+      const entries = await fetchAllLogs();
+      const now = new Date();
+      /** @param {number} n */
+      const pad = (n) => String(n).padStart(2, '0');
+      const stamp =
+        now.getFullYear() +
+        '-' +
+        pad(now.getMonth() + 1) +
+        '-' +
+        pad(now.getDate());
+      const blob = new Blob([buildCsv(entries)], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'signalk-maintenance-log-' + stamp + '.csv';
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setDownloadError(err instanceof Error ? err.message : 'Download failed');
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  const [expanded, setExpanded] = useState(
+    /** @type {Record<string, boolean>} */ ({}),
+  );
+  /** @param {number} id */
+  const toggleExpanded = (id) => {
+    /** @type {Record<string, boolean>} */
+    const next = {};
+    for (const key of Object.keys(expanded)) next[key] = expanded[key];
+    next[id] = !next[id];
+    setExpanded(next);
+  };
+
+  /** @param {string} key */
+  const onSort = (key) => {
+    if (sort === key) update({ order: order === 'asc' ? 'desc' : 'asc' });
+    else
+      update({ sort: key, order: key === 'maintenance_date' ? 'desc' : 'asc' });
+  };
+
+  /** @type {import('../components/Table.js').Column[]} */
+  const columns = [
+    {
+      key: 'task',
+      label: 'Task',
+      sortable: true,
+      render: (/** @type {LogDTO} */ e) =>
+        html`<a href=${'#/tasks/' + encodeURIComponent(e.task_slug)}
+          >${e.task_name}</a
+        >`,
+    },
+    {
+      key: 'maintenance_date',
+      label: 'Date',
+      sortable: true,
+      className: 'num',
+      render: (/** @type {LogDTO} */ e) => formatDate(e.maintenance_date),
+    },
+    {
+      key: 'runtime_hours',
+      label: 'Runtime',
+      sortable: true,
+      className: 'num',
+      render: (/** @type {LogDTO} */ e) => formatHours(e.runtime_hours),
+    },
+    {
+      key: 'logged_by',
+      label: 'By',
+      render: (/** @type {LogDTO} */ e) =>
+        e.logged_by || html`<span class="muted">—</span>`,
+    },
+  ];
+
+  /** Notes render on their own full-width row under the entry. @param {LogDTO} e */
+  const renderNotes = (e) => {
+    if (!e.notes) return null;
+    const isLong = e.notes.length > NOTE_PREVIEW_CHARS;
+    const body =
+      expanded[e.id] || !isLong
+        ? html`
+            <${MarkdownView} markdown=${e.notes} />
+            ${
+              isLong
+                ? html`<button
+                    type="button"
+                    class="btn-link"
+                    onClick=${() => toggleExpanded(e.id)}
+                  >
+                    less
+                  </button>`
+                : null
+            }
+          `
+        : html`
+            ${truncate(e.notes, NOTE_PREVIEW_CHARS)}${' '}
+            <button
+              type="button"
+              class="btn-link"
+              onClick=${() => toggleExpanded(e.id)}
+            >
+              more
+            </button>
+          `;
+    return html`<div class="log-notes">
+      <strong class="log-notes-label">Notes:</strong>
+      <div class="log-notes-body">${body}</div>
+    </div>`;
+  };
+
+  const pageData = logsRes.data;
+
+  return html`
+    <div>
+      <div class="page-header">
+        <h1 class="page-title">Maintenance Log</h1>
+        <button
+          type="button"
+          class="btn btn-primary"
+          disabled=${downloading}
+          onClick=${downloadCsv}
+        >
+          <i
+            class="bi bi-download"
+          />${downloading ? 'Preparing…' : 'Download Log'}
+        </button>
+      </div>
+
+      ${
+        downloadError
+          ? html`<div class="error-box">
+              Failed to download log: ${downloadError}
+            </div>`
+          : null
+      }
+
+      <div class="toolbar">
+        <div class="search-box">
+          <i class="bi bi-search" />
+          <input
+            class="input"
+            placeholder="Search log…"
+            aria-label="Search log"
+            value=${searchText}
+            onInput=${(/** @type {any} */ e) => setSearchText(e.currentTarget.value)}
+          />
+        </div>
+      </div>
+
+      ${
+        logsRes.error && !pageData
+          ? html`<div class="error-box">
+              Failed to load log: ${logsRes.error.message}
+            </div>`
+          : html`
+              <${Table}
+                columns=${columns}
+                rows=${pageData ? pageData.data : []}
+                renderDetail=${renderNotes}
+                sort=${sort}
+                order=${order}
+                onSort=${onSort}
+                loading=${logsRes.loading}
+                emptyMessage=${search ? 'No log entries match your search.' : 'No maintenance logged yet.'}
+              />
+              ${
+                pageData
+                  ? html`<${Pagination}
+                      page=${pageData.page}
+                      pageSize=${pageData.pageSize}
+                      total=${pageData.total}
+                      onPage=${(/** @type {number} */ p) => update({ page: p })}
+                    />`
+                  : null
+              }
+            `
+      }
+    </div>
+  `;
+}