From 7608931a33a839edc308fa51dd376f94e5a89e9d Mon Sep 17 00:00:00 2001 From: Alexandro Uc Santos Date: Sat, 17 Feb 2024 18:16:46 -0600 Subject: [PATCH 1/7] mod: faqs --- src/components/CardFaq.vue | 2 +- src/data/faqs.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/CardFaq.vue b/src/components/CardFaq.vue index 146222d..4383f52 100644 --- a/src/components/CardFaq.vue +++ b/src/components/CardFaq.vue @@ -25,7 +25,7 @@ import { ref } from 'vue';

{{ faq.answer }}

+ class="answer" v-html="faq.answer">

diff --git a/src/data/faqs.json b/src/data/faqs.json index 0ccbc45..209a92f 100644 --- a/src/data/faqs.json +++ b/src/data/faqs.json @@ -64,7 +64,7 @@ }, { "question": "¿Dónde puedo encontrar más ayuda y soporte si tengo otras preguntas?", - "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi." + "answer": "Puedes contactarnos por el siguiente correo: contacto@etaviaporte.com o si lo prefieres por los siguientes numeros: +52 999 200 2200, +52 9992 002 2221, nuestro horario de atención es de 9:00 - 16:00 de lunes a viernes" } ] }, @@ -170,7 +170,7 @@ }, { "question": "¿Qué debo hacer si tengo un problema con una carga o un transporte?", - "answer": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi." + "answer": "Puedes contactarnos por el siguiente correo: contacto@etaviaporte.com o si lo prefieres por los siguientes numeros: +52 999 200 2200, +52 9992 002 2221, nuestro horario de atención es de 9:00 - 16:00 de lunes a viernes" } ] }, From 4301f6c7c8d94092d9195f8aca2f63b244332dd5 Mon Sep 17 00:00:00 2001 From: Alexandro Uc Santos Date: Sat, 24 Feb 2024 19:42:30 -0600 Subject: [PATCH 2/7] add: api directions google --- package-lock.json | 10 ++++++++ package.json | 1 + src/composables/useDirectionRender.js | 33 +++++++++++++++------------ src/lib/axios.js | 4 ++-- src/views/TrackingLoadView.vue | 31 ++++++++++++++++--------- 5 files changed, 52 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index b6ad117..4561ad4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "chart.js": "^4.4.1", "html2pdf.js": "^0.10.1", "pinia": "^2.1.7", + "polyline": "^0.2.0", "qalendar": "^3.7.0", "sass": "^1.69.5", "sweetalert2": "^11.10.1", @@ -1137,6 +1138,15 @@ } } }, + "node_modules/polyline": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/polyline/-/polyline-0.2.0.tgz", + "integrity": "sha512-rCJSkIHWZ/HOUoEWgjZ1DrRjLpTeTjgaktyJV0yhm8PugM5sKoavNjUHtI/amjsTn/Tq+Q3IIAuBD/dUSsWwxQ==", + "deprecated": "This module is now under the @mapbox namespace: install @mapbox/polyline instead", + "engines": { + "node": "*" + } + }, "node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", diff --git a/package.json b/package.json index 1ea8561..5d6f463 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "chart.js": "^4.4.1", "html2pdf.js": "^0.10.1", "pinia": "^2.1.7", + "polyline": "^0.2.0", "qalendar": "^3.7.0", "sass": "^1.69.5", "sweetalert2": "^11.10.1", diff --git a/src/composables/useDirectionRender.js b/src/composables/useDirectionRender.js index dd39d5a..6203099 100644 --- a/src/composables/useDirectionRender.js +++ b/src/composables/useDirectionRender.js @@ -1,4 +1,5 @@ import { ref } from "vue"; +import { decode } from 'polyline'; export default function useDirectionsRender() { @@ -7,7 +8,8 @@ export default function useDirectionsRender() { const polylines = ref([]); const geocodeAddress = async (address) => { // Utiliza la API de geocodificación de Google Maps para obtener las coordenadas - const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; // Reemplaza con tu clave de API + const apiKey = 'AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A'; // Reemplaza con tu clave de API + // const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; // Reemplaza con tu clave de API try { const response = await fetch( `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent( @@ -22,23 +24,26 @@ export default function useDirectionsRender() { } }; - const getDirections = async () => { - const apiKey = 'AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs'; - const originLatLng = `${originCoords.value.lat},${originCoords.value.lng}`; - const destinationLatLng = `${destinationCoords.value.lat},${destinationCoords.value.lng}`; + const getDirections = async (originCoords, destinationCoords) => { + console.log('GET directions,', originCoords) + const apiKey = 'AIzaSyBm3n6I_uMzKkMS0eVXnLdoa1S_hPcsx0A'; + const originLatLng = `${originCoords.lat},${originCoords.lng}`; + const destinationLatLng = `${destinationCoords.lat},${destinationCoords.lng}`; try { - const response = await fetch( - `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&key=${apiKey}` - ); + let url = `https://maps.googleapis.com/maps/api/directions/json?origin=${originLatLng}&destination=${destinationLatLng}&mode=driving&key=${apiKey}`; + const response = await fetch(url); const data = await response.json(); - if (data.routes && data.routes.length > 0) { const steps = data.routes[0].legs[0].steps; - const routePolyline = steps.map((step) => ({ - lat: step.end_location.lat, - lng: step.end_location.lng, - })); - polylines.value = routePolyline; + steps.forEach(item => { + const points = decode(item.polyline.points); + points.forEach(poly => { + polylines.value.push({ + lat: poly[0], + lng: poly[1] + }) + }) + }); } } catch (error) { console.log(error); diff --git a/src/lib/axios.js b/src/lib/axios.js index 9f857c5..6eb493e 100644 --- a/src/lib/axios.js +++ b/src/lib/axios.js @@ -5,8 +5,8 @@ const accessToken = localStorage.getItem('access'); const api = axios.create({ baseURL: baseUrl, headers: { - 'Authorization': 'Bearer ' + accessToken - } + Authorization: 'Bearer ' + accessToken + }, }); export default api; \ No newline at end of file diff --git a/src/views/TrackingLoadView.vue b/src/views/TrackingLoadView.vue index 9fa1654..1cbc1c5 100644 --- a/src/views/TrackingLoadView.vue +++ b/src/views/TrackingLoadView.vue @@ -5,12 +5,12 @@ import Spiner from '../components/ui/Spiner.vue'; import CardLoad from '../components/CardLoad.vue'; import useDirectionsRender from '../composables/useDirectionRender'; - import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map'; + import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map'; import CardEmpty from '../components/CardEmpty.vue'; const isLoading = ref(true); const loadStore = useLoadsStore(); - const { geocodeAddress } = useDirectionsRender() + const { geocodeAddress, getDirections, polylines } = useDirectionsRender() const route = useRoute(); const load = ref(null); const zoom = ref(6); @@ -38,13 +38,18 @@ load.value = resp.data[0]; originCoords.value = await geocodeAddress(load.value.origin_formatted_address); destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address); + console.log(load.value.vehicle) if(load.value.vehicle) { vehicleLastLocation.value = { lat: parseFloat(load.value.vehicle.last_location_lat), lng: parseFloat(load.value.vehicle.last_location_lng) } + console.log(vehicleLastLocation); } + await getDirections(originCoords.value, destinationCoords.value); + + console.log(load.value.load_status); switch (load.value.load_status) { case 'Loading': isLoadActive.value = true; @@ -84,11 +89,11 @@
- +
From 1ab389605d19f0687f149fa90d4e24b75361916a Mon Sep 17 00:00:00 2001 From: Alexandro Uc Santos Date: Tue, 27 Feb 2024 20:50:41 -0600 Subject: [PATCH 3/7] add: getDirections in maps --- src/components/FormLoadModal.vue | 35 +++++++++++++++++++-------- src/components/LoadDetailModal.vue | 28 +++++++++++++-------- src/components/MakeProposalModal.vue | 28 +++++++++++++-------- src/components/MapDirections.vue | 3 ++- src/composables/useDirectionRender.js | 21 ++++++++++------ src/views/TrackingLoadView.vue | 10 +++++--- 6 files changed, 83 insertions(+), 42 deletions(-) diff --git a/src/components/FormLoadModal.vue b/src/components/FormLoadModal.vue index 4c7719b..4ee14d2 100644 --- a/src/components/FormLoadModal.vue +++ b/src/components/FormLoadModal.vue @@ -24,12 +24,13 @@ const heightMap = ref(768); const originCoords = ref(null); const destinationCoords = ref(null); + const polylines = ref([]); const startLocation = ref(null); const endLocation = ref(null); const isLoading = ref(false); const loadingLocations = ref(false); const submited = ref(false); - const { geocodeAddress } = useDirectionsRender(); + const { geocodeAddress, getDirections } = useDirectionsRender(); const formRef = ref(null); const filterQueryVehicles = ref([]); const checkLocationLoad = ref(false); @@ -46,6 +47,8 @@ stateDestination: null, }); + const mapKey = import.meta.env.VITE_MAP_KEY; + const clearLoad = () => { loadStore.currentLoad = null; @@ -124,6 +127,13 @@ destinationCoords.value = await geocodeAddress(endLocation.value); } }) + + watch([originCoords, destinationCoords], async() => { + if(originCoords.value && destinationCoords.value) { + console.log('Se llama api direcciones ') + polylines.value = await getDirections(originCoords.value, destinationCoords.value); + } + }) }) watch(locationLoadSelected, () => { @@ -510,7 +520,7 @@ v-model="locationDownloadSelected" > - + - +
diff --git a/src/components/LoadDetailModal.vue b/src/components/LoadDetailModal.vue index 36275a6..de38eca 100644 --- a/src/components/LoadDetailModal.vue +++ b/src/components/LoadDetailModal.vue @@ -2,15 +2,17 @@ import { ref, onMounted } from 'vue'; import CardEmpty from './CardEmpty.vue'; import Spiner from './ui/Spiner.vue'; - import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map'; + import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map'; import useDirectionsRender from '../composables/useDirectionRender'; import Cardload from './CardLoad.vue'; import { useLoadsStore } from '../stores/loads'; + const mapKey = import.meta.env.VITE_MAP_KEY; const zoom = ref(6); const heightMap = ref(768); const originCoords = ref(null); + const polylines = ref([]); const destinationCoords = ref(null); const isLoading = ref(false); const windowWidth = ref(window.innerWidth); @@ -18,7 +20,7 @@ const vehicleLastLocation = ref(null); const isLoadActive = ref(false); - const { geocodeAddress } = useDirectionsRender() + const { geocodeAddress, getDirections } = useDirectionsRender() const props = defineProps({ proposal: { @@ -50,6 +52,7 @@ 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), @@ -113,7 +116,7 @@
- +
diff --git a/src/components/MakeProposalModal.vue b/src/components/MakeProposalModal.vue index 4c4abae..d477276 100644 --- a/src/components/MakeProposalModal.vue +++ b/src/components/MakeProposalModal.vue @@ -3,7 +3,7 @@ import CardEmpty from './CardEmpty.vue'; import Spiner from './ui/Spiner.vue'; import BadgeError from './ui/BadgeError.vue'; - import { GoogleMap, Marker } from 'vue3-google-map'; + import { GoogleMap, Marker, Polyline } from 'vue3-google-map'; import useDirectionsRender from '../composables/useDirectionRender'; import { useAuthStore } from '../stores/auth'; import { useCompanyStore } from '../stores/company'; @@ -11,11 +11,13 @@ import { saveProposal } from '../services/vehicles' import Swal from 'sweetalert2'; + const mapKey = import.meta.env.VITE_MAP_KEY; const zoom = ref(6); const heightMap = ref(768); const originCoords = ref(null); const destinationCoords = ref(null); + const polylines = ref([]); const isLoading = ref(false); const loadingSubmit = ref(false); const windowWidth = ref(window.innerWidth); @@ -28,7 +30,7 @@ comments: '', }); - const { geocodeAddress } = useDirectionsRender() + const { geocodeAddress, getDirections } = useDirectionsRender() const props = defineProps({ load: { @@ -61,6 +63,7 @@ await vehiclesStore.fetchVehicles(filterQuery); originCoords.value = await geocodeAddress(props.load.origin_formatted_address); destinationCoords.value = await geocodeAddress(props.load.destination_formatted_address); + polylines.value = await getDirections(originCoords.value, destinationCoords.value); isLoading.value = false; console.log(props.proposal); if(props.proposal) { @@ -204,7 +207,7 @@ - + diff --git a/src/components/MapDirections.vue b/src/components/MapDirections.vue index 6502a99..3765211 100644 --- a/src/components/MapDirections.vue +++ b/src/components/MapDirections.vue @@ -10,6 +10,7 @@ const polyline = ref([]); // const startLocation = ref({ lat: 37.7749, lng: -122.4194 }); // San Francisco // const endLocation = ref({ lat: 34.0522, lng: -118.2437 }); // Los Angeles + const mapKey = import.meta.env.VITE_MAP_KEY; onMounted(async() => { window.addEventListener('resize', handleResize); @@ -80,7 +81,7 @@