fix: show path

Jimly-Firdaus · Apr 12, 2023 · 670406a · 670406a
1 parent 4001338
commit 670406a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/components/GoogleMaps.vue b/src/components/GoogleMaps.vue
@@ -26,17 +26,16 @@
     />
     <template v-if="foundPath">
       <Polyline :options="pathToGoal" :z-index="4" geodesic />
-      <!-- <Polyline :options="allPath" :z-index="1" geodesic /> -->
       <Polygon :options="allPath" :z-index="1"/>
     </template>
   </GoogleMap>
   <div class="tw-flex tw-flex-col tw-items-center">
     <template v-if="foundPath">
       <h3>Estimated: {{ cost }} km</h3>
+      <h3>Path: <strong>{{ pathInString }}</strong></h3>
     </template>
     <BaseBtn label="Update Map" size="md" class="tw-w-36" @click="updateMap" :disable="path.length === 0"/>
   </div>
-  <!-- <BaseBtn label="Check Arr" size="md" @click="checkArr" /> -->
 </template>
 
 <script setup lang="ts">
@@ -99,6 +98,7 @@ const store = useStore();
 
 const pathRetrieved = computed(() => store.state.pathRetrieved);
 const allPosition = computed(() => store.state.allPosition);
+const pathInString = computed(() => store.state.pathInString);
 
 const path = computed(() =>
   pathRetrieved.value.map((p: { latitude: number; longitude: number }) => ({

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
@@ -285,7 +285,7 @@ watchEffect(() => {
 });
 
 const wait = file.value === null ? ref('Ready') : ref(null);
-
+const pathInString = ref("");
 const getFile = async () => {
   // TODO: refactor the same block code
   pathRetrieved.value = [];
@@ -315,16 +315,21 @@ const getFile = async () => {
         const result = response.data;
         route.value = result[1].split('-').map((x: any) => parseInt(x));
         cost.value = result[0];
+        route.value.forEach((ele, index) => {
+          pathInString.value += mapData.value[ele] + " -> ";
+        })
         mapData.value.forEach((ele, index) => {
           if (route.value.includes(index)) {
             pathRetrieved.value.push(allPosition.value[index]);
           }
         });
+        pathInString.value = pathInString.value.slice(0, -3);
         center.value.lat = pathRetrieved.value[0].latitude;
         center.value.lng = pathRetrieved.value[0].longitude;
         foundRoute.value = true;
         store.dispatch('updatePathRetrieved', pathRetrieved);
         store.dispatch('updateAllPosition', allPosition);
+        store.dispatch('updatePathInString', pathInString);
       } catch (error) {
         const axiosError = error as AxiosError;
         if (axiosError.response) {
@@ -382,18 +387,21 @@ const getFile = async () => {
 
         route.value = result[1].split('-').map((x: any) => parseInt(x));
         cost.value = result[0];
-
+        route.value.forEach((ele, index) => {
+          pathInString.value += mapData.value[ele] + " -> ";
+        })
         mapData.value.forEach((ele, index) => {
           if (route.value.includes(index)) {
             pathRetrieved.value.push(allPosition.value[index]);
           }
         });
-
+        pathInString.value = pathInString.value.slice(0, -3);
         center.value.lat = pathRetrieved.value[0].latitude;
         center.value.lng = pathRetrieved.value[0].longitude;
         foundRoute.value = true;
         store.dispatch('updatePathRetrieved', pathRetrieved);
         store.dispatch('updateAllPosition', allPosition);
+        store.dispatch('updatePathInString', pathInString);
       } finally {
         setTimeout(() => {
           $q.loading.hide();