signalk-maintenance-tracker 1.0.0

package/public/app/components/ProgressBar.js

@@ -0,0 +1,26 @@
+import { html } from '../lib/html.js';
+
+/**
+ * CSS progress bar for runtime_fraction / time_fraction (§7.4).
+ * @param {{ fraction: number|null, status?: string|null }} props
+ */
+export function ProgressBar(props) {
+  if (props.fraction === null || props.fraction === undefined) return null;
+  const pct = Math.round(Math.min(1, Math.max(0, props.fraction)) * 100);
+  const cls =
+    'progress-fill' +
+    (props.status === 'overdue' || props.status === 'due_soon'
+      ? ' ' + props.status
+      : '');
+  return html`
+    <div
+      class="progress"
+      role="progressbar"
+      aria-valuenow=${pct}
+      aria-valuemin="0"
+      aria-valuemax="100"
+    >
+      <div class=${cls} style=${'width:' + pct + '%'} />
+    </div>
+  `;
+}

package/public/app/components/StatusBadge.js

@@ -0,0 +1,9 @@
+import { html } from '../lib/html.js';
+import { statusLabel } from '../lib/format.js';
+
+/** @param {{ status: import('../types.js').Status }} props */
+export function StatusBadge(props) {
+  return html`<span class=${'badge ' + props.status}
+    >${statusLabel(props.status)}</span
+  >`;
+}

package/public/app/components/Table.js

@@ -0,0 +1,99 @@
+/**
+ * Hand-rolled data table (§7.4): column definitions, header sorting,
+ * empty/loading states. Pagination is a sibling component.
+ */
+import { html } from '../lib/html.js';
+
+/**
+ * @typedef {Object} Column
+ * @property {string} key row field, and the `sort` value for sortable columns
+ * @property {string} label
+ * @property {boolean} [sortable]
+ * @property {string} [className]
+ * @property {(row: any) => any} [render]
+ */
+
+/**
+ * @param {{
+ *   columns: Column[],
+ *   rows: any[],
+ *   rowKey?: (row: any) => string|number,
+ *   sort?: string,
+ *   order?: string,
+ *   onSort?: (key: string) => void,
+ *   loading?: boolean,
+ *   emptyMessage?: string,
+ *   renderDetail?: (row: any) => any,
+ * }} props
+ */
+export function Table(props) {
+  const rows = props.rows || [];
+  return html`
+    <div class="table-wrap">
+      <table class="table">
+        <thead>
+          <tr>
+            ${props.columns.map((col) => headerCell(col, props))}
+          </tr>
+        </thead>
+        <tbody>
+          ${rows.map((row) => {
+            const key = props.rowKey ? props.rowKey(row) : row.id;
+            const detail = props.renderDetail ? props.renderDetail(row) : null;
+            return html`
+              <tr key=${key} class=${detail ? 'has-detail' : ''}>
+                ${props.columns.map(
+                  (col) =>
+                    html`<td class=${col.className || ''}>
+                      ${col.render ? col.render(row) : row[col.key]}
+                    </td>`,
+                )}
+              </tr>
+              ${
+                detail
+                  ? html`<tr key=${key + ':detail'} class="detail-row">
+                      <td colspan=${props.columns.length}>${detail}</td>
+                    </tr>`
+                  : null
+              }
+            `;
+          })}
+        </tbody>
+      </table>
+      ${
+        rows.length === 0
+          ? html`<div class=${props.loading ? 'table-loading' : 'table-empty'}>
+              ${props.loading ? 'Loading…' : props.emptyMessage || 'Nothing here yet.'}
+            </div>`
+          : null
+      }
+    </div>
+  `;
+}
+
+/**
+ * @param {Column} col
+ * @param {{ sort?: string, order?: string, onSort?: (key: string) => void }} props
+ */
+function headerCell(col, props) {
+  const sortable = !!col.sortable && !!props.onSort;
+  const active = sortable && props.sort === col.key;
+  const icon = active
+    ? html`<i
+        class=${'bi ' + (props.order === 'desc' ? 'bi-caret-down-fill' : 'bi-caret-up-fill')}
+      />`
+    : null;
+  const onClick =
+    sortable && props.onSort
+      ? () => props.onSort && props.onSort(col.key)
+      : undefined;
+  return html`
+    <th
+      class=${(col.className || '') + (sortable ? ' sortable' : '')}
+      onClick=${onClick}
+      aria-sort=${active ? (props.order === 'desc' ? 'descending' : 'ascending') : undefined}
+    >
+      ${col.label}${icon}
+    </th>
+  `;
+}

package/public/app/components/TagInput.js

@@ -0,0 +1,93 @@
+/**
+ * Creatable multi-select for task tags (§7.5): chips for the selected tags,
+ * a text input that adds on Enter/comma, and suggestions from GET /tags.
+ */
+import { html } from '../lib/html.js';
+import { useState } from '../../vendor/preact-hooks.js';
+
+/**
+ * @param {{ value: string[], onChange: (tags: string[]) => void, suggestions: string[] }} props
+ */
+export function TagInput(props) {
+  const [text, setText] = useState('');
+  const [open, setOpen] = useState(false);
+
+  const selected = props.value || [];
+  const lowerSelected = selected.map((t) => t.toLowerCase());
+  const matches = (props.suggestions || [])
+    .filter((s) => lowerSelected.indexOf(s.toLowerCase()) === -1)
+    .filter((s) => !text || s.toLowerCase().indexOf(text.toLowerCase()) !== -1)
+    .slice(0, 8);
+
+  /** @param {string} tag */
+  const add = (tag) => {
+    const trimmed = tag.trim();
+    if (!trimmed) return;
+    if (lowerSelected.indexOf(trimmed.toLowerCase()) !== -1) {
+      setText('');
+      return;
+    }
+    props.onChange(selected.concat([trimmed]));
+    setText('');
+  };
+
+  /** @param {string} tag */
+  const remove = (tag) => {
+    props.onChange(selected.filter((t) => t !== tag));
+  };
+
+  /** @param {KeyboardEvent & { currentTarget: HTMLInputElement }} e */
+  const onKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      add(text);
+    } else if (e.key === 'Backspace' && !text && selected.length) {
+      remove(selected[selected.length - 1]);
+    }
+  };
+
+  return html`
+    <div>
+      ${
+        selected.length
+          ? html`<div class="chips" style="margin-bottom:6px">
+              ${selected.map(
+                (tag) => html`
+                  <button
+                    type="button"
+                    key=${tag}
+                    class="chip selected"
+                    onClick=${() => remove(tag)}
+                    title="Remove tag"
+                  >
+                    ${tag}<i class="bi bi-x" />
+                  </button>
+                `,
+              )}
+            </div>`
+          : null
+      }
+      <div class="combo">
+        <input
+          class="input"
+          placeholder="Add tag and press Enter"
+          value=${text}
+          onInput=${(/** @type {any} */ e) => {
+            setText(e.currentTarget.value);
+            setOpen(true);
+          }}
+          onKeyDown=${onKeyDown}
+          onFocus=${() => setOpen(true)}
+          onBlur=${() => setTimeout(() => setOpen(false), 150)}
+        />
+        ${
+          open && matches.length
+            ? html`<ul class="combo-list">
+                ${matches.map((s) => html`<li key=${s} onMouseDown=${() => add(s)}>${s}</li>`)}
+              </ul>`
+            : null
+        }
+      </div>
+    </div>
+  `;
+}

package/public/app/components/TaskFormModal.js

@@ -0,0 +1,310 @@
+/**
+ * Task create/edit form (§7.5). On create the slug is a live preview derived
+ * from the name until the user edits it; on edit the slug is an editable
+ * field with a deep-link warning (§6.4). Seed last_maintenance/last_runtime
+ * are offered on create only.
+ */
+import { html } from '../lib/html.js';
+import { useState } from '../../vendor/preact-hooks.js';
+import { Modal } from './Modal.js';
+import { MarkdownView } from './MarkdownView.js';
+import { TagInput } from './TagInput.js';
+import { PathPicker } from './PathPicker.js';
+import { createTask, updateTask, useTags } from '../api/hooks.js';
+import { slugify } from '../lib/slug.js';
+import { toast } from '../lib/toasts.js';
+
+/** @typedef {import('../types.js').TaskDTO} TaskDTO */
+/** @typedef {import('../types.js').TaskInput} TaskInput */
+/** @typedef {import('../types.js').TimeUnit} TimeUnit */
+
+const TIME_UNITS = ['days', 'weeks', 'months', 'years'];
+
+/**
+ * @param {{ task: TaskDTO|null, onClose: () => void, onSaved?: (task: TaskDTO) => void }} props
+ */
+export function TaskFormModal(props) {
+  const task = props.task;
+  const isEdit = !!task;
+
+  const [name, setName] = useState(task ? task.name : '');
+  const [slug, setSlug] = useState(task ? task.slug : '');
+  const [slugTouched, setSlugTouched] = useState(isEdit);
+  const [description, setDescription] = useState(
+    task && task.description ? task.description : '',
+  );
+  const [preview, setPreview] = useState(false);
+  const [tags, setTags] = useState(task ? task.tags.slice() : []);
+  const [runtimeInterval, setRuntimeInterval] = useState(
+    task && task.runtime_interval !== null ? String(task.runtime_interval) : '',
+  );
+  const [runtimePath, setRuntimePath] = useState(
+    task && task.runtime_path ? task.runtime_path : '',
+  );
+  const [timeInterval, setTimeInterval] = useState(
+    task && task.time_interval !== null ? String(task.time_interval) : '',
+  );
+  const [timeUnit, setTimeUnit] = useState(
+    task && task.time_interval_unit ? task.time_interval_unit : 'months',
+  );
+  const [seedMaintenance, setSeedMaintenance] = useState('');
+  const [seedRuntime, setSeedRuntime] = useState('');
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const tagsRes = useTags();
+  const suggestions = (tagsRes.data ? tagsRes.data.data : []).map(
+    (t) => t.name,
+  );
+
+  const effectiveSlug = slugTouched ? slug : slugify(name || '');
+  const slugChanged = isEdit && task && effectiveSlug !== task.slug;
+
+  /** @param {Event} e */
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+
+    if (!name.trim()) {
+      setError('Name is required.');
+      return;
+    }
+    /** @type {TaskInput} */
+    const input = {
+      name: name.trim(),
+      description: description.trim() ? description : null,
+      tags: tags,
+      runtime_path: runtimePath.trim() ? runtimePath.trim() : null,
+      runtime_interval: null,
+      time_interval: null,
+      time_interval_unit: null,
+    };
+    if (runtimeInterval.trim() !== '') {
+      const hours = Number(runtimeInterval);
+      if (!isFinite(hours) || hours <= 0) {
+        setError('Runtime interval must be a positive number of hours.');
+        return;
+      }
+      input.runtime_interval = hours;
+    }
+    if (timeInterval.trim() !== '') {
+      const magnitude = Number(timeInterval);
+      if (
+        !isFinite(magnitude) ||
+        magnitude <= 0 ||
+        Math.floor(magnitude) !== magnitude
+      ) {
+        setError('Time interval must be a positive whole number.');
+        return;
+      }
+      input.time_interval = magnitude;
+      input.time_interval_unit = /** @type {TimeUnit} */ (timeUnit);
+    }
+    if (isEdit) {
+      if (slugChanged) input.slug = effectiveSlug;
+    } else {
+      if (slugTouched && slug.trim()) input.slug = slug.trim();
+      if (seedMaintenance) input.last_maintenance = seedMaintenance;
+      if (seedRuntime.trim() !== '') {
+        const seed = Number(seedRuntime);
+        if (!isFinite(seed) || seed < 0) {
+          setError('Seed runtime must be a non-negative number of hours.');
+          return;
+        }
+        input.last_runtime = seed;
+      }
+    }
+
+    setBusy(true);
+    try {
+      const saved =
+        isEdit && task
+          ? await updateTask(task.slug, input)
+          : await createTask(input);
+      toast(isEdit ? 'Task updated.' : 'Task created.', 'success');
+      if (props.onSaved) props.onSaved(saved);
+      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="task-form"
+      class="btn btn-primary"
+      disabled=${busy}
+    >
+      ${busy ? 'Saving…' : isEdit ? 'Save changes' : 'Create task'}
+    </button>
+  `;
+
+  return html`
+    <${Modal}
+      title=${isEdit ? 'Edit task' : 'New task'}
+      onClose=${props.onClose}
+      footer=${footer}
+    >
+      <form id="task-form" onSubmit=${onSubmit}>
+        ${error ? html`<div class="form-error">${error}</div>` : null}
+
+        <div class="field">
+          <label class="field-label" for="task-name">Name</label>
+          <input
+            id="task-name"
+            class="input"
+            value=${name}
+            onInput=${(/** @type {any} */ e) => setName(e.currentTarget.value)}
+          />
+        </div>
+
+        <div class="field">
+          <label class="field-label" for="task-slug">Slug</label>
+          <input
+            id="task-slug"
+            class="input slug-preview"
+            value=${effectiveSlug}
+            onInput=${(/** @type {any} */ e) => {
+              setSlugTouched(true);
+              setSlug(e.currentTarget.value);
+            }}
+          />
+          ${
+            slugChanged
+              ? html`<div class="field-hint">
+                  <i class="bi bi-exclamation-triangle" /> Changing the slug
+                  breaks existing deep links to this task.
+                </div>`
+              : html`<div class="field-hint">
+                  Used in URLs and SignalK notifications.
+                </div>`
+          }
+        </div>
+
+        <div class="field">
+          <label class="field-label" for="task-description">
+            Description (markdown)${' '}
+            <button
+              type="button"
+              class="btn-link"
+              onClick=${() => setPreview(!preview)}
+            >
+              ${preview ? 'edit' : 'preview'}
+            </button>
+          </label>
+          ${
+            preview
+              ? html`<div class="card">
+                  <${MarkdownView}
+                    markdown=${description || '_Nothing to preview._'}
+                  />
+                </div>`
+              : html`<textarea
+                  id="task-description"
+                  class="textarea"
+                  value=${description}
+                  onInput=${(/** @type {any} */ e) => setDescription(e.currentTarget.value)}
+                />`
+          }
+        </div>
+
+        <div class="field">
+          <label class="field-label">Tags</label>
+          <${TagInput}
+            value=${tags}
+            onChange=${setTags}
+            suggestions=${suggestions}
+          />
+        </div>
+
+        <div class="field-row">
+          <div class="field">
+            <label class="field-label" for="task-runtime-interval"
+              >Runtime interval (hours)</label
+            >
+            <input
+              id="task-runtime-interval"
+              class="input"
+              type="number"
+              min="0"
+              step="any"
+              value=${runtimeInterval}
+              onInput=${(/** @type {any} */ e) => setRuntimeInterval(e.currentTarget.value)}
+            />
+            <div class="field-hint">Empty = no runtime tracking.</div>
+          </div>
+          <div class="field">
+            <label class="field-label" for="task-time-interval"
+              >Time interval</label
+            >
+            <div class="field-row">
+              <input
+                id="task-time-interval"
+                class="input"
+                type="number"
+                min="0"
+                step="1"
+                value=${timeInterval}
+                onInput=${(/** @type {any} */ e) => setTimeInterval(e.currentTarget.value)}
+              />
+              <select
+                class="select"
+                aria-label="Time interval unit"
+                value=${timeUnit}
+                onInput=${(/** @type {any} */ e) => setTimeUnit(e.currentTarget.value)}
+              >
+                ${TIME_UNITS.map((u) => html`<option key=${u} value=${u}>${u}</option>`)}
+              </select>
+            </div>
+            <div class="field-hint">Empty = no calendar tracking.</div>
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="field-label">Runtime path (SignalK)</label>
+          <${PathPicker} value=${runtimePath} onChange=${setRuntimePath} />
+        </div>
+
+        ${
+          !isEdit
+            ? html`
+                <div class="field-row">
+                  <div class="field">
+                    <label class="field-label" for="task-seed-date"
+                      >Last maintenance (optional seed)</label
+                    >
+                    <input
+                      id="task-seed-date"
+                      class="input"
+                      type="date"
+                      value=${seedMaintenance}
+                      onInput=${(/** @type {any} */ e) => setSeedMaintenance(e.currentTarget.value)}
+                    />
+                  </div>
+                  <div class="field">
+                    <label class="field-label" for="task-seed-runtime"
+                      >Runtime at last maintenance (h)</label
+                    >
+                    <input
+                      id="task-seed-runtime"
+                      class="input"
+                      type="number"
+                      min="0"
+                      step="any"
+                      value=${seedRuntime}
+                      onInput=${(/** @type {any} */ e) => setSeedRuntime(e.currentTarget.value)}
+                    />
+                  </div>
+                </div>
+              `
+            : null
+        }
+      </form>
+    <//>
+  `;
+}

package/public/app/components/ThemeToggle.js

@@ -0,0 +1,17 @@
+import { html } from '../lib/html.js';
+import { theme, toggleTheme } from '../lib/theme.js';
+
+export function ThemeToggle() {
+  const current = theme.value;
+  return html`
+    <button
+      type="button"
+      class="btn-icon"
+      aria-label=${current === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+      title=${current === 'dark' ? 'Light theme' : 'Dark theme'}
+      onClick=${toggleTheme}
+    >
+      <i class=${'bi ' + (current === 'dark' ? 'bi-sun' : 'bi-moon-stars')} />
+    </button>
+  `;
+}

package/public/app/components/Toaster.js

@@ -0,0 +1,24 @@
+import { html } from '../lib/html.js';
+import { toasts, dismissToast } from '../lib/toasts.js';
+
+/** Renders the toast queue (§7.2); click a toast to dismiss it. */
+export function Toaster() {
+  const items = toasts.value;
+  if (!items.length) return null;
+  return html`
+    <div class="toaster">
+      ${items.map(
+        (t) => html`
+          <div
+            key=${t.id}
+            class=${'toast ' + t.kind}
+            role="status"
+            onClick=${() => dismissToast(t.id)}
+          >
+            ${t.message}
+          </div>
+        `,
+      )}
+    </div>
+  `;
+}

package/public/app/lib/format.js

@@ -0,0 +1,90 @@
+/**
+ * Display formatting helpers. All date math beyond formatting happens on the
+ * backend (§6.2); day.js here is for parsing/formatting only.
+ */
+import dayjs from '../../vendor/dayjs/index.js';
+
+const MS_PER_HOUR = 3600 * 1000;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+
+/**
+ * Calendar-date display. Uses the stored UTC date part directly — parsing to
+ * local time would shift UTC-midnight dates back a day in western timezones.
+ * @param {string|null|undefined} iso
+ */
+export function formatDate(iso) {
+  return iso ? String(iso).slice(0, 10) : '—';
+}
+
+/**
+ * Runtime hours for display: "1240.5 h". Null-safe.
+ * @param {number|null|undefined} hours
+ */
+export function formatHours(hours) {
+  if (hours === null || hours === undefined) return '—';
+  const rounded = Math.round(hours * 10) / 10;
+  return String(rounded) + ' h';
+}
+
+/**
+ * Remaining runtime column: negative = overdue.
+ * @param {number|null|undefined} hours
+ */
+export function formatRemainingHours(hours) {
+  if (hours === null || hours === undefined) return '—';
+  if (hours < 0) return formatHours(-hours) + ' overdue';
+  return formatHours(hours);
+}
+
+/**
+ * Humanize a millisecond span: "3 days", "5 hours", "< 1 hour".
+ * @param {number} ms non-negative
+ */
+export function humanizeMs(ms) {
+  if (ms >= MS_PER_DAY) {
+    const days = Math.round(ms / MS_PER_DAY);
+    return days + (days === 1 ? ' day' : ' days');
+  }
+  if (ms >= MS_PER_HOUR) {
+    const hours = Math.round(ms / MS_PER_HOUR);
+    return hours + (hours === 1 ? ' hour' : ' hours');
+  }
+  return '< 1 hour';
+}
+
+/**
+ * Remaining time column: negative = overdue.
+ * @param {number|null|undefined} ms
+ */
+export function formatRemainingTime(ms) {
+  if (ms === null || ms === undefined) return '—';
+  if (ms < 0) return humanizeMs(-ms) + ' overdue';
+  return humanizeMs(ms);
+}
+
+/**
+ * Value for <input type="date">: today (local) by default, or the UTC date
+ * part of a stored ISO string. The YYYY-MM-DD value is sent to the API as-is
+ * (valid ISO-8601; the backend normalizes it to UTC midnight).
+ * @param {string} [iso]
+ */
+export function toDateInput(iso) {
+  return iso === undefined
+    ? dayjs().format('YYYY-MM-DD')
+    : String(iso).slice(0, 10);
+}
+
+/**
+ * @param {string|null|undefined} s
+ * @param {number} max
+ */
+export function truncate(s, max) {
+  if (!s) return '';
+  return s.length > max ? s.slice(0, max - 1) + '…' : s;
+}
+
+/** Status → human label. @param {string} status */
+export function statusLabel(status) {
+  if (status === 'due_soon') return 'due soon';
+  return status;
+}

package/public/app/lib/html.js

@@ -0,0 +1,6 @@
+import htm from '../../vendor/htm.js';
+import { h, Fragment } from '../../vendor/preact.js';
+
+/** Tagged template for JSX-free Preact (§3): html`<div>...</div>` */
+export const html = htm.bind(h);
+export { Fragment };