Make leg numbers more prominent on LRR page

Include in map leg popover
Clean up formatting in segment calculator

Author: nickswalker

js/LegCalculator.js

@@ -111,12 +111,19 @@ export class LegCalculator extends HTMLElement {
 
           // "values" has the "to" function from "format" applied
           // "unencoded" contains the raw numerical slider values
+          let segmentLegDesc = ""
+          if (rightValue - leftValue === 1) {
+            segmentLegDesc = `<div class="text-secondary">Leg ${leftValue + 1}</div>`
+          } else {
+              segmentLegDesc = `<div class="text-secondary">${rightValue - leftValue} legs (${leftValue + 1} through
+                  ${rightValue})</div>`
+          }
           let segmentDesc = `
 <div class="d-flex flex-column flex-lg-row justify-content-between align-items-baseline">
 <h5>${segmentName}</h5>
 <div class="d-flex flex-column text-lg-end flex-shrink-0 mb-1">
     <h6 class="mb-0">${distance.toFixed(2)}mi ↑${ascent.toFixed(0)}ft ↓${descent.toFixed(0)}ft</h6>
-    <div class="text-secondary">${rightValue - leftValue} legs (${leftValue + 1} through ${rightValue})</div>
+    ${segmentLegDesc}
 </div>
 </div>`
           container.querySelector("#leg-calculator-description").innerHTML = segmentDesc

js/RelayMap.js

@@ -432,7 +432,11 @@ export class RelayMap extends LitElement {
             return bounds.extend(coord);
         }, new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
 
-        console.log("Clicked leg", leg.properties.id, "at coordinates", coordinates);
+        const legDetails = {
+            ...leg.properties
+        }
+        legDetails.id += 1; // Convert to 1-based index for display
+        legDetails.coordinates = coordinates; // Store the coordinates for elevation profile
         this.currentLegPopup = new maplibregl.Popup({
             anchor: "bottom-left",
             offset: [16, 0],
@@ -444,10 +448,7 @@ export class RelayMap extends LitElement {
             .setHTML(formatLegDescription(
                 this.exchangeNames[leg.properties.start_exchange],
                 this.exchangeNames[leg.properties.end_exchange],
-                leg.properties,
-                false,
-                false,
-                coordinates
+                legDetails
             ))
             .addTo(this.map);
 

js/common.js

@@ -55,12 +55,17 @@ export function durationToSeconds(duration) {
     return hours * 3600 + minutes * 60 + seconds
 }
 
-export function formatLegDescription(startStation, endStation, leg, includeLegNumber=false, linkStations=false, coords=null){
+export function formatLegDescription(startStation, endStation, leg){
     let legNumber = ""
-    if (includeLegNumber) legNumber = `<span class="leg-number">${leg.id}:</span> `
+    let { id, coordinates, notes, distance_mi, ascent_ft, descent_ft } = leg
+    if (id) legNumber = `<span class="leg-number">${id}:</span> `
+    let profileSummary = ""
+    if (ascent_ft && descent_ft) {
+        profileSummary =<h6>${distance_mi.toFixed(2)}mi ↑${ascent_ft.toFixed(0)}ft ↓${descent_ft.toFixed(0)}ft</h6>
+    }
     let profile = ""
-    if (coords) profile = "<elevation-profile></elevation-profile>"
-    return `<h5 class="mb-1">${legNumber}${startStation} to ${endStation}</h5><h6>${leg.distance_mi.toFixed(2)}mi ↑${leg.ascent_ft.toFixed(0)}ft ↓${leg.descent_ft.toFixed(0)}ft</h6>${profile}<p class="mb-0">${leg.notes}</p>`
+    if (coordinates && coordinates.length > 0) profile = "<elevation-profile></elevation-profile>"
+    return `<h5 class="mb-1">${legNumber}${startStation} to ${endStation}</h5>${profileSummary}${profile}<p class="mb-0">${notes}</p>`
 }
 
 export function download(content, mimeType, filename) {