fix: 同一天有多个运动时选中地图路线显示错误问题 (#468)

scripts/gpxtrackposter/grid_drawer.py

@@ -74,5 +74,5 @@ def _draw_track(self, dr: svgwrite.Drawing, tr: Track, size: XY, offset: XY):
                 stroke_linejoin="round",
                 stroke_linecap="round",
             )
-            polyline.set_desc(title=date_title)
+            polyline.set_desc(title=date_title, desc=tr.run_id)
             dr.add(polyline)

scripts/gpxtrackposter/track.py

@@ -114,6 +114,7 @@ def load_from_db(self, activity):
             summary_polyline = filter_out(activity.summary_polyline)
         polyline_data = polyline.decode(summary_polyline) if summary_polyline else []
         self.polylines = [[s2.LatLng.from_degrees(p[0], p[1]) for p in polyline_data]]
+        self.run_id = activity.run_id
 
     def bbox(self):
         """Compute the smallest rectangle that contains the entire track (border box)."""

src/components/RunTable/RunRow.jsx

@@ -11,7 +11,7 @@ const RunRow = ({ elementIndex, locateActivity, run, runIndex, setRunIndex }) =>
   const handleClick = (e) => {
     if (runIndex === elementIndex) return;
     setRunIndex(elementIndex);
-    locateActivity(run.start_date_local.slice(0, 10));
+    locateActivity([run.run_id]);
   };
 
   return (

src/pages/index.jsx

@@ -69,22 +69,22 @@ const Index = () => {
     changeByItem(title, 'Title', filterTitleRuns, false);
   };
 
-  const locateActivity = (runDate) => {
-    const activitiesOnDate = runs.filter((r) => r.start_date_local.slice(0, 10) === runDate);
+  const locateActivity = (runIds) => {
+    const ids = new Set(runIds)
 
-    if (!activitiesOnDate.length) {
+    const selectedRuns = runs.filter((r) => ids.has(r.run_id));
+
+    if (!selectedRuns.length) {
       return;
     }
 
-    const sortedActivities = activitiesOnDate.sort((a, b) => b.distance - a.distance);
-    const info = sortedActivities[0];
+    const lastRun = selectedRuns.sort(sortDateFunc)[0];
 
-    if (!info) {
+    if (!lastRun) {
       return;
     }
-
-    setGeoData(geoJsonForRuns([info]));
-    setTitle(titleForShow(info));
+    setGeoData(geoJsonForRuns(selectedRuns));
+    setTitle(titleForShow(lastRun));
     clearInterval(intervalId);
     scrollToMap();
   };
@@ -126,15 +126,27 @@ const Index = () => {
       if (target) {
         const tagName = target.tagName.toLowerCase()
 
-        if ((tagName === 'rect' &&
+        // click the github-stat style svg
+        if (tagName === 'rect' &&
           parseFloat(target.getAttribute('width')) === 2.6 &&
           parseFloat(target.getAttribute('height')) === 2.6 &&
-          target.getAttribute('fill') !== '#444444'
-        ) || (
-            tagName === 'polyline'
-          )) {
+          target.getAttribute('fill') !== '#444444') {
+
           const [runDate] = target.innerHTML.match(/\d{4}-\d{1,2}-\d{1,2}/) || [`${+thisYear + 1}`];
-          locateActivity(runDate)
+          const runIDsOnDate = runs.filter((r) => r.start_date_local.slice(0, 10) === runDate).map((r) => r.run_id)
+          if (!runIDsOnDate.length) {
+            return
+          }
+          locateActivity(runIDsOnDate)
+
+        } else if (tagName === 'polyline') { // click the route grid svg
+          const desc = target.getElementsByTagName('desc')[0]
+          if (!desc) { return }
+          const run_id = Number(desc.innerHTML)
+          if (!run_id) {
+            return
+          }
+          locateActivity([run_id])
         }
       }
     })