signalk-maintenance-tracker 1.0.0

package/public/app/auth/auth.js

@@ -0,0 +1,158 @@
+/**
+ * Authentication against SignalK's own endpoints (§7.7, §8.6). Module-level
+ * signals hold the session state; the plugin API rides on the same-origin
+ * session cookie, so there is no token handling here.
+ */
+import { signal } from '../../vendor/signals.js';
+import { toast } from '../lib/toasts.js';
+import { invalidateAll } from '../api/resource.js';
+
+/** @typedef {{ checked: boolean, isLoggedIn: boolean, username: string|null }} AuthState */
+
+/** @type {import('../../vendor/signals.js').Signal<AuthState>} */
+export const authState = signal({
+  checked: false,
+  isLoggedIn: false,
+  username: null,
+});
+
+export const loginModalOpen = signal(false);
+
+/** @type {ReturnType<typeof setTimeout>|null} */
+let renewTimer = null;
+let unauthorizedNotified = false;
+
+export function openLoginModal() {
+  loginModalOpen.value = true;
+}
+
+export function closeLoginModal() {
+  loginModalOpen.value = false;
+  unauthorizedNotified = false;
+}
+
+/**
+ * Establish/refresh session state from GET /skServer/loginStatus (§8.6).
+ */
+export async function refreshLoginStatus() {
+  try {
+    const res = await fetch('/skServer/loginStatus', {
+      credentials: 'same-origin',
+    });
+    if (!res.ok) throw new Error('loginStatus returned ' + res.status);
+    const body = await res.json();
+    const isLoggedIn = !!body && body.status === 'loggedIn';
+    authState.value = {
+      checked: true,
+      isLoggedIn: isLoggedIn,
+      username:
+        isLoggedIn && typeof body.username === 'string' ? body.username : null,
+    };
+  } catch {
+    // Can't reach the server or no security configured — treat as logged out.
+    authState.value = { checked: true, isLoggedIn: false, username: null };
+  }
+}
+
+/**
+ * POST /signalk/v1/auth/login. Resolves on success; throws with a
+ * user-displayable message on failure (401 → invalid credentials).
+ * @param {string} username
+ * @param {string} password
+ * @param {boolean} [rememberMe]
+ */
+export async function login(username, password, rememberMe) {
+  const res = await fetch('/signalk/v1/auth/login', {
+    method: 'POST',
+    credentials: 'same-origin',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      username: username,
+      password: password,
+      rememberMe: !!rememberMe,
+    }),
+  });
+  if (!res.ok) {
+    throw new Error(
+      res.status === 401
+        ? 'Invalid username or password'
+        : 'Login failed (' + res.status + ')',
+    );
+  }
+  /** @type {{ token?: string, timeToLive?: number }|null} */
+  let body;
+  try {
+    body = await res.json();
+  } catch {
+    body = null;
+  }
+  authState.value = { checked: true, isLoggedIn: true, username: username };
+  unauthorizedNotified = false;
+  scheduleRenewal(
+    body && typeof body.timeToLive === 'number' ? body.timeToLive : null,
+  );
+  // Data fetched while logged out may have 401'd — refetch everything live.
+  invalidateAll();
+}
+
+/** PUT /signalk/v1/auth/logout; local state is cleared regardless of outcome. */
+export async function logout() {
+  try {
+    await fetch('/signalk/v1/auth/logout', {
+      method: 'PUT',
+      credentials: 'same-origin',
+    });
+  } catch {
+    // ignore — we still drop the local session
+  }
+  if (renewTimer) {
+    clearTimeout(renewTimer);
+    renewTimer = null;
+  }
+  authState.value = { checked: true, isLoggedIn: false, username: null };
+}
+
+/**
+ * Re-validate before the token's timeToLive elapses (§7.7).
+ * @param {number|null} timeToLiveSeconds
+ */
+function scheduleRenewal(timeToLiveSeconds) {
+  if (renewTimer) clearTimeout(renewTimer);
+  renewTimer = null;
+  if (!timeToLiveSeconds || timeToLiveSeconds <= 0) return;
+  const delayMs = Math.max(timeToLiveSeconds * 1000 * 0.8, 10000);
+  renewTimer = setTimeout(function () {
+    renewTimer = null;
+    refreshLoginStatus().then(function () {
+      if (authState.value.isLoggedIn) scheduleRenewal(timeToLiveSeconds);
+    });
+  }, delayMs);
+}
+
+/**
+ * Called by the API client on any 401/403 (§7.6): flip to logged-out and
+ * prompt re-login (once, not per failing poll).
+ */
+export function onUnauthorized() {
+  authState.value = { checked: true, isLoggedIn: false, username: null };
+  if (unauthorizedNotified || loginModalOpen.value) return;
+  unauthorizedNotified = true;
+  toast('Please log in to load maintenance data.', 'error');
+  openLoginModal();
+}
+
+/**
+ * Hook façade over the auth signals (§7.7). Reading authState.value inside a
+ * component render subscribes it via @preact/signals.
+ */
+export function useAuth() {
+  const state = authState.value;
+  return {
+    checked: state.checked,
+    isLoggedIn: state.isLoggedIn,
+    username: state.username,
+    login: login,
+    logout: logout,
+    openLoginModal: openLoginModal,
+  };
+}

package/public/app/components/AuthControl.js

@@ -0,0 +1,22 @@
+/**
+ * Footer auth control (§7.7): a plain "Log in" link when anonymous,
+ * "Log out" when authenticated.
+ */
+import { html } from '../lib/html.js';
+import { useAuth } from '../auth/auth.js';
+
+export function AuthControl() {
+  const auth = useAuth();
+  if (!auth.isLoggedIn) {
+    return html`
+      <button type="button" class="btn-link" onClick=${auth.openLoginModal}>
+        Log in
+      </button>
+    `;
+  }
+  return html`
+    <button type="button" class="btn-link" onClick=${() => auth.logout()}>
+      Log out
+    </button>
+  `;
+}

package/public/app/components/ConfirmModal.js

@@ -0,0 +1,55 @@
+import { html } from '../lib/html.js';
+import { useState } from '../../vendor/preact-hooks.js';
+import { Modal } from './Modal.js';
+
+/**
+ * Simple confirmation modal (§7.5, delete flows).
+ * @param {{
+ *   title: string,
+ *   message: any,
+ *   confirmLabel?: string,
+ *   onConfirm: () => Promise<void>|void,
+ *   onClose: () => void,
+ * }} props
+ */
+export function ConfirmModal(props) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  const confirm = async () => {
+    setBusy(true);
+    setError('');
+    try {
+      await props.onConfirm();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Operation failed');
+      setBusy(false);
+    }
+  };
+
+  const footer = html`
+    <button type="button" class="btn" onClick=${props.onClose} disabled=${busy}>
+      Cancel
+    </button>
+    <button
+      type="button"
+      class="btn btn-danger"
+      onClick=${confirm}
+      disabled=${busy}
+    >
+      ${busy ? 'Working…' : props.confirmLabel || 'Delete'}
+    </button>
+  `;
+
+  return html`
+    <${Modal}
+      title=${props.title}
+      narrow
+      onClose=${props.onClose}
+      footer=${footer}
+    >
+      ${error ? html`<div class="form-error">${error}</div>` : null}
+      <p style="margin:0">${props.message}</p>
+    <//>
+  `;
+}

package/public/app/components/LogEntryModal.js

@@ -0,0 +1,150 @@
+/**
+ * Log-entry modal (§7.5): "Mark complete" (creates a log entry for a task)
+ * and editing an existing entry share this form. On create the runtime hours
+ * are prefilled from the task's current_runtime — which comes from the plugin
+ * /tasks API, never from SignalK directly (§8.4).
+ */
+import { html } from '../lib/html.js';
+import { useState } from '../../vendor/preact-hooks.js';
+import { Modal } from './Modal.js';
+import { addLog, updateLog } from '../api/hooks.js';
+import { toDateInput } from '../lib/format.js';
+import { toast } from '../lib/toasts.js';
+
+/** @typedef {import('../types.js').TaskDTO} TaskDTO */
+/** @typedef {import('../types.js').LogDTO} LogDTO */
+
+/**
+ * Exactly one of `task` (mark complete) or `entry` (edit) drives the mode.
+ * @param {{ task?: TaskDTO|null, entry?: LogDTO|null, onClose: () => void }} props
+ */
+export function LogEntryModal(props) {
+  const entry = props.entry || null;
+  const task = props.task || null;
+  const isEdit = !!entry;
+
+  const initialRuntime = isEdit
+    ? entry && entry.runtime_hours !== null
+      ? String(entry.runtime_hours)
+      : ''
+    : task &&
+        task.current_runtime !== null &&
+        task.current_runtime !== undefined
+      ? String(Math.round(task.current_runtime * 10) / 10)
+      : '';
+
+  const [date, setDate] = useState(
+    isEdit && entry ? toDateInput(entry.maintenance_date) : toDateInput(),
+  );
+  const [runtime, setRuntime] = useState(initialRuntime);
+  const [notes, setNotes] = useState(
+    isEdit && entry && entry.notes ? entry.notes : '',
+  );
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  /** @param {Event} e */
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    if (!date) {
+      setError('Maintenance date is required.');
+      return;
+    }
+    /** @type {import('../types.js').LogInput} */
+    const input = {
+      maintenance_date: date,
+      notes: notes.trim() ? notes : null,
+      runtime_hours: null,
+    };
+    if (runtime.trim() !== '') {
+      const hours = Number(runtime);
+      if (!isFinite(hours) || hours < 0) {
+        setError('Runtime hours must be a non-negative number.');
+        return;
+      }
+      input.runtime_hours = hours;
+    }
+    setBusy(true);
+    try {
+      if (isEdit && entry) {
+        await updateLog(entry.id, input);
+        toast('Log entry updated.', 'success');
+      } else if (task) {
+        await addLog(task.slug, input);
+        toast('Marked "' + task.name + '" complete.', 'success');
+      }
+      props.onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Save failed');
+      setBusy(false);
+    }
+  };
+
+  const footer = html`
+    <button type="button" class="btn" onClick=${props.onClose} disabled=${busy}>
+      Cancel
+    </button>
+    <button
+      type="submit"
+      form="log-form"
+      class="btn btn-primary"
+      disabled=${busy}
+    >
+      ${busy ? 'Saving…' : isEdit ? 'Save changes' : 'Mark complete'}
+    </button>
+  `;
+
+  const title = isEdit
+    ? 'Edit log entry'
+    : 'Mark complete' + (task ? ' — ' + task.name : '');
+
+  return html`
+    <${Modal} title=${title} onClose=${props.onClose} footer=${footer}>
+      <form id="log-form" onSubmit=${onSubmit}>
+        ${error ? html`<div class="form-error">${error}</div>` : null}
+
+        <div class="field">
+          <label class="field-label" for="log-date">Maintenance date</label>
+          <input
+            id="log-date"
+            class="input"
+            type="date"
+            value=${date}
+            onInput=${(/** @type {any} */ e) => setDate(e.currentTarget.value)}
+          />
+        </div>
+
+        <div class="field">
+          <label class="field-label" for="log-runtime">Runtime hours</label>
+          <input
+            id="log-runtime"
+            class="input"
+            type="number"
+            min="0"
+            step="any"
+            value=${runtime}
+            onInput=${(/** @type {any} */ e) => setRuntime(e.currentTarget.value)}
+          />
+          ${
+            !isEdit
+              ? html`<div class="field-hint">
+                  Prefilled with the current runtime reading when available.
+                </div>`
+              : null
+          }
+        </div>
+
+        <div class="field">
+          <label class="field-label" for="log-notes">Notes (markdown)</label>
+          <textarea
+            id="log-notes"
+            class="textarea"
+            value=${notes}
+            onInput=${(/** @type {any} */ e) => setNotes(e.currentTarget.value)}
+          />
+        </div>
+      </form>
+    <//>
+  `;
+}

package/public/app/components/LoginModal.js

@@ -0,0 +1,86 @@
+/**
+ * Login modal (§7.7): built on the shared Modal, opened from AuthControl or
+ * automatically on a 401. Always rendered by the shell; gates itself on the
+ * loginModalOpen signal.
+ */
+import { html } from '../lib/html.js';
+import { useState } from '../../vendor/preact-hooks.js';
+import { Modal } from './Modal.js';
+import { login, loginModalOpen, closeLoginModal } from '../auth/auth.js';
+import { toast } from '../lib/toasts.js';
+
+export function LoginModal() {
+  if (!loginModalOpen.value) return null;
+  return html`<${LoginForm} />`;
+}
+
+function LoginForm() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [rememberMe, setRememberMe] = useState(false);
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  /** @param {Event} e */
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setBusy(true);
+    try {
+      await login(username, password, rememberMe);
+      closeLoginModal();
+      toast('Logged in as ' + username, 'success');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return html`
+    <${Modal} title="Log in" narrow onClose=${closeLoginModal}>
+      <form onSubmit=${onSubmit}>
+        ${error ? html`<div class="form-error">${error}</div>` : null}
+        <div class="field">
+          <label class="field-label" for="login-username">Username</label>
+          <input
+            id="login-username"
+            class="input"
+            autocomplete="username"
+            value=${username}
+            onInput=${(/** @type {any} */ e) => setUsername(e.currentTarget.value)}
+          />
+        </div>
+        <div class="field">
+          <label class="field-label" for="login-password">Password</label>
+          <input
+            id="login-password"
+            class="input"
+            type="password"
+            autocomplete="current-password"
+            value=${password}
+            onInput=${(/** @type {any} */ e) => setPassword(e.currentTarget.value)}
+          />
+        </div>
+        <div class="field">
+          <label class="field-label" for="login-remember">
+            <input
+              id="login-remember"
+              type="checkbox"
+              checked=${rememberMe}
+              onInput=${(/** @type {any} */ e) => setRememberMe(e.currentTarget.checked)}
+            />
+            ${' '}Remember me
+          </label>
+        </div>
+        <button
+          type="submit"
+          class="btn btn-primary"
+          disabled=${busy || !username}
+        >
+          ${busy ? 'Logging in…' : 'Log in'}
+        </button>
+      </form>
+    <//>
+  `;
+}

package/public/app/components/MarkdownView.js

@@ -0,0 +1,17 @@
+/**
+ * The single place raw HTML is set (§7.8): markdown → snarkdown → sanitize →
+ * dangerouslySetInnerHTML. Nothing else may set raw HTML.
+ */
+import snarkdown from '../../vendor/snarkdown.js';
+import { html } from '../lib/html.js';
+import { sanitizeHtml } from '../lib/sanitize.js';
+
+/** @param {{ markdown: string|null|undefined }} props */
+export function MarkdownView(props) {
+  if (!props.markdown) return null;
+  const clean = sanitizeHtml(snarkdown(props.markdown));
+  return html`<div
+    class="markdown"
+    dangerouslySetInnerHTML=${{ __html: clean }}
+  />`;
+}

package/public/app/components/Modal.js

@@ -0,0 +1,89 @@
+/**
+ * Shared modal primitive (§7.5): overlay, Escape-to-close, focus trap,
+ * role="dialog". Every modal in the app builds on this.
+ */
+import { html } from '../lib/html.js';
+import { useEffect, useRef } from '../../vendor/preact-hooks.js';
+
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled])';
+
+/**
+ * @param {{ title: string, onClose: () => void, children?: any, footer?: any, narrow?: boolean }} props
+ */
+export function Modal(props) {
+  /** @type {{ current: HTMLElement|null }} */
+  const ref = useRef(null);
+
+  useEffect(() => {
+    /** @param {KeyboardEvent} e */
+    const onKey = (e) => {
+      if (e.key === 'Escape') props.onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    const node = ref.current;
+    if (node) {
+      const first = node.querySelector(FOCUSABLE);
+      if (first && first instanceof HTMLElement) first.focus();
+    }
+    return () => document.removeEventListener('keydown', onKey);
+  }, []);
+
+  /** @param {KeyboardEvent} e */
+  const trapTab = (e) => {
+    if (e.key !== 'Tab') return;
+    const node = ref.current;
+    if (!node) return;
+    const focusables = node.querySelectorAll(FOCUSABLE);
+    if (!focusables.length) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    if (
+      e.shiftKey &&
+      document.activeElement === first &&
+      last instanceof HTMLElement
+    ) {
+      e.preventDefault();
+      last.focus();
+    } else if (
+      !e.shiftKey &&
+      document.activeElement === last &&
+      first instanceof HTMLElement
+    ) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+
+  /** @param {MouseEvent} e */
+  const onOverlayDown = (e) => {
+    if (e.target === e.currentTarget) props.onClose();
+  };
+
+  return html`
+    <div class="modal-overlay" onMouseDown=${onOverlayDown}>
+      <div
+        class=${'modal' + (props.narrow ? ' narrow' : '')}
+        role="dialog"
+        aria-modal="true"
+        aria-label=${props.title}
+        ref=${ref}
+        onKeyDown=${trapTab}
+      >
+        <div class="modal-header">
+          <h2 class="modal-title">${props.title}</h2>
+          <button
+            type="button"
+            class="btn-icon"
+            aria-label="Close"
+            onClick=${props.onClose}
+          >
+            <i class="bi bi-x-lg" />
+          </button>
+        </div>
+        <div class="modal-body">${props.children}</div>
+        ${props.footer ? html`<div class="modal-footer">${props.footer}</div>` : null}
+      </div>
+    </div>
+  `;
+}

package/public/app/components/Pagination.js

@@ -0,0 +1,35 @@
+import { html } from '../lib/html.js';
+
+/**
+ * @param {{ page: number, pageSize: number, total: number, onPage: (page: number) => void }} props
+ */
+export function Pagination(props) {
+  const pages = Math.max(1, Math.ceil(props.total / props.pageSize));
+  if (props.total === 0) return null;
+  const first = (props.page - 1) * props.pageSize + 1;
+  const last = Math.min(props.total, props.page * props.pageSize);
+  return html`
+    <div class="pagination">
+      <span>${first}–${last} of ${props.total}</span>
+      <button
+        type="button"
+        class="btn-icon"
+        aria-label="Previous page"
+        disabled=${props.page <= 1}
+        onClick=${() => props.onPage(props.page - 1)}
+      >
+        <i class="bi bi-chevron-left" />
+      </button>
+      <span>${props.page} / ${pages}</span>
+      <button
+        type="button"
+        class="btn-icon"
+        aria-label="Next page"
+        disabled=${props.page >= pages}
+        onClick=${() => props.onPage(props.page + 1)}
+      >
+        <i class="bi bi-chevron-right" />
+      </button>
+    </div>
+  `;
+}

package/public/app/components/PathPicker.js

@@ -0,0 +1,66 @@
+/**
+ * Runtime-path autocomplete (§8.4): free-text input over the candidate paths
+ * flattened from SignalK's vessels/self snapshot. The snapshot is fetched
+ * once per session, lazily — this component only mounts inside the task
+ * editor, so read-only sessions never pay the cost.
+ */
+import { html } from '../lib/html.js';
+import { useState } from '../../vendor/preact-hooks.js';
+import { useSignalKPaths } from '../api/signalkPaths.js';
+
+/**
+ * @param {{ value: string, onChange: (path: string) => void }} props
+ */
+export function PathPicker(props) {
+  const [open, setOpen] = useState(false);
+  const paths = useSignalKPaths();
+
+  const value = props.value || '';
+  const candidates = paths.data || [];
+  const matches = candidates
+    .filter(
+      (p) => !value || p.toLowerCase().indexOf(value.toLowerCase()) !== -1,
+    )
+    .slice(0, 10);
+
+  return html`
+    <div class="combo">
+      <input
+        class="input"
+        placeholder="e.g. propulsion.port.runTime"
+        value=${value}
+        onInput=${(/** @type {any} */ e) => {
+          props.onChange(e.currentTarget.value);
+          setOpen(true);
+        }}
+        onFocus=${() => setOpen(true)}
+        onBlur=${() => setTimeout(() => setOpen(false), 150)}
+      />
+      ${
+        open && matches.length
+          ? html`<ul class="combo-list">
+              ${matches.map(
+                (p) =>
+                  html`<li
+                    key=${p}
+                    onMouseDown=${() => {
+                      props.onChange(p);
+                      setOpen(false);
+                    }}
+                  >
+                    ${p}
+                  </li>`,
+              )}
+            </ul>`
+          : null
+      }
+      ${
+        paths.error
+          ? html`<div class="field-hint">
+              Could not load paths from SignalK — free text still works.
+            </div>`
+          : null
+      }
+    </div>
+  `;
+}