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

add: tracking load & clean code save load

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-15 21:24:52 -06:00
parent 09386547ae
commit 106349f9a2
8 changed files with 273 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/CardEmpty.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
defineProps({
text: {
type: String,
required: true
}
})
</script>
<template>
<div class="card-info card-empty">
<img src="/images/logo.png" alt="logo" class="img-empty">
<p class="message">{{ text }}</p>
</div>
</template>
<style scoped>
.card-empty {
flex-direction: column;
justify-content: center;
align-items: center;
}
.img-empty {
width: 200px;
}
.message {
margin-top: 2rem;
font-size: 1.4rem;
color: #323032;
font-weight: 500;
}
</style>

19
src/components/CardLoad.vue
View File

@@ -1,16 +1,23 @@
<script setup>
import { useRouter } from 'vue-router';
import { getDateMonthDay } from '../helpers/date_formats';
import { getStatusPublished } from '../helpers/status';
import { getStatusLoad } from '../helpers/status';
import { useLoadsStore } from '../stores/loads';
import Swal from 'sweetalert2'
const router = useRouter();
const loadsStore = useLoadsStore();
const props = defineProps({
load: {
type: Object,
required: true,
},
readOnly: {
type: Boolean,
required: false,
default: false
}
});
@@ -71,6 +78,14 @@
loadsStore.openProposalsModal = true;
}
const handleTracking = () => {
let code = props.load.shipment_code;
router.push({
name: 'tracking-load',
params: {code}
});
}
</script>
<template>
@@ -101,7 +116,7 @@
<div class="col-lg-4 col-sm-12">
<p><span>Segmento: </span> {{ load._categories }}</p>
<p><span>Código de carga: </span> {{ load.shipment_code }}
<span v-if="load.load_status !== 'Draft'" class="tracking-icon">
<span v-if="load.load_status !== 'Draft' && !readOnly" class="tracking-icon" @click="handleTracking">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
</svg>
@@ -114,7 +129,7 @@
<div v-if="load.notes" class="box-note">
{{ load.notes }}
</div>
<div class="btn-row">
<div class="btn-row" v-if="!readOnly">
<button
class="btn-primary-sm bg-dark"
@click="handleDeleteLoad"

71
src/components/FormLoadModal.vue
View File

@@ -11,6 +11,7 @@
import { GoogleMap, Marker, Polyline } from "vue3-google-map";
import useDirectionsRender from '../composables/useDirectionRender';
import { useAuthStore } from '../stores/auth';
import Swal from 'sweetalert2';
const loadStore = useLoadsStore();
const auth = useAuthStore();
@@ -145,7 +146,7 @@
ref: '',
});
const handleSave = async() => {
const setLoadData = () => {
let loadData = {
actual_cost: formLoad.price,
truck_type: formLoad.truckType.meta_value || null,
@@ -182,21 +183,75 @@
posted_by_name: formLoad.owner
};
console.log('loadData: ', loadData);
return loadData;
}
const updateLoad = async(loadData) => {
isLoading.value = true;
if(loadStore.currentLoad){
const resp = await loadStore.updateLoad(loadStore.currentLoad._id, loadData);
const index = loadStore.loads.findIndex((load) => load._id === resp._id);
console.log({resp});
isLoading.value = false;
loadStore.loads[index] = resp;
document.getElementById('btnCloseFormLoadModal').click();
if(resp) {
const index = loadStore.loads.findIndex((load) => load._id === resp._id);
loadStore.loads[index] = {
...loadStore.loads[index],
resp
};
return 'success';
} else {
return 'error';
}
} else{
const resp = await loadStore.saveLoad(loadData);
isLoading.value = false;
loadStore.loads.unshift(resp);
document.getElementById('btnCloseFormLoadModal').click();
if(resp) {
loadStore.loads.unshift(resp);
return 'success';
} else {
return 'error';
}
}
}
const handleSave = async() => {
const loadData = setLoadData();
// console.log('loadData: ', loadData);
const resp = await updateLoad(loadData);
if(resp === 'success') {
document.getElementById('btnCloseFormLoadModal').click();
} else {
Swal.fire({
title: "Error!",
text: "No se pudo guardar carga, intente más tarde",
icon: "error"
});
}
}
const handlePostLoad = async() => {
let loadData = setLoadData();
loadData = {
...loadData,
status: "Published",
load_status: "Published"
}
const resp = await updateLoad(loadData);
if(resp === 'success') {
document.getElementById('btnCloseFormLoadModal').click();
} else {
Swal.fire({
title: "Error!",
text: "No se pudo publicar carga, intente más tarde",
icon: "error"
});
}
}
</script>
<template>
@@ -430,7 +485,7 @@
<button
type="button"
class="btn-primary-sm radius-sm"
@click=""
@click="handlePostLoad"
>Publicar</button>
</div>
</div>

6
src/components/ProposalsModal.vue
View File

@@ -6,7 +6,7 @@
import { getDateMonthDay } from '../helpers/date_formats';
import VehicleInfo from './VehicleInfo.vue';
import Swal from 'sweetalert2'
import CardEmpty from './CardEmpty.vue';
const loadsStore = useLoadsStore();
const authStore = useAuthStore();
@@ -202,9 +202,7 @@
</button>
</div>
</div>
<div v-else>
No hay ofertas
</div>
<CardEmpty v-else text="No hay ofertas"/>
</div>
</div>
<div class="modal-footer">

5
src/router/index.js
View File

@@ -100,6 +100,11 @@ const router = createRouter({
name: 'shippers',
component: () => import('../views/ShippersView.vue'),
},
{
path: 'tracking/:code',
name: 'tracking-load',
component: () => import('../views/TrackingLoadView.vue'),
},
]
}
]

13
src/stores/loads.js
View File

@@ -104,6 +104,18 @@ export const useLoadsStore = defineStore('load', () => {
}
}
const getLoad = async(filterQuery) => {
try {
const endpoint = `/loads/${filterQuery}`;
const {data} = await api.get(endpoint);
console.log(data);
return data;
} catch (error) {
console.log(error);
return [];
}
}
return {
openModalEdit,
@@ -112,6 +124,7 @@ export const useLoadsStore = defineStore('load', () => {
getProposalsOfLoads,
getCompanyLoads,
deleteLoad,
getLoad,
saveLoad,
updateLoad,
updateProposal,

18
src/views/LoadsPublishedView.vue
View File

@@ -1,14 +1,13 @@
<script setup>
import { onMounted, ref, watch } from 'vue';
import { useCompanyStore } from '../stores/company';
import Spiner from '../components/ui/Spiner.vue';
import CardLoad from '../components/CardLoad.vue';
import AttachmentsModal from '../components/AttachmentsModal.vue';
import { useLoadsStore } from '../stores/loads';
import FormLoadModal from '../components/FormLoadModal.vue';
import ProposalsModal from '../components/ProposalsModal.vue';
import CardEmpty from '../components/CardEmpty.vue';
const companyStore = useCompanyStore();
const loadStore = useLoadsStore();
const loading = ref(false);
const query = ref('');
@@ -92,12 +91,15 @@ import ProposalsModal from '../components/ProposalsModal.vue';
><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> carga</span></button>
</div>
<Spiner v-if="loading"/>
<CardLoad
v-else
v-for="load in loadStore.loads"
:key="load._id"
:load="load"
/>
<div v-else>
<CardLoad
v-if="loadStore.loads.length > 0"
v-for="load in loadStore.loads"
:key="load._id"
:load="load"
/>
<CardEmpty v-else text="No hay cargas agregadas"/>
</div>
</div>
</div>
</template>

128
src/views/TrackingLoadView.vue Normal file
View File

@@ -0,0 +1,128 @@
<script setup>
import { onMounted, ref } from 'vue';
import { useLoadsStore } from '../stores/loads';
import { useRoute } from 'vue-router';
import Spiner from '../components/ui/Spiner.vue';
import CardLoad from '../components/CardLoad.vue';
import useDirectionsRender from '../composables/useDirectionRender';
import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map';
import CardEmpty from '../components/CardEmpty.vue';
const isLoading = ref(true);
const loadStore = useLoadsStore();
const { geocodeAddress } = useDirectionsRender()
const route = useRoute();
const load = ref(null);
const zoom = ref(6);
const heightMap = ref(768);
const vehicleLastLocation = ref(null);
const originCoords = ref(null);
const destinationCoords = ref(null);
const isLoadActive = ref(false);
onMounted(() => {
window.addEventListener('resize', handleResize);
if(window.innerWidth <= 1024) {
zoom.value = 4;
heightMap.value = 420;
}
initData();
});
const initData = async() => {
isLoading.value = true;
const filter = "?shipment_code[$in]=" + route.params['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>
<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 text="No hay información disponible"/>
</div>
</template>
<style scoped>
</style>