signalk-chiplog 1.0.0

package/public/entry/js/journal.mjs

@@ -0,0 +1,139 @@
+// What the tablet does with an entry: send it at once when the server answers,
+// otherwise keep it in the outbox with the time it was made. Undo and comments
+// follow the entry wherever it is — still queued, or already logged.
+
+import { createOutbox, isTransient } from './outbox.mjs';
+
+export const SEND_TIMEOUT_MS = 8000;
+
+export function createJournal({ request, storage, clock, newRef, onChange = () => {} }) {
+  // Logged events by clientRef, for undo and comments after delivery.
+  const delivered = new Map();
+  // Entries undone while their replay may already be on its way.
+  const cancelled = new Set();
+
+  const send = async (item) => {
+    try {
+      return await request(item.method, item.path, item.body, { timeoutMs: SEND_TIMEOUT_MS });
+    } catch (error) {
+      // Deleting something already gone is what was wanted.
+      if (item.method === 'DELETE' && error.status === 404) {
+        return null;
+      }
+      throw error;
+    }
+  };
+
+  const outbox = createOutbox({ storage, send, onChange });
+
+  function queue(method, path, body) {
+    outbox.add({ ref: newRef(), method, path, body, createdAt: clock.now() });
+  }
+
+  // Tries now; on a transient failure queues it and reports the error.
+  async function sendOrQueue(method, path, body) {
+    if (outbox.size === 0) {
+      try {
+        await send({ method, path, body });
+        return null;
+      } catch (error) {
+        if (!isTransient(error)) {
+          throw error;
+        }
+        queue(method, path, body);
+        return error;
+      }
+    }
+    queue(method, path, body);
+    return null;
+  }
+
+  async function flush() {
+    const outcome = await outbox.flush();
+    for (const { item, result } of outcome.sent) {
+      if (item.method !== 'POST' || !result) {
+        continue;
+      }
+      delivered.set(item.body.clientRef, result);
+      if (cancelled.delete(item.body.clientRef)) {
+        queue('DELETE', `/events/${result.id}`);
+      }
+    }
+    if (outcome.sent.length > 0 && outbox.size > 0 && !outcome.blocked) {
+      return flush();
+    }
+    return outcome;
+  }
+
+  return {
+    outbox,
+    flush,
+
+    // Resolves to { status: 'sent', event } | { status: 'queued', error } and
+    // rejects with the server's refusal (a 400 or 409).
+    async log(body) {
+      const ref = newRef();
+      const madeAt = new Date(clock.now()).toISOString();
+      const entry = { ...body, clientRef: ref };
+      const enqueue = () =>
+        outbox.add({
+          ref,
+          method: 'POST',
+          path: '/events',
+          body: { ...entry, time: madeAt },
+          createdAt: Date.parse(madeAt)
+        });
+
+      // Behind queued entries it waits its turn, so the log keeps its order.
+      if (outbox.size > 0) {
+        enqueue();
+        return { status: 'queued', ref, error: null };
+      }
+      try {
+        const event = await send({ method: 'POST', path: '/events', body: entry });
+        delivered.set(ref, event);
+        return { status: 'sent', ref, event };
+      } catch (error) {
+        if (!isTransient(error)) {
+          throw error;
+        }
+        enqueue();
+        return { status: 'queued', ref, error };
+      }
+    },
+
+    eventFor(ref) {
+      return delivered.get(ref) ?? null;
+    },
+
+    isQueued(ref) {
+      return outbox.snapshot().pending.some((item) => item.ref === ref);
+    },
+
+    async undo(ref) {
+      if (outbox.remove(ref)) {
+        // Removed from the queue, but a replay may have picked it up already.
+        cancelled.add(ref);
+        return null;
+      }
+      const event = delivered.get(ref);
+      if (!event) {
+        return null;
+      }
+      delivered.delete(ref);
+      return sendOrQueue('DELETE', `/events/${event.id}`);
+    },
+
+    async comment(ref, comment) {
+      if (outbox.update(ref, { comment })) {
+        return null;
+      }
+      const event = delivered.get(ref);
+      if (!event) {
+        return null;
+      }
+      delivered.set(ref, { ...event, comment });
+      return sendOrQueue('PATCH', `/events/${event.id}`, { comment });
+    }
+  };
+}

package/public/entry/js/main.mjs

@@ -0,0 +1,360 @@
+import { html, render, useEffect, useMemo, useState } from '../../vendor/preact-htm.mjs';
+import { fetchAll, get, onResponse, request } from '../../js/api.mjs';
+import { createLocale, LocaleProvider, useLocale, usePolling } from '../../js/context.mjs';
+import { randomId } from '../../js/ids.mjs';
+import { pickLanguage } from '../../js/i18n.mjs';
+import { createServerClock } from './clock.mjs';
+import { createJournal } from './journal.mjs';
+import { AccessGate } from './components/AccessGate.mjs';
+import { CommentDialog, Toast } from './components/Dialogs.mjs';
+import { ManoeuvrePad } from './components/ManoeuvrePad.mjs';
+import { NotePanel } from './components/NotePanel.mjs';
+import { RecentList } from './components/RecentList.mjs';
+import { SketchPanel } from './components/SketchPanel.mjs';
+import { StatusHeader } from './components/StatusHeader.mjs';
+
+const STATE_REFRESH_MS = 15 * 1000;
+const FLUSH_INTERVAL_MS = 10 * 1000;
+const TOAST_MS = 10 * 1000;
+const NIGHT_KEY = 'chiplog.night';
+const TYPES_KEY = 'chiplog.manoeuvreTypes';
+
+// The shortcuts shipped with the plugin, until the server's list has been seen
+// once: an app started with no connection still has its buttons.
+const BUILTIN_TYPES = [
+  'tack',
+  'gybe',
+  'reef_in',
+  'reef_out',
+  'sail_change',
+  'anchor_down',
+  'anchor_up',
+  'moor',
+  'cast_off',
+  'watch_change'
+].map((key, index) => ({ key, label: key, sortOrder: (index + 1) * 10, enabled: true }));
+
+function knownTypes() {
+  try {
+    const stored = JSON.parse(readSetting(TYPES_KEY) ?? 'null');
+    return Array.isArray(stored) && stored.length > 0 ? stored : BUILTIN_TYPES;
+  } catch {
+    return BUILTIN_TYPES;
+  }
+}
+
+function browserStorage() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function readSetting(key) {
+  try {
+    return browserStorage()?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function writeSetting(key, value) {
+  try {
+    browserStorage()?.setItem(key, value);
+  } catch {
+    // A preference for this page only.
+  }
+}
+
+const clock = createServerClock();
+let markOnline = () => {};
+onResponse((response, sentAt, receivedAt) => {
+  clock.observe(response.headers.get('date'), sentAt, receivedAt);
+  markOnline(true);
+});
+
+function App({ journal }) {
+  const { t } = useLocale();
+  const [state, setState] = useState(null);
+  const [entry, setEntry] = useState(null);
+  const [lastEntryId, setLastEntryId] = useState(null);
+  const [types, setTypes] = useState(knownTypes);
+  const [online, setOnline] = useState(true);
+  const [forbidden, setForbidden] = useState(false);
+  const [queue, setQueue] = useState(journal.outbox.snapshot());
+  const [toast, setToast] = useState(null);
+  const [commenting, setCommenting] = useState(null);
+  const [tab, setTab] = useState('note');
+  const [night, setNight] = useState(readSetting(NIGHT_KEY) === 'on');
+  const [version, setVersion] = useState(0);
+  const [busy, setBusy] = useState(false);
+
+  markOnline = setOnline;
+  const refresh = () => setVersion((v) => v + 1);
+
+  const noteFailure = (error) => {
+    if (error?.code === 'network') {
+      setOnline(false);
+    }
+    if (error?.code === 'forbidden') {
+      setForbidden(true);
+    }
+  };
+
+  useEffect(() => {
+    journal.setListener(setQueue);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = night ? 'night' : '';
+    writeSetting(NIGHT_KEY, night ? 'on' : 'off');
+  }, [night]);
+
+  useEffect(() => {
+    if (!toast || toast.kind === 'error') {
+      return undefined;
+    }
+    const timer = setTimeout(() => setToast(null), TOAST_MS);
+    return () => clearTimeout(timer);
+  }, [toast]);
+
+  usePolling(
+    (isCurrent) => {
+      get('/state')
+        .then(async (next) => {
+          const active =
+            next.activeEntryId === null ? null : await get(`/entries/${next.activeEntryId}`);
+          const last = active ? active.id : ((await get('/entries?limit=1')).items[0]?.id ?? null);
+          if (isCurrent()) {
+            setState(next);
+            setEntry(active);
+            setLastEntryId(last);
+          }
+        })
+        .catch(noteFailure);
+    },
+    STATE_REFRESH_MS,
+    [version]
+  );
+
+  usePolling(
+    (isCurrent) => {
+      fetchAll('/manoeuvre-types')
+        .then((items) => {
+          writeSetting(TYPES_KEY, JSON.stringify(items));
+          if (isCurrent()) {
+            setTypes(items);
+          }
+        })
+        .catch(noteFailure);
+    },
+    0,
+    [forbidden, online]
+  );
+
+  // Replays the queue while it holds anything, and as soon as the network is back.
+  useEffect(() => {
+    const flush = async () => {
+      if (journal.outbox.size === 0) {
+        return;
+      }
+      const outcome = await journal.flush();
+      noteFailure(outcome.blocked);
+      if (outcome.sent.length > 0) {
+        refresh();
+      }
+    };
+    const timer = setInterval(flush, FLUSH_INTERVAL_MS);
+    window.addEventListener('online', flush);
+    flush();
+    return () => {
+      clearInterval(timer);
+      window.removeEventListener('online', flush);
+    };
+  }, []);
+
+  const manoeuvreLabels = useMemo(
+    () => Object.fromEntries(types.map((type) => [type.key, type.label])),
+    [types]
+  );
+
+  // Resolves to true once the entry is logged or safely queued.
+  const log = async (body, what) => {
+    setBusy(true);
+    try {
+      const outcome = await journal.log(body);
+      if (outcome.status === 'queued') {
+        noteFailure(outcome.error);
+        setToast({ kind: 'logged', ref: outcome.ref, what, queued: true });
+      } else {
+        setToast({
+          kind: 'logged',
+          ref: outcome.ref,
+          what,
+          time: outcome.event.time,
+          openedEntry: outcome.event.openedEntry
+        });
+        refresh();
+      }
+      return true;
+    } catch (error) {
+      setToast({
+        kind: 'error',
+        message:
+          error.code === 'no_passage'
+            ? t('entry.noPassageError')
+            : t('entry.refused', { message: error.message })
+      });
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const undo = async () => {
+    const { ref } = toast;
+    setToast({ kind: 'undone' });
+    noteFailure(await journal.undo(ref));
+    refresh();
+  };
+
+  const saveComment = async (comment) => {
+    const target = commenting;
+    setCommenting(null);
+    // A note is its text: emptying it would be a deletion, which has its own button.
+    if (comment === null && target.event?.type === 'text_annotation') {
+      return;
+    }
+    try {
+      if (target.ref) {
+        noteFailure(await journal.comment(target.ref, comment));
+      } else {
+        await request('PATCH', `/events/${target.event.id}`, { comment });
+      }
+      refresh();
+    } catch (error) {
+      noteFailure(error);
+      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+    }
+  };
+
+  const deleteEvent = async (event) => {
+    if (!confirm(t('entry.deleteConfirm'))) {
+      return;
+    }
+    try {
+      await request('DELETE', `/events/${event.id}`);
+      refresh();
+    } catch (error) {
+      noteFailure(error);
+      setToast({ kind: 'error', message: t('entry.refused', { message: error.message }) });
+    }
+  };
+
+  const discard = (ref) => {
+    journal.outbox.remove(ref);
+  };
+
+  const commentTitle = commenting?.what ?? t('entry.comment');
+
+  return html`
+    <${StatusHeader}
+      state=${state}
+      entry=${entry}
+      online=${online}
+      queued=${queue.pending.length}
+      night=${night}
+      onToggleNight=${() => setNight((value) => !value)}
+    />
+    <main class="entry-main">
+      ${
+        forbidden &&
+        html`<${AccessGate}
+          onGranted=${() => {
+            setForbidden(false);
+            journal.flush();
+            refresh();
+          }}
+        />`
+      }
+      <div class="entry-columns">
+        <${ManoeuvrePad}
+          types=${types}
+          noPassage=${state !== null && state.activeEntryId === null}
+          busy=${busy}
+          onLog=${log}
+        />
+        <section class="panel writer">
+          <div class="tabs" role="tablist">
+            ${['note', 'sketch'].map(
+              (name) => html`<button
+                type="button"
+                role="tab"
+                key=${name}
+                class="tab"
+                aria-selected=${tab === name ? 'true' : 'false'}
+                onClick=${() => setTab(name)}
+              >
+                ${t(`entry.${name}`)}
+              </button>`
+            )}
+          </div>
+          <div hidden=${tab !== 'note'}><${NotePanel} busy=${busy} onLog=${log} /></div>
+          <div hidden=${tab !== 'sketch'}><${SketchPanel} busy=${busy} onLog=${log} /></div>
+        </section>
+      </div>
+      <${RecentList}
+        entryId=${lastEntryId}
+        version=${version}
+        queue=${queue}
+        manoeuvreLabels=${manoeuvreLabels}
+        onDelete=${deleteEvent}
+        onDiscard=${discard}
+        onComment=${(event) => setCommenting({ event })}
+      />
+    </main>
+    <${Toast}
+      toast=${toast}
+      onClose=${() => setToast(null)}
+      onUndo=${undo}
+      onComment=${() => setCommenting({ ref: toast.ref, what: toast.what })}
+    />
+    ${
+      commenting &&
+      html`<${CommentDialog}
+        title=${commentTitle}
+        initial=${commenting.event?.comment ?? null}
+        onCancel=${() => setCommenting(null)}
+        onSave=${saveComment}
+      />`
+    }
+  `;
+}
+
+// Offline start-up and installation need a service worker, which browsers
+// only allow over HTTPS or on localhost; over plain HTTP the page works as is.
+if ('serviceWorker' in navigator && window.isSecureContext) {
+  navigator.serviceWorker.register('sw.js').catch(() => {});
+}
+
+const locale = createLocale(pickLanguage(navigator.languages, location.search));
+document.documentElement.lang = locale.language;
+document.title = locale.t('entry.title');
+
+let listener = () => {};
+const journal = createJournal({
+  request,
+  storage: browserStorage(),
+  clock,
+  newRef: randomId,
+  onChange: (snapshot) => listener(snapshot)
+});
+journal.setListener = (next) => {
+  listener = next;
+};
+
+render(
+  html`<${LocaleProvider} value=${locale}><${App} journal=${journal} /></${LocaleProvider}>`,
+  document.getElementById('app')
+);

package/public/entry/js/outbox.mjs

@@ -0,0 +1,124 @@
+// Requests the tablet could not deliver, kept in order until the server is
+// reachable again. Every entry carries a clientRef, so a request that reached
+// the server but whose answer was lost is not logged twice when replayed.
+
+const STORAGE_KEY = 'chiplog.outbox';
+
+// Worth trying again later: no connection, the server or plugin down, or an
+// access that can be granted meanwhile. Anything else is a refusal that a
+// retry would only repeat.
+export function isTransient(error) {
+  const status = error?.status ?? 0;
+  return (
+    status === 0 ||
+    status === 401 ||
+    status === 403 ||
+    status === 408 ||
+    status === 429 ||
+    status >= 500
+  );
+}
+
+function memoryStorage() {
+  const values = new Map();
+  return {
+    getItem: (key) => values.get(key) ?? null,
+    setItem: (key, value) => values.set(key, String(value))
+  };
+}
+
+export function createOutbox({ storage, send, onChange = () => {} }) {
+  storage ??= memoryStorage();
+  let state = { pending: [], failed: [] };
+  try {
+    const stored = JSON.parse(storage.getItem(STORAGE_KEY) ?? 'null');
+    if (stored && Array.isArray(stored.pending) && Array.isArray(stored.failed)) {
+      state = stored;
+    }
+  } catch {
+    // Unreadable storage starts empty.
+  }
+  let flushing = null;
+
+  function save() {
+    try {
+      storage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch {
+      // Storage full or unavailable: the queue still lives in memory.
+    }
+    onChange(snapshot());
+  }
+
+  function snapshot() {
+    return { pending: [...state.pending], failed: [...state.failed] };
+  }
+
+  async function run() {
+    const sent = [];
+    while (state.pending.length > 0) {
+      const item = state.pending[0];
+      try {
+        const result = await send(item);
+        state.pending = state.pending.filter((other) => other.ref !== item.ref);
+        sent.push({ item, result });
+        save();
+      } catch (error) {
+        if (isTransient(error)) {
+          return { sent, blocked: error };
+        }
+        state.pending = state.pending.filter((other) => other.ref !== item.ref);
+        state.failed.push({
+          ...item,
+          error: { status: error.status ?? 0, code: error.code ?? null, message: error.message }
+        });
+        save();
+      }
+    }
+    return { sent, blocked: null };
+  }
+
+  return {
+    snapshot,
+
+    get size() {
+      return state.pending.length;
+    },
+
+    // item: { ref, method, path, body, createdAt }
+    add(item) {
+      state.pending.push(item);
+      save();
+    },
+
+    // Changes an entry not sent yet, such as a comment added before the
+    // connection came back.
+    update(ref, change) {
+      const item = state.pending.find((other) => other.ref === ref);
+      if (!item) {
+        return false;
+      }
+      item.body = { ...item.body, ...change };
+      save();
+      return true;
+    },
+
+    remove(ref) {
+      const before = state.pending.length + state.failed.length;
+      state.pending = state.pending.filter((item) => item.ref !== ref);
+      state.failed = state.failed.filter((item) => item.ref !== ref);
+      const removed = state.pending.length + state.failed.length < before;
+      if (removed) {
+        save();
+      }
+      return removed;
+    },
+
+    // One replay at a time; a second call waits for the one under way.
+    flush() {
+      flushing ??= run().finally(() => {
+        flushing = null;
+      });
+      return flushing;
+    }
+  };
+}

package/public/entry/js/strokes.mjs

@@ -0,0 +1,81 @@
+// Records a handwritten note as vector strokes, the format the logbook stores
+// (SPEC §4.4): points in CSS pixels of the canvas, t in milliseconds from the
+// first point of the note, pressure only from a pen.
+
+// Rounded through toFixed: multiplying back by a step leaves 38.800000000000004.
+const round = (value, digits) => Number(value.toFixed(digits));
+
+export function createStrokeRecorder() {
+  let strokes = [];
+  let current = null;
+  let origin = null;
+
+  function point(x, y, time, pressure) {
+    origin ??= time;
+    const recorded = { x: round(x, 1), y: round(y, 1), t: Math.round(time - origin) };
+    if (typeof pressure === 'number' && Number.isFinite(pressure)) {
+      recorded.pressure = round(Math.min(Math.max(pressure, 0), 1), 2);
+    }
+    return recorded;
+  }
+
+  return {
+    begin(x, y, time, pressure) {
+      current = { points: [point(x, y, time, pressure)] };
+      strokes.push(current);
+      return current;
+    },
+
+    extend(x, y, time, pressure) {
+      if (!current) {
+        return null;
+      }
+      const next = point(x, y, time, pressure);
+      const last = current.points.at(-1);
+      if (last.x !== next.x || last.y !== next.y) {
+        current.points.push(next);
+      }
+      return current;
+    },
+
+    end() {
+      current = null;
+    },
+
+    undo() {
+      current = null;
+      strokes.pop();
+      if (strokes.length === 0) {
+        origin = null;
+      }
+    },
+
+    clear() {
+      strokes = [];
+      current = null;
+      origin = null;
+    },
+
+    get strokes() {
+      return strokes;
+    },
+
+    isEmpty() {
+      return strokes.length === 0;
+    },
+
+    payload({ width, height }) {
+      return {
+        strokes: strokes.map((stroke) => ({ points: stroke.points.map((p) => ({ ...p })) })),
+        width: Math.round(width),
+        height: Math.round(height)
+      };
+    }
+  };
+}
+
+// Pen width for a pressure: a firm stroke is up to twice as thick, and input
+// without pressure (finger, mouse) draws at the base width.
+export function strokeWidth(base, pressure) {
+  return typeof pressure === 'number' ? base * (0.5 + pressure * 1.5) : base;
+}