signalk-chiplog 2.3.0 → 2.4.0

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>

package/public/js/components/ReplayView.mjs

@@ -1,6 +1,7 @@
 import { html, useState } from '../../vendor/preact-htm.mjs';
 import { get, request } from '../api.mjs';
 import { useLocale, usePolling } from '../context.mjs';
+import { DateRangePicker } from './DateRangePicker.mjs';
 import { ErrorNotice } from './common.mjs';
 
 const PLUGIN_CONFIGURATION = '/admin/#/serverConfiguration/plugins/signalk-chiplog';
@@ -26,19 +27,35 @@ function Progress({ progress }) {
           time: `${format.shortDate(progress.now)} ${format.time(progress.now)}`
         })}
       </p>
+      ${
+        progress.retry &&
+        html`<p class="notice">
+          ${t('replay.retrying', {
+            attempt: progress.retry.attempt,
+            of: progress.retry.of,
+            message: progress.retry.message
+          })}
+        </p>`
+      }
+      ${
+        progress.phase === 'replaying' &&
+        html`<${Summary} summary=${progress.summary} live=${true} />`
+      }
     </div>
   `;
 }
 
-// What the latest run added -- also after a cancellation, since what was
-// reconstructed up to that point stays on record.
-function Summary({ summary }) {
+// What a run added, live while it is still going (so a timeout partway
+// through still leaves something to show for it) and again for the final
+// outcome -- also after a cancellation, since what was reconstructed up to
+// that point stays on record either way.
+function Summary({ summary, live = false }) {
   const { t, format } = useLocale();
   if (!summary) {
     return null;
   }
   if (summary.passages === 0) {
-    return html`<p class="muted">${t('replay.summaryEmpty')}</p>`;
+    return live ? null : html`<p class="muted">${t('replay.summaryEmpty')}</p>`;
   }
   const facts = [
     ['replay.summaryPassages', format.count(summary.passages)],
@@ -66,12 +83,15 @@ function Outcome({ status }) {
   const { t, format } = useLocale();
   if (status.lastError) {
     const { lastError } = status;
-    return html`<p class="notice notice-error">
-      ${t('replay.failed', {
-        time: format.time(lastError.at),
-        message: lastError.message
-      })}
-    </p>`;
+    return html`
+      <p class="notice notice-error">
+        ${t('replay.failed', {
+          time: format.time(lastError.at),
+          message: lastError.message
+        })}
+      </p>
+      <${Summary} summary=${lastError.summary} />
+    `;
   }
   if (status.lastResult) {
     const { lastResult } = status;
@@ -94,7 +114,6 @@ export function ReplayView() {
   const [status, setStatus] = useState(null);
   const [starting, setStarting] = useState(false);
   const [error, setError] = useState(null);
-  const invalid = Boolean(from && to && to < from);
 
   usePolling(
     (isCurrent) => {
@@ -140,27 +159,17 @@ export function ReplayView() {
 
     <section class="card">
       <p>${t('replay.intro')}</p>
-      <div class="date-range">
-        <label>
-          ${t('export.from')}
-          <input
-            type="date"
-            value=${from}
-            disabled=${running}
-            onInput=${(event) => setFrom(event.currentTarget.value)}
-          />
-        </label>
-        <label>
-          ${t('export.to')}
-          <input
-            type="date"
-            value=${to}
-            disabled=${running}
-            onInput=${(event) => setTo(event.currentTarget.value)}
-          />
-        </label>
-      </div>
-      ${invalid && html`<p class="notice notice-error">${t('export.invalidRange')}</p>`}
+      <${DateRangePicker}
+        from=${from}
+        to=${to}
+        label=${t('range.period')}
+        allowAny=${false}
+        disabled=${running}
+        onChange=${(range) => {
+          setFrom(range.from);
+          setTo(range.to);
+        }}
+      />
       ${
         notConfigured &&
         html`<p class="notice notice-error">
@@ -175,7 +184,7 @@ export function ReplayView() {
       <div class="replay-actions">
         <button
           type="button"
-          disabled=${!from || !to || invalid || starting || running}
+          disabled=${!from || !to || starting || running}
           onClick=${start}
         >
           ${t('replay.start')}

package/public/js/components/StatisticsView.mjs

@@ -0,0 +1,249 @@
+import { html, useEffect, useState } from '../../vendor/preact-htm.mjs';
+import { get } from '../api.mjs';
+import { useLocale } from '../context.mjs';
+import {
+  activePreset,
+  countryName,
+  flagEmoji,
+  presetRange,
+  RANGE_PRESETS,
+  rangeQuery
+} from '../statistics.mjs';
+import { DateRangePicker } from './DateRangePicker.mjs';
+import { ErrorNotice, Loading, passageTitle } from './common.mjs';
+
+// The two years whose numbers label their own shortcuts; the months are words.
+function presetLabel(preset, t, today) {
+  if (preset === 'thisYear') {
+    return String(today.getFullYear());
+  }
+  if (preset === 'lastYear') {
+    return String(today.getFullYear() - 1);
+  }
+  return t(`statistics.range.${preset}`);
+}
+
+function PeriodPicker({ from, to, onChange }) {
+  const { t } = useLocale();
+  const today = new Date();
+  const active = activePreset(from, to, today);
+
+  return html`
+    <section class="card" aria-label=${t('range.period')}>
+      <div class="presets" role="group" aria-label=${t('range.period')}>
+        ${RANGE_PRESETS.map(
+          (preset) => html`
+            <button
+              type="button"
+              key=${preset}
+              class=${active === preset ? 'preset preset-on' : 'preset'}
+              aria-pressed=${active === preset}
+              onClick=${() => onChange(presetRange(preset, today))}
+            >
+              ${presetLabel(preset, t, today)}
+            </button>
+          `
+        )}
+      </div>
+      <${DateRangePicker} from=${from} to=${to} onChange=${onChange} label=${t('range.period')} />
+    </section>
+  `;
+}
+
+function Summary({ stats }) {
+  const { t, format } = useLocale();
+  const wind = format.speed(stats.maxWindSpeed);
+  const tiles = [
+    [t('statistics.count'), stats.count],
+    [t('statistics.first'), format.date(stats.firstTime)],
+    [t('statistics.last'), format.date(stats.lastTime)],
+    [t('statistics.distance'), format.distance(stats.distance)],
+    [t('statistics.duration'), format.duration(stats.duration)],
+    [t('statistics.maxSpeed'), format.speed(stats.maxSpeed) || '—'],
+    [
+      t('statistics.maxWind'),
+      wind ? (stats.maxWindApparent ? t('statistics.apparent', { speed: wind }) : wind) : '—'
+    ]
+  ];
+  return html`
+    <dl class="facts">
+      ${tiles.map(
+        ([label, value]) => html`
+          <div key=${label}>
+            <dt>${label}</dt>
+            <dd>${value}</dd>
+          </div>
+        `
+      )}
+    </dl>
+  `;
+}
+
+function LongestNonStop({ leg }) {
+  const { t, format } = useLocale();
+  return html`
+    <section class="card">
+      <h2>${t('statistics.longest')}</h2>
+      ${
+        leg
+          ? html`
+              <p class="longest-facts">
+                ${t('statistics.longestFacts', {
+                  distance: format.distance(leg.distance),
+                  duration: format.duration(leg.duration)
+                })}
+              </p>
+              <p>
+                <a href=${`#/passages/${leg.entryId}`}>${passageTitle(leg, t)}</a>
+                <span class="muted"> · ${format.date(leg.startTime)}</span>
+              </p>
+            `
+          : html`<p class="muted">${t('statistics.noData')}</p>`
+      }
+    </section>
+  `;
+}
+
+function Countries({ countries }) {
+  const { t, language } = useLocale();
+  return html`
+    <section class="card">
+      <h2>${t('statistics.countries')}</h2>
+      ${
+        countries.length > 0
+          ? html`
+              <ul class="countries">
+                ${countries.map(({ code }) => {
+                  const name = countryName(code, language);
+                  return html`
+                    <li key=${code} title=${name}>
+                      <span class="flag" aria-hidden="true">${flagEmoji(code) || code}</span>
+                      <span>${name}</span>
+                    </li>
+                  `;
+                })}
+              </ul>
+            `
+          : html`<p class="muted">${t('statistics.noCountries')}</p>`
+      }
+    </section>
+  `;
+}
+
+function Ranking({ title, passages, value }) {
+  const { t, format } = useLocale();
+  return html`
+    <section class="card">
+      <h2>${title}</h2>
+      ${
+        passages.length > 0
+          ? html`
+              <ol class="ranking">
+                ${passages.map(
+                  (passage) => html`
+                    <li key=${passage.id}>
+                      <a href=${`#/passages/${passage.id}`}>
+                        <span class="ranking-what">
+                          <span class="ranking-route">${passageTitle(passage, t)}</span>
+                          <span class="muted">${format.date(passage.startTime)}</span>
+                        </span>
+                        <strong class="ranking-value">${value(passage)}</strong>
+                      </a>
+                    </li>
+                  `
+                )}
+              </ol>
+            `
+          : html`<p class="muted">${t('statistics.noData')}</p>`
+      }
+    </section>
+  `;
+}
+
+function Rankings({ top }) {
+  const { t, format } = useLocale();
+  const wind = (passage) => {
+    const speed = format.speed(passage.maxWindSpeed);
+    return passage.maxWindApparent ? t('statistics.apparent', { speed }) : speed;
+  };
+  return html`
+    <div class="card-row">
+      <${Ranking}
+        title=${t('statistics.topDuration')}
+        passages=${top.duration}
+        value=${(passage) => format.duration(passage.duration)}
+      />
+      <${Ranking}
+        title=${t('statistics.topDistance')}
+        passages=${top.distance}
+        value=${(passage) => format.distance(passage.distance)}
+      />
+      <${Ranking}
+        title=${t('statistics.topAverageSpeed')}
+        passages=${top.averageSpeed}
+        value=${(passage) => format.speed(passage.averageSpeed)}
+      />
+      <${Ranking}
+        title=${t('statistics.topMaxSpeed')}
+        passages=${top.maxSpeed}
+        value=${(passage) => format.speed(passage.maxSpeed)}
+      />
+      <${Ranking} title=${t('statistics.topMaxWind')} passages=${top.maxWindSpeed} value=${wind} />
+    </div>
+  `;
+}
+
+export function StatisticsView() {
+  const { t } = useLocale();
+  const [range, setRange] = useState({ from: '', to: '' });
+  const [stats, setStats] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [attempt, setAttempt] = useState(0);
+
+  const { from, to } = range;
+
+  useEffect(() => {
+    let current = true;
+    const query = rangeQuery(from, to);
+    setLoading(true);
+    get(`/statistics${query ? `?${query}` : ''}`)
+      .then((next) => {
+        if (current) {
+          setStats(next);
+          setError(null);
+        }
+      })
+      .catch((failure) => current && setError(failure))
+      .finally(() => current && setLoading(false));
+    return () => {
+      current = false;
+    };
+  }, [from, to, attempt]);
+
+  return html`
+    <h1 class="page-title">${t('statistics.title')}</h1>
+    <${PeriodPicker} from=${from} to=${to} onChange=${setRange} />
+    <${ErrorNotice} error=${error} onRetry=${() => setAttempt(attempt + 1)} />
+    ${!stats && !error && html`<${Loading} />`}
+    ${
+      stats &&
+      html`
+        <div class=${loading ? 'statistics statistics-loading' : 'statistics'} aria-busy=${loading}>
+          ${
+            stats.count === 0
+              ? html`<p class="empty">${t('statistics.empty')}</p>`
+              : html`
+                  <${Summary} stats=${stats} />
+                  <div class="card-row">
+                    <${LongestNonStop} leg=${stats.longestNonStop} />
+                    <${Countries} countries=${stats.countries} />
+                  </div>
+                  <${Rankings} top=${stats.top} />
+                `
+          }
+        </div>
+      `
+    }
+  `;
+}