From 9f74fc51829a99e41f451ec377110e99b843a6c1 Mon Sep 17 00:00:00 2001
From: pablo014 <angelopablo014@gmail.com>
Date: Mon, 20 May 2024 16:05:42 -0700
Subject: [PATCH 1/2] fix(map): fix zoom in and out issue

---
 src/components/SimpleMap.vue        |  8 ++++----
 src/components/tags/LanguageTag.vue |  1 +
 src/hooks/live/useLiveChart.ts      |  2 +-
 src/pages/phone/PhoneSystem.vue     | 25 ++++++++++++++++++++-----
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/SimpleMap.vue b/src/components/SimpleMap.vue
index cef74d7a1..51f5d2f17 100644
--- a/src/components/SimpleMap.vue
+++ b/src/components/SimpleMap.vue
@@ -93,7 +93,7 @@ watch(showingLegend, async (newValue) => {
               emit('onZoomIn');
             }
           "
-          class="w-8 h-8 border-crisiscleanup-dark-100 border-t border-l border-r bg-white shadow-xl text-xl text-crisiscleanup-dark-400"
+          class="my-2 w-12 h-12 border-crisiscleanup-dark-100 border-t border-l border-r bg-white shadow-xl text-xl text-crisiscleanup-dark-400"
         />
         <base-button
           text=""
@@ -108,7 +108,7 @@ watch(showingLegend, async (newValue) => {
               emit('onZoomOut');
             }
           "
-          class="w-8 h-8 border border-crisiscleanup-dark-100 bg-white shadow-xl text-xl text-crisiscleanup-dark-400"
+          class="w-12 h-12 border border-crisiscleanup-dark-100 bg-white shadow-xl text-xl text-crisiscleanup-dark-400"
         />
       </div>
       <base-button
@@ -131,7 +131,7 @@ watch(showingLegend, async (newValue) => {
         "
         icon="tree"
         icon-size="lg"
-        class="w-8 h-8 border my-1 border-crisiscleanup-dark-100 bg-white shadow-xl text-crisiscleanup-dark-400"
+        class="w-12 h-12 border my-1 border-crisiscleanup-dark-100 bg-white shadow-xl text-crisiscleanup-dark-400"
       />
       <base-button
         v-tooltip="{
@@ -153,7 +153,7 @@ watch(showingLegend, async (newValue) => {
             emit('onZoomIncidentCenter');
           }
         "
-        class="w-8 h-8 border border-crisiscleanup-dark-100 my-1 bg-white shadow-xl text-crisiscleanup-dark-400"
+        class="w-12 h-12 border border-crisiscleanup-dark-100 my-1 bg-white shadow-xl text-crisiscleanup-dark-400"
       />
       <base-button
         v-if="props.showMapLayerToggle"
diff --git a/src/components/tags/LanguageTag.vue b/src/components/tags/LanguageTag.vue
index 58babadb7..aaef1bb24 100644
--- a/src/components/tags/LanguageTag.vue
+++ b/src/components/tags/LanguageTag.vue
@@ -29,6 +29,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    console.log(props.languageId)
     const { theme } = config;
     const language = ref(null);
     const styles = computed(() => {
diff --git a/src/hooks/live/useLiveChart.ts b/src/hooks/live/useLiveChart.ts
index c64e3c635..50eff444d 100644
--- a/src/hooks/live/useLiveChart.ts
+++ b/src/hooks/live/useLiveChart.ts
@@ -25,7 +25,7 @@ export default function useLiveChart(
   function getHeight() {
     const chartContainer = d3.select(`#${chartId}`);
     if (chartContainer) {
-      return Number(chartContainer.style('height').slice(0, -2)) || 0;
+      return Number(chartContainer.style('height')?.slice(0, -2)) || 0;
     }
 
     return 0;
diff --git a/src/pages/phone/PhoneSystem.vue b/src/pages/phone/PhoneSystem.vue
index ba7ae44ab..33e4d72bc 100644
--- a/src/pages/phone/PhoneSystem.vue
+++ b/src/pages/phone/PhoneSystem.vue
@@ -555,7 +555,7 @@ import {
   INTERACTIVE_ZOOM_LEVEL,
 } from '@/constants';
 import { averageGeolocation } from '@/utils/map';
-import type { MapUtils } from '@/hooks/worksite/useLiveMap';
+import type { MapUtils } from '@/hooks/worksite/useWorksiteMap';
 import { useCurrentUser } from '@/hooks';
 import PhoneOverlay from '@/components/phone/PhoneOverlay.vue';
 import useAcl from '@/hooks/useAcl';
@@ -1277,19 +1277,34 @@ export default defineComponent({
     }
 
     function zoomIn() {
-      mapUtils.value?.getMap().zoomIn();
+      mapUtils.value!.getMap().zoomIn();
     }
 
     function zoomOut() {
-      mapUtils.value?.getMap().zoomOut();
+      mapUtils.value!.getMap().zoomOut();
+    }
+
+    function fitLocation(location: Location) {
+      mapUtils.value!.fitLocation(location);
     }
 
     function getIncidentCenter() {
       const { incident_center } = Incident.find(
         currentIncidentId.value,
       ) as Incident;
-      if (incident_center) {
-        return [incident_center.coordinates[1], incident_center.coordinates[0]];
+      if (locationModels.length > 0) {
+        for (const location of locationModels) {
+          fitLocation(location);
+        }
+      } else {
+        const center = averageGeolocation(
+          mapUtils.value
+            ?.getPixiContainer()
+            ?.children.map((marker) => [marker.x, marker.y]),
+        );
+        if (center.latitude && center.longitude) {
+          mapUtils.value.getMap().setView([center.latitude, center.longitude], 6);
+        }
       }
       return [35.746_512_259_918_5, -96.411_509_631_256_56];
     }

From 416c62fb3d793a08a31bd1dd849ce449614d7828 Mon Sep 17 00:00:00 2001
From: pablo014 <angelopablo014@gmail.com>
Date: Tue, 21 May 2024 16:32:03 -0700
Subject: [PATCH 2/2] fix(map): fix jump to incident center

---
 src/pages/phone/PhoneSystem.vue | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/pages/phone/PhoneSystem.vue b/src/pages/phone/PhoneSystem.vue
index 33e4d72bc..b9180c2b0 100644
--- a/src/pages/phone/PhoneSystem.vue
+++ b/src/pages/phone/PhoneSystem.vue
@@ -1285,6 +1285,7 @@ export default defineComponent({
     }
 
     function fitLocation(location: Location) {
+      console.log(location)
       mapUtils.value!.fitLocation(location);
     }
 
@@ -1292,21 +1293,7 @@ export default defineComponent({
       const { incident_center } = Incident.find(
         currentIncidentId.value,
       ) as Incident;
-      if (locationModels.length > 0) {
-        for (const location of locationModels) {
-          fitLocation(location);
-        }
-      } else {
-        const center = averageGeolocation(
-          mapUtils.value
-            ?.getPixiContainer()
-            ?.children.map((marker) => [marker.x, marker.y]),
-        );
-        if (center.latitude && center.longitude) {
-          mapUtils.value.getMap().setView([center.latitude, center.longitude], 6);
-        }
-      }
-      return [35.746_512_259_918_5, -96.411_509_631_256_56];
+      return [incident_center.coordinates[1], incident_center.coordinates[0]];
     }
 
     function goToIncidentCenter() {