signalk-chiplog 2.3.1 → 2.4.0

package/public/app.css

@@ -381,6 +381,24 @@ main {
   margin-top: 1rem;
 }
 
+.passage-nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.25rem 1rem;
+  margin-top: 1rem;
+}
+
+.passage-nav .back {
+  margin-top: 0;
+}
+
+.passage-steps {
+  display: flex;
+  gap: 1.25rem;
+}
+
 .passage-header h1 {
   margin: 0.5rem 0 0.2rem;
   font-size: 1.5rem;
@@ -809,16 +827,201 @@ main {
 
 /* Export */
 
-.date-range {
+/* Statistics */
+.presets {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+/* The range picker: a button, and a calendar dropping from it. */
+.range-picker {
+  position: relative;
+  display: inline-block;
+}
+
+button.range-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--surface);
+  color: var(--text);
+  border-color: var(--border);
 }
 
-.date-range label {
+.range-popover {
+  position: absolute;
+  z-index: 10;
+  top: calc(100% + 0.4rem);
+  left: 0;
+  width: min(20rem, calc(100vw - 2rem));
+  padding: 0.75rem;
+  border-radius: var(--radius);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+}
+
+.cal-header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.cal-title {
+  flex: 1;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+button.cal-nav {
+  padding: 0.3rem 0.6rem;
+  background: none;
+  border-color: var(--border);
+  color: var(--accent);
+}
+
+.cal-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  row-gap: 2px;
+  text-align: center;
+}
+
+.cal-weekday {
+  color: var(--muted);
+  font-size: 0.75rem;
+  padding-bottom: 0.25rem;
+}
+
+/* Days run into each other along a row, so a range reads as one band. */
+button.cal-day {
+  height: 2.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: none;
+  color: var(--text);
+}
+
+button.cal-today {
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+button.cal-in-range {
+  background: var(--bg);
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+}
+
+button.cal-start,
+button.cal-end {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+button.cal-start {
+  border-radius: 8px 0 0 8px;
+}
+
+button.cal-end {
+  border-radius: 0 8px 8px 0;
+}
+
+button.cal-start.cal-end {
+  border-radius: 8px;
+}
+
+.cal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.25rem 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.cal-hint {
+  font-size: 0.85rem;
+}
+
+button.preset {
+  background: var(--surface);
+  color: var(--accent);
+}
+
+button.preset-on {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.statistics-loading {
+  opacity: 0.6;
+}
+
+.longest-facts {
+  margin: 0 0 0.4rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.countries {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem 1.2rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.countries li {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.countries .flag {
+  font-size: 1.8rem;
+  line-height: 1;
+}
+
+.ranking {
+  margin: 0;
+  padding-left: 1.4rem;
+}
+
+.ranking li {
+  padding: 0.35rem 0;
+  border-top: 1px solid var(--border);
+}
+
+.ranking li:first-child {
+  border-top: none;
+}
+
+.ranking a {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+  color: var(--text);
+  text-decoration: none;
+}
+
+.ranking-what {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ranking-route {
+  overflow-wrap: anywhere;
+}
+
+.ranking-value {
+  white-space: nowrap;
 }
 
 .downloads {

package/public/js/calendar.mjs

@@ -0,0 +1,50 @@
+// Pure helpers for the range picker's calendar: the grid of a month, moving
+// between months, and how two clicks make a range. Nothing here touches the
+// DOM, so tests run them under Node. Days are local `YYYY-MM-DD` keys, the
+// same as a date input gives and `days.mjs` takes.
+
+import { dayKey } from './days.mjs';
+
+const WEEK_DAYS = 7;
+// Always six rows, so the calendar does not change height from month to month.
+const GRID_CELLS = 6 * WEEK_DAYS;
+
+// The days of a month laid out Monday first, the days of the neighbouring
+// months left as `null`.
+export function monthGrid(year, month) {
+  const leading = (new Date(year, month, 1).getDay() + 6) % WEEK_DAYS;
+  return Array.from({ length: GRID_CELLS }, (_, index) => {
+    const date = new Date(year, month, 1 - leading + index);
+    return date.getMonth() === new Date(year, month, 1).getMonth() ? dayKey(date) : null;
+  });
+}
+
+// The month `delta` months on, carrying over the year.
+export function shiftMonth({ year, month }, delta) {
+  const date = new Date(year, month + delta, 1);
+  return { year: date.getFullYear(), month: date.getMonth() };
+}
+
+export function monthOf(key) {
+  const [year, month] = key.split('-').map(Number);
+  return { year, month: month - 1 };
+}
+
+// Two clicks, in whichever order: the earlier day starts the range.
+export function completeRange(anchor, day) {
+  return anchor <= day ? { from: anchor, to: day } : { from: day, to: anchor };
+}
+
+export function weekdayLabels(locale) {
+  const format = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+  // 1 January 2024 is a Monday.
+  return Array.from({ length: WEEK_DAYS }, (_, index) =>
+    format.format(new Date(2024, 0, 1 + index))
+  );
+}
+
+export function monthTitle(locale, { year, month }) {
+  return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(
+    new Date(year, month, 1)
+  );
+}

package/public/js/components/AnimationView.mjs

@@ -11,6 +11,7 @@ import { SPEEDS } from '../animation/schedule.mjs';
 import { buildLegs, buildStoryboard, stateAt } from '../animation/storyboard.mjs';
 import { createTileCache, TILE_LAYERS } from '../animation/tiles.mjs';
 import { AnimationExport } from './AnimationExport.mjs';
+import { DateRangePicker } from './DateRangePicker.mjs';
 import { ErrorNotice } from './common.mjs';
 
 const TRACK_CONCURRENCY = 4;
@@ -78,7 +79,6 @@ export function AnimationView({ from: initialFrom, to: initialTo }) {
     cache.current = createTileCache();
   }
 
-  const invalid = Boolean(from && to && to < from);
   const videoFormat = formatById(formatId);
   const layers = useMemo(
     () => (seamarks ? TILE_LAYERS : TILE_LAYERS.filter((layer) => layer.id !== 'seamarks')),
@@ -308,20 +308,17 @@ export function AnimationView({ from: initialFrom, to: initialTo }) {
 
     <section class="card">
       <p>${t('animation.intro')}</p>
-      <div class="date-range">
-        <label>
-          ${t('animation.from')}
-          <input type="date" value=${from} onInput=${(event) => setFrom(event.currentTarget.value)} />
-        </label>
-        <label>
-          ${t('animation.to')}
-          <input type="date" value=${to} onInput=${(event) => setTo(event.currentTarget.value)} />
-        </label>
-      </div>
-      ${invalid && html`<p class="notice notice-error">${t('animation.invalidRange')}</p>`}
+      <${DateRangePicker}
+        from=${from}
+        to=${to}
+        label=${t('range.period')}
+        onChange=${(range) => {
+          setFrom(range.from);
+          setTo(range.to);
+        }}
+      />
       ${
         summary &&
-        !invalid &&
         html`<p class="muted">
           ${t('animation.summary', {
             passages: summary.count,
@@ -331,7 +328,7 @@ export function AnimationView({ from: initialFrom, to: initialTo }) {
         </p>`
       }
       <div class="actions">
-        <button type="button" disabled=${invalid || loading !== null} onClick=${load}>
+        <button type="button" disabled=${loading !== null} onClick=${load}>
           ${t('animation.load')}
         </button>
       </div>

package/public/js/components/DateRangePicker.mjs

@@ -0,0 +1,187 @@
+import { html, useEffect, useRef, useState } from '../../vendor/preact-htm.mjs';
+import { useLocale } from '../context.mjs';
+import {
+  completeRange,
+  monthGrid,
+  monthOf,
+  monthTitle,
+  shiftMonth,
+  weekdayLabels
+} from '../calendar.mjs';
+import { dayKey, rangeBoundary } from '../days.mjs';
+
+// One control for a period: a button showing it, and a calendar to pick it with
+// two clicks -- the first and the last day. Either end may be left open by the
+// shortcuts around it; a range is only ever changed here by completing one, or
+// by clearing it where any date is allowed (`allowAny`).
+export function DateRangePicker({ from, to, onChange, label, allowAny = true, disabled = false }) {
+  const { t, format, language } = useLocale();
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState(() => monthOf(from || dayKey(new Date())));
+  // The first click of a range being picked, until the second one arrives.
+  const [anchor, setAnchor] = useState(null);
+  const [hover, setHover] = useState(null);
+  const root = useRef(null);
+  const trigger = useRef(null);
+
+  const close = () => {
+    setOpen(false);
+    setAnchor(null);
+    setHover(null);
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    const outside = (event) => {
+      if (!root.current?.contains(event.target)) {
+        close();
+      }
+    };
+    const escape = (event) => {
+      if (event.key === 'Escape') {
+        close();
+        trigger.current?.focus();
+      }
+    };
+    document.addEventListener('pointerdown', outside);
+    document.addEventListener('keydown', escape);
+    return () => {
+      document.removeEventListener('pointerdown', outside);
+      document.removeEventListener('keydown', escape);
+    };
+  }, [open]);
+
+  const toggle = () => {
+    if (open) {
+      close();
+      return;
+    }
+    setView(monthOf(from || dayKey(new Date())));
+    setOpen(true);
+  };
+
+  const clear = () => {
+    onChange({ from: '', to: '' });
+    close();
+    trigger.current?.focus();
+  };
+
+  const pick = (key) => {
+    if (anchor === null) {
+      setAnchor(key);
+      return;
+    }
+    onChange(completeRange(anchor, key));
+    close();
+    trigger.current?.focus();
+  };
+
+  // What the calendar highlights: the range being picked, with the day under
+  // the pointer as its provisional end, or else the one already chosen.
+  const shown = anchor === null ? { from, to } : completeRange(anchor, hover ?? anchor);
+  const dayText = (key) => format.date(rangeBoundary(key));
+  const summary =
+    !from && !to
+      ? allowAny
+        ? t('range.anyDate')
+        : t('range.choose')
+      : `${from ? dayText(from) : '…'} – ${to ? dayText(to) : '…'}`;
+  const today = dayKey(new Date());
+
+  const cellClass = (key) => {
+    const classes = ['cal-day'];
+    if (key === today) {
+      classes.push('cal-today');
+    }
+    if (shown.from && shown.to && key >= shown.from && key <= shown.to) {
+      classes.push('cal-in-range');
+    }
+    if (key === shown.from) {
+      classes.push('cal-start');
+    }
+    if (key === shown.to) {
+      classes.push('cal-end');
+    }
+    return classes.join(' ');
+  };
+
+  const nav = (delta, name, text) => html`
+    <button
+      type="button"
+      class="cal-nav"
+      aria-label=${name}
+      onClick=${() => setView(shiftMonth(view, delta))}
+    >
+      ${text}
+    </button>
+  `;
+
+  return html`
+    <div class="range-picker" ref=${root}>
+      <button
+        type="button"
+        class="range-trigger"
+        ref=${trigger}
+        aria-haspopup="dialog"
+        aria-expanded=${open}
+        disabled=${disabled}
+        aria-label=${`${label}: ${summary}`}
+        onClick=${toggle}
+      >
+        <span aria-hidden="true">📅</span>
+        <span>${summary}</span>
+      </button>
+      ${
+        open &&
+        html`
+          <div class="range-popover" role="dialog" aria-label=${label}>
+            <div class="cal-header">
+              ${nav(-12, t('range.previousYear'), '«')}
+              ${nav(-1, t('range.previousMonth'), '‹')}
+              <strong class="cal-title" aria-live="polite">${monthTitle(language, view)}</strong>
+              ${nav(1, t('range.nextMonth'), '›')}
+              ${nav(12, t('range.nextYear'), '»')}
+            </div>
+            <div class="cal-grid" onMouseLeave=${() => setHover(null)}>
+              ${weekdayLabels(language).map(
+                (name) => html`<span class="cal-weekday" key=${name}>${name}</span>`
+              )}
+              ${monthGrid(view.year, view.month).map((key, index) =>
+                key === null
+                  ? html`<span key=${`blank-${index}`}></span>`
+                  : html`
+                      <button
+                        type="button"
+                        key=${key}
+                        class=${cellClass(key)}
+                        aria-label=${format.day(rangeBoundary(key))}
+                        aria-pressed=${key === shown.from || key === shown.to}
+                        onClick=${() => pick(key)}
+                        onMouseEnter=${() => setHover(key)}
+                        onFocus=${() => setHover(key)}
+                      >
+                        ${Number(key.slice(8))}
+                      </button>
+                    `
+              )}
+            </div>
+            <div class="cal-footer">
+              <span class="muted cal-hint">
+                ${anchor === null ? t('range.pickStart') : t('range.pickEnd')}
+              </span>
+              ${
+                allowAny &&
+                (from || to) &&
+                html`<button type="button" class="link-button" onClick=${clear}>
+                  ${t('range.anyDate')}
+                </button>`
+              }
+            </div>
+          </div>
+        `
+      }
+    </div>
+  `;
+}

package/public/js/components/ExportView.mjs

@@ -2,6 +2,7 @@ import { html, useState } from '../../vendor/preact-htm.mjs';
 import { apiUrl, get, request } from '../api.mjs';
 import { useLocale, usePolling } from '../context.mjs';
 import { rangeBoundary } from '../days.mjs';
+import { DateRangePicker } from './DateRangePicker.mjs';
 import { ErrorNotice } from './common.mjs';
 
 const PLUGIN_CONFIGURATION = '/admin/#/serverConfiguration/plugins/signalk-chiplog';
@@ -108,7 +109,6 @@ export function ExportView() {
   const [writing, setWriting] = useState(false);
   const [status, setStatus] = useState(null);
   const [version, setVersion] = useState(0);
-  const invalid = Boolean(from && to && to < from);
 
   usePolling(
     (isCurrent) => {
@@ -140,31 +140,21 @@ export function ExportView() {
 
     <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>
+      <${DateRangePicker}
+        from=${from}
+        to=${to}
+        label=${t('range.period')}
+        onChange=${(range) => {
+          setFrom(range.from);
+          setTo(range.to);
+        }}
+      />
       <p class="muted">${t('export.allHint')}</p>
-      ${invalid && html`<p class="notice notice-error">${t('export.invalidRange')}</p>`}
       <ul class="downloads">
         ${['pdf', '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, language)} download>${t(`export.${format}`)}</a>`
-              }
+              <a href=${exportUrl(format, from, to, language)} download>${t(`export.${format}`)}</a>
             </li>`
         )}
       </ul>

package/public/js/components/PassageView.mjs

@@ -11,6 +11,7 @@ import { Timeline } from './Timeline.mjs';
 import { TrackMap } from './TrackMap.mjs';
 import { TrackScrubber } from './TrackScrubber.mjs';
 import { WeatherCard } from './WeatherCard.mjs';
+import { stepDirection } from '../shortcuts.mjs';
 import { trackPoints } from '../track.mjs';
 
 const ACTIVE_REFRESH_MS = 60 * 1000;
@@ -236,6 +237,14 @@ function NameField({ label, name, pending, busy, onSave }) {
   `;
 }
 
+// A neighbouring passage, or its place kept as a dimmed label at the log's end.
+// `shortcut` is the key that does the same, told in the tooltip.
+function StepLink({ id, label, shortcut, keyName }) {
+  return id === null
+    ? html`<span class="muted" aria-disabled="true">${label}</span>`
+    : html`<a href=${`#/passages/${id}`} title=${shortcut} aria-keyshortcuts=${keyName}>${label}</a>`;
+}
+
 export function PassageView({ id }) {
   const { t, format } = useLocale();
   const [data, setData] = useState(null);
@@ -246,6 +255,28 @@ export function PassageView({ id }) {
   // null follows the latest point as new ones arrive; scrubbing pins it.
   const [selectedIndex, setSelectedIndex] = useState(null);
   const active = data?.entry.state === 'active';
+  // Only the neighbours of the passage on screen, not of the one just left.
+  const shown = data?.entry.id === id ? data.entry : null;
+  const previousId = shown?.previousEntryId ?? null;
+  const nextId = shown?.nextEntryId ?? null;
+
+  // Alt+arrow steps through the log. The key is taken even at either end of it,
+  // where it does nothing, rather than left to the browser's own Alt+left: back.
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      const direction = stepDirection(event);
+      if (direction === null) {
+        return;
+      }
+      event.preventDefault();
+      const target = direction === 'previous' ? previousId : nextId;
+      if (target !== null && !event.repeat) {
+        location.hash = `#/passages/${target}`;
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [previousId, nextId]);
 
   // A different passage starts by following its latest point too, not
   // wherever the scrubber was left on the previous one.
@@ -357,7 +388,23 @@ export function PassageView({ id }) {
   const boat = points[scrubIndex] ?? null;
 
   return html`
-    <a class="back" href="#/">← ${t('passage.back')}</a>
+    <div class="passage-nav">
+      <a class="back" href="#/">← ${t('passage.back')}</a>
+      <div class="passage-steps">
+        <${StepLink}
+          id=${entry.previousEntryId}
+          label=${`← ${t('passage.previous')}`}
+          shortcut="Alt+←"
+          keyName="Alt+ArrowLeft"
+        />
+        <${StepLink}
+          id=${entry.nextEntryId}
+          label=${`${t('passage.next')} →`}
+          shortcut="Alt+→"
+          keyName="Alt+ArrowRight"
+        />
+      </div>
+    </div>
 
     <header class="passage-header">
       <h1>