From d37d456f128109d7bcef5c2d5086c5f29982dac0 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 16 May 2023 11:45:29 -0300
Subject: [PATCH] mission-planning: Allow centering planning map on vehicle

---
 src/views/MissionPlanningView.vue | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/views/MissionPlanningView.vue b/src/views/MissionPlanningView.vue
index 0d54a1fe4..dfe82fd66 100644
--- a/src/views/MissionPlanningView.vue
+++ b/src/views/MissionPlanningView.vue
@@ -94,6 +94,12 @@
       size="x-small"
       @click="goHome"
     />
+    <v-btn
+      class="absolute bottom-0 m-3 rounded-sm shadow-sm left-10 bg-slate-50"
+      icon="mdi-image-filter-center-focus-strong"
+      size="x-small"
+      @click="vehiclePosition ? (mapCenter = vehiclePosition) : null"
+    />
     <v-progress-linear
       v-if="uploadingMission"
       :model-value="missionUploadProgress"
@@ -113,7 +119,7 @@ import L, { type LatLngTuple, Map, Marker } from 'leaflet'
 import Swal from 'sweetalert2'
 import { v4 as uuid } from 'uuid'
 import type { Ref } from 'vue'
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
@@ -313,17 +319,20 @@ onMounted(() => {
   planningMap.value.addControl(layerControl)
 })
 
+const vehiclePosition = computed((): [number, number] | undefined =>
+  vehicleStore.coordinates.latitude
+    ? [vehicleStore.coordinates.latitude, vehicleStore.coordinates.longitude]
+    : undefined
+)
+
 const vehicleMarker = ref<L.Marker>()
 watch(vehicleStore.coordinates, () => {
   if (planningMap.value === undefined) throw new Error('Map not yet defined')
 
-  const position = vehicleStore.coordinates.latitude
-    ? [vehicleStore.coordinates.latitude, vehicleStore.coordinates.longitude]
-    : undefined
-  if (position === undefined) return
+  if (vehiclePosition.value === undefined) return
 
   if (vehicleMarker.value === undefined) {
-    vehicleMarker.value = L.marker(position as LatLngTuple)
+    vehicleMarker.value = L.marker(vehiclePosition.value)
     var vehicleMarkerIcon = L.divIcon({ className: 'marker-icon', iconSize: [16, 16], iconAnchor: [8, 8] })
     vehicleMarker.value.setIcon(vehicleMarkerIcon)
     const vehicleMarkerTooltip = L.tooltip({
@@ -336,7 +345,7 @@ watch(vehicleStore.coordinates, () => {
     vehicleMarker.value.bindTooltip(vehicleMarkerTooltip)
     planningMap.value.addLayer(vehicleMarker.value)
   }
-  vehicleMarker.value.setLatLng(position as LatLngTuple)
+  vehicleMarker.value.setLatLng(vehiclePosition.value)
 })
 
 const homeMarker = ref<L.Marker>()