signalk-race-control 0.8.0 → 0.9.0

package/README.md

@@ -99,13 +99,22 @@ and a live projected finishing order — during and after the race.
   slow down or take a longer approach); negative means you're behind schedule to make
   the line before the gun. Disappears once the race actually starts, since the
   pre-start approach is moot by then.
-- **Course & chart** — enter lat/lon for the start line, an ordered list of rounding
-  marks, and the finish line (or click **Use my position** if you're sitting at that
-  spot, or type a name to autocomplete against existing SignalK waypoints — e.g. ones
-  already placed from a chart plotter — and pick one to fill in its position; typing
-  lat/lon directly works just as well). Every other known waypoint (not part of this
-  race's own course) shows on the chart too, as a small dim pin with its name, so it's
-  there to reference — or type into a mark's name field — even before it's used.
+- **Course & chart** — set the start line, an ordered list of rounding marks, and the
+  finish line by whichever's easiest: type lat/lon directly, type a name to autocomplete
+  against existing SignalK waypoints (e.g. ones already placed from a chart plotter) and
+  pick one to fill in its position, or use the position button — it reads **Pick on
+  map** while that point is still unset (arm it, then click the spot on the chart
+  below), and switches to **Use my position** once it has one, to re-centre it on
+  wherever you are right now instead. Setting a position this way (map click or self
+  position — not while still typing lat/lon by hand) also suggests a name for it from
+  OpenStreetMap, when there's a real charted place right there and the name field is
+  still empty; typing or picking a waypoint always wins over the suggestion. A mark's
+  own **Pick on map** only turns on once the start line has a position — before that the
+  chart has nothing to anchor its zoom to and is still showing the whole world, not much
+  use to click into (typed lat/lon, autocomplete, and "Use my position" all stay
+  available regardless). Every other known waypoint (not part of this race's own
+  course) shows on the chart too, as a small dim pin with its name, so it's there to
+  reference — or type into a mark's name field — even before it's used.
   The chart itself is a real background map, like freeboard-sk's: it uses whatever
   tile-based chart resource this SignalK server has registered, or falls back to public
   OpenStreetMap + OpenSeaMap tiles when none is configured (same fallback freeboard-sk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-race-control",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "SignalK plugin and webapp for tracking elapsed and handicap-corrected (Time-on-Time) race time, with a per-boat editable TCF and boat names pulled from AIS when available.",
   "main": "index.js",
   "author": "Joachim Bakke <github@heiamoss.com>",

package/public/app.js

@@ -35,6 +35,7 @@
   let chartLayerGroup = null; // holds everything renderChart() redraws, cleared and rebuilt each call
   let chartActiveRaceId; // which race's bounds were last auto-fit, so switching races re-fits once
   let chartFitDone = false;
+  let mapPickTarget = null; // { latInput, lonInput, btn, onPositionChanged } while armed, else null
 
   const raceSelect = document.getElementById('raceSelect');
   const newRaceBtn = document.getElementById('newRaceBtn');
@@ -1152,12 +1153,18 @@
     });
   }
 
-  // One name+lat+lon(+optional "use my position") row, shared by start
-  // line, finish line, and mark entry. The name field autocompletes against
-  // existing SignalK waypoints (e.g. ones already placed on a chart
-  // plotter) — picking one fills in lat/lon (and the name) from it, so a
-  // start/mark/finish position doesn't have to be typed by hand if a
-  // waypoint for it already exists.
+  // One name+lat+lon+position-button row, shared by start line, finish
+  // line, and mark entry. The name field autocompletes against existing
+  // SignalK waypoints (e.g. ones already placed on a chart plotter) —
+  // picking one fills in lat/lon (and the name) from it, so a position
+  // doesn't have to be typed by hand if a waypoint for it already exists.
+  // The one button toggles with whether this row already has a position:
+  // "Pick on map" while empty (arm it, then click the chart below to fill
+  // lat/lon from wherever was clicked), "Use my position" once it has one
+  // (a quick way to re-centre it on wherever you are right now instead).
+  // Mark rows' own map-picking gating (see updateMarkPickGating) is
+  // recomputed on every position-setting action here, on any row, since a
+  // start line change is typically what unlocks it.
   function buildPointRow(point) {
     const row = document.createElement('div');
     row.className = 'course-point-row';
@@ -1191,15 +1198,47 @@
     lonInput.placeholder = 'Lon';
     lonInput.value = point ? point.lon : '';
 
-    const useHereBtn = document.createElement('button');
-    useHereBtn.type = 'button';
-    useHereBtn.className = 'secondary';
-    useHereBtn.textContent = 'Use my position';
-    useHereBtn.addEventListener('click', async () => {
+    const posBtn = document.createElement('button');
+    posBtn.type = 'button';
+    posBtn.className = 'secondary pick-on-map-btn';
+
+    function hasPosition() {
+      return latInput.value !== '' && lonInput.value !== '';
+    }
+    function updatePosBtnLabel() {
+      posBtn.textContent = hasPosition() ? 'Use my position' : 'Pick on map';
+    }
+    // Cheap enough to run on every keystroke — label state and mark
+    // gating both just check whether lat/lon are non-empty.
+    function notifyPositionChanged() {
+      updatePosBtnLabel();
+      updateMarkPickGating();
+    }
+    // The heavier, best-effort name suggestion only makes sense after a
+    // real discrete action (a map click, a self-position fetch) — not on
+    // every keystroke while someone's still typing lat/lon by hand.
+    function handlePositionSet() {
+      notifyPositionChanged();
+      maybeSuggestNameFromPosition(nameInput, latInput.value, lonInput.value);
+    }
+
+    latInput.addEventListener('input', notifyPositionChanged);
+    lonInput.addEventListener('input', notifyPositionChanged);
+
+    posBtn.addEventListener('click', async () => {
+      if (!hasPosition()) {
+        if (mapPickTarget && mapPickTarget.btn === posBtn) {
+          cancelMapPick();
+        } else {
+          armMapPick(latInput, lonInput, posBtn, nameInput.placeholder || 'this point', handlePositionSet);
+        }
+        return;
+      }
       const pos = await fetchSelfPosition();
       if (pos) {
         latInput.value = pos.lat;
         lonInput.value = pos.lon;
+        handlePositionSet();
       } else {
         setCourseStatus('Could not read a current position from SignalK.', true);
       }
@@ -1213,11 +1252,73 @@
         nameInput.value = wp.name;
         latInput.value = wp.lat;
         lonInput.value = wp.lon;
+        notifyPositionChanged();
       }
     );
 
-    row.append(nameWrap, latInput, lonInput, useHereBtn);
-    return { row, nameInput, latInput, lonInput };
+    updatePosBtnLabel();
+    row.append(nameWrap, latInput, lonInput, posBtn);
+    return { row, nameInput, latInput, lonInput, pickBtn: posBtn, hasPosition };
+  }
+
+  // Best-effort: suggests a name for an unnamed point from OpenStreetMap's
+  // reverse geocoding once a position is actually set (by map click or
+  // self-position — not while still typing lat/lon by hand), so a
+  // start/finish pin or a rounding mark doesn't have to be named from
+  // scratch when there's a real charted place right there (a headland, a
+  // skerry, a harbour). Never overwrites a name already typed or already
+  // filled in from picking a waypoint; silently does nothing on any
+  // failure, same spirit as the VET/KTK/waypoint lookups elsewhere.
+  async function maybeSuggestNameFromPosition(nameInput, lat, lon) {
+    if (nameInput.value.trim()) return;
+    try {
+      const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lon}&zoom=16&addressdetails=0`);
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data && data.name && !nameInput.value.trim()) nameInput.value = data.name;
+    } catch (e) {
+      // best-effort only
+    }
+  }
+
+  // Arms "pick on map" mode: the next click on the chart fills this row's
+  // lat/lon from wherever was clicked. Clicking the same button again, a
+  // different row's pick button, or Escape all cancel it.
+  function armMapPick(latInput, lonInput, btn, label, onPositionChanged) {
+    cancelMapPick();
+    mapPickTarget = { latInput, lonInput, btn, onPositionChanged };
+    btn.classList.add('active');
+    courseChart.classList.add('picking');
+    setCourseStatus(`Click the map below to place "${label}".`);
+  }
+
+  function cancelMapPick() {
+    if (!mapPickTarget) return;
+    mapPickTarget.btn.classList.remove('active');
+    mapPickTarget = null;
+    courseChart.classList.remove('picking');
+    setCourseStatus('');
+  }
+
+  // Marks need somewhere on the map worth clicking into — before the start
+  // line has a position, the chart has nothing to anchor its zoom to and
+  // is still showing the whole world (see chartFitDone). This only ever
+  // gates the "Pick on map" state of a mark's button, never "Use my
+  // position" — once a mark already has its own position (typed by hand,
+  // or picked from a waypoint), re-centring it on self is always fine
+  // regardless of the start line.
+  function startLineHasPosition() {
+    return !!(startLineRefs && startLineRefs.some((r) => r.latInput.value !== '' && r.lonInput.value !== ''));
+  }
+
+  function updateMarkPickGating() {
+    const startOk = startLineHasPosition();
+    markRefs.forEach((r) => {
+      if (!r.pickBtn) return;
+      const gated = !r.hasPosition() && !startOk;
+      r.pickBtn.disabled = gated;
+      r.pickBtn.title = gated ? 'Set the start line first — the map needs a position to zoom to before you can pick one for a mark.' : '';
+    });
   }
 
   function renderMarkRows() {
@@ -1275,6 +1376,7 @@
   function loadCourseFormFromRace() {
     const c = (raceState && raceState.course) || { startLine: null, marks: [], finishLine: null };
 
+    cancelMapPick();
     startLineRefs = [buildPointRow(c.startLine ? c.startLine[0] : null), buildPointRow(c.startLine ? c.startLine[1] : null)];
     startLineRefs[0].nameInput.placeholder = 'Pin end name';
     startLineRefs[1].nameInput.placeholder = 'Committee boat end name';
@@ -1289,6 +1391,7 @@
 
     markRefs = (c.marks || []).map((m) => buildMarkRow(m));
     renderMarkRows();
+    updateMarkPickGating();
     setCourseStatus('');
   }
 
@@ -1498,6 +1601,14 @@
     chartMap = L.map(courseChart, { attributionControl: true }).setView([0, 0], 2);
     chartLayerGroup = L.layerGroup().addTo(chartMap);
     addChartBaseLayers(chartMap);
+    chartMap.on('click', (e) => {
+      if (!mapPickTarget) return;
+      const target = mapPickTarget;
+      target.latInput.value = e.latlng.lat.toFixed(6);
+      target.lonInput.value = e.latlng.lng.toFixed(6);
+      cancelMapPick();
+      if (target.onPositionChanged) target.onPositionChanged();
+    });
     return chartMap;
   }
 
@@ -2468,6 +2579,10 @@
   addMarkBtn.addEventListener('click', () => {
     markRefs.push(buildMarkRow(null));
     renderMarkRows();
+    updateMarkPickGating();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && mapPickTarget) cancelMapPick();
   });
   saveCourseBtn.addEventListener('click', saveCourse);
 

package/public/style.css

@@ -300,6 +300,15 @@ main {
   align-items: center;
 }
 
+.course-point-row .course-name-autocomplete .suggestions {
+  /* The name field itself is only 7rem wide to fit inline in the row, but
+     the dropdown it opens shouldn't be squeezed to match — that made boat
+     and waypoint names unreadable. right:auto lets it grow past the
+     parent's edge instead of being pinned to it. */
+  right: auto;
+  min-width: 16rem;
+}
+
 .course-point-row .course-name-autocomplete {
   position: relative;
   width: 7rem;
@@ -330,6 +339,16 @@ main {
   font-size: 0.75rem;
 }
 
+.course-point-row button.pick-on-map-btn.active {
+  background: var(--accent);
+  color: #04202e;
+  border-color: var(--accent);
+}
+
+.chart-map.picking {
+  cursor: crosshair;
+}
+
 .course-actions {
   margin-top: 0.75rem;
   display: flex;