signalk-chiplog 2.13.0 → 2.15.0

package/CHANGELOG.md

@@ -6,6 +6,30 @@ All notable changes to Chiplog are documented here. The format follows
 
 ## [Unreleased]
 
+## [2.15.0] - 2026-10-30
+
+### Added
+
+- **Delete an instrument reading.** An administrator can delete any reading from a passage's journal (trash icon on its
+  row), including those taken at departure and arrival. Any log line, automatic ones included, can now be deleted from
+  the journal too.
+- **Link to the passage in the summary emails.** A new **Server address for the summary link** setting; each summary
+  then ends with a link that opens the passage in the webapp. Without it, no link.
+- **Icon buttons in the journal**: edit and delete are a pencil and a bin instead of words.
+- **Hour scale on the tide graph**: the passage page's curve is graduated every three hours, in the logbook's time zone.
+
+## [2.14.0] - 2026-10-25
+
+### Added
+
+- **Edit the crew from the webapp.** The crew card of a passage has an Edit button: tick or untick names from the crew
+  list, add a new one with an optional role, and save.
+
+### Fixed
+
+- **Deleting a logbook line also deletes its instrument reading.** A note or manoeuvre logged live took a snapshot that
+  stayed in the logbook, and in the PDF, after the line was deleted.
+
 ## [2.13.0] - 2026-10-24
 
 ### Added
@@ -511,7 +535,9 @@ First release.
 - REST API under `/plugins/signalk-chiplog/api`, documented in [docs/API.md](docs/API.md).
 - Single SQLite database through Node's built-in `node:sqlite`: no native module to build.
 
-[Unreleased]: https://github.com/ricard33/signalk-chiplog/compare/v2.13.0...HEAD
+[Unreleased]: https://github.com/ricard33/signalk-chiplog/compare/v2.15.0...HEAD
+[2.15.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.14.0...v2.15.0
+[2.14.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.13.0...v2.14.0
 [2.13.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.12.0...v2.13.0
 [2.12.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.11.0...v2.12.0
 [2.11.0]: https://github.com/ricard33/signalk-chiplog/compare/v2.10.0...v2.11.0

package/README.md

@@ -217,12 +217,13 @@ Open **Chiplog** from the Signal K webapps, or `/signalk-chiplog/`. Reading need
   counter at departure and arrival and the hours run, and the tank levels and battery charge, voltage and current noted
   at departure), and the log: every reading and event in order, including handwritten notes. A passage in progress
   refreshes every minute. Each line's comment can be edited (read/write access); a manoeuvre or note the crew logged
-  themselves can also be **redated** and deleted — automatic lines (alarms, autopilot, weather, corrections) can only be
-  annotated. Correcting a time reads the position back from the track at that time, and leaves it empty when the track
-  has nothing within 2 minutes of it, since the entry was not made where it happened. A time outside the passage, or in
-  the future, is refused, and the departure manoeuvre that opened a passage is moved by changing that passage's
-  departure time in **Corrections** below. Under each position, in grey, its bearing and distance from the nearest
-  landmark.
+  themselves can also be **redated** — automatic lines (alarms, autopilot, weather, corrections) can only be annotated.
+  Any line can be deleted (with the instrument reading taken when it was logged), and so can a reading on its own, which
+  needs an administrator. Correcting a time reads the position back from the track at that time, and leaves it empty
+  when the track has nothing within 2 minutes of it, since the entry was not made where it happened. A time outside the
+  passage, or in the future, is refused, and the departure manoeuvre that opened a passage is moved by changing that
+  passage's departure time in **Corrections** below. Under each position, in grey, its bearing and distance from the
+  nearest landmark.
 - **Corrections** (read/write access):
   - rename the departure, or the arrival once the passage is closed — a passage in progress has none yet to rename;
   - switch an engine period to sail or back;
@@ -361,6 +362,9 @@ dialog, including one just added, carries its own pencil to correct it and a tra
 good; a removal asks to confirm first, and past passages that recorded the name keep it. A new passage starts with the
 same crew as the one before it, ready to adjust rather than re-enter from scratch.
 
+The consultation webapp edits it too: the **Crew** card of a passage has an Edit button to tick or untick names from the
+list and add a new one, then save (read/write access).
+
 ### Logging a manoeuvre
 
 Tap the manoeuvre: tack, gybe, reef in, shake out reef, sail change, anchor down, anchor up, moor, cast off, watch
@@ -479,6 +483,7 @@ In the Signal K admin, **Apps & Plugins → Configuration → Chiplog**.
 | SMTP port                                                        | 587                                              | 587 for submission with STARTTLS, 465 for implicit TLS, 25 for a local relay.                                                                                                                                |
 | SMTP security                                                    | STARTTLS                                         | STARTTLS, TLS, or none for a relay on the boat itself.                                                                                                                                                       |
 | SMTP user name / password                                        | —                                                | Leave empty if the relay needs no authentication.                                                                                                                                                            |
+| Server address for the summary link                              | —                                                | The address the server is reached at by whoever reads the summary, e.g. `https://boat.example.org`. Each summary then links to its passage in the webapp. Empty leaves the link out.                         |
 | Map tiles for the summary                                        | `https://tile.openstreetmap.org/{z}/{x}/{y}.png` | The tiles the summary map is drawn over, e.g. a self-hosted server. Empty draws the track on a plain background.                                                                                             |
 | Logbook language (PDF and summary emails)                        | en                                               | Language of the PDF logbooks on the USB drive and of the summary emails (English or French).                                                                                                                 |
 | Ship's time zone (PDF and summary emails)                        | the server's                                     | Time zone of the PDF logbooks on the USB drive and of the summary emails, e.g. `Europe/Paris`.                                                                                                               |
@@ -592,6 +597,10 @@ summary of every passage once it is over for good.
   distance, the duration, the time under way, the time under engine and under sail, the average and maximum speed, and
   the maximum wind — the same figures and wording as the passage page, in the **logbook language** and **ship's time
   zone** set below.
+- **A link to the passage.** Set **Server address for the summary link** to the address the server is reached at
+  (`https://boat.example.org`, or a LAN address if the readers are aboard) and each summary ends with a link that opens
+  the passage in the webapp. Without it the summary carries no link, as the plugin cannot know its own address from
+  outside.
 - **The map** is drawn on the server and travels inside the message, so it shows up in the mail rather than as an
   attachment to open. Tiles come from OpenStreetMap by default; set your own tile server, or clear the setting to get
   the track drawn on a plain background and send nothing to a tile server.

package/index.js

@@ -261,6 +261,12 @@ module.exports = function (app) {
         title: 'SMTP password',
         format: 'password'
       },
+      summaryMailServerUrl: {
+        type: 'string',
+        title: 'Server address for the summary link',
+        description:
+          'The address the server is reached at from the recipients’ side, e.g. https://boat.example.org or http://192.168.1.10:3000. Each summary then links to its passage in the logbook; empty leaves the link out'
+      },
       summaryMailTileUrl: {
         type: 'string',
         title: 'Map tiles for the summary',
@@ -673,6 +679,7 @@ module.exports = function (app) {
           : SUMMARY_MAIL_DEFAULTS.smtpSecurity,
         smtpUsername: config.smtpUsername || null,
         smtpPassword: config.smtpPassword || null,
+        summaryMailServerUrl: config.summaryMailServerUrl || null,
         summaryMailTileUrl:
           config.summaryMailTileUrl === undefined
             ? SUMMARY_MAIL_DEFAULTS.summaryMailTileUrl

package/lib/api.js

@@ -369,6 +369,13 @@ function registerRoutes(router, { getContext, logError }) {
     handle(({ db }, req) => track.listObservations(db, entryId(req), v.parsePagination(req.query)))
   );
 
+  admin.delete(
+    '/api/observations/:id',
+    handle(({ db }, req) => {
+      track.deleteObservation(db, v.parseId(req.params.id));
+    })
+  );
+
   readonly.get(
     '/api/entries/:id/propulsion',
     handle(({ db }, req) => propulsion.listSegments(db, entryId(req), v.parsePagination(req.query)))

package/lib/events.js

@@ -294,7 +294,9 @@ function checkRetiming(db, event, time, now) {
 
 // The instrument snapshot taken when the event was logged (SPEC §4.1) belongs to
 // the moment the button was pressed, not to the moment the event is redated to:
-// it goes, unless another event of the passage still stands at that time.
+// it goes, unless another event of the passage still stands at that time. Called
+// after the event's row is deleted, or with the event still standing when it is
+// redated (the `id <> ?` below covers both).
 function dropEventSnapshot(db, event) {
   const others = db
     .prepare('SELECT 1 FROM events WHERE entry_id = ? AND time = ? AND id <> ?')
@@ -373,7 +375,8 @@ function pairedAlarmEvent(db, row) {
 }
 
 // Undoing the departure that opened a passage, before the vessel moved and
-// before anything else was logged in it, takes the passage away too.
+// before anything else was logged in it, takes the passage away too. Otherwise
+// the instrument snapshot logged with the event goes with it.
 function deleteEvent(db, id) {
   const row = requireEventRow(db, id);
   withTransaction(db, () => {
@@ -391,8 +394,10 @@ function deleteEvent(db, id) {
     const paired = pairedAlarmEvent(db, row);
     if (paired) {
       db.prepare('DELETE FROM events WHERE id = ?').run(paired.id);
+      dropEventSnapshot(db, toEvent(paired));
     }
     db.prepare('DELETE FROM events WHERE id = ?').run(id);
+    dropEventSnapshot(db, toEvent(row));
   });
 }
 

package/lib/passage-summary.js

@@ -20,6 +20,7 @@ const STYLE = {
   table: 'width:100%;border-collapse:collapse;margin-top:16px;font-size:14px;',
   label: 'padding:6px 12px 6px 0;color:#52606d;white-space:nowrap;',
   value: 'padding:6px 0;text-align:right;font-weight:bold;color:#102a43;',
+  link: 'margin:16px 0 0;font-size:14px;',
   footer: 'margin:18px 0 0;font-size:12px;color:#7b8794;'
 };
 
@@ -103,10 +104,11 @@ function htmlRow(label, value) {
 }
 
 // `mapAvailable` says whether an image part accompanies the message; without
-// one the <img> would show as a broken attachment.
+// one the <img> would show as a broken attachment. `passageUrl`, when given, is
+// where the passage can be opened in the webapp.
 async function renderPassageSummary(
   { entry, trackPoints = [] },
-  { language = 'en', timeZone, vesselName = null, mapAvailable = false } = {}
+  { language = 'en', timeZone, vesselName = null, mapAvailable = false, passageUrl = null } = {}
 ) {
   const { i18n, format: formatModule } = await loadShared();
   const t = i18n.createTranslator(language);
@@ -139,6 +141,7 @@ async function renderPassageSummary(
     '',
     ...facts.map(([label, value]) => `${label}: ${value}`),
     ...(trackPoints.length === 0 ? ['', t('passage.noTrack')] : []),
+    ...(passageUrl ? ['', `${t('mail.link')}: ${passageUrl}`] : []),
     '',
     t('mail.footer')
   ].join('\n');
@@ -158,6 +161,11 @@ ${
 ${lines.map(({ label, place, when: at }) => htmlRow(label, at ? `${place} — ${at}` : place)).join('\n')}
 ${facts.map(([label, value]) => htmlRow(label, value)).join('\n')}
 </table>
+${
+  passageUrl
+    ? `<p style="${STYLE.link}"><a href="${escapeHtml(passageUrl)}">${escapeHtml(t('mail.link'))}</a></p>`
+    : ''
+}
 <p style="${STYLE.footer}">${escapeHtml(t('mail.footer'))}</p>
 </div>
 </body></html>

package/lib/summary-mailer.js

@@ -79,6 +79,16 @@ function writeOffStale(db, now) {
   });
 }
 
+// Where a passage can be opened in the webapp, from the address the crew reaches
+// the server at; nothing when none is configured -- the plugin cannot know its
+// own address from the outside.
+function passageUrl(baseUrl, entryId) {
+  const base = String(baseUrl ?? '')
+    .trim()
+    .replace(/\/+$/, '');
+  return /^https?:\/\/\S+$/i.test(base) ? `${base}/signalk-chiplog/#/passages/${entryId}` : null;
+}
+
 function configurationProblem(settings) {
   if (!settings.smtpHost) {
     return 'no SMTP server is configured';
@@ -135,7 +145,8 @@ function createSummaryMailer({
         language: settings.logbookLanguage,
         timeZone: settings.logbookTimeZone ?? undefined,
         vesselName: vessel,
-        mapAvailable: map !== null
+        mapAvailable: map !== null,
+        passageUrl: passageUrl(settings.summaryMailServerUrl, entryId)
       }
     );
 

package/lib/track.js

@@ -1,4 +1,5 @@
 const { requireEntryRow } = require('./entries');
+const { notFound } = require('./errors');
 const { toPosition, paginate } = require('./rows');
 
 function toTrackPoint(row) {
@@ -68,4 +69,11 @@ function listObservations(db, entryId, { limit, offset }) {
   });
 }
 
-module.exports = { allTrackPoints, allObservations, listObservations };
+function deleteObservation(db, id) {
+  const { changes } = db.prepare('DELETE FROM observations WHERE id = ?').run(id);
+  if (changes === 0) {
+    throw notFound('observation', id);
+  }
+}
+
+module.exports = { allTrackPoints, allObservations, listObservations, deleteObservation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-chiplog",
-  "version": "2.13.0",
+  "version": "2.15.0",
   "description": "Nautical logbook for Signal K: automatic entries, handwritten notes",
   "main": "index.js",
   "files": [

package/public/app.css

@@ -78,6 +78,16 @@ button.link-button {
   padding: 0.2rem 0.4rem;
 }
 
+button.icon-button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem;
+}
+
+button.icon-button.danger {
+  border: none;
+}
+
 button.danger {
   background: none;
   color: var(--danger);
@@ -735,6 +745,17 @@ main {
   stroke-width: 1;
 }
 
+.tide-tick {
+  stroke: var(--border);
+  stroke-width: 1;
+}
+
+.tide-hour {
+  fill: var(--muted);
+  font-size: 11px;
+  text-anchor: middle;
+}
+
 .tide-area {
   fill: var(--accent);
   opacity: 0.12;
@@ -809,6 +830,19 @@ main {
   gap: 0.4rem;
 }
 
+.crew-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.crew-choice {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
 .crew-role {
   color: var(--muted);
   font-size: 0.9rem;

package/public/js/components/CrewCard.mjs

@@ -1,22 +1,205 @@
-import { html } from '../../vendor/preact-htm.mjs';
+import { html, useEffect, useState } from '../../vendor/preact-htm.mjs';
+import { fetchAll } from '../api.mjs';
 import { useLocale } from '../context.mjs';
+import { ErrorNotice } from './common.mjs';
 
-export function CrewCard({ crew }) {
+const sameName = (a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }) === 0;
+
+// Everyone who can be ticked: the passage's own crew first, in the order they
+// were added, then the rest of the roster, then whoever was just typed in. A
+// member the roster no longer holds (`crewMemberId` null) stays listed, since
+// the passage recorded them.
+function candidates(crew, roster, added) {
+  const known = new Set(crew.map((member) => member.crewMemberId));
+  return [
+    ...crew.map((member) => ({
+      key: `${member.id}`,
+      crewMemberId: member.crewMemberId,
+      name: member.name,
+      role: member.role
+    })),
+    ...roster
+      .filter((member) => !known.has(member.id))
+      .map((member) => ({
+        key: `roster-${member.id}`,
+        crewMemberId: member.id,
+        name: member.name,
+        role: member.role
+      })),
+    ...added
+  ];
+}
+
+function CrewEditor({ crew, busy, onSave, onCancel }) {
   const { t } = useLocale();
-  if (crew.length === 0) {
-    return null;
-  }
+  const [roster, setRoster] = useState(null);
+  const [error, setError] = useState(null);
+  const [added, setAdded] = useState([]);
+  const [picked, setPicked] = useState(() => new Set(crew.map((member) => `${member.id}`)));
+  const [name, setName] = useState('');
+  const [role, setRole] = useState('');
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchAll('/crew')
+      .then((items) => !cancelled && setRoster(items))
+      .catch((err) => !cancelled && setError(err));
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const toggle = (key) =>
+    setPicked((previous) => {
+      const next = new Set(previous);
+      if (!next.delete(key)) {
+        next.add(key);
+      }
+      return next;
+    });
+
+  const items = candidates(crew, roster ?? [], added);
+
+  const add = () => {
+    const trimmed = name.trim();
+    if (!trimmed) {
+      return;
+    }
+    const existing = items.find((item) => sameName(item.name, trimmed));
+    if (existing) {
+      setPicked((previous) => new Set(previous).add(existing.key));
+    } else {
+      const key = `added-${added.length}`;
+      setAdded((previous) => [
+        ...previous,
+        { key, crewMemberId: null, name: trimmed, role: role.trim() || null }
+      ]);
+      setPicked((previous) => new Set(previous).add(key));
+    }
+    setName('');
+    setRole('');
+  };
+
+  const submit = (event) => {
+    event.preventDefault();
+    onSave(
+      items
+        .filter((item) => picked.has(item.key))
+        .map((item) =>
+          item.crewMemberId !== null && !item.key.startsWith('added-')
+            ? { crewMemberId: item.crewMemberId }
+            : { name: item.name, role: item.role }
+        )
+    );
+  };
+
+  // Enter in the name or role field adds that person rather than saving the card.
+  const onFieldKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      add();
+    }
+  };
+
+  return html`
+    <form class="crew-editor" onSubmit=${submit}>
+      <${ErrorNotice} error=${error} />
+      ${
+        roster === null && !error
+          ? html`<p class="muted">…</p>`
+          : html`<ul class="crew-list">
+              ${items.map(
+                (item) =>
+                  html`<li key=${item.key}>
+                    <label class="crew-choice">
+                      <input
+                        type="checkbox"
+                        checked=${picked.has(item.key)}
+                        onChange=${() => toggle(item.key)}
+                      />
+                      ${item.name}${item.role ? html` <span class="crew-role">${item.role}</span>` : ''}
+                    </label>
+                  </li>`
+              )}
+            </ul>`
+      }
+      <div class="name-form">
+        <input
+          value=${name}
+          maxlength="100"
+          placeholder=${t('entry.crewName')}
+          aria-label=${t('entry.crewName')}
+          onInput=${(event) => setName(event.currentTarget.value)}
+          onKeyDown=${onFieldKeyDown}
+        />
+        <input
+          value=${role}
+          maxlength="100"
+          placeholder=${t('entry.crewRole')}
+          aria-label=${t('entry.crewRole')}
+          onInput=${(event) => setRole(event.currentTarget.value)}
+          onKeyDown=${onFieldKeyDown}
+        />
+        <button type="button" disabled=${!name.trim()} onClick=${add}>
+          ${t('entry.addCrewMember')}
+        </button>
+      </div>
+      <div class="name-form">
+        <button type="submit" disabled=${busy || (roster === null && !error)}>
+          ${t('common.save')}
+        </button>
+        <button type="button" class="link-button" onClick=${onCancel}>${t('common.cancel')}</button>
+      </div>
+    </form>
+  `;
+}
+
+export function CrewCard({ crew, busy, onSave }) {
+  const { t } = useLocale();
+  const [editing, setEditing] = useState(false);
+
+  const save = (members) => {
+    setEditing(false);
+    onSave(members);
+  };
+
   return html`
     <section class="card crew-card">
-      <h2>${t('passage.crew')}</h2>
-      <ul class="crew-list">
-        ${crew.map(
-          (member) =>
-            html`<li key=${member.id}>
-              ${member.name}${member.role ? html` <span class="crew-role">${member.role}</span>` : ''}
-            </li>`
-        )}
-      </ul>
+      <header class="card-header">
+        <h2>${t('passage.crew')}</h2>
+        ${
+          !editing &&
+          html`<button
+            type="button"
+            class="link-button"
+            disabled=${busy}
+            onClick=${() => setEditing(true)}
+          >
+            ${t('common.edit')}
+          </button>`
+        }
+      </header>
+      ${
+        editing
+          ? html`<${CrewEditor}
+              crew=${crew}
+              busy=${busy}
+              onSave=${save}
+              onCancel=${() => setEditing(false)}
+            />`
+          : crew.length === 0
+            ? html`<p class="muted">${t('entry.noCrew')}</p>`
+            : html`<ul class="crew-list">
+                ${crew.map(
+                  (member) =>
+                    html`<li key=${member.id}>
+                      ${member.name}${
+                        member.role ? html` <span class="crew-role">${member.role}</span>` : ''
+                      }
+                    </li>`
+                )}
+              </ul>`
+      }
     </section>
   `;
 }

package/public/js/components/PassageView.mjs

@@ -355,6 +355,11 @@ export function PassageView({ id }) {
       await request('DELETE', `/entries/${id}`);
       location.hash = '#/';
     });
+  const setCrew = (members) =>
+    act(async () => {
+      await request('PUT', `/entries/${id}/crew`, { members });
+      reload();
+    });
   const editEvent = (event, patch) =>
     act(async () => {
       await request('PATCH', `/events/${event.id}`, patch);
@@ -368,6 +373,12 @@ export function PassageView({ id }) {
       await request('DELETE', `/events/${event.id}`);
       reload();
     });
+  const deleteReading = (reading) =>
+    confirm(t('timeline.deleteReadingConfirm')) &&
+    act(async () => {
+      await request('DELETE', `/observations/${reading.id}`);
+      reload();
+    });
 
   const sameDay =
     entry.endTime && dayKey(new Date(entry.startTime)) === dayKey(new Date(entry.endTime));
@@ -520,7 +531,7 @@ export function PassageView({ id }) {
 
       <${BoatState} entry=${entry} observations=${data.observations} active=${active} />
 
-      <${CrewCard} crew=${entry.crew} />
+      <${CrewCard} crew=${entry.crew} busy=${busy} onSave=${setCrew} />
     </div>
 
     <section class="card">
@@ -534,6 +545,7 @@ export function PassageView({ id }) {
         busy=${busy}
         onEditEvent=${editEvent}
         onDelete=${deleteEvent}
+        onDeleteReading=${deleteReading}
       />
     </section>
 

package/public/js/components/TideCard.mjs

@@ -1,10 +1,12 @@
 import { html } from '../../vendor/preact-htm.mjs';
 import { useLocale } from '../context.mjs';
-import { smoothPath, tideExtremes } from '../tide.mjs';
+import { hourTicks, smoothPath, tideExtremes } from '../tide.mjs';
 
 const CHART_WIDTH = 600;
-const CHART_HEIGHT = 160;
-const PADDING = { top: 16, right: 12, bottom: 12, left: 12 };
+const CHART_HEIGHT = 180;
+// The bottom margin holds the hour scale.
+const PADDING = { top: 16, right: 12, bottom: 32, left: 12 };
+const TICK_LENGTH = 4;
 
 // Pixel coordinates for the curve, an area fill down to the baseline, and the
 // scales used to place the high/low markers at the same spots.
@@ -37,6 +39,7 @@ export function TideCard({ tide, placeName }) {
   }
   const chart = layout(points);
   const extremes = tideExtremes(points);
+  const ticks = hourTicks(points, format.time);
 
   return html`
     <section class="card tide-card">
@@ -57,6 +60,21 @@ export function TideCard({ tide, placeName }) {
           y2=${chart.baseline}
           class="tide-baseline"
         />
+        ${ticks.map(
+          (tick) =>
+            html`<g key=${tick.time}>
+              <line
+                x1=${chart.x(tick.time)}
+                y1=${chart.baseline}
+                x2=${chart.x(tick.time)}
+                y2=${chart.baseline + TICK_LENGTH}
+                class="tide-tick"
+              />
+              <text x=${chart.x(tick.time)} y=${chart.baseline + TICK_LENGTH + 13} class="tide-hour">
+                ${tick.label}
+              </text>
+            </g>`
+        )}
         <path d=${chart.areaPath} class="tide-area" />
         <path d=${chart.linePath} class="tide-line" />
         ${extremes.map(

package/public/js/components/Timeline.mjs

@@ -2,6 +2,7 @@ import { html, useEffect, useRef, useState } from '../../vendor/preact-htm.mjs';
 import { useLocale } from '../context.mjs';
 import { dayKey } from '../days.mjs';
 import { landmarkLine } from '../landmarks.mjs';
+import { IconButton } from './common.mjs';
 import { EDITABLE_EVENT_TYPES, buildRows, describeEvent } from '../log-lines.mjs';
 
 // A dot — the stroke of an i or a full stop — has a single point, which a
@@ -68,10 +69,9 @@ export function EventRemark({ event, manoeuvreLabels }) {
 // the comment on anything the plugin logged itself (SPEC: "an edited comment");
 // what the crew logged (`EDITABLE_EVENT_TYPES`) can also be redated, which makes
 // the server re-read its position from the track. Deleting is offered for what
-// the crew themselves logged (`source: "manual"`) and for an alarm (`sk_alarm`)
-// — which takes its paired line, the raise or the clearing, with it
-// (lib/events.js `pairedAlarmEvent`); other automatic lines (autopilot, weather,
-// corrections) can only be annotated.
+// every line — an alarm (`sk_alarm`) takes its paired line, the raise or the
+// clearing, with it (lib/events.js `pairedAlarmEvent`). The server decides who
+// may: an administrator for a reading, whoever has write access for a line.
 function EventLine({ event, bounds, manoeuvreLabels, busy, onEditEvent, onDelete }) {
   const { t, format } = useLocale();
   const [editing, setEditing] = useState(false);
@@ -143,25 +143,19 @@ function EventLine({ event, bounds, manoeuvreLabels, busy, onEditEvent, onDelete
   return html`
     <${EventRemark} event=${event} manoeuvreLabels=${manoeuvreLabels} />
     <div class="timeline-actions">
-      <button
-        type="button"
-        class="link-button"
+      <${IconButton}
+        icon="edit"
+        label=${t('common.edit')}
         disabled=${busy}
         onClick=${() => setEditing(true)}
-      >
-        ${t('common.edit')}
-      </button>
-      ${
-        (event.source === 'manual' || event.type === 'sk_alarm') &&
-        html`<button
-          type="button"
-          class="link-button danger"
-          disabled=${busy}
-          onClick=${() => onDelete(event)}
-        >
-          ${t('common.delete')}
-        </button>`
-      }
+      />
+      <${IconButton}
+        icon="delete"
+        label=${t('common.delete')}
+        danger
+        disabled=${busy}
+        onClick=${() => onDelete(event)}
+      />
     </div>
   `;
 }
@@ -174,7 +168,8 @@ export function Timeline({
   manoeuvreLabels,
   busy,
   onEditEvent,
-  onDelete
+  onDelete,
+  onDeleteReading
 }) {
   const { t, format } = useLocale();
   const rows = buildRows(events, observations);
@@ -260,7 +255,16 @@ export function Timeline({
                           onEditEvent=${onEditEvent}
                           onDelete=${onDelete}
                         />`
-                      : html`<span class="muted">${t(`observation.${readings.reason}`)}</span>`
+                      : html`<span class="muted">${t(`observation.${readings.reason}`)}</span>
+                          <div class="timeline-actions">
+                            <${IconButton}
+                              icon="delete"
+                              label=${t('common.delete')}
+                              danger
+                              disabled=${busy}
+                              onClick=${() => onDeleteReading(readings)}
+                            />
+                          </div>`
                   }
                 </td>
               </tr>

package/public/js/components/common.mjs

@@ -9,6 +9,37 @@ export function SignInLink({ label }) {
   return html`<a href="/admin/#/login" target="_blank" rel="noopener">${label}</a>`;
 }
 
+const ICON_PATHS = {
+  edit: 'M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z',
+  delete: 'M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 10v6M14 10v6'
+};
+
+// A button drawn as an icon, named for screen readers and as a tooltip.
+export function IconButton({ icon, label, danger, disabled, onClick }) {
+  return html`<button
+    type="button"
+    class=${`link-button icon-button${danger ? ' danger' : ''}`}
+    disabled=${disabled}
+    title=${label}
+    aria-label=${label}
+    onClick=${onClick}
+  >
+    <svg
+      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d=${ICON_PATHS[icon]} />
+    </svg>
+  </button>`;
+}
+
 // Failed actions waiting for the link to come back, so the toast can say, once
 // it does, that there is something to do again.
 const unfinished = new Set();

package/public/js/i18n.mjs

@@ -219,6 +219,7 @@ export const MESSAGES = {
     'mail.subjectVessel': '{vessel} — {route}',
     'mail.when': '{date} ({zone})',
     'mail.mapAlt': 'The track of the passage on the map',
+    'mail.link': 'Open the passage in the logbook',
     'mail.footer': 'Sent automatically by Chiplog, this vessel’s logbook.',
 
     'map.seamarks': 'Seamarks',
@@ -305,6 +306,7 @@ export const MESSAGES = {
     'timeline.timeFromTrack': 'Changing the time reads the position back from the track.',
     'timeline.deleteConfirm': 'Delete this log line? This cannot be undone.',
     'timeline.deleteAlarmConfirm': 'Delete this alarm and its resolution? This cannot be undone.',
+    'timeline.deleteReadingConfirm': 'Delete this instrument reading? This cannot be undone.',
 
     // Where the position is from the landmark, the way a logbook gives it.
     'landmark.bearing': '{distance} {cardinal} ({bearing}) — {name}',
@@ -801,6 +803,7 @@ export const MESSAGES = {
     'mail.subjectVessel': '{vessel} — {route}',
     'mail.when': 'Le {date} ({zone})',
     'mail.mapAlt': 'La trace de la navigation sur la carte',
+    'mail.link': 'Ouvrir la navigation dans le journal',
     'mail.footer': 'Envoyé automatiquement par Chiplog, le journal de bord de ce navire.',
 
     'map.seamarks': 'Balisage',
@@ -888,6 +891,7 @@ export const MESSAGES = {
     'timeline.timeFromTrack': 'Changer l’heure relit la position dans la trace.',
     'timeline.deleteConfirm': 'Supprimer cette ligne du journal ? C’est irréversible.',
     'timeline.deleteAlarmConfirm': 'Supprimer cette alarme et sa résolution ? C’est irréversible.',
+    'timeline.deleteReadingConfirm': 'Supprimer ce relevé des instruments ? C’est irréversible.',
 
     // Le relèvement inverse : où se trouve le bateau par rapport à l’amer.
     // Sans préposition, qui varierait avec l’aire de vent (au NE, à l’E).

package/public/js/tide.mjs

@@ -17,6 +17,17 @@ export function tideExtremes(points) {
   return extremes;
 }
 
+// The hour scale under the curve: the samples whose local hour is a multiple of
+// `step`, labelled by `label` (the formatter's `time`, so the zone and the
+// 24-hour clock are the reader's). Samples are used as they are rather than
+// recomputed from the clock, so a zone that is not on a whole hour still lines
+// up with the curve.
+export function hourTicks(points, label, step = 3) {
+  return points
+    .map((point) => ({ time: point.time, label: label(point.time) }))
+    .filter((tick) => Number(tick.label.slice(0, 2)) % step === 0);
+}
+
 // A smoothed SVG path through the points, quadratic Bezier segments via
 // midpoints -- simple, and hourly samples are dense enough that it reads as
 // a real tide curve rather than a jagged line.