diff --git a/frontend/src/components/Map.vue b/frontend/src/components/Map.vue index 95545d0..91ee71f 100644 --- a/frontend/src/components/Map.vue +++ b/frontend/src/components/Map.vue @@ -50,7 +50,7 @@ <div class="timeline"> <Timeline :loading="loading" :points="gpsPoints" - @point-hover="highlightPoint(pointsLayer, $event)" /> + @point-hover="onTimelinePointHover" /> </div> </div> </main> @@ -227,6 +227,14 @@ export default { this.locationQuery.minId = null this.locationQuery.maxId = null }, + + onTimelinePointHover(point: GPSPoint) { + if (!this.pointsLayer) { + return + } + + this.highlightPoint(this.pointsLayer as VectorLayer, point) + }, }, watch: { diff --git a/frontend/src/components/Timeline.vue b/frontend/src/components/Timeline.vue index 051644c..81c30f9 100644 --- a/frontend/src/components/Timeline.vue +++ b/frontend/src/components/Timeline.vue @@ -12,6 +12,7 @@ import { CategoryScale, Chart as ChartJS, + type ChartOptions, LineElement, LinearScale, PointElement, @@ -68,7 +69,7 @@ export default { } }, - graphOptions() { + graphOptions(): any { return { responsive: true, maintainAspectRatio: false, diff --git a/frontend/src/mixins/Points.vue b/frontend/src/mixins/Points.vue index 7b21013..ea486bb 100644 --- a/frontend/src/mixins/Points.vue +++ b/frontend/src/mixins/Points.vue @@ -41,8 +41,8 @@ export default { data() { return { metersTolerance: 20, - highlightedPointId: null, - highlightedFeature: null, + highlightedPointId: null as number | null, + highlightedFeature: null as Feature | null, } }, @@ -170,8 +170,12 @@ export default { }) }, - highlightPoint(layer: VectorLayer, point: GPSPoint) { - const feature = layer.getSource().getClosestFeatureToCoordinate([point.longitude, point.latitude]) + highlightPoint(layer: VectorLayer | null, point: GPSPoint) { + if (!layer) { + return + } + + const feature = layer.getSource()?.getClosestFeatureToCoordinate([point.longitude, point.latitude]) if (feature) { if (point.id === this.highlightedPointId) { return