add: edit proposal
This commit is contained in:
Alexandro Uc Santos
188
src/components/LoadDetailModal.vue
Normal file
188
src/components/LoadDetailModal.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<script setup>
|
||||
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 useDirectionsRender from '../composables/useDirectionRender';
|
||||
import Cardload from './cardload.vue';
|
||||
import { useLoadsStore } from '../stores/loads';
|
||||
|
||||
|
||||
const zoom = ref(6);
|
||||
const heightMap = ref(768);
|
||||
const originCoords = ref(null);
|
||||
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 { geocodeAddress } = useDirectionsRender()
|
||||
|
||||
const props = defineProps({
|
||||
proposal: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
defineEmits(['reset-proposal'])
|
||||
const loadStore = useLoadsStore();
|
||||
|
||||
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;
|
||||
const filter = "?shipment_code[$in]=" + code;
|
||||
const resp = await loadStore.getLoad(filter);
|
||||
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);
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
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">Detalles de carga</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="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'}" />
|
||||
<CustomMarker
|
||||
v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
|
||||
:options="{position: vehicleLastLocation}"
|
||||
:clickable="false"
|
||||
: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>
|
||||
<!-- <Polyline :options="{
|
||||
path: polyline,
|
||||
// geodesic: true,
|
||||
strokeColor: '#FF0000',
|
||||
strokeOpacity: 1.0,
|
||||
strokeWeight: 2
|
||||
}" /> -->
|
||||
</GoogleMap>
|
||||
</div>
|
||||
<CardEmpty v-else text="No hay información disponible"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-dark"
|
||||
data-dismiss="modal"
|
||||
@click="$emit('reset-proposal')"
|
||||
>Cerrar</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>
|
||||
Reference in New Issue
Block a user