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

add: map directions & set data load in form edit

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-09 19:58:37 -06:00
parent cea26e1f6e
commit bb6cd37532
10 changed files with 393 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
src/components/FormLoadModal.vue
View File

@@ -1,31 +1,103 @@
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { GoogleMap, Marker } from "vue3-google-map";
import { reactive, ref, onMounted, watch } from 'vue';
import { useLoadsStore } from '../stores/loads';
import Custominput from './ui/custominput.vue';
import Segments from './ui/Segments.vue';
import TruckTypes from './ui/TruckTypes.vue';
import Cities from './ui/Cities.vue';
import States from './ui/States.vue';
import Products from './ui/Products.vue';
import { GoogleMap, Marker, Polyline } from "vue3-google-map";
import useDirectionsRender from '../composables/useDirectionRender';
const props = defineProps({
load: {
type: Object,
required: false
}
})
// const startLocation = ref({query: 'C. 40 370, San Román, 97540 Izamal, Yuc.'});
// const endLocation = ref({query: 'Izamal-Valladolid, 97557 Sudzal, Yuc.'})
const startLocation = ref({ lat: 37.7749, lng: -122.4194 }); // San Francisco
const endLocation = ref({ lat: 34.0522, lng: -118.2437 }); // Los Angeles
const loadStore = useLoadsStore();
const windowWidth = ref(window.innerWidth);
const zoom = ref(6);
const heightMap = ref(768);
const originCoords = ref(null);
const destinationCoords = ref(null);
const startLocation = ref(null);
const endLocation = ref(null);
const { geocodeAddress } = useDirectionsRender();
const clearLoad = () => {
loadStore.currentLoad = null;
loadStore.openModalEdit = false;
}
const handleResize = () => {
windowWidth.value = window.innerWidth
if(windowWidth.value <= 1024){
zoom.value = 4
heightMap.value = 420;
} else {
zoom.value = 6;
heightMap.value = 768;
}
}
onMounted(() => {
window.addEventListener('resize', handleResize);
// mapRef.value = this.$refs.myMap;
if(window.innerWidth <= 1024) {
zoom.value = 4;
heightMap.value = 420;
}
//origin_formatted_address
if(loadStore.currentLoad){
formLoad.price = loadStore.currentLoad.actual_cost;
formLoad.segment = loadStore.currentLoad.categories.map(m =>{
return { name: m.name };
});
startLocation.value = loadStore.currentLoad.origin_formatted_address;
endLocation.value = loadStore.currentLoad.destination_formatted_address;
formLoad.terms = {name: loadStore.currentLoad.product.name};
formLoad.owner = loadStore.currentLoad.posted_by_name;
formLoad.notes = loadStore.currentLoad.notes;
formLoad.weight = loadStore.currentLoad.weight;
formLoad.dateLoad = loadStore.currentLoad.est_loading_date.substring(0, 10);
formLoad.dateDownload = loadStore.currentLoad.est_unloading_date.substring(0, 10);
formLoad.truckType = {meta_value: loadStore.currentLoad.truck_type};
origin.locationNameOrigin = loadStore.currentLoad.origin.company_name;
origin.addressOrigin = loadStore.currentLoad.origin.street_address1;
origin.stateOrigin = { state_name: loadStore.currentLoad.origin.state };
origin.cityOrigin = { city_name: loadStore.currentLoad.origin.city };
origin.countryOrigin = loadStore.currentLoad.origin.country;
origin.postalCodeOrigin = loadStore.currentLoad.origin.zipcode;
origin.refOrigin = loadStore.currentLoad.origin.landmark;
destination.locationNameDestination = loadStore.currentLoad.destination.company_name;
destination.addressDestination = loadStore.currentLoad.destination.street_address1;
destination.stateDestination = { state_name: loadStore.currentLoad.destination.state };
destination.cityDestination = { city_name: loadStore.currentLoad.destination.city };
destination.countryDestination = loadStore.currentLoad.destination.country;
destination.postalCodeDestination = loadStore.currentLoad.destination.zipcode;
destination.refDestination = loadStore.currentLoad.destination.landmark;
getCoordsMap();
watch(origin, async() => {
startLocation.value = origin.addressOrigin + ', ' + origin.cityOrigin.city_name + ', ' + origin.stateOrigin.state_name + ', ' + origin.countryOrigin + ', ' +origin.postalCodeOrigin;
originCoords.value = await geocodeAddress(startLocation.value);
console.log('Origin:')
console.log(originCoords.value)
})
watch(destination, async() => {
endLocation.value = destination.addressDestination + ', ' + destination.cityDestination.city_name + ', ' + destination.stateDestination.state_name + ', ' + destination.countryDestination + ', ' +destination.postalCodeDestination;
destinationCoords.value = await geocodeAddress(endLocation.value);
console.log('Destination:')
console.log(destinationCoords.value);
})
}
})
const getCoordsMap = async() => {
originCoords.value = await geocodeAddress(loadStore.currentLoad.origin_formatted_address);
destinationCoords.value = await geocodeAddress(loadStore.currentLoad.destination_formatted_address);
}
@@ -36,9 +108,12 @@
truckType: [],
terms: [],
price: 0,
weigth: 0,
weight: 0,
notes: '',
owner: '',
});
const origin = reactive({
locationNameOrigin: '',
addressOrigin: '',
stateOrigin: '',
@@ -46,6 +121,9 @@
countryOrigin: '',
postalCodeOrigin: '',
refOrigin: '',
});
const destination = reactive({
locationNameDestination: '',
addressDestination: '',
stateDestination: '',
@@ -55,46 +133,11 @@
refDestination: '',
});
onMounted(() => {
window.addEventListener('resize', handleResize);
if(window.innerWidth <= 1024) {
zoom.value = 4;
heightMap.value = 420;
}
});
const handleResize = () => {
windowWidth.value = window.innerWidth
if(windowWidth.value <= 1024){
zoom.value = 4
heightMap.value = 420;
} else {
zoom.value = 6;
heightMap.value = 768;
}
}
const onApiLoaded = () => {
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(mapRef.value.$map);
// Configurar solicitud de dirección
const request = {
origin: startLocation.value,
destination: endLocation.value,
travelMode: google.maps.TravelMode.DRIVING,
};
// Obtener ruta
directionsService.route(request, (response, status) => {
if (status === 'OK') {
directionsRenderer.setDirections(response);
} else {
console.error('Error al trazar la ruta:', status);
}
});
};
const handleSave = () => {
console.log(formLoad);
console.log(origin)
console.log(destination)
}
</script>
<template>
@@ -119,14 +162,14 @@
<div class="form-section">
<div class="mb-4 mt-3">
<label class="custom-label">Segmento*</label>
<TruckTypes
v-model="formLoad.truckType"
<Segments
v-model="formLoad.segment"
/>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Tipo de transporte*</label>
<Segments
v-model="formLoad.segment"
<TruckTypes
v-model="formLoad.truckType"
/>
</div>
<Custominput
@@ -148,7 +191,7 @@
type="number"
:filled="false"
name="weight"
v-model:field="formLoad.weigth"
v-model:field="formLoad.weight"
/>
</div>
<div class="form-section">
@@ -189,25 +232,25 @@
type="text"
:filled="false"
name="name-location-origin"
v-model:field="formLoad.locationNameOrigin"
v-model:field="origin.locationNameOrigin"
/>
<Custominput
label="Dirección*"
type="text"
:filled="false"
name="address-origin"
v-model:field="formLoad.addressOrigin"
v-model:field="origin.addressOrigin"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Ciudad*</label>
<Cities
v-model="formLoad.cityOrigin"
v-model="origin.cityOrigin"
/>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Estado*</label>
<Cities
v-model="formLoad.stateOrigin"
<States
v-model="origin.stateOrigin"
/>
</div>
<Custominput
@@ -215,21 +258,21 @@
type="text"
:filled="false"
name="country-origin"
v-model:field="formLoad.countryOrigin"
v-model:field="origin.countryOrigin"
/>
<Custominput
label="Código Postal*"
type="text"
:filled="false"
name="postalCode-origin"
v-model:field="formLoad.postalCodeOrigin"
v-model:field="origin.postalCodeOrigin"
/>
<Custominput
label="Punto de referencia"
type="text"
:filled="false"
name="ref-origin"
v-model:field="formLoad.refOrigin"
v-model:field="origin.refOrigin"
/>
</div>
<div class="form-section">
@@ -239,25 +282,25 @@
type="text"
:filled="false"
name="name-location-destination"
v-model:field="formLoad.locationNameDestination"
v-model:field="destination.locationNameDestination"
/>
<Custominput
label="Dirección"
type="text"
:filled="false"
name="address-destination"
v-model:field="formLoad.addressDestination"
v-model:field="destination.addressDestination"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Ciudad*</label>
<Cities
v-model="formLoad.cityDestination"
v-model="destination.cityDestination"
/>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Estado*</label>
<Cities
v-model="formLoad.stateDestination"
<States
v-model="destination.stateDestination"
/>
</div>
<Custominput
@@ -265,45 +308,51 @@
type="text"
:filled="false"
name="country-destination"
v-model:field="formLoad.countryDestination"
v-model:field="destination.countryDestination"
/>
<Custominput
label="Código Postal*"
type="text"
:filled="false"
name="postalCode-destination"
v-model:field="formLoad.postalCodeDestination"
v-model:field="destination.postalCodeDestination"
/>
<Custominput
label="Punto de referencia"
type="text"
:filled="false"
name="ref-destination"
v-model:field="formLoad.refDestination"
v-model:field="destination.refDestination"
/>
</div>
</div>
<GoogleMap
api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
:center="{lat:19.432600, lng:-99.133209}"
:zoom="zoom"
:min-zoom="2"
:max-zoom="12"
:style="{width: 100 + '%', height: heightMap + 'px'}"
:options="{
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true
}"
@api-loaded="onApiLoaded"
>
<Marker :options="{position: startLocation}" />
<Marker :options="{position: endLocation}" />
</GoogleMap>
</form>
<GoogleMap
api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
:center="{lat:19.432600, lng:-99.133209}"
:zoom="zoom"
:min-zoom="2"
:max-zoom="12"
:style="{width: 100 + '%', height: heightMap + 'px'}"
:options="{
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true
}"
>
<Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
<Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
<!-- <Polyline :options="{
path: polyline,
// geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
}" /> -->
</GoogleMap>
</div>
<div class="modal-footer custom-footer">
<button
@@ -314,7 +363,7 @@
<button
type="button"
class="btn btn-dark"
@click=""
@click="handleSave"
>Guardar</button>
<button
type="button"