@signalk/tracks-plugin 3.0.0-beta.2 → 3.0.0-beta.4

package/public/tracks.js

@@ -0,0 +1,192 @@
+/**
+ * Track list for the management webapp.
+ *
+ * Reads the v2 Track API with `geometry=false`, which answers with each
+ * track's metadata and no coordinates — the same query the API already serves,
+ * so listing hundreds of tracks costs nothing like fetching them.
+ *
+ * Plain modules and no build step: the plugin ships `public/` as static files
+ * and the server mounts it directly, so anything needing a bundler would mean
+ * a second build output for a page this size.
+ */
+
+/**
+ * How far back the list reaches.
+ *
+ * The API refuses an unbounded multi-context query — "a time window (from or
+ * duration) is required unless a single context is given" — because listing
+ * every track a server ever saw is a question with no cheap answer. Thirty
+ * days covers the passage someone is looking for while keeping the query
+ * something the store can serve.
+ */
+const WINDOW = 'P30D'
+
+/**
+ * Ceiling on the list request.
+ *
+ * Generous, because a month of tracks on a busy receiver is a real query, not
+ * a hung one — this exists to end a request that will never answer, not to
+ * hurry a slow store.
+ */
+const REQUEST_TIMEOUT_MS = 30_000
+
+/** Relative, because the server mounts this under /@signalk/tracks-plugin. */
+const TRACKS_URL = `../../signalk/v2/api/tracks?geometry=false&duration=${WINDOW}`
+
+const status = document.getElementById('status')
+const table = document.getElementById('tracks')
+const tbody = table.querySelector('tbody')
+
+/**
+ * The label for a track, matching `trackLabel()` on the server.
+ *
+ * The API gives `contextName` — the vessel's own name, undecorated and absent
+ * when unknown — plus `isSelf`. Turning those into something a person
+ * recognises is the client's job, and it has to agree with what v1 returns or
+ * the same track reads differently depending on which screen it is on.
+ */
+function label({ context, contextName, isSelf }) {
+  if (isSelf) {
+    return 'Own Ship'
+  }
+  if (contextName) {
+    return `AIS ${contextName}`
+  }
+  const mmsi = /urn:mrn:imo:mmsi:(\d+)$/.exec(context)
+  return mmsi ? `AIS ${mmsi[1]}` : context
+}
+
+/** ISO-8601 from the API, rendered in the viewer's own locale and zone. */
+function when(iso) {
+  const at = new Date(iso)
+  return Number.isNaN(at.getTime()) ? '—' : at.toLocaleString()
+}
+
+function row(properties) {
+  const tr = document.createElement('tr')
+  const name = document.createElement('td')
+  name.textContent = label(properties)
+  if (properties.isSelf) {
+    name.className = 'self'
+  }
+  tr.append(
+    name,
+    cell(when(properties.from)),
+    cell(when(properties.to)),
+    cell(properties.pointCount, 'num'),
+    exportCell(properties),
+  )
+  return tr
+}
+
+/**
+ * A link that downloads this track as GPX.
+ *
+ * A plain link rather than a fetch: the browser already knows how to save a
+ * response with a Content-Disposition on it, and the server sets one. Doing it
+ * by hand would mean holding a whole track in memory to build a blob.
+ */
+function exportCell({ context, isSelf }) {
+  const td = document.createElement('td')
+  const link = document.createElement('a')
+  // `self` resolves server-side; using it keeps the URL short and avoids
+  // guessing how the own vessel's context should be spelled.
+  const vessel = isSelf ? 'self/track.gpx' : `vessels/${encodeURIComponent(context)}/track.gpx`
+  link.href = `../../signalk/v1/api/${vessel}?duration=${WINDOW}`
+  link.textContent = 'GPX'
+  link.rel = 'nofollow'
+  td.append(link)
+  return td
+}
+
+function cell(text, className) {
+  const td = document.createElement('td')
+  // textContent, never innerHTML: a vessel name arrives from an AIS
+  // transmission and is not ours to trust as markup.
+  td.textContent = String(text)
+  if (className) {
+    td.className = className
+  }
+  return td
+}
+
+function show(message, state) {
+  status.textContent = message
+  if (state) {
+    status.dataset.state = state
+  } else {
+    delete status.dataset.state
+  }
+}
+
+async function load() {
+  let response
+  // Bounded, because an unsettled fetch is the one failure the page cannot
+  // recover from: every other path ends in an error message, while a stalled
+  // server or proxy leaves it on "Loading…" indefinitely, which reads as a
+  // hang rather than a failure. The signal stays armed through json() below,
+  // so a response that stops mid-body is caught too.
+  const deadline = AbortSignal.timeout(REQUEST_TIMEOUT_MS)
+  try {
+    response = await fetch(TRACKS_URL, { credentials: 'include', signal: deadline })
+  } catch {
+    show(deadline.aborted ? 'The server did not answer in time.' : 'Could not reach the server.', 'error')
+    return
+  }
+  // 501 is the server saying no provider is registered, which is a different
+  // thing from an error and worth telling the user plainly.
+  if (response.status === 501) {
+    show('No track provider is registered on this server.', 'error')
+    return
+  }
+  if (!response.ok) {
+    show(`The server answered ${response.status}.`, 'error')
+    return
+  }
+
+  let body
+  try {
+    body = await response.json()
+  } catch {
+    // A 200 carrying something that is not JSON: a proxy's error page, or a
+    // body that stops mid-stream, which the deadline above aborts here rather
+    // than at the fetch. Without this the rejection escapes `void load()` and
+    // the page sits on "Loading…" forever, which looks like a hang.
+    show(
+      deadline.aborted ? 'The server did not answer in time.' : 'The server sent a response this page could not read.',
+      'error',
+    )
+    return
+  }
+  // A 200 carrying something else entirely -- an error object, a login page --
+  // is a failure, not an empty list. Reporting "no tracks" for it would tell
+  // the user the opposite of what happened.
+  if (body?.type !== 'FeatureCollection' || !Array.isArray(body.features)) {
+    show('The server sent a response this page could not read.', 'error')
+    return
+  }
+  // Individual entries are still skipped rather than thrown on: one malformed
+  // feature should not blank a list that is otherwise fine.
+  const features = body.features
+  // Newest first: the track someone came to look at is almost always the one
+  // that just finished.
+  const sorted = features
+    .map((feature) => feature?.properties)
+    .filter(
+      (properties) => properties && typeof properties.context === 'string' && Number.isFinite(properties.pointCount),
+    )
+    .sort((a, b) => String(b.to ?? '').localeCompare(String(a.to ?? '')))
+
+  // Checked after filtering, not before: a response of nothing but malformed
+  // features would otherwise draw an empty table reading "0 tracks".
+  if (sorted.length === 0) {
+    show('No tracks in the last 30 days.')
+    return
+  }
+
+  tbody.replaceChildren(...sorted.map(row))
+  table.hidden = false
+  show(`${sorted.length} track${sorted.length === 1 ? '' : 's'} in the last 30 days.`)
+}
+
+void load()