fixes: directions api change

index.html

@@ -15,6 +15,9 @@
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
+  <!-- <script src="https://apis.google.com/js/api.js" type="text/javascript"></script> -->
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A"></script>
+  <!-- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> -->
   <script src="https://kit.fontawesome.com/3675730ed5.js" crossorigin="anonymous"></script>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

src/components/LoadDetailModal.vue

@@ -6,6 +6,7 @@
     import useDirectionsRender from '../composables/useDirectionRender';
     import Cardload from './CardLoad.vue';
     import { useLoadsStore } from '../stores/loads';
+import { useNotificationsStore } from '../stores/notifications';
 
     const mapKey = import.meta.env.VITE_MAP_KEY;
 
@@ -20,7 +21,7 @@
     const vehicleLastLocation = ref(null);
     const isLoadActive = ref(false);
 
-    const { geocodeAddress, getDirections } = useDirectionsRender()
+    const { getDirections } = useDirectionsRender()
 
     const props = defineProps({
         proposal: {
@@ -32,6 +33,7 @@
 
     defineEmits(['reset-proposal'])
     const loadStore = useLoadsStore();
+    const notyStore = useNotificationsStore();
 
     onMounted(() => {
         window.addEventListener('resize', handleResize);
@@ -44,15 +46,25 @@
     });
 
     const initData = async() => {
+        console.log(props.proposal)
         isLoading.value = true;
         const code = props.proposal.load.shipment_code;
         const filter = "?shipment_code[$in]=" + code;
         const resp = await loadStore.getLoad(filter);
+        console.log(resp);
         if(resp.total > 0) {
             load.value = resp.data[0];
-            originCoords.value = await geocodeAddress(load.value.origin_formatted_address);
+            try {
-            destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address);
+                const addressOrigin = load.value?.origin;
+                const addressDestination = load.value?.destination;
+                if(addressOrigin && addressDestination) {
+                    originCoords.value = {lat: Number.parseFloat(addressOrigin.lat), lng: Number.parseFloat(addressOrigin.lng)};
+                    destinationCoords.value = {lat: Number.parseFloat(addressDestination.lat), lng: Number.parseFloat(addressDestination.lng)};
+    
                     polylines.value = await getDirections(originCoords.value, destinationCoords.value);
+    
+                }
+                
                 if(load.value.vehicle) {
                     vehicleLastLocation.value = {
                         lat: parseFloat(load.value.vehicle.last_location_lat),
@@ -75,6 +87,13 @@
                         isLoadActive.value = false;
                         break;
                 }
+            } catch (error) {
+                notyStore.$patch({
+                    text : 'No se pudo cargar mapa',
+                    show : true,
+                    error: true
+                });
+            }
 
         }
         isLoading.value = false;
@@ -140,7 +159,6 @@
                                         :draggable="false"
                                         >
                                         <div style="text-align: center">
-                                            <!-- <img src="/images/freeTruck.png" width="25" height="25" /> -->
                                             <i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
                                         </div>
                                     </CustomMarker>
@@ -148,7 +166,6 @@
                                         v-if="polylines"
                                         :options="{
                                             path: polylines,
-                                            // geodesic: true,
                                             strokeColor: '#2D90BB',
                                             strokeOpacity: 0.7,
                                             strokeWeight: 5,

src/components/MakeProposalModal.vue

@@ -8,7 +8,7 @@
     import { useAuthStore } from '../stores/auth';
     import { useCompanyStore } from '../stores/company';
     import { useVehiclesStore } from '../stores/vehicles';
-    import { saveProposal } from '../services/vehicles'
+    // import { saveProposal } from '../services/vehicles'
     import Swal from 'sweetalert2';
 
     const mapKey = import.meta.env.VITE_MAP_KEY;
@@ -57,7 +57,6 @@
     });
     
     const initData = async() => {
-        console.log('load: ', props.load);
         isLoading.value = true;
         let filterQuery = [];
         filterQuery.company = "company="+ authStore.user.company
@@ -66,7 +65,7 @@
         destinationCoords.value = {lat: Number.parseFloat(props.load.destination.lat), lng: Number.parseFloat(props.load.destination.lng)};;
         polylines.value = await getDirections(originCoords.value, destinationCoords.value);
         isLoading.value = false;
-        console.log(props.proposal);
+        // console.log(props.proposal);
         if(props.proposal) {
             form.vehicle = props.proposal.vehicle._id;
             form.comments = props.proposal.comment;
@@ -121,7 +120,7 @@
             }
             const index = vehiclesStore.vehicles.findIndex((prop) => prop._id === form.vehicle);
             const vehicleSelected  = vehiclesStore.vehicles[index];
-            console.log(vehicleSelected);
+            // console.log(vehicleSelected);
             const localData = {
                 vehicle: vehicleSelected,
                 load: props.load,

src/components/Sidebar.vue

@@ -113,7 +113,7 @@
                         class="nav-link" :to="{name: 'calculator'}">Calculadora</RouterLink>
                 </div>
             </li>
-            <li 
+            <!-- <li 
                 v-if="auth.user?.permissions === 'role_carrier'"
                 :class="[route.name === 'carriers' ? 'bg-nav-active' : '']">
                 <div>
@@ -122,7 +122,7 @@
                         active-class="router-link-active"
                         class="nav-link" :to="{name: 'carriers'}">Transportistas</RouterLink>
                 </div>
-            </li>
+            </li> -->
             <!-- <li 
                 v-if="auth.user?.permissions === 'role_shipper'"
                 :class="[route.name === 'carriers' ? 'bg-nav-active' : '']">

src/composables/useDirectionRender.js

@@ -26,12 +26,19 @@ export default function useDirectionsRender() {
     };
 
     const getDirections = async (originCoords, destinationCoords) => {
-      const originLatLng = `${originCoords.lat},${originCoords.lng}`;
+      // const originLatLng = `${originCoords.lat},${originCoords.lng}`;
-      const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`;
+      // const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`;
       try {
-          let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${mapKey}`;
+        const directionsService = new google.maps.DirectionsService();
-          const response = await fetch(url);
+        // const origin = google.maps.LatLng(originCoords.lat, originCoords.lng)
-          const data = await response.json();
+        // const destination = google.maps.LatLng(destinationCoords.lat, destinationCoords.lng)
+        const request = {
+            origin: {lat: Number.parseFloat(originCoords.lat), lng: Number.parseFloat(originCoords.lng)},
+            destination:  {lat: Number.parseFloat(destinationCoords.lat), lng: Number.parseFloat(destinationCoords.lng)},
+            travelMode: 'DRIVING'
+        };
+        const data = await directionsService.route(request)
+        
           let polylines = [];
           if (data.routes && data.routes.length > 0) {
             const steps = data.routes[0].legs[0].steps;
@@ -44,6 +51,7 @@ export default function useDirectionsRender() {
                 })
               })
             });
+            console.log({polylines})
             return polylines;
           } else {
             return [];
@@ -53,6 +61,36 @@ export default function useDirectionsRender() {
         return [];
       }
     };
+    // const getDirections = async (originCoords, destinationCoords) => {
+    //   const originLatLng = `${originCoords.lat},${originCoords.lng}`;
+    //   const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`;
+    //   try {
+    //       let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${mapKey}`;
+    //       // let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${mapKey}`;
+    //       const response = await fetch(url);
+    //       const data = await response.json();
+    //       let polylines = [];
+    //       if (data.routes && data.routes.length > 0) {
+    //         const steps = data.routes[0].legs[0].steps;
+    //         steps.forEach(item => {
+    //           const points = decode(item.polyline.points);
+    //           points.forEach(poly => {
+    //             polylines.push({
+    //               lat: poly[0],
+    //               lng: poly[1]
+    //             })
+    //           })
+    //         });
+    //         console.log({polylines})
+    //         return polylines;
+    //       } else {
+    //         return [];
+    //       }
+    //   } catch (error) {
+    //     console.log(error);
+    //     return [];
+    //   }
+    // };
 
     return {
         originCoords,

src/views/TrackingLoadView.vue

@@ -35,7 +35,7 @@
         const id = route.params['code'];
         await getLoadTracking(id)
         if(load.value !== null) {
-            console.log(load.value)
+            // console.log(load.value)
             const addressOrigin = load.value?.origin_geo?.coordinates;
             const addressDestination = load.value?.destination_geo?.coordinates;
             if(addressOrigin && addressDestination) {