signalk-chiplog 1.0.0

package/public/entry/js/components/AccessGate.mjs

@@ -0,0 +1,70 @@
+import { html, useEffect, useMemo, useState } from '../../../vendor/preact-htm.mjs';
+import { deviceToken } from '../../../js/auth.mjs';
+import { useLocale } from '../../../js/context.mjs';
+import { createAccessRequester } from '../access.mjs';
+
+const POLL_MS = 5000;
+
+function storage() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+export function AccessGate({ onGranted }) {
+  const { t } = useLocale();
+  const access = useMemo(
+    () =>
+      createAccessRequester({
+        fetch: (...args) => window.fetch(...args),
+        storage: storage(),
+        tokenStore: deviceToken,
+        description: t('access.deviceName')
+      }),
+    []
+  );
+  const [status, setStatus] = useState(access.hasPendingRequest() ? 'pending' : 'idle');
+
+  useEffect(() => {
+    if (status !== 'pending') {
+      return undefined;
+    }
+    const timer = setInterval(async () => {
+      const { state } = await access.poll();
+      setStatus(state);
+      if (state === 'approved') {
+        onGranted();
+      }
+    }, POLL_MS);
+    return () => clearInterval(timer);
+  }, [status]);
+
+  const ask = async () => {
+    setStatus('sending');
+    const { state } = await access.request();
+    setStatus(state);
+  };
+
+  const message = ['idle', 'sending'].includes(status) ? t('access.intro') : t(`access.${status}`);
+  return html`
+    <section class="panel access" role="alert" aria-labelledby="access-title">
+      <h2 id="access-title" class="panel-title">${t('access.title')}</h2>
+      <p>${message}</p>
+      <div class="sheet-row">
+        ${
+          status === 'pending'
+            ? html`<button type="button" class="big-button" onClick=${() => {
+                access.cancel();
+                setStatus('idle');
+              }}>${t('access.cancel')}</button>`
+            : html`<button type="button" class="big-button primary" disabled=${status === 'sending'} onClick=${ask}>
+                ${t('access.request')}
+              </button>`
+        }
+        <a class="big-button" href="/admin/#/login">${t('access.signIn')}</a>
+      </div>
+    </section>
+  `;
+}

package/public/entry/js/components/Dialogs.mjs

@@ -0,0 +1,64 @@
+import { html, useEffect, useRef, useState } from '../../../vendor/preact-htm.mjs';
+import { useLocale } from '../../../js/context.mjs';
+
+export function CommentDialog({ title, initial = '', onSave, onCancel }) {
+  const { t } = useLocale();
+  const [text, setText] = useState(initial ?? '');
+  const field = useRef(null);
+  useEffect(() => field.current?.focus(), []);
+
+  const submit = (event) => {
+    event.preventDefault();
+    onSave(text.trim() === '' ? null : text.trim());
+  };
+
+  return html`
+    <div class="sheet-backdrop" onClick=${(event) => event.target === event.currentTarget && onCancel()}>
+      <form class="sheet" role="dialog" aria-modal="true" aria-labelledby="comment-title" onSubmit=${submit}>
+        <h2 id="comment-title">${title}</h2>
+        <textarea
+          ref=${field}
+          rows="4"
+          maxlength="10000"
+          value=${text}
+          aria-label=${t('entry.comment')}
+          onInput=${(event) => setText(event.currentTarget.value)}
+        ></textarea>
+        <div class="sheet-row">
+          <button type="button" class="big-button" onClick=${onCancel}>${t('common.cancel')}</button>
+          <button type="submit" class="big-button primary">${t('common.save')}</button>
+        </div>
+      </form>
+    </div>
+  `;
+}
+
+// What was just logged, with the two things one wants right after: undo a
+// mistaken tap, or add a word about it.
+export function Toast({ toast, onUndo, onComment, onClose }) {
+  const { t, format } = useLocale();
+  if (!toast) {
+    return null;
+  }
+  if (toast.kind === 'error') {
+    return html`
+      <div class="toast toast-error" role="alert">
+        <span class="toast-text">${toast.message}</span>
+        <button type="button" class="tool-button" onClick=${onClose}>×</button>
+      </div>
+    `;
+  }
+  if (toast.kind === 'undone') {
+    return html`<div class="toast" role="status"><span class="toast-text">${t('entry.undone')}</span></div>`;
+  }
+  const detail = toast.queued
+    ? t('entry.loggedQueued')
+    : `${t('entry.logged', { time: format.time(toast.time) })}${toast.openedEntry ? ` · ${t('entry.openedPassage')}` : ''}`;
+  return html`
+    <div class=${toast.queued ? 'toast toast-queued' : 'toast'} role="status">
+      <span class="toast-text"><strong>${toast.what}</strong><br />${detail}</span>
+      <button type="button" class="big-button" onClick=${onComment}>${t('entry.addComment')}</button>
+      <button type="button" class="big-button" onClick=${onUndo}>${t('entry.undo')}</button>
+    </div>
+  `;
+}

package/public/entry/js/components/ManoeuvrePad.mjs

@@ -0,0 +1,106 @@
+import { html, useState } from '../../../vendor/preact-htm.mjs';
+import { useLocale } from '../../../js/context.mjs';
+
+const DEPARTURES = new Set(['cast_off', 'anchor_up']);
+export const SAILS = [
+  'main',
+  'genoa',
+  'jib',
+  'staysail',
+  'spinnaker',
+  'gennaker',
+  'code0',
+  'storm_jib'
+];
+
+export function manoeuvreLabel(type, t) {
+  const key = `manoeuvre.${type.key}`;
+  return t.has(key) ? t(key) : type.label;
+}
+
+function SailSheet({ onPick, onClose }) {
+  const { t } = useLocale();
+  const [other, setOther] = useState('');
+  const submitOther = (event) => {
+    event.preventDefault();
+    if (other.trim()) {
+      onPick(other.trim());
+    }
+  };
+  return html`
+    <div class="sheet-backdrop" onClick=${(event) => event.target === event.currentTarget && onClose()}>
+      <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="sail-title">
+        <h2 id="sail-title">${t('entry.chooseSail')}</h2>
+        <div class="sail-grid">
+          ${SAILS.map(
+            (sail) =>
+              html`<button type="button" class="big-button" key=${sail} onClick=${() => onPick(sail)}>
+                ${t(`sail.${sail}`)}
+              </button>`
+          )}
+        </div>
+        <form class="sheet-row" onSubmit=${submitOther}>
+          <input
+            value=${other}
+            maxlength="60"
+            placeholder=${t('entry.otherSail')}
+            aria-label=${t('entry.otherSail')}
+            onInput=${(event) => setOther(event.currentTarget.value)}
+          />
+          <button type="submit" class="big-button primary" disabled=${!other.trim()}>${t('entry.send')}</button>
+        </form>
+        <button type="button" class="link-button" onClick=${onClose}>${t('common.cancel')}</button>
+      </div>
+    </div>
+  `;
+}
+
+export function ManoeuvrePad({ types, noPassage, busy, onLog }) {
+  const { t } = useLocale();
+  const [choosingSail, setChoosingSail] = useState(null);
+  const enabled = types.filter((type) => type.enabled);
+
+  const press = (type) => {
+    if (type.key === 'sail_change') {
+      setChoosingSail(type);
+      return;
+    }
+    onLog({ type: 'manoeuvre', subtype: type.key }, manoeuvreLabel(type, t));
+  };
+
+  return html`
+    <section class="panel pad" aria-labelledby="pad-title">
+      <h2 id="pad-title" class="panel-title">${t('entry.manoeuvres')}</h2>
+      ${noPassage && html`<p class="hint">${t('entry.departHint')}</p>`}
+      <div class="pad-grid">
+        ${enabled.map((type) => {
+          const highlighted = noPassage && DEPARTURES.has(type.key);
+          return html`<button
+            type="button"
+            key=${type.key}
+            class=${highlighted ? 'big-button primary' : 'big-button'}
+            disabled=${busy}
+            onClick=${() => press(type)}
+          >
+            ${manoeuvreLabel(type, t)}
+          </button>`;
+        })}
+      </div>
+      ${
+        choosingSail &&
+        html`<${SailSheet}
+          onClose=${() => setChoosingSail(null)}
+          onPick=${(sail) => {
+            const type = choosingSail;
+            setChoosingSail(null);
+            const sailName = t.has(`sail.${sail}`) ? t(`sail.${sail}`) : sail;
+            onLog(
+              { type: 'manoeuvre', subtype: type.key, payload: { sail } },
+              `${manoeuvreLabel(type, t)} (${sailName})`
+            );
+          }}
+        />`
+      }
+    </section>
+  `;
+}

package/public/entry/js/components/NotePanel.mjs

@@ -0,0 +1,34 @@
+import { html, useState } from '../../../vendor/preact-htm.mjs';
+import { useLocale } from '../../../js/context.mjs';
+
+export function NotePanel({ busy, onLog }) {
+  const { t } = useLocale();
+  const [text, setText] = useState('');
+
+  const submit = async (event) => {
+    event.preventDefault();
+    const comment = text.trim();
+    if (!comment) {
+      return;
+    }
+    if (await onLog({ type: 'text_annotation', comment }, t('entry.note'))) {
+      setText('');
+    }
+  };
+
+  return html`
+    <form class="note-form" onSubmit=${submit}>
+      <textarea
+        value=${text}
+        rows="5"
+        maxlength="10000"
+        placeholder=${t('entry.notePlaceholder')}
+        aria-label=${t('entry.note')}
+        onInput=${(event) => setText(event.currentTarget.value)}
+      ></textarea>
+      <button type="submit" class="big-button primary" disabled=${busy || !text.trim()}>
+        ${t('entry.send')}
+      </button>
+    </form>
+  `;
+}

package/public/entry/js/components/RecentList.mjs

@@ -0,0 +1,113 @@
+import { html, useState } from '../../../vendor/preact-htm.mjs';
+import { fetchAll } from '../../../js/api.mjs';
+import { useLocale, usePolling } from '../../../js/context.mjs';
+import { EventRemark } from '../../../js/components/Timeline.mjs';
+
+const REFRESH_MS = 30 * 1000;
+const SHOWN = 15;
+
+const CLIENT_TYPES = new Set(['manoeuvre', 'text_annotation', 'handwritten_annotation']);
+
+function queuedLabel(body, t, manoeuvreLabels) {
+  if (body.type === 'manoeuvre') {
+    const key = `manoeuvre.${body.subtype}`;
+    return t.has(key) ? t(key) : (manoeuvreLabels[body.subtype] ?? body.subtype);
+  }
+  return body.type === 'handwritten_annotation' ? t('event.handwritten') : body.comment;
+}
+
+function failureReason(error, t) {
+  return error.code === 'no_passage' ? t('entry.noPassageError') : error.message;
+}
+
+export function RecentList({
+  entryId,
+  version,
+  queue,
+  manoeuvreLabels,
+  onDelete,
+  onDiscard,
+  onComment
+}) {
+  const { t, format } = useLocale();
+  const [events, setEvents] = useState([]);
+
+  usePolling(
+    (isCurrent) => {
+      if (entryId === null) {
+        setEvents([]);
+        return;
+      }
+      fetchAll(`/entries/${entryId}/events`)
+        .then((items) => isCurrent() && setEvents(items.slice(-SHOWN).reverse()))
+        .catch(() => {
+          // Kept as last seen; the header already tells when the server is away.
+        });
+    },
+    REFRESH_MS,
+    [entryId, version]
+  );
+
+  const posts = (items) => items.filter((item) => item.method === 'POST');
+  const failed = posts(queue.failed);
+  const pending = posts(queue.pending).reverse();
+  const nothing = failed.length + pending.length + events.length === 0;
+
+  return html`
+    <section class="panel recent" aria-labelledby="recent-title">
+      <h2 id="recent-title" class="panel-title">${t('entry.recent')}</h2>
+      ${nothing && html`<p class="hint">${t('entry.recentEmpty')}</p>`}
+      <ul class="recent-list">
+        ${failed.map(
+          (item) => html`<li key=${item.ref} class="recent-item recent-failed">
+            <span class="recent-time">${format.time(item.body.time)}</span>
+            <span class="recent-what">
+              <strong>${queuedLabel(item.body, t, manoeuvreLabels)}</strong>
+              <br />${t('entry.failed', { reason: failureReason(item.error, t) })}
+            </span>
+            <span class="recent-actions">
+              <button type="button" class="tool-button" onClick=${() => onDiscard(item.ref)}>
+                ${t('entry.discard')}
+              </button>
+            </span>
+          </li>`
+        )}
+        ${pending.map(
+          (item) => html`<li key=${item.ref} class="recent-item recent-pending">
+            <span class="recent-time">${format.time(item.body.time)}</span>
+            <span class="recent-what">
+              <strong>${queuedLabel(item.body, t, manoeuvreLabels)}</strong>
+              ${item.body.comment && item.body.type !== 'text_annotation' ? ` — ${item.body.comment}` : ''}
+              <br /><span class="muted">${t('entry.pending')}</span>
+            </span>
+            <span class="recent-actions">
+              <button type="button" class="tool-button" onClick=${() => onDiscard(item.ref)}>
+                ${t('entry.discard')}
+              </button>
+            </span>
+          </li>`
+        )}
+        ${events.map(
+          (event) => html`<li key=${event.id} class=${`recent-item event-${event.type}`}>
+            <span class="recent-time">${format.time(event.time)}</span>
+            <span class="recent-what">
+              <${EventRemark} event=${event} manoeuvreLabels=${manoeuvreLabels} />
+            </span>
+            <span class="recent-actions">
+              <button type="button" class="tool-button" onClick=${() => onComment(event)}>
+                ${event.type === 'text_annotation' ? t('common.edit') : t('entry.comment')}
+              </button>
+              ${
+                event.source === 'manual' &&
+                CLIENT_TYPES.has(event.type) &&
+                html`<button type="button" class="tool-button danger" onClick=${() => onDelete(event)}>
+                  ${t('entry.delete')}
+                </button>`
+              }
+            </span>
+          </li>`
+        )}
+      </ul>
+    </section>
+  `;
+}

package/public/entry/js/components/SketchPanel.mjs

@@ -0,0 +1,181 @@
+import { html, useEffect, useRef, useState } from '../../../vendor/preact-htm.mjs';
+import { useLocale } from '../../../js/context.mjs';
+import { createStrokeRecorder, strokeWidth } from '../strokes.mjs';
+
+const BASE_WIDTH = 2.5;
+
+function drawStroke(context, stroke) {
+  const { points } = stroke;
+  if (points.length === 1) {
+    const [point] = points;
+    context.beginPath();
+    context.arc(point.x, point.y, strokeWidth(BASE_WIDTH, point.pressure) / 2, 0, Math.PI * 2);
+    context.fill();
+    return;
+  }
+  for (let i = 1; i < points.length; i += 1) {
+    const from = points[i - 1];
+    const to = points[i];
+    context.lineWidth = strokeWidth(BASE_WIDTH, to.pressure);
+    context.beginPath();
+    context.moveTo(from.x, from.y);
+    context.lineTo(to.x, to.y);
+    context.stroke();
+  }
+}
+
+export function SketchPanel({ busy, onLog }) {
+  const { t } = useLocale();
+  const canvas = useRef(null);
+  const recorder = useRef(createStrokeRecorder());
+  const activePointer = useRef(null);
+  // Once a pen has touched the canvas, fingers are the palm resting on it.
+  const penSeen = useRef(false);
+  const [strokeCount, setStrokeCount] = useState(0);
+  const [comment, setComment] = useState('');
+
+  function context() {
+    const element = canvas.current;
+    const drawing = element.getContext('2d');
+    drawing.lineCap = 'round';
+    drawing.lineJoin = 'round';
+    const colour = getComputedStyle(element).color;
+    drawing.strokeStyle = colour;
+    drawing.fillStyle = colour;
+    return drawing;
+  }
+
+  function redraw() {
+    const element = canvas.current;
+    if (!element) {
+      return;
+    }
+    const ratio = window.devicePixelRatio || 1;
+    const { width, height } = element.getBoundingClientRect();
+    element.width = Math.round(width * ratio);
+    element.height = Math.round(height * ratio);
+    const drawing = context();
+    drawing.setTransform(ratio, 0, 0, ratio, 0, 0);
+    drawing.clearRect(0, 0, width, height);
+    recorder.current.strokes.forEach((stroke) => drawStroke(drawing, stroke));
+  }
+
+  useEffect(() => {
+    redraw();
+    const observer = new ResizeObserver(redraw);
+    observer.observe(canvas.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const locate = (event) => {
+    const box = canvas.current.getBoundingClientRect();
+    return [event.clientX - box.left, event.clientY - box.top];
+  };
+  const pressureOf = (event) => (event.pointerType === 'pen' ? event.pressure : undefined);
+
+  const onPointerDown = (event) => {
+    if (event.pointerType === 'pen') {
+      penSeen.current = true;
+    } else if (event.pointerType === 'touch' && penSeen.current) {
+      return;
+    }
+    if (activePointer.current !== null || busy) {
+      return;
+    }
+    event.preventDefault();
+    canvas.current.setPointerCapture(event.pointerId);
+    activePointer.current = event.pointerId;
+    const [x, y] = locate(event);
+    const stroke = recorder.current.begin(x, y, event.timeStamp, pressureOf(event));
+    const drawing = context();
+    drawing.setTransform(window.devicePixelRatio || 1, 0, 0, window.devicePixelRatio || 1, 0, 0);
+    drawStroke(drawing, stroke);
+  };
+
+  const onPointerMove = (event) => {
+    if (event.pointerId !== activePointer.current) {
+      return;
+    }
+    const samples = event.getCoalescedEvents?.() ?? [];
+    const drawing = context();
+    drawing.setTransform(window.devicePixelRatio || 1, 0, 0, window.devicePixelRatio || 1, 0, 0);
+    for (const sample of samples.length > 0 ? samples : [event]) {
+      const [x, y] = locate(sample);
+      const stroke = recorder.current.extend(x, y, sample.timeStamp, pressureOf(sample));
+      const { points } = stroke;
+      if (points.length > 1) {
+        drawStroke(drawing, { points: points.slice(-2) });
+      }
+    }
+  };
+
+  const onPointerUp = (event) => {
+    if (event.pointerId !== activePointer.current) {
+      return;
+    }
+    activePointer.current = null;
+    recorder.current.end();
+    setStrokeCount(recorder.current.strokes.length);
+  };
+
+  const undo = () => {
+    recorder.current.undo();
+    setStrokeCount(recorder.current.strokes.length);
+    redraw();
+  };
+
+  const clear = () => {
+    recorder.current.clear();
+    setStrokeCount(0);
+    setComment('');
+    redraw();
+  };
+
+  const send = async () => {
+    const box = canvas.current.getBoundingClientRect();
+    const body = { type: 'handwritten_annotation', payload: recorder.current.payload(box) };
+    if (comment.trim()) {
+      body.comment = comment.trim();
+    }
+    if (await onLog(body, t('event.handwritten'))) {
+      clear();
+    }
+  };
+
+  return html`
+    <div class="sketch">
+      <div class="sketch-surface">
+        <canvas
+          ref=${canvas}
+          class="sketch-canvas"
+          role="img"
+          aria-label=${t('entry.sketchArea')}
+          onPointerDown=${onPointerDown}
+          onPointerMove=${onPointerMove}
+          onPointerUp=${onPointerUp}
+          onPointerCancel=${onPointerUp}
+        ></canvas>
+        ${strokeCount === 0 && html`<span class="sketch-hint" aria-hidden="true">${t('entry.sketchHint')}</span>`}
+      </div>
+      <input
+        class="sketch-comment"
+        value=${comment}
+        maxlength="10000"
+        placeholder=${t('entry.comment')}
+        aria-label=${t('entry.comment')}
+        onInput=${(event) => setComment(event.currentTarget.value)}
+      />
+      <div class="sketch-actions">
+        <button type="button" class="tool-button" disabled=${strokeCount === 0} onClick=${undo}>
+          ${t('entry.sketchUndo')}
+        </button>
+        <button type="button" class="tool-button" disabled=${strokeCount === 0} onClick=${clear}>
+          ${t('entry.sketchClear')}
+        </button>
+        <button type="button" class="big-button primary" disabled=${busy || strokeCount === 0} onClick=${send}>
+          ${t('entry.send')}
+        </button>
+      </div>
+    </div>
+  `;
+}

package/public/entry/js/components/StatusHeader.mjs

@@ -0,0 +1,69 @@
+import { html } from '../../../vendor/preact-htm.mjs';
+import { useLocale } from '../../../js/context.mjs';
+import { elapsedSeconds } from '../../../js/components/common.mjs';
+import { fallbackMessage } from '../../../js/status.mjs';
+
+function motionLabel(state, t) {
+  if (!state) {
+    return t('common.loading');
+  }
+  if (state.motion === 'underway') {
+    if (state.propulsion === 'engine') {
+      return t('status.underwayEngine');
+    }
+    return state.propulsion === 'sail' ? t('status.underwaySail') : t('status.underway');
+  }
+  return state.motion === 'stopped' ? t('status.stopped') : t('status.unknown');
+}
+
+// A passage opened by casting off stays stopped from its start until the
+// vessel moves.
+function passageLine(entry, t, format) {
+  if (!entry) {
+    return t('entry.noPassage');
+  }
+  if (entry.stoppedSince) {
+    const waiting = entry.openedByEventId !== null && entry.stoppedSince === entry.startTime;
+    return waiting
+      ? t('entry.waitingToLeave', { time: format.time(entry.stoppedSince) })
+      : t('passage.stoppedSince', { time: format.time(entry.stoppedSince) });
+  }
+  return t('entry.passageFrom', {
+    place: entry.startPlaceName ?? t('place.unknown'),
+    duration: format.duration(elapsedSeconds(entry))
+  });
+}
+
+export function StatusHeader({ state, entry, online, queued, night, onToggleNight }) {
+  const { t, format } = useLocale();
+  const connection = online ? t('entry.online') : t('entry.offline');
+  return html`
+    <header class="entry-header">
+      <div class="entry-status">
+        <strong class=${`entry-motion motion-${state?.motion ?? 'unknown'}`}>
+          ${motionLabel(state, t)}
+        </strong>
+        <span class="entry-passage">${state ? passageLine(entry, t, format) : ''}</span>
+        ${
+          state?.detection === 'fallback' &&
+          html`<span class="entry-fallback" title=${fallbackMessage(state.stateIssue, t, format)}>⚠</span>`
+        }
+      </div>
+      <div class="entry-tools">
+        <span class=${online ? 'connection connection-online' : 'connection connection-offline'}>
+          <span class="connection-dot" aria-hidden="true"></span>
+          ${queued > 0 ? `${connection} · ${t('entry.queued', { count: queued })}` : connection}
+        </span>
+        <button
+          type="button"
+          class="tool-button"
+          aria-pressed=${night ? 'true' : 'false'}
+          onClick=${onToggleNight}
+        >
+          ${t('entry.night')}
+        </button>
+        <a class="tool-button" href="../">${t('entry.logbook')}</a>
+      </div>
+    </header>
+  `;
+}