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

* fix: 同一天有多个运动时选中地图路线显示错误问题 * refactor: 点击缩略图判断由具体时间改为 run_id
ben-29 · Aug 5, 2023 · 3ea7192 · 3ea7192
1 parent 85bcf3b
commit 3ea7192
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/scripts/gpxtrackposter/grid_drawer.py b/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)
diff --git a/scripts/gpxtrackposter/track.py b/scripts/gpxtrackposter/track.py
@@ -116,6 +116,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)."""

diff --git a/src/components/RunTable/RunRow.jsx b/src/components/RunTable/RunRow.jsx
@@ -14,7 +14,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 (

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -74,22 +74,22 @@ const Index = () => {
     changeByItem(type, 'Type', filterTypeRuns, 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();
   };
@@ -131,15 +131,27 @@ const Index = () => {
       if (target) {
         const tagName = target.tagName.toLowerCase()
 
-        if ((tagName === 'rect' &&
+        // 点击的是 github 样式 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') { // 点击的是路线缩略图
+          const desc = target.getElementsByTagName('desc')[0]
+          if (!desc) { return }
+          const run_id = Number(desc.innerHTML)
+          if (!run_id) {
+            return
+          }
+          locateActivity([run_id])
         }
       }
     })