add: Form create load
This commit is contained in:
Alexandro Uc Santos
376
src/components/FormLoadModal.vue
Normal file
376
src/components/FormLoadModal.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { GoogleMap, Marker } from "vue3-google-map";
|
||||
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 Products from './ui/Products.vue';
|
||||
|
||||
|
||||
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 clearLoad = () => {
|
||||
loadStore.currentLoad = null;
|
||||
}
|
||||
|
||||
|
||||
const formLoad = reactive({
|
||||
dateLoad: '',
|
||||
dateDownload: '',
|
||||
segment: [],
|
||||
truckType: [],
|
||||
terms: [],
|
||||
price: 0,
|
||||
weigth: 0,
|
||||
notes: '',
|
||||
owner: '',
|
||||
locationNameOrigin: '',
|
||||
addressOrigin: '',
|
||||
stateOrigin: '',
|
||||
cityOrigin: '',
|
||||
countryOrigin: '',
|
||||
postalCodeOrigin: '',
|
||||
refOrigin: '',
|
||||
locationNameDestination: '',
|
||||
addressDestination: '',
|
||||
stateDestination: '',
|
||||
cityDestination: '',
|
||||
countryDestination: '',
|
||||
postalCodeDestination: '',
|
||||
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);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal fade" id="formLoadModal" tabindex="-1" role="dialog" aria-labelledby="formLoadModal" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="title mt-2 mb-3">Crear nueva carga</h2>
|
||||
<button
|
||||
id="btnCloseFormLoadModal"
|
||||
type="button"
|
||||
class="close bg-white"
|
||||
data-dismiss="modal"
|
||||
@click="clearLoad"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-content">
|
||||
<div class="form-box">
|
||||
<div class="form-section">
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Segmento*</label>
|
||||
<TruckTypes
|
||||
v-model="formLoad.truckType"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Tipo de transporte*</label>
|
||||
<Segments
|
||||
v-model="formLoad.segment"
|
||||
/>
|
||||
</div>
|
||||
<Custominput
|
||||
label="Fecha de carga*"
|
||||
type="date"
|
||||
:filled="false"
|
||||
name="date-load"
|
||||
v-model:field="formLoad.dateLoad"
|
||||
/>
|
||||
<Custominput
|
||||
label="Fecha de descarga*"
|
||||
type="date"
|
||||
:filled="false"
|
||||
name="date-download"
|
||||
v-model:field="formLoad.dateDownload"
|
||||
/>
|
||||
<Custominput
|
||||
label="Peso de la carga*"
|
||||
type="number"
|
||||
:filled="false"
|
||||
name="weight"
|
||||
v-model:field="formLoad.weigth"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-section">
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Terminos*</label>
|
||||
<Products
|
||||
v-model="formLoad.terms"
|
||||
/>
|
||||
</div>
|
||||
<Custominput
|
||||
label="Precio*"
|
||||
type="Number"
|
||||
:filled="false"
|
||||
name="price"
|
||||
v-model:field="formLoad.price"
|
||||
/>
|
||||
<Custominput
|
||||
label="Notas"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="notes"
|
||||
v-model:field="formLoad.notes"
|
||||
/>
|
||||
<Custominput
|
||||
label="Publicación hecha por*"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="owner"
|
||||
v-model:field="formLoad.owner"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<div class="form-section">
|
||||
<h2>Dirección de origen</h2>
|
||||
<Custominput
|
||||
label="Nombre locación de carga*"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="name-location-origin"
|
||||
v-model:field="formLoad.locationNameOrigin"
|
||||
/>
|
||||
<Custominput
|
||||
label="Dirección*"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="address-origin"
|
||||
v-model:field="formLoad.addressOrigin"
|
||||
/>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Ciudad*</label>
|
||||
<Cities
|
||||
v-model="formLoad.cityOrigin"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Estado*</label>
|
||||
<Cities
|
||||
v-model="formLoad.stateOrigin"
|
||||
/>
|
||||
</div>
|
||||
<Custominput
|
||||
label="País*"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="country-origin"
|
||||
v-model:field="formLoad.countryOrigin"
|
||||
/>
|
||||
<Custominput
|
||||
label="Código Postal*"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="postalCode-origin"
|
||||
v-model:field="formLoad.postalCodeOrigin"
|
||||
/>
|
||||
<Custominput
|
||||
label="Punto de referencia"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="ref-origin"
|
||||
v-model:field="formLoad.refOrigin"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-section">
|
||||
<h2>Dirección de destino</h2>
|
||||
<Custominput
|
||||
label="Nombre locación de descarga*"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="name-location-destination"
|
||||
v-model:field="formLoad.locationNameDestination"
|
||||
/>
|
||||
<Custominput
|
||||
label="Dirección"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="address-destination"
|
||||
v-model:field="formLoad.addressDestination"
|
||||
/>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Ciudad*</label>
|
||||
<Cities
|
||||
v-model="formLoad.cityDestination"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4 mt-3">
|
||||
<label class="custom-label">Estado*</label>
|
||||
<Cities
|
||||
v-model="formLoad.stateDestination"
|
||||
/>
|
||||
</div>
|
||||
<Custominput
|
||||
label="País*"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="country-destination"
|
||||
v-model:field="formLoad.countryDestination"
|
||||
/>
|
||||
<Custominput
|
||||
label="Código Postal*"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="postalCode-destination"
|
||||
v-model:field="formLoad.postalCodeDestination"
|
||||
/>
|
||||
<Custominput
|
||||
label="Punto de referencia"
|
||||
type="text"
|
||||
:filled="false"
|
||||
name="ref-destination"
|
||||
v-model:field="formLoad.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>
|
||||
</div>
|
||||
<div class="modal-footer custom-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-dark"
|
||||
@click="clearLoad"
|
||||
data-dismiss="modal">Cerrar</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-dark"
|
||||
@click=""
|
||||
>Guardar</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-primary-sm radius-sm"
|
||||
@click=""
|
||||
>Publicar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radius-sm{
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.form-box {
|
||||
width: 95%;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 568px) {
|
||||
.form-box {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user