signalk-chiplog 1.0.0

package/public/js/components/TrackMap.mjs

@@ -0,0 +1,85 @@
+import { html, useEffect, useRef } from '../../vendor/preact-htm.mjs';
+import { useLocale } from '../context.mjs';
+
+const TRACK_COLOUR = '#e8590c';
+const DEPARTURE_COLOUR = '#2b8a3e';
+const ARRIVAL_COLOUR = '#c92a2a';
+
+// Signal K serves every page with `Referrer-Policy: no-referrer`, and the
+// OpenStreetMap tile servers answer a request without a Referer with an
+// "Access blocked" tile. Send the origin only, as browsers do by default.
+const TILE_REFERRER_POLICY = 'strict-origin-when-cross-origin';
+
+// Leaflet renders a string tooltip as HTML; place names are typed by the crew.
+function textTooltip(text) {
+  const element = document.createElement('span');
+  element.textContent = text;
+  return element;
+}
+
+export function TrackMap({ track, entry }) {
+  const { t } = useLocale();
+  const container = useRef(null);
+  const map = useRef(null);
+  const overlay = useRef(null);
+  const fitted = useRef(false);
+
+  useEffect(() => {
+    const instance = L.map(container.current, { scrollWheelZoom: false });
+    const streets = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      referrerPolicy: TILE_REFERRER_POLICY,
+      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(instance);
+    const seamarks = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
+      maxZoom: 18,
+      referrerPolicy: TILE_REFERRER_POLICY,
+      attribution: '© <a href="https://www.openseamap.org">OpenSeaMap</a>'
+    }).addTo(instance);
+    L.control.layers({ OpenStreetMap: streets }, { [t('map.seamarks')]: seamarks }).addTo(instance);
+    map.current = instance;
+    return () => {
+      instance.remove();
+      map.current = null;
+    };
+  }, []);
+
+  // Redrawn on each refresh of a passage in progress, without resetting the
+  // view the reader may have zoomed to.
+  useEffect(() => {
+    const instance = map.current;
+    overlay.current?.remove();
+    const group = L.featureGroup();
+
+    if (track?.geometry) {
+      L.geoJSON(track, { style: { color: TRACK_COLOUR, weight: 3, opacity: 0.9 } }).addTo(group);
+    }
+    const ends = [[entry.startPosition, entry.startPlaceName, DEPARTURE_COLOUR]];
+    if (entry.endTime) {
+      ends.push([entry.endPosition, entry.endPlaceName, ARRIVAL_COLOUR]);
+    }
+    for (const [position, name, colour] of ends) {
+      if (position) {
+        L.circleMarker([position.lat, position.lon], {
+          radius: 7,
+          color: '#ffffff',
+          weight: 2,
+          fillColor: colour,
+          fillOpacity: 1
+        })
+          .bindTooltip(textTooltip(name ?? t('place.unknown')))
+          .addTo(group);
+      }
+    }
+
+    group.addTo(instance);
+    overlay.current = group;
+    const bounds = group.getBounds();
+    if (!fitted.current && bounds.isValid()) {
+      instance.fitBounds(bounds, { padding: [24, 24], maxZoom: 15 });
+      fitted.current = true;
+    }
+  }, [track, entry]);
+
+  return html`<div class="track-map" ref=${container}></div>`;
+}

package/public/js/components/common.mjs

@@ -0,0 +1,70 @@
+import { html } from '../../vendor/preact-htm.mjs';
+import { useLocale } from '../context.mjs';
+
+export function ErrorNotice({ error, onRetry }) {
+  const { t } = useLocale();
+  if (!error) {
+    return null;
+  }
+  let message;
+  if (error.code === 'forbidden') {
+    message = html`${t('error.forbidden')} <a href="/admin/">${t('error.signIn')}</a>`;
+  } else if (error.code === 'plugin_not_started') {
+    message = t('error.notRunning');
+  } else if (error.code === 'network') {
+    message = t('error.network');
+  } else {
+    message = t('error.generic', { message: error.message });
+  }
+  return html`
+    <div class="notice notice-error" role="alert">
+      <p>${message}</p>
+      ${onRetry && html`<button type="button" onClick=${onRetry}>${t('common.retry')}</button>`}
+    </div>
+  `;
+}
+
+export function Loading() {
+  const { t } = useLocale();
+  return html`<p class="loading">${t('common.loading')}</p>`;
+}
+
+export function PlaceName({ name, pending }) {
+  const { t } = useLocale();
+  return html`
+    <span
+      class=${pending ? 'place place-pending' : 'place'}
+      title=${pending ? t('place.pending') : undefined}
+    >
+      ${name ?? t('place.unknown')}
+    </span>
+  `;
+}
+
+export function passageTitle(entry, t) {
+  const from = entry.startPlaceName ?? t('place.unknown');
+  return entry.endTime ? `${from} → ${entry.endPlaceName ?? t('place.unknown')}` : `${from} → …`;
+}
+
+export function EngineSailBar({ engine, sail }) {
+  const { t, format } = useLocale();
+  const total = engine + sail;
+  if (total <= 0) {
+    return null;
+  }
+  const enginePercent = (engine / total) * 100;
+  return html`
+    <div
+      class="engine-sail"
+      title=${`${t('passage.engine')} ${format.duration(engine)} · ${t('passage.sail')} ${format.duration(sail)}`}
+    >
+      <span class="engine-sail-engine" style=${`width:${enginePercent}%`}></span>
+      <span class="engine-sail-sail" style=${`width:${100 - enginePercent}%`}></span>
+    </div>
+  `;
+}
+
+export function elapsedSeconds(entry, now = Date.now()) {
+  const end = entry.endTime ? Date.parse(entry.endTime) : now;
+  return Math.max(0, (end - Date.parse(entry.startTime)) / 1000);
+}

package/public/js/context.mjs

@@ -0,0 +1,56 @@
+import { createContext, useContext, useEffect, useState } from '../vendor/preact-htm.mjs';
+import { createFormatter } from './format.mjs';
+import { createTranslator } from './i18n.mjs';
+
+const LocaleContext = createContext(null);
+
+export const LocaleProvider = LocaleContext.Provider;
+
+export function createLocale(language) {
+  const t = createTranslator(language);
+  const format = createFormatter({
+    locale: language,
+    units: { knots: t('unit.knots'), nauticalMiles: t('unit.nauticalMiles') }
+  });
+  return { language, t, format };
+}
+
+export function useLocale() {
+  return useContext(LocaleContext);
+}
+
+function parseRoute(hash) {
+  const passage = hash.match(/^#\/passages\/(\d+)$/);
+  if (passage) {
+    return { name: 'passage', id: Number(passage[1]) };
+  }
+  return hash === '#/export' ? { name: 'export' } : { name: 'log' };
+}
+
+export function useRoute() {
+  const [route, setRoute] = useState(() => parseRoute(location.hash));
+  useEffect(() => {
+    const onChange = () => {
+      setRoute(parseRoute(location.hash));
+      window.scrollTo(0, 0);
+    };
+    window.addEventListener('hashchange', onChange);
+    return () => window.removeEventListener('hashchange', onChange);
+  }, []);
+  return route;
+}
+
+// Runs `load` now and every `intervalMs`, ignoring results that arrive after
+// the component is gone.
+export function usePolling(load, intervalMs, dependencies = []) {
+  useEffect(() => {
+    let active = true;
+    const run = () => load(() => active);
+    run();
+    const timer = intervalMs ? setInterval(run, intervalMs) : null;
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, dependencies);
+}

package/public/js/days.mjs

@@ -0,0 +1,56 @@
+// Grouping passages by day is a display concern (SPEC §3.2): days are local to
+// the device showing the log, and a passage appears on every day it touches.
+
+function localMidnight(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export function dayKey(date) {
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${date.getFullYear()}-${month}-${day}`;
+}
+
+export function groupByDay(entries, now = Date.now()) {
+  const days = new Map();
+
+  for (const entry of entries) {
+    const start = new Date(entry.startTime);
+    // The last instant the passage covers: one ending exactly at midnight does
+    // not spill onto the next day. An open passage runs up to now.
+    const last = entry.endTime
+      ? new Date(Math.max(start.getTime(), Date.parse(entry.endTime) - 1))
+      : new Date(Math.max(now, start.getTime()));
+    const startKey = dayKey(start);
+    const endKey = dayKey(last);
+
+    // Stepping the calendar date rather than adding 24 hours keeps days right
+    // across daylight saving changes.
+    for (
+      const cursor = localMidnight(start);
+      cursor <= last;
+      cursor.setDate(cursor.getDate() + 1)
+    ) {
+      const key = dayKey(cursor);
+      if (!days.has(key)) {
+        days.set(key, { key, date: new Date(cursor), items: [], distance: 0 });
+      }
+      const day = days.get(key);
+      day.items.push({
+        entry,
+        continuesFromPreviousDay: key !== startKey,
+        continuesNextDay: key !== endKey
+      });
+      // A passage's distance counts on the day it started; the log holds no
+      // per-day split of it.
+      if (key === startKey) {
+        day.distance += entry.distance ?? 0;
+      }
+    }
+  }
+
+  for (const day of days.values()) {
+    day.items.sort((a, b) => b.entry.startTime.localeCompare(a.entry.startTime));
+  }
+  return [...days.values()].sort((a, b) => b.key.localeCompare(a.key));
+}

package/public/js/format.mjs

@@ -0,0 +1,84 @@
+// Display formatting. The API speaks Signal K SI units; conversion to what a
+// sailor reads happens here, and only here, on the webapp side.
+
+const KNOTS_PER_MPS = 3600 / 1852;
+const METRES_PER_NM = 1852;
+
+function wrap360(degrees) {
+  return ((degrees % 360) + 360) % 360;
+}
+
+function toDegrees(radians) {
+  return (radians * 180) / Math.PI;
+}
+
+export function createFormatter({ locale, units }) {
+  const number = (digits) =>
+    new Intl.NumberFormat(locale, { minimumFractionDigits: digits, maximumFractionDigits: digits });
+  const oneDecimal = number(1);
+  const noDecimal = number(0);
+  const missing = (value) => value === null || value === undefined || Number.isNaN(value);
+
+  const dayFormat = new Intl.DateTimeFormat(locale, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+  const shortDateFormat = new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short' });
+  const timeFormat = new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit' });
+
+  function sexagesimal(value, positive, negative, width) {
+    const absolute = Math.abs(value);
+    let degrees = Math.floor(absolute);
+    let minutes = Number(((absolute - degrees) * 60).toFixed(2));
+    if (minutes >= 60) {
+      degrees += 1;
+      minutes = 0;
+    }
+    const hemisphere = value >= 0 ? positive : negative;
+    return `${String(degrees).padStart(width, '0')}°${minutes.toFixed(2).padStart(5, '0')}′${hemisphere}`;
+  }
+
+  return {
+    speed: (mps) =>
+      missing(mps) ? '' : `${oneDecimal.format(mps * KNOTS_PER_MPS)} ${units.knots}`,
+    distance: (metres) =>
+      missing(metres) ? '' : `${oneDecimal.format(metres / METRES_PER_NM)} ${units.nauticalMiles}`,
+    bearing: (radians) => {
+      if (missing(radians)) {
+        return '';
+      }
+      const degrees = Math.round(wrap360(toDegrees(radians))) % 360;
+      return `${String(degrees).padStart(3, '0')}°`;
+    },
+    // Apparent wind angle: negative to port, positive to starboard.
+    angle: (radians) => {
+      if (missing(radians)) {
+        return '';
+      }
+      const degrees = Math.round(wrap360(toDegrees(radians) + 180) - 180);
+      return `${degrees > 0 ? '+' : ''}${degrees}°`;
+    },
+    depth: (metres) => (missing(metres) ? '' : `${oneDecimal.format(metres)} m`),
+    pressure: (pascals) => (missing(pascals) ? '' : `${noDecimal.format(pascals / 100)} hPa`),
+    temperature: (kelvin) => (missing(kelvin) ? '' : `${oneDecimal.format(kelvin - 273.15)} °C`),
+    duration: (seconds) => {
+      if (missing(seconds)) {
+        return '';
+      }
+      const minutes = Math.round(seconds / 60);
+      if (minutes < 60) {
+        return `${minutes} min`;
+      }
+      return `${Math.floor(minutes / 60)} h ${String(minutes % 60).padStart(2, '0')}`;
+    },
+    position: (position) =>
+      position
+        ? `${sexagesimal(position.lat, 'N', 'S', 2)} ${sexagesimal(position.lon, 'E', 'W', 3)}`
+        : '',
+    day: (date) => dayFormat.format(date),
+    shortDate: (value) => shortDateFormat.format(new Date(value)),
+    time: (value) => timeFormat.format(new Date(value))
+  };
+}