ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes: directions api change

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-04-20 16:59:12 -06:00
parent 18920ac2fc
commit 2ce0fd01a4
6 changed files with 95 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -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>

65
src/components/LoadDetailModal.vue
View File

@@ -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,36 +46,53 @@
});
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);
destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address);
polylines.value = await getDirections(originCoords.value, destinationCoords.value);
if(load.value.vehicle) {
vehicleLastLocation.value = {
lat: parseFloat(load.value.vehicle.last_location_lat),
lng: parseFloat(load.value.vehicle.last_location_lng)
try {
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);
}
}
switch (load.value.load_status) {
case 'Loading':
isLoadActive.value = true;
break;
case 'Transit':
isLoadActive.value = true;
break;
case 'Downloading':
isLoadActive.value = true;
break;
if(load.value.vehicle) {
vehicleLastLocation.value = {
lat: parseFloat(load.value.vehicle.last_location_lat),
lng: parseFloat(load.value.vehicle.last_location_lng)
}
}
default:
isLoadActive.value = false;
break;
switch (load.value.load_status) {
case 'Loading':
isLoadActive.value = true;
break;
case 'Transit':
isLoadActive.value = true;
break;
case 'Downloading':
isLoadActive.value = true;
break;
default:
isLoadActive.value = false;
break;
}
} catch (error) {
notyStore.$patch({
text : 'No se pudo cargar mapa',
show : true,
error: true
});
}
}
@@ -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,

7
src/components/MakeProposalModal.vue
View File

@@ -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,

4
src/components/Sidebar.vue
View File

@@ -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' : '']">

48
src/composables/useDirectionRender.js
View File

@@ -26,12 +26,19 @@ export default function useDirectionsRender() {
};
const getDirections = async (originCoords, destinationCoords) => {
const originLatLng = `${originCoords.lat},${originCoords.lng}`;
const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`;
// 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}`;
const response = await fetch(url);
const data = await response.json();
const directionsService = new google.maps.DirectionsService();
// const origin = google.maps.LatLng(originCoords.lat, originCoords.lng)
// 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,

2
src/views/TrackingLoadView.vue
View File

@@ -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) {