@signalk/tracks-plugin 3.1.1 → 3.2.0

package/public/tracks.js

@@ -25,6 +25,9 @@
 const WINDOW_V2 = 'P30D'
 const WINDOW_V1 = '30d'
 
+/** This plugin's id, which the server stamps on its tracks as `providerId`. */
+const PROVIDER_ID = 'tracks'
+
 /**
  * Ceiling on the list request.
  *
@@ -36,6 +39,10 @@ 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_V2}`
+/** One track by its id, on a server that serves them so. */
+const TRACK_URL = '../../signalk/v2/api/tracks/'
+/** Every import, in the shape of the list's rows; the window above misses old and untimed ones. */
+const IMPORTS_URL = '../../plugins/tracks/imports'
 
 const status = document.getElementById('status')
 const table = document.getElementById('tracks')
@@ -56,8 +63,8 @@ function label({ context, contextName, isSelf }) {
   if (contextName) {
     return `AIS ${contextName}`
   }
-  const mmsi = /urn:mrn:imo:mmsi:(\d+)$/.exec(context)
-  return mmsi ? `AIS ${mmsi[1]}` : context
+  const mmsi = /urn:mrn:imo:mmsi:(\d+)$/.exec(context ?? '')
+  return mmsi ? `AIS ${mmsi[1]}` : (context ?? 'No vessel')
 }
 
 /** ISO-8601 from the API, rendered in the viewer's own locale and zone. */
@@ -73,16 +80,48 @@ function row(properties) {
   if (properties.isSelf) {
     name.className = 'self'
   }
+  // An imported track names the vessel it belongs to and has a name of its
+  // own; without the second it reads exactly like that vessel's recording.
+  if (typeof properties.name === 'string') {
+    const imported = document.createElement('span')
+    imported.className = 'imported'
+    imported.textContent = ` (imported: ${properties.name})`
+    name.append(imported)
+  }
   tr.append(
     name,
     cell(when(properties.from)),
     cell(when(properties.to)),
     cell(properties.pointCount, 'num'),
     exportCell(properties),
+    deleteCell(properties),
   )
   return tr
 }
 
+/**
+ * A button asking `bin.js` to delete this track.
+ *
+ * Handed over as an event rather than handled here, so the list stays a page
+ * that only reads; a track that cannot be addressed gets none.
+ */
+function deleteCell(properties) {
+  const td = document.createElement('td')
+  // The server names a track `providerId:trackId`; one that hands out the
+  // provider's own ids has no route to delete them by.
+  const { id, providerId } = properties
+  if (typeof id === 'string' && typeof providerId === 'string' && id.startsWith(`${providerId}:`)) {
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.textContent = 'Delete…'
+    button.addEventListener('click', () => {
+      document.dispatchEvent(new CustomEvent('tracks:delete', { detail: { ...properties, label: label(properties) } }))
+    })
+    td.append(button)
+  }
+  return td
+}
+
 /**
  * A link that downloads this track as GPX.
  *
@@ -90,13 +129,27 @@ function row(properties) {
  * 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 }) {
+function exportCell(properties) {
+  const { providerId, context, isSelf } = properties
   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_V1}`
+  const trackId = localId(properties)
+  // An import is exported as it was imported, never as the recording of the
+  // vessel it names; v1 does not know imports at all. Only this plugin's own:
+  // another provider's ids mean nothing to its route.
+  if (typeof trackId === 'string' && trackId.startsWith('imported:')) {
+    if (providerId !== undefined && providerId !== PROVIDER_ID) {
+      return td
+    }
+    link.href = `../../plugins/tracks/imports/${encodeURIComponent(trackId)}/track.gpx`
+  } else if (typeof context === 'string') {
+    // `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_V1}`
+  } else {
+    return td
+  }
   link.textContent = 'GPX'
   link.rel = 'nofollow'
   td.append(link)
@@ -123,14 +176,68 @@ function show(message, state) {
   }
 }
 
+/**
+ * Every imported track, or none when the server cannot list them: one that
+ * predates the route, or keeps it to administrators. The list then shows what
+ * the Track API returns, as it always has.
+ */
+async function allImports(signal) {
+  try {
+    const response = await fetch(IMPORTS_URL, { credentials: 'include', signal })
+    const body = response.ok ? await response.json() : undefined
+    return Array.isArray(body) ? body : []
+  } catch {
+    return []
+  }
+}
+
+/**
+ * A track's id without the provider prefix, which a server older than the
+ * Track API's write routes leaves off; the import listing always carries it.
+ */
+function localId(properties) {
+  const { id, providerId } = properties ?? {}
+  return typeof id === 'string' && typeof providerId === 'string' && id.startsWith(`${providerId}:`)
+    ? id.slice(providerId.length + 1)
+    : id
+}
+
+/**
+ * Whether the server names tracks `providerId:trackId`. Its listing shows it;
+ * with nothing listed, asking it for one import by that name does.
+ */
+async function namesByProvider(listed, unlisted, signal) {
+  if (listed.length > 0) {
+    return listed.some(
+      (properties) =>
+        typeof properties?.providerId === 'string' &&
+        typeof properties.id === 'string' &&
+        properties.id.startsWith(`${properties.providerId}:`),
+    )
+  }
+  if (unlisted.length === 0) {
+    return false
+  }
+  try {
+    const response = await fetch(`${TRACK_URL}${encodeURIComponent(unlisted[0].id)}`, {
+      credentials: 'include',
+      signal,
+    })
+    return response.ok
+  } catch {
+    return false
+  }
+}
+
 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)
+  const imports = allImports(deadline)
+  let response
   try {
     response = await fetch(TRACKS_URL, { credentials: 'include', signal: deadline })
   } catch {
@@ -171,13 +278,24 @@ async function load() {
   }
   // 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
+  const listed = body.features.map((feature) => feature?.properties)
+  const ids = new Set(listed.map(localId))
+  const unlisted = (await imports).filter((properties) => !ids.has(localId(properties)))
+  // A server older than the Track API's write routes names tracks without
+  // their provider and cannot delete by id, so the imports added here follow
+  // suit there rather than offer a delete that cannot work.
+  const older = (await namesByProvider(listed, unlisted, deadline))
+    ? unlisted
+    : unlisted.map((properties) => ({ ...properties, id: localId(properties), providerId: undefined }))
   // Newest first: the track someone came to look at is almost always the one
   // that just finished.
-  const sorted = features
-    .map((feature) => feature?.properties)
+  const sorted = [...listed, ...older]
+    // An import may name no vessel; it is still listed, so it can be deleted.
     .filter(
-      (properties) => properties && typeof properties.context === 'string' && Number.isFinite(properties.pointCount),
+      (properties) =>
+        properties &&
+        (typeof properties.context === 'string' || typeof properties.name === 'string') &&
+        Number.isFinite(properties.pointCount),
     )
     .sort((a, b) => String(b.to ?? '').localeCompare(String(a.to ?? '')))
 
@@ -190,7 +308,8 @@ async function load() {
 
   tbody.replaceChildren(...sorted.map(row))
   table.hidden = false
-  show(`${sorted.length} track${sorted.length === 1 ? '' : 's'} in the last 30 days.`)
+  const tracks = `${sorted.length} track${sorted.length === 1 ? '' : 's'}`
+  show(older.length > 0 ? `${tracks}: the last 30 days, and every import.` : `${tracks} in the last 30 days.`)
 }
 
 void load()