signalk-chiplog 1.0.0

package/public/entry/manifest.webmanifest

@@ -0,0 +1,26 @@
+{
+  "name": "Chiplog",
+  "short_name": "Chiplog",
+  "description": "Logbook entry at the helm: manoeuvres, notes and handwriting",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#0d151d",
+  "theme_color": "#0b4f8a",
+  "icons": [
+    { "src": "../icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any" },
+    {
+      "src": "icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

package/public/entry/sw.js

@@ -0,0 +1,75 @@
+// Keeps the entry app loadable with no connection to the server. Only the app's
+// own files are handled — network first, so an updated plugin is picked up as
+// soon as the server answers — and never the API: entries made offline wait in
+// the page's outbox instead.
+
+const CACHE = 'chiplog-entry';
+
+const SHELL = [
+  './',
+  'manifest.webmanifest',
+  'entry.css',
+  'icons/icon-192.png',
+  'icons/icon-512.png',
+  'icons/apple-touch-icon.png',
+  'js/main.mjs',
+  'js/access.mjs',
+  'js/clock.mjs',
+  'js/journal.mjs',
+  'js/outbox.mjs',
+  'js/strokes.mjs',
+  'js/components/AccessGate.mjs',
+  'js/components/Dialogs.mjs',
+  'js/components/ManoeuvrePad.mjs',
+  'js/components/NotePanel.mjs',
+  'js/components/RecentList.mjs',
+  'js/components/SketchPanel.mjs',
+  'js/components/StatusHeader.mjs',
+  '../icon.svg',
+  '../js/api.mjs',
+  '../js/auth.mjs',
+  '../js/context.mjs',
+  '../js/days.mjs',
+  '../js/format.mjs',
+  '../js/i18n.mjs',
+  '../js/ids.mjs',
+  '../js/status.mjs',
+  '../js/components/common.mjs',
+  '../js/components/Timeline.mjs',
+  '../vendor/preact-htm.mjs'
+];
+
+const shellUrls = () => new Set(SHELL.map((file) => new URL(file, self.registration.scope).href));
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches
+      .open(CACHE)
+      .then((cache) => cache.addAll(SHELL))
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+  url.search = '';
+  if (request.method !== 'GET' || !shellUrls().has(url.href)) {
+    return;
+  }
+  event.respondWith(
+    fetch(request)
+      .then((response) => {
+        if (response.ok) {
+          const copy = response.clone();
+          caches.open(CACHE).then((cache) => cache.put(url.href, copy));
+        }
+        return response;
+      })
+      .catch(() => caches.match(url.href).then((cached) => cached ?? Response.error()))
+  );
+});

package/public/icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#0b4f8a"/>
+  <path d="M18 14h24a4 4 0 0 1 4 4v30a4 4 0 0 1-4 4H18z" fill="#f8f4e8"/>
+  <path d="M18 14v38" stroke="#c9a227" stroke-width="4"/>
+  <path d="M26 24h14M26 31h14M26 38h9" stroke="#0b4f8a" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M40 46c2-5 6-8 10-8-1 4-4 8-10 8z" fill="#e8590c"/>
+</svg>

package/public/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Chiplog</title>
+    <link rel="icon" href="icon.svg" type="image/svg+xml" />
+    <link rel="stylesheet" href="vendor/leaflet/leaflet.css" />
+    <link rel="stylesheet" href="app.css" />
+    <script src="vendor/leaflet/leaflet.js"></script>
+    <script type="module" src="js/main.mjs"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <noscript>Chiplog needs JavaScript. / Chiplog nécessite JavaScript.</noscript>
+  </body>
+</html>

package/public/js/api.mjs

@@ -0,0 +1,85 @@
+import { deviceToken } from './auth.mjs';
+
+const BASE = '/plugins/signalk-chiplog/api';
+
+export class RequestError extends Error {
+  constructor(status, code, message) {
+    super(message);
+    this.status = status;
+    this.code = code;
+  }
+}
+
+export function apiUrl(path) {
+  return `${BASE}${path}`;
+}
+
+const responseListeners = new Set();
+
+// Called with every response from the server and when it was sent and received,
+// which the tablet uses to learn the server's clock.
+export function onResponse(listener) {
+  responseListeners.add(listener);
+  return () => responseListeners.delete(listener);
+}
+
+export async function request(method, path, body, { timeoutMs } = {}) {
+  const headers = body === undefined ? {} : { 'content-type': 'application/json' };
+  const token = deviceToken.get();
+  if (token) {
+    headers.authorization = `Bearer ${token}`;
+  }
+  // A flaky boat Wi-Fi can leave a request hanging far longer than the crew
+  // should wait; AbortController rather than AbortSignal.timeout, for older tablets.
+  const controller = timeoutMs ? new AbortController() : null;
+  const timer = controller ? setTimeout(() => controller.abort(), timeoutMs) : null;
+  const sentAt = Date.now();
+  let response;
+  try {
+    response = await fetch(apiUrl(path), {
+      method,
+      credentials: 'same-origin',
+      headers,
+      body: body === undefined ? undefined : JSON.stringify(body),
+      signal: controller?.signal
+    });
+  } catch (err) {
+    throw new RequestError(0, 'network', err.message);
+  } finally {
+    clearTimeout(timer);
+  }
+  const receivedAt = Date.now();
+  responseListeners.forEach((listener) => listener(response, sentAt, receivedAt));
+
+  if (response.status === 204) {
+    return null;
+  }
+  const data = await response.json().catch(() => null);
+  if (!response.ok) {
+    // A device token the server no longer accepts has been revoked or expired.
+    if (response.status === 401 && token) {
+      deviceToken.clear();
+    }
+    // Signal K answers access refusals itself, without the plugin's envelope.
+    const code =
+      response.status === 401 || response.status === 403
+        ? 'forbidden'
+        : (data?.error?.code ?? 'http_error');
+    throw new RequestError(response.status, code, data?.error?.message ?? response.statusText);
+  }
+  return data;
+}
+
+export const get = (path) => request('GET', path);
+
+export async function fetchAll(path) {
+  const separator = path.includes('?') ? '&' : '?';
+  const items = [];
+  for (;;) {
+    const page = await get(`${path}${separator}limit=500&offset=${items.length}`);
+    items.push(...page.items);
+    if (page.items.length === 0 || items.length >= page.total) {
+      return items;
+    }
+  }
+}

package/public/js/auth.mjs

@@ -0,0 +1,41 @@
+// The token Signal K issues to this device once an administrator approves its
+// access request. Kept in localStorage, which may be missing or refuse writes
+// (private browsing): the app then simply asks again.
+
+const TOKEN_KEY = 'chiplog.deviceToken';
+
+function browserStorage() {
+  try {
+    return globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function createTokenStore(storage = browserStorage()) {
+  return {
+    get() {
+      try {
+        return storage?.getItem(TOKEN_KEY) ?? null;
+      } catch {
+        return null;
+      }
+    },
+    set(token) {
+      try {
+        storage?.setItem(TOKEN_KEY, token);
+      } catch {
+        // Not persisted: the token lasts as long as this page.
+      }
+    },
+    clear() {
+      try {
+        storage?.removeItem(TOKEN_KEY);
+      } catch {
+        // Nothing stored to clear.
+      }
+    }
+  };
+}
+
+export const deviceToken = createTokenStore();

package/public/js/components/ExportView.mjs

@@ -0,0 +1,182 @@
+import { html, useState } from '../../vendor/preact-htm.mjs';
+import { apiUrl, get, request } from '../api.mjs';
+import { useLocale, usePolling } from '../context.mjs';
+import { ErrorNotice } from './common.mjs';
+
+const PLUGIN_CONFIGURATION = '/admin/#/serverConfiguration/plugins/signalk-chiplog';
+
+// Date inputs give local calendar dates; the API wants instants, `to` exclusive.
+function localMidnight(value, dayOffset = 0) {
+  const [year, month, day] = value.split('-').map(Number);
+  return new Date(year, month - 1, day + dayOffset);
+}
+
+function exportUrl(format, from, to) {
+  const params = new URLSearchParams({ format });
+  if (from) {
+    params.set('from', localMidnight(from).toISOString());
+  }
+  if (to) {
+    params.set('to', localMidnight(to, 1).toISOString());
+  }
+  return apiUrl(`/export?${params}`);
+}
+
+const STATUS_REFRESH_MS = 30 * 1000;
+
+function scheduleText({ intervalMinutes, onArrival }, t) {
+  if (intervalMinutes > 0) {
+    return onArrival
+      ? t('export.usbScheduleBoth', { minutes: intervalMinutes })
+      : t('export.usbScheduleInterval', { minutes: intervalMinutes });
+  }
+  return onArrival ? t('export.usbScheduleArrival') : t('export.usbScheduleNone');
+}
+
+// What the automatic copy has been doing, so a drive that fell out is noticed
+// before it is needed.
+function UsbStatus({ status }) {
+  const { t, format } = useLocale();
+  if (!status?.configured) {
+    return null;
+  }
+  const when = (value) => `${format.shortDate(value)} ${format.time(value)}`;
+  const { lastSuccess, lastError, nextAt } = status;
+  return html`
+    <ul class="usb-status">
+      <li>${scheduleText(status, t)}</li>
+      ${
+        lastError &&
+        html`<li class="notice notice-error">
+          ${t('export.usbLastError', {
+            time: when(lastError.at),
+            message:
+              lastError.code === 'usb_export_unavailable'
+                ? t('export.usbUnavailable')
+                : lastError.message
+          })}
+        </li>`
+      }
+      <li>
+        ${
+          lastSuccess
+            ? t('export.usbLastCopy', {
+                time: when(lastSuccess.at),
+                written: lastSuccess.written,
+                unchanged: lastSuccess.unchanged
+              })
+            : t('export.usbNeverCopied')
+        }
+      </li>
+      ${nextAt && html`<li class="muted">${t('export.usbNextCopy', { time: format.time(nextAt) })}</li>`}
+    </ul>
+  `;
+}
+
+function UsbResult({ outcome }) {
+  const { t } = useLocale();
+  if (!outcome) {
+    return null;
+  }
+  if (outcome.result) {
+    return html`<p class="notice notice-ok">
+      ${t('export.usbWritten', {
+        written: outcome.result.written,
+        unchanged: outcome.result.unchanged,
+        directory: outcome.result.directory
+      })}
+    </p>`;
+  }
+  const { error } = outcome;
+  if (error.code === 'usb_export_not_configured') {
+    return html`<p class="notice notice-error">
+      ${t('export.usbNotConfigured')}
+      <a href=${PLUGIN_CONFIGURATION}>${t('export.pluginConfiguration')}</a>
+    </p>`;
+  }
+  if (error.code === 'usb_export_unavailable') {
+    return html`<p class="notice notice-error">${t('export.usbUnavailable')}</p>`;
+  }
+  return html`<${ErrorNotice} error=${error} />`;
+}
+
+export function ExportView() {
+  const { t } = useLocale();
+  const [from, setFrom] = useState('');
+  const [to, setTo] = useState('');
+  const [usb, setUsb] = useState(null);
+  const [writing, setWriting] = useState(false);
+  const [status, setStatus] = useState(null);
+  const [version, setVersion] = useState(0);
+  const invalid = Boolean(from && to && to < from);
+
+  usePolling(
+    (isCurrent) => {
+      get('/export/usb')
+        .then((next) => isCurrent() && setStatus(next))
+        .catch(() => {
+          // The write button reports access and configuration problems itself.
+        });
+    },
+    STATUS_REFRESH_MS,
+    [version]
+  );
+
+  const writeUsb = async () => {
+    setWriting(true);
+    setUsb(null);
+    try {
+      setUsb({ result: await request('POST', '/export/usb') });
+    } catch (error) {
+      setUsb({ error });
+    } finally {
+      setWriting(false);
+      setVersion((v) => v + 1);
+    }
+  };
+
+  return html`
+    <h1 class="page-title">${t('export.title')}</h1>
+
+    <section class="card">
+      <p>${t('export.intro')}</p>
+      <div class="date-range">
+        <label>
+          ${t('export.from')}
+          <input
+            type="date"
+            value=${from}
+            onInput=${(event) => setFrom(event.currentTarget.value)}
+          />
+        </label>
+        <label>
+          ${t('export.to')}
+          <input type="date" value=${to} onInput=${(event) => setTo(event.currentTarget.value)} />
+        </label>
+      </div>
+      <p class="muted">${t('export.allHint')}</p>
+      ${invalid && html`<p class="notice notice-error">${t('export.invalidRange')}</p>`}
+      <ul class="downloads">
+        ${['json', 'csv', 'gpx'].map(
+          (format) =>
+            html`<li key=${format}>
+              ${
+                invalid
+                  ? html`<span class="muted">${t(`export.${format}`)}</span>`
+                  : html`<a href=${exportUrl(format, from, to)} download>${t(`export.${format}`)}</a>`
+              }
+            </li>`
+        )}
+        <li><span class="muted">${t('export.pdf')}</span></li>
+      </ul>
+    </section>
+
+    <section class="card">
+      <h2>${t('export.usbTitle')}</h2>
+      <p>${t('export.usbIntro')}</p>
+      <${UsbStatus} status=${status} />
+      <button type="button" disabled=${writing} onClick=${writeUsb}>${t('export.usbWrite')}</button>
+      <${UsbResult} outcome=${usb} />
+    </section>
+  `;
+}

package/public/js/components/LogView.mjs

@@ -0,0 +1,132 @@
+import { html, useRef, useState } from '../../vendor/preact-htm.mjs';
+import { get } from '../api.mjs';
+import { useLocale, usePolling } from '../context.mjs';
+import { groupByDay } from '../days.mjs';
+import { elapsedSeconds, EngineSailBar, ErrorNotice, Loading, PlaceName } from './common.mjs';
+
+const PAGE_SIZE = 50;
+const API_PAGE_LIMIT = 500;
+const REFRESH_MS = 60 * 1000;
+
+// Reloads everything loaded so far, so a refresh does not drop older pages.
+async function loadEntries(count) {
+  const items = [];
+  let total = 0;
+  while (items.length < count) {
+    const limit = Math.min(API_PAGE_LIMIT, count - items.length);
+    const page = await get(`/entries?limit=${limit}&offset=${items.length}`);
+    total = page.total;
+    items.push(...page.items);
+    if (page.items.length === 0 || items.length >= total) {
+      break;
+    }
+  }
+  return { items, total };
+}
+
+function PassageCard({ entry, continuesFromPreviousDay, continuesNextDay }) {
+  const { t, format } = useLocale();
+  const at = (value, withDate) =>
+    withDate ? `${format.shortDate(value)} ${format.time(value)}` : format.time(value);
+
+  return html`
+    <a
+      class=${entry.state === 'active' ? 'passage-card passage-active' : 'passage-card'}
+      href=${`#/passages/${entry.id}`}
+    >
+      <div class="passage-times">
+        ${`${at(entry.startTime, continuesFromPreviousDay)} – ${
+          entry.endTime ? at(entry.endTime, continuesNextDay) : t('log.inProgress')
+        }`}
+      </div>
+      <div class="passage-places">
+        <${PlaceName} name=${entry.startPlaceName} pending=${entry.startPlacePending} />
+        <span aria-hidden="true"> → </span>
+        ${
+          entry.endTime
+            ? html`<${PlaceName} name=${entry.endPlaceName} pending=${entry.endPlacePending} />`
+            : html`<span class="place">…</span>`
+        }
+      </div>
+      <div class="passage-facts">
+        <span>${format.distance(entry.distance)}</span>
+        <span>${format.duration(elapsedSeconds(entry))}</span>
+      </div>
+      <${EngineSailBar} engine=${entry.engineDuration} sail=${entry.sailDuration} />
+      ${
+        continuesFromPreviousDay &&
+        html`<div class="passage-continues">${t('log.fromPreviousDay')}</div>`
+      }
+      ${continuesNextDay && html`<div class="passage-continues">${t('log.toNextDay')}</div>`}
+    </a>
+  `;
+}
+
+export function LogView() {
+  const { t, format } = useLocale();
+  const [log, setLog] = useState(null);
+  const [error, setError] = useState(null);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const wanted = useRef(PAGE_SIZE);
+
+  const reload = (isCurrent = () => true) =>
+    loadEntries(wanted.current)
+      .then((next) => {
+        if (isCurrent()) {
+          setLog(next);
+          setError(null);
+        }
+      })
+      .catch((err) => isCurrent() && setError(err));
+
+  usePolling(reload, REFRESH_MS);
+
+  const loadOlder = () => {
+    wanted.current += PAGE_SIZE;
+    setLoadingOlder(true);
+    reload().finally(() => setLoadingOlder(false));
+  };
+
+  if (!log) {
+    return error
+      ? html`<${ErrorNotice} error=${error} onRetry=${() => reload()} />`
+      : html`<${Loading} />`;
+  }
+  if (log.items.length === 0) {
+    return html`
+      <h1 class="page-title">${t('log.title')}</h1>
+      <p class="empty">${t('log.empty')}</p>
+    `;
+  }
+
+  return html`
+    <h1 class="page-title">${t('log.title')}</h1>
+    <${ErrorNotice} error=${error} />
+    ${groupByDay(log.items).map(
+      (day) => html`
+        <section class="day" key=${day.key}>
+          <header class="day-header">
+            <h2>${format.day(day.date)}</h2>
+            ${
+              day.distance > 0 &&
+              html`<span class="day-distance">
+                ${t('log.dayDistance', { distance: format.distance(day.distance) })}
+              </span>`
+            }
+          </header>
+          <ul class="passage-list">
+            ${day.items.map(
+              (item) => html`<li key=${item.entry.id}><${PassageCard} ...${item} /></li>`
+            )}
+          </ul>
+        </section>
+      `
+    )}
+    ${
+      log.items.length < log.total &&
+      html`<button type="button" class="load-older" disabled=${loadingOlder} onClick=${loadOlder}>
+        ${t('log.loadOlder')}
+      </button>`
+    }
+  `;
+}