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

view vehicles

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-01-12 13:16:55 -06:00
parent 937c3a8fe5
commit c315f8814e
8 changed files with 314 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/CardVehicle.vue Normal file
View File

@@ -0,0 +1,141 @@
<script setup>
import { onMounted, ref } from 'vue';
import CustomRadioInput from './ui/CustomRadioInput.vue';
const props = defineProps({
vehicle: {
type: Object,
required: true
},
drivers: {
type: Array,
requited: true
}
})
const driver = ref(null);
const status = ref(null);
const loading = ref(false);
onMounted(() => {
status.value = props.vehicle.is_available === true ? 'Availiable' : 'Booked'
if(props.vehicle?.driver) {
const index = props.drivers.findIndex((d) => d._id === props.vehicle?.driver?._id);
driver.value = props.drivers[index];
}
})
const setDriver = () => {
console.log('Driver selected: ', driver.value.name)
}
</script>
<template>
<div class="card-fixed card-vehicle">
<div class="row my-2">
<div class="col-lg-6">
<p>Código: <span>{{ vehicle.vehicle_code }}</span></p>
<p>Tipo de transporte: <span>{{ vehicle.truck_type }}</span></p>
<p>Número de Serie: <span>{{ vehicle.vehicle_number }}</span></p>
<p>Segmento: <span>{{ vehicle._categories }}</span></p>
</div>
<div class="col-lg-6">
<p>Placas Tracto Camión: <span>{{ vehicle.circulation_serial_number }}</span></p>
<p>Placas Remolque 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
<p>Placas Remolque 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
<p>Base de carga: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
</div>
</div>
<p v-if="vehicle.notes">Información Adicional del Transporte:</p>
<div v-if="vehicle.notes" class="box-note mb-4">
{{ vehicle.notes }}
</div>
<div class="divider"></div>
<div class="row my-2">
<div class="col-lg-6">
<div class="custom-selected-field">
<label class="custom-label" for="driver">Conductor asignado:</label>
<select
class="custom-input-light"
name="driver"
id="driver"
v-model="driver"
@change="setDriver()"
>
<option disabled value="">-- Seleccionar conductor --</option>
<option v-for="driver in drivers" :value="driver">{{driver.name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<h4 class="custom-label mt-2">Status del vehiculo</h4>
<div class="d-flex">
<CustomRadioInput
value="Booked"
label="Reservado"
:name="'status-vehicle' + vehicle._id"
v-model:typeselected="status"
/>
<CustomRadioInput
value="Availiable"
label="Disponible"
:name="'status-vehicle' + vehicle._id"
v-model:typeselected="status"
/>
</div>
</div>
</div>
<div class="card-footer">
<button
class="btn btn-dark radius-sm"
@click="handleDeleteLocation"
>
<i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
</button>
<button
class="btn-primary-sm radius-sm"
@click="$emit('set-location')"
data-toggle="modal" data-target="#locationFormModal"
>
<i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
</button>
</div>
</div>
</template>
<style scoped>
.card-vehicle {
flex-direction: column;
width: 100% !important;
}
.card-footer {
display: flex;
justify-content: end;
gap: 1rem;
}
.custom-selected-field {
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
p {
font-size: 1rem;
font-weight: 400;
color: #323032;
font-weight: 700;
}
p span {
color: #323032;
font-weight: normal;
}
.box-note {
padding: 12px 16px;
background-color: aqua;
border-radius: 13px;
}
</style>

6
src/components/CreateUserModal.vue
View File

@@ -206,9 +206,9 @@ import Swal from 'sweetalert2';
v-model="userForm.job_role"
>
<option disabled value="">-- Seleccionar rol --</option>
<option value="Owner">Dueño</option>
<option value="Manager">Gerente</option>
<option value="Driver">Conductor</option>
<option value="owner">Dueño</option>
<option value="manager">Gerente</option>
<option value="driver">Conductor</option>
</select>
</div>
<div class="mb-4 mt-3">

17
src/components/FormLoadModal.vue
View File

@@ -129,6 +129,23 @@
})
})
watch(locationLoadSelected, () => {
console.log(locationLoadSelected);
origin.locationName = locationLoadSelected.value.branch_name;
origin.address = locationLoadSelected.value.address;
origin.state = { state_name: locationLoadSelected.value.state };
origin.city = { city_name: locationLoadSelected.value.city };
origin.ref = locationLoadSelected.value.description;
});
watch(locationDownloadSelected, () => {
destination.locationName = locationDownloadSelected.value.branch_name;
destination.address = locationDownloadSelected.value.address;
destination.state = { state_name: locationDownloadSelected.value.state };
destination.city = { city_name: locationDownloadSelected.value.city };
destination.ref = locationDownloadSelected.value.description;
});
const getLocations = async() => {
loadingLocations.value = true;
filterQueryVehicles.value.company = "company="+ localStorage.getItem('id');

4
src/components/MakeProposalModal.vue
View File

@@ -50,7 +50,9 @@
const initData = async() => {
isLoading.value = true;
await vehiclesStore.fetchVehicles("?company="+ authStore.user.company);
let filterQuery = [];
filterQuery.company = "company="+ authStore.user.company
await vehiclesStore.fetchVehicles(filterQuery);
originCoords.value = await geocodeAddress(props.load.origin_formatted_address);
destinationCoords.value = await geocodeAddress(props.load.destination_formatted_address);
isLoading.value = false;