load tracking public

src/components/CardLoad.vue

@@ -1,5 +1,5 @@
 <script setup>
-    import { useRouter } from 'vue-router';
+    import { RouterLink, useRouter } from 'vue-router';
     import { getDateMonthDay } from '../helpers/date_formats';
     import { getStatusPublished } from '../helpers/status';
     import { getStatusLoad } from '../helpers/status';
@@ -82,11 +82,15 @@
     }
 
     const handleTracking = () => {
-        let code = props.load.shipment_code;
+        let code = props.load._id;
-		router.push({
+        window.open('/publico/tracking/' + code, '_blank');
-            name: 'tracking-load',
+		// router.push({
-            params: {code}
+        //     name: 'tracking-load',
-        });
+        //     params: {code},
+        // }
+        // ).then(() => {
+        //     window.open('/publico/tracking/' + code, '_blank');
+        // })
     }
 
 </script>
@@ -136,7 +140,16 @@
             <div class="col-lg-4 col-sm-12">
                 <p><span>Segmento: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
                 <p><span>Código de carga: </span> {{ load.shipment_code }}
-                    <span v-if="load.load_status !== 'Draft' && !readOnly" class="tracking-icon" @click="handleTracking">
+                    <!-- <RouterLink
+                        v-if="load.load_status !== 'Draft' && !readOnly" 
+                        class="tracking-icon" 
+                        :to="{name: 'tracking-load', params: load.shipment_code}" 
+                        target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg"  fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+                        <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
+                        </svg>
+                    </RouterLink> -->
+                    <span v-if="load.load_status !== 'Draft' && !readOnly" class="tracking-icon" @click="handleTracking" data-target="_blank">
                         <svg xmlns="http://www.w3.org/2000/svg"  fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                         <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
                         </svg>

src/composables/useDirectionRender.js

@@ -44,7 +44,6 @@ export default function useDirectionsRender() {
                 })
               })
             });
-            console.log(polylines)
             return polylines;
           } else {
             return [];

src/composables/useTrackingLoad.js

@@ -0,0 +1,26 @@
+import { ref } from "vue";
+import { getLoadPublic } from "../services/public"
+
+export default function useTrackingLoad() {
+    const load = ref(null);
+    const loading = ref(false);
+
+    const getLoadTracking = async(id) => {
+        
+        loading.value = true
+        const resp = await getLoadPublic(id);
+
+        if(resp !== null) {
+            load.value = resp;
+        } else {
+            load.value = null;
+        }
+        loading.value = false;
+    }
+
+    return {
+        getLoadTracking,
+        load,
+        loading
+    }
+}

src/router/index.js

@@ -50,6 +50,11 @@ const router = createRouter({
           name: 'notice-privacy',
           component: () => import('../views/NoticeOfPrivacyView.vue')
         },
+        {
+          path: 'tracking/:code',
+          name: 'tracking-load',
+          component: () => import('../views/TrackingLoadView.vue'),
+        },
         {
           path: 'faqs',
           name: 'faqs',
@@ -128,11 +133,11 @@ const router = createRouter({
           name: 'shippers',
           component: () => import('../views/ShippersView.vue'),
         },
-        {
+        // {
-          path: 'tracking/:code',
+        //   path: 'tracking/:code',
-          name: 'tracking-load',
+        //   name: 'tracking-load',
-          component: () => import('../views/TrackingLoadView.vue'),
+        //   component: () => import('../views/TrackingLoadView.vue'),
-        },
+        // },
         {
           path: 'buscar-cargas',
           name: 'search-loads',

src/services/auth.js

@@ -25,6 +25,7 @@ export const login = async(body) => {
           };
         }
     } catch (error) {
+        console.log(error.response)
         const errStr = error.response.data.error ?? 'Algo salio mal, intente más tarde';
         return {
             msg: messagesError(errStr),

src/services/public.js

@@ -61,6 +61,18 @@ export const getCompanies = async(filter) => {
     }
 }
 
+export const getLoadPublic = async(id) => {
+    try {
+        const endpoint = `/v1/public-load-tracking/${id}`;
+        console.log(endpoint);
+        const {data} = await api.get(endpoint);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
 export const getUsersCompany = async(filter) => {
     try {
         const endpoint = `/v1/users/find?${filter}`;

src/views/TrackingLoadView.vue

@@ -1,20 +1,18 @@
 <script setup>
     import { onMounted, ref } from 'vue';
-    import { useLoadsStore } from '../stores/loads';
     import { useRoute } from 'vue-router';
     import Spiner from '../components/ui/Spiner.vue';
     import CardLoad from '../components/CardLoad.vue';
     import useDirectionsRender from '../composables/useDirectionRender';
     import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map';
     import CardEmpty from '../components/CardEmpty.vue';
+    import useTrackingLoad from '../composables/useTrackingLoad';
 
     const mapKey = import.meta.env.VITE_MAP_KEY;
 
-    const isLoading = ref(true);
-    const loadStore = useLoadsStore();
     const { geocodeAddress, getDirections } = useDirectionsRender()
+    const { getLoadTracking, load, loading } = useTrackingLoad();
     const route = useRoute();
-    const load = ref(null);
     const zoom = ref(6);
     const heightMap = ref(768);
     const vehicleLastLocation = ref(null);
@@ -34,15 +32,18 @@
     });
 
     const initData = async() => {
-        isLoading.value = true;
+        const id = route.params['code'];
-        const filter = "?shipment_code[$in]=" + route.params['code'];
+        await getLoadTracking(id)
-        const resp = await loadStore.getLoad(filter);
+        if(load.value !== null) {
-        console.log(resp);
+            const addressOrigin = load.value.origin_geo?.coordinates;
-        if(resp.total > 0) {
+            const addressDestination = load.value.destination_geo?.coordinates;
-            load.value = resp.data[0];
+            if(addressOrigin !== null) {
-            originCoords.value = await geocodeAddress(load.value.origin_formatted_address);
+                originCoords.value = {lat: Number.parseFloat(addressOrigin[0]), lng: Number.parseFloat(addressOrigin[1])};
-            destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address);
+            }
-            console.log(load.value.vehicle)
+            
+            if(addressDestination !== null) {
+                destinationCoords.value = {lat: Number.parseFloat(addressDestination[0]), lng: Number.parseFloat(addressDestination[1])};
+            }
             if(load.value.vehicle) {
                 vehicleLastLocation.value = {
                     lat: parseFloat(load.value.vehicle.last_location_lat),
@@ -71,7 +72,6 @@
             }
 
         }
-        isLoading.value = false;
     }
 
     const handleResize = () => {
@@ -87,11 +87,12 @@
 </script>
 
 <template>
-    <h2 class="title text-center">Seguimiento de carga</h2>
+    <h2 class="title text-center mt-5">Seguimiento de carga</h2>
-    <Spiner v-if="isLoading"/>
+    <Spiner v-if="loading"/>
     <div v-else>
         <div v-if="load">
             <CardLoad :load="load" :read-only="true"/>
+            <br/>
             <GoogleMap
                     :api-key="mapKey"
                     :center="{lat:19.432600, lng:-99.133209}"
@@ -108,8 +109,8 @@
                         fullscreenControl: true
                     }"
                 > 
-                    <Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
+                    <Marker :options="{position: originCoords, label: 'O', title: 'Destino'}" />
-                    <Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
+                    <Marker :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
                     <CustomMarker
                         v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
                         :options="{position: vehicleLastLocation}"