226 lines
9.2 KiB
Vue
226 lines
9.2 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import CardEmpty from './CardEmpty.vue';
|
|
import Spiner from './ui/Spiner.vue';
|
|
import { GoogleMap, Marker, CustomMarker, Polyline } from 'vue3-google-map';
|
|
import useDirectionsRender from '../composables/useDirectionRender';
|
|
import Cardload from './CardLoad.vue';
|
|
import { useLoadsStore } from '../stores/loads';
|
|
import { useNotificationsStore } from '../stores/notifications';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
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);
|
|
const load = ref(null);
|
|
const vehicleLastLocation = ref(null);
|
|
const isLoadActive = ref(false);
|
|
|
|
const { getDirections, geocodeAddress } = useDirectionsRender()
|
|
const { t } = useI18n();
|
|
|
|
const props = defineProps({
|
|
proposal: {
|
|
type: Object,
|
|
required: true,
|
|
}
|
|
})
|
|
|
|
defineEmits(['reset-proposal'])
|
|
const loadStore = useLoadsStore();
|
|
const notyStore = useNotificationsStore();
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', handleResize);
|
|
if(window.innerWidth <= 1024) {
|
|
zoom.value = 4;
|
|
heightMap.value = 420;
|
|
}
|
|
|
|
initData()
|
|
});
|
|
|
|
const initData = async() => {
|
|
isLoading.value = true;
|
|
const code = props.proposal.load.shipment_code;
|
|
// console.log(props.proposal)
|
|
const filter = "?shipment_code[$in]=" + code;
|
|
const resp = await loadStore.getLoad(filter);
|
|
if(resp.total > 0) {
|
|
load.value = resp.data[0];
|
|
try {
|
|
const addressOrigin = load.value?.origin;
|
|
const addressDestination = load.value?.destination;
|
|
if(addressOrigin && addressDestination) {
|
|
if(addressOrigin.lat && addressOrigin.lng) {
|
|
originCoords.value = {lat: Number.parseFloat(addressOrigin.lat), lng: Number.parseFloat(addressOrigin.lng)};
|
|
} else {
|
|
// console.log('No hay coords origin')
|
|
let startLocation = addressOrigin.street_address1 + ', ' + addressOrigin.city + ', ' + addressOrigin.state + ', ' + addressOrigin.country + ', ' +addressOrigin.zipcode;
|
|
originCoords.value = await geocodeAddress(startLocation);
|
|
}
|
|
|
|
if(addressDestination.lat && addressDestination.lng) {
|
|
destinationCoords.value = {lat: Number.parseFloat(addressDestination.lat), lng: Number.parseFloat(addressDestination.lng)};
|
|
} else {
|
|
// console.log('No hay coords destinatiom')
|
|
let endLocation = addressDestination.street_address1 + ', ' + addressDestination.city + ', ' + addressDestination.state + ', ' + addressDestination.country + ', ' +addressDestination.zipcode;
|
|
destinationCoords.value = await geocodeAddress(endLocation);
|
|
}
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
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 : t('errors.map'),
|
|
show : true,
|
|
error: true
|
|
});
|
|
}
|
|
|
|
}
|
|
isLoading.value = false;
|
|
}
|
|
|
|
const handleResize = () => {
|
|
windowWidth.value = window.innerWidth
|
|
if(windowWidth.value <= 1024){
|
|
zoom.value = 4
|
|
heightMap.value = 420;
|
|
} else {
|
|
zoom.value = 6;
|
|
heightMap.value = 768;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal fade" id="loadDetailModal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="title mt-2 mb-3">{{ t('loads.loadDetails') }}</h2>
|
|
<button
|
|
id="btnCloseloadDetailModal"
|
|
type="button"
|
|
class="close bg-white"
|
|
data-dismiss="modal"
|
|
aria-label="Close"
|
|
@click="$emit('reset-proposal')"
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body view-proposals">
|
|
<Spiner v-if="isLoading"/>
|
|
<div v-else>
|
|
<div v-if="load">
|
|
<Cardload :load="load" :read-only="true"/>
|
|
<GoogleMap
|
|
:api-key="mapKey"
|
|
: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'}" />
|
|
<CustomMarker
|
|
v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
|
|
:options="{position: vehicleLastLocation}"
|
|
:clickable="false"
|
|
:draggable="false"
|
|
>
|
|
<div style="text-align: center">
|
|
<i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
|
|
</div>
|
|
</CustomMarker>
|
|
<Polyline
|
|
v-if="polylines"
|
|
:options="{
|
|
path: polylines,
|
|
strokeColor: '#2D90BB',
|
|
strokeOpacity: 0.7,
|
|
strokeWeight: 5,
|
|
clickable: true,
|
|
fillColor: '#75ad3e',
|
|
}"
|
|
/>
|
|
</GoogleMap>
|
|
</div>
|
|
<CardEmpty v-else :text="t('loads.noInfo')"/>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-dark"
|
|
data-dismiss="modal"
|
|
@click="$emit('reset-proposal')"
|
|
>{{ t('buttons.close') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.box-form {
|
|
width: 90%;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
.custom-selected-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.box-btns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
</style> |