diff --git a/client/src/pages/gps/RoutesTab.tsx b/client/src/pages/gps/RoutesTab.tsx index b6c3cde..f8a60d7 100644 --- a/client/src/pages/gps/RoutesTab.tsx +++ b/client/src/pages/gps/RoutesTab.tsx @@ -259,22 +259,20 @@ export function GpsRoutesTab() { const displayedPoints = activePoints.filter((_, idx) => idx % trackPointsStep === 0); const pointsThinned = displayedPoints.length < activePoints.length; - // Попап точки трека: время, скорость (км/ч), направление, координаты - const pointPopupHtml = (p: GpsTrackPoint): string => { - const time = new Date(p.recordedAt).toLocaleString('ru-RU'); - const speed = p.speed != null ? `${Math.round(p.speed)} км/ч` : '—'; - const course = p.course != null ? `
Направление: ${Math.round(p.course)}°` : ''; - return `${time}
Скорость: ${speed}${course}
${p.lat.toFixed(6)}, ${p.lng.toFixed(6)}`; - }; + // Формат даты/времени точки для инфо-панели + const pointTime = (p: GpsTrackPoint): string => new Date(p.recordedAt).toLocaleString('ru-RU'); - // Клик по точке трека: попап (на уровне карты) + плейхед на эту точку + // Клик по точке трека: инфо-панель + плейхед на эту точку const seekToPoint = (p: GpsTrackPoint) => { + setSelectedPoint(p); setPlayTs(new Date(p.recordedAt).getTime()); setPlayEpoch((e) => e + 1); }; // Раскраска трека по скорости (включена по умолчанию) const [colorize, setColorize] = useState(true); + // Выбранная кликом точка трека — инфо-панель поверх карты (вместо balloon карты) + const [selectedPoint, setSelectedPoint] = useState(null); // Сегменты трека, окрашенные по скорости в начальной точке сегмента. // При > 800 точек прореживаем до ~800 для раскраски (базовая полилиния @@ -324,7 +322,6 @@ export function GpsRoutesTab() { kind: 'dot' as const, color: '#64748b', course: p.course ?? undefined, - popup: pointPopupHtml(p), onClick: () => seekToPoint(p), noCluster: true, zIndex: 2, @@ -399,12 +396,34 @@ export function GpsRoutesTab() { )} - +
+ + {/* Инфо-панель выбранной точки трека (своя, не balloon карты) */} + {selectedPoint && ( +
+
+ {pointTime(selectedPoint)} + +
+
Скорость: {selectedPoint.speed != null ? `${Math.round(selectedPoint.speed)} км/ч` : '—'}
+ {selectedPoint.course != null &&
Направление: {Math.round(selectedPoint.course)}°
} +
{selectedPoint.lat.toFixed(6)}, {selectedPoint.lng.toFixed(6)}
+
Плейхед установлен на эту точку
+
+ )} +
{/* Легенда раскраски трека по скорости */} {colorizeEnabled && (