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/assets/main.css b/src/assets/main.css index 1d9bec4..6e35e2f 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -85,6 +85,18 @@ body { font-weight: 700; } +.btn-primary-nav { + background-color: #FBBA33; + padding: 8px 16px; + color: #323030; + font-size: 1.1rem; + border: none; + text-decoration: none; + text-align: center; + border-radius: 8px; + font-weight: 700; +} + .btn-primary-sm:hover { background-color: #e3a11e; transition: background-color 300ms ease; 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/components/CardLoad.vue b/src/components/CardLoad.vue index e0d8ce0..24228f6 100644 --- a/src/components/CardLoad.vue +++ b/src/components/CardLoad.vue @@ -115,7 +115,7 @@

-
+

Status de la publicación: {{ getStatusPublished(load) }}

Status de la carga: {{ getStatusLoad(load).status }}

@@ -149,7 +149,7 @@
{{ load.notes }}
-
+
-
+
diff --git a/src/components/DoughnutChartStatistics.vue b/src/components/DoughnutChartStatistics.vue index cd9c259..3ab63f6 100644 --- a/src/components/DoughnutChartStatistics.vue +++ b/src/components/DoughnutChartStatistics.vue @@ -25,16 +25,16 @@ onMounted(() => { props.data.forEach(item => { - const index = dataMap.value.findIndex((e) => e.label === item); - - if(index === -1) { + const index = dataMap.value.findIndex((e) => e.name?.toUpperCase() === item?.toUpperCase()); + if(index === -1) { // Lo agrega if(props.dataModel) { - const itemModel = props.dataModel.find((e) => e[props.targetFind] === item); - dataMap.value.push({ + const itemModel = props.dataModel.find((e) => e[props.targetFind].toUpperCase() === item.toUpperCase()); + const itemTem = { label: (props.targetLabel) ? itemModel[props.targetLabel] : item, data: 1, ...itemModel - }) + }; + dataMap.value.push(itemTem) } else { dataMap.value.push({ label: item, @@ -42,11 +42,10 @@ color: 'green' }); } - } else { + } else { // Lo actualiza dataMap.value[index].data += 1; } }); - chartData.value = { labels: dataMap.value.map((e) => e.label), datasets: [{ 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 @@