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

calendar done

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-07-13 20:03:44 -06:00
parent a0032b26c1
commit 9cf51b9650
16 changed files with 255 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/CardBudget.vue
View File

@@ -116,6 +116,7 @@
p span {
font-weight: bold;
color: rgb(66, 46, 46);
}
.card-footer {

15
src/components/CardLoad.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { getDateMonthDay } from '../helpers/date_formats';
import { getDayMonthYear } from '../helpers/date_formats';
import { getStatusPublished } from '../helpers/status';
import { getStatusLoad } from '../helpers/status';
import { useLoadsStore } from '../stores/loads';
@@ -93,15 +93,6 @@
// })
}
// const makeCall = (phoneNumber) => {
// console.log(phoneNumber)
// // Formatear el número de teléfono eliminando espacios y caracteres especiales
// // const formattedPhoneNumber = phoneNumber.value.replace(/[^0-9]/g, '');
// // Abrir la aplicación de llamadas telefónicas con el número especificado
// window.open(`tel:${phoneNumber}`, '_self');
// };
</script>
<template>
@@ -139,12 +130,12 @@
<div class="col-lg-4 col-sm-12">
<p><span>{{t('loads.truckType')}}: </span> {{ load.truck_type }}</p>
<p><span>{{t('loads.weight')}}: </span> {{ load.weight }} KG</p>
<p><span>{{t('loads.dateLoad')}}: </span> {{ getDateMonthDay(load.est_loading_date) }}</p>
<p><span>{{t('loads.dateLoad')}}: </span> {{ getDayMonthYear(load.est_loading_date) }}</p>
</div>
<div class="col-lg-4 col-sm-12">
<p><span>{{t('loads.product')}}: </span> {{ load?.product?.name }}</p>
<p><span>{{t('loads.cost')}}: </span> {{ load.actual_cost }}</p>
<p><span>{{t('loads.dateDownload')}}: </span> {{getDateMonthDay(load.est_unloading_date) }}</p>
<p><span>{{t('loads.dateDownload')}}: </span> {{getDayMonthYear(load.est_unloading_date) }}</p>
</div>
<div class="col-lg-4 col-sm-12">
<p><span>{{t('global.segment')}}: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>

2
src/components/CustomPopup.vue
View File

@@ -67,7 +67,7 @@
background-color: #FFF;
opacity: 1;
border-radius: 13px;
padding: 20px 32px;
padding: 20px 20px;
display: flex;
flex-direction: column;
/* flex-wrap: nowrap; */

25
src/composables/useCalendar.js Normal file
View File

@@ -0,0 +1,25 @@
import { ref } from "vue";
import { getCalendar } from "../services/company";
export default function useCalendar() {
const loads = ref([]);
const loading = ref(false);
const getCalendarDate = async(startDate, endDate) => {
loading.value = true;
const resp = await getCalendar(startDate, endDate);
if(resp === null) {
loading.value = false;
loads.value = [];
return;
}
loads.value = resp.data.data;
loading.value = false;
}
return {
getCalendarDate,
loads,
loading
}
}

3
src/composables/userSearchLoads.js
View File

@@ -16,7 +16,8 @@ export default function useSearchLoads() {
filterStr = "?"+cleanfilterArr.join("&");
}
try {
const endpoint = `/v1/loads/find${filterStr}&$sort%5BcreatedAt%5D=-1`;
const endpoint = `/v1/loads/find${filterStr}&$sort[createdAt]=-1`;
console.log(endpoint);
const {data} = await api.get(endpoint);
total.value = data.total;
loads.value = data.data;

36
src/helpers/date_formats.js
View File

@@ -28,18 +28,37 @@ const monthsAbr = [
"Dic"
];
export const getDateMonthDay = (value) => {
const date = new Date(value)
return date.toLocaleString(['en-US'], {
export const getDayMonthYear = (value) => {
if(value === null) return 'Fecha invalida';
const year = value.substring(0, 4);
const month = value.substring(5, 7);
const day = value.substring(8, 10);
return `${day}/${month}/${year}`;
};
export const getDateMonthDay = (value) => {
console.log(value)
// Crear una fecha a partir del valor proporcionado
const date = new Date(value);
// Ajustar la fecha a la zona horaria de México manualmente
const utcOffset = -6; // Offset de UTC para la hora estándar de México
date.setHours(date.getHours() + utcOffset);
// Convertir la fecha a la hora de México
const options = {
timeZone: 'America/Mexico_City',
month: 'short',
day: '2-digit',
year: 'numeric',
};
})
}
// Convertir la fecha a una cadena localizada con la zona horaria de México
const dateString = date.toLocaleString('es-ES', options);
return dateString;
};
export const getDateMonthDayEs = (value, isFull = false) => {
console.log(value);
const date = new Date(value)
let month = '';
if(isFull) {
@@ -67,3 +86,10 @@ export const getDateTime = (value, hour) => {
return dateFormat;
}
export const formatOnlyDate = (date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // Agregar cero si es necesario
const day = String(date.getDate()).padStart(2, '0'); // Agregar cero si es necesario
return `${year}/${month}/${day}`;
}

4
src/i18n/en.js
View File

@@ -398,7 +398,9 @@ const en = {
},
calendar: {
title: 'Calendar',
helpText: 'Load status indicators'
helpText: 'Load status indicators',
general: 'General calendar',
my: 'My calendar'
}
};

4
src/i18n/es.js
View File

@@ -405,7 +405,9 @@ const es = {
},
calendar: {
title: 'Calendario',
helpText: 'Indicadores de estado de la carga'
helpText: 'Indicadores de estado de la carga',
general: 'Calendario general',
my: 'Mi calendario'
},
};

1
src/layouts/AdminLayout.vue
View File

@@ -59,6 +59,7 @@
}
.view {
margin: 24px 0px;
padding: 8px 10px;
}
}
</style>

30
src/services/company.js
View File

@@ -86,9 +86,8 @@ export const deleteUser = async(user_id) => {
export const getBudgets = async(filter) => {
try {
const endpoint = `v1/budgets/${filter}`;
const endpoint = `v1/budgets/find${filter}&sort[createdAt]=-1`;
const {data} = await api.get(endpoint);
// console.log(data);
return data;
} catch (error) {
console.log(error);
@@ -99,8 +98,9 @@ export const getBudgets = async(filter) => {
export const updateBudget = async(id, formData) => {
try {
const endpoint = `/budgets/${id}`;
const endpoint = `v1/budgets/${id}`;
const {data} = await api.patch(endpoint, formData);
console.log(data);
return data;
} catch (error) {
console.log(error);
@@ -110,7 +110,7 @@ export const updateBudget = async(id, formData) => {
export const createBudget = async(formData) => {
try {
const endpoint = `/budgets`;
const endpoint = `v1/budgets/new`;
const {data} = await api.post(endpoint, formData);
return data;
} catch (error) {
@@ -121,7 +121,7 @@ export const createBudget = async(formData) => {
export const deleteBudget = async(id) => {
try {
const endpoint = `/budgets/${id}`;
const endpoint = `v1/budgets/${id}`;
const {data} = await api.delete(endpoint);
return data;
} catch (error) {
@@ -146,7 +146,7 @@ export const createLocation = async(formData) => {
try {
const endpoint = `/v1/branches/new`;
const {data} = await api.post(endpoint, formData);
return data;
return {data};
} catch (error) {
console.log(error);
return null;
@@ -175,6 +175,24 @@ export const deleteLocation = async(id) => {
}
}
export const getCalendar = async(startDate, endDate) => {
try {
const endpoint = `/v1/loads/calendar?$sort[createdAt]=-1&date[lte]=${endDate}&date[gte]=${startDate}&elements=1000`;
console.log(endpoint);
const {data} = await api.get(endpoint);
return {
msg: "success",
data: data
};
} catch (error) {
console.log(error);
return {
msg: "Algo salió mal, intente nás tarde",
data: null
};
}
}
// export const editCompany = async(companyId, formData) => {
// try {

4
src/stores/company.js
View File

@@ -211,7 +211,7 @@ export const useCompanyStore = defineStore('company', () => {
}
}
const getBudgetsCompany = async(filterQuery, reload = false) => {
const getBudgetsCompany = async(filterQuery, reload = false) => { //here
let filterArr = Object.values(filterQuery);
let cleanfilterArr = filterArr.filter(n=>n);
@@ -222,7 +222,7 @@ export const useCompanyStore = defineStore('company', () => {
if(budgets.value.length <= 0 || reload === true) {
try {
const data = await getBudgets(filterStr + '&$sort%5BcreatedAt%5D=-1');
const data = await getBudgets(filterStr);
console.log(data.total);
if(data.total > 0) {
budgets.value = data.data;

19
src/views/CalculatorView.vue
View File

@@ -17,7 +17,7 @@
const currentBudget = ref(null);
const openModal = ref(false);
const printOpen = ref(false);
const limit = 2;
const limit = 10;
onMounted(() => {
getInitData();
@@ -25,8 +25,8 @@
const getInitData = async() => {
loading.value = true;
filterQuery.value.limit = '$limit=' + limit;
filterQuery.value.skip = "$skip=0"
filterQuery.value.limit = "elements=" + limit;
filterQuery.value.page = "page=" + 0;
filterQuery.value.company = "company="+ localStorage.getItem('id');
await companyStore.getBudgetsCompany(filterQuery.value, false)
loading.value = false;
@@ -39,8 +39,8 @@
}
watch(query, () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ 100;
filterQuery.value.page = "page=" + 0;
filterQuery.value.limit = "elements=" + 100;
if(query.value.length === 0){
clearRequest();
filterQuery.value.search = "";
@@ -59,9 +59,10 @@
const getBudgetsByPage = async(data) => {
loading.value = true;
filterQuery.value.skip = "$skip="+ data.skip;
filterQuery.value.page = "page="+ data.page;
companyStore.budgetsCurrentPage = data.page
await getBudgetsWithFilters(filterQuery.value)
loading.value = false;
}
const clearFilter = () => {
@@ -77,8 +78,8 @@
}
const clearRequest = () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ limit;
filterQuery.value.page = "page=" + 0;
filterQuery.value.limit = "elements="+ limit;
companyStore.budgetsCurrentPage = 1;
}
@@ -137,8 +138,8 @@
/>
<Pagination
:limit="limit"
:current-page="companyStore.budgetsCurrentPage"
:total="companyStore.budgetsTotal"
:current-page="companyStore.budgetsCurrentPage"
@get-elements="getBudgetsByPage"
/>
</div>

171
src/views/CalendarView.vue
View File

@@ -1,15 +1,22 @@
<script setup>
import { Qalendar } from 'qalendar';
import data from '../data/events.json';
import {eventStatusLoad} from '../helpers/status';
import {getDateTime} from '../helpers/date_formats';
import {getDateTime, formatOnlyDate} from '../helpers/date_formats';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import useCalendar from '../composables/useCalendar';
import CustomPopup from '../components/CustomPopup.vue';
import { watch } from 'vue';
const events = ref([]);
const router = useRouter();
const { t } = useI18n()
const { t, locale } = useI18n()
const { getCalendarDate, loading, loads } = useCalendar()
const filter = ref({value: 'general', label: t('calendar.general')})
const optionsFilter = ref([])
const openPopup = ref(false);
const config = {
week: {
@@ -44,18 +51,65 @@
// showCurrentTime: true, // Display a line indicating the current time
}
onMounted(() => {
data.forEach((e, i) => {
const indicator = eventStatusLoad(e.status);
const dateStart = getDateTime(e.date, 0);
const dateEnd = getDateTime(e.date, 1);
onMounted( async() => {
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const startDate = new Date(year, month, 1);
const endDate = new Date(year, month + 1, 0);
await getCalendarDate(formatOnlyDate(startDate), formatOnlyDate(endDate));
// console.log(loads.value)
optionsFilter.value = [
{value: 'general',label: t('calendar.general')},
{value: 'my',label: t('calendar.my')},
]
mapLoadsToEvents()
});
const redirectToTracking = (id) => {
window.open('/publico/tracking/' + id, '_blank');
}
watch(locale, () => {
optionsFilter.value = [
{value: 'general',label: t('calendar.general')},
{value: 'my',label: t('calendar.my')},
]
})
const handleUpdateMode = (ev) => {
console.log(ev)
console.log('clic en el calendario');
}
const handleClickDate = (ev) => {
console.log(ev);
console.log('clic en la fecha');
}
const handleUpdatedPeriod = async(ev) => {
console.log(ev);
const start = formatOnlyDate(ev.start)
const end = formatOnlyDate(ev.end)
await getCalendarDate(start, end);
console.log('LOADS: ', loads.value)
mapLoadsToEvents()
}
const mapLoadsToEvents = () => {
events.value = [];
loads.value.forEach((e) => {
const indicator = eventStatusLoad(e.load_status);
const dateStart = getDateTime(e.load_status_updated, 0);
const dateEnd = getDateTime(e.load_status_updated, 1);
// console.log('dateStart', dateStart)
// console.log('dateEnd', dateEnd)
events.value.push({
id: i,
id: e._id,
title: e.shipment_code,
// isEditable: true,
// isCustom: true,
with: indicator.status,
description: indicator.status,
description: indicator.load_status,
color: indicator.color,
time: {
start: dateStart,
@@ -63,28 +117,51 @@
}
})
});
});
const redirectToTracking = (code) => {
router.push({
name: 'tracking-load',
params: {code}
});
}
const closePopup = () => {
openPopup.value = false
}
const selectedFilter = (type) => {
filter.value = type
openPopup.value = false
}
</script>
<template>
<div
v-if="openPopup"
>
<CustomPopup
:options="optionsFilter"
:value="filter"
@change-value="selectedFilter"
@close-popup="closePopup"
selected-color="#e3a11e"
/>
</div>
<div>
<h2 class="title mb-4">{{ t('calendar.title') }}</h2>
<div class="box-indicators">
<h2>{{ t('calendar.helpText') }}</h2>
<div class="indicators">
<i class="fa-solid fa-circle" style="color: yellow"></i> {{ t('global.published') }}
<i class="fa-solid fa-circle" style="color: green"></i> {{ t('global.loading') }}
<i class="fa-solid fa-circle" style="color: red"></i> {{ t('global.transit') }}
<i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.downloading') }}
<i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.delivered') }}
<div class="header">
<div class="indicators">
<span><i class="fa-solid fa-circle" style="color: yellow"></i> {{ t('global.published') }}</span>
<span><i class="fa-solid fa-circle" style="color: green"></i> {{ t('global.loading') }}</span>
<span><i class="fa-solid fa-circle" style="color: red"></i> {{ t('global.transit') }}</span>
<span><i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.downloading') }}</span>
<span><i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.delivered') }}</span>
</div>
<div class="box-filter"
@click="openPopup = true"
>
<span class="clear-sm" v-if="filter === null">{{ t('directory.directory') }}</span>
<span class="clear-sm" v-else>{{filter.label}}</span>
<i class="fa-solid fa-filter"></i>
</div>
</div>
</div>
<div class="calendar">
@@ -92,6 +169,10 @@
<Qalendar
:events="events"
:config="config"
@updated-mode="handleUpdateMode"
@updated-period="handleUpdatedPeriod"
@datetime-was-clicked="handleClickDate"
:is-loading="loading"
>
<template #eventDialog="props">
<div v-if="props.eventDialogData && props.eventDialogData.title" class="event-modal">
@@ -103,7 +184,7 @@
<span
class="tracking-icon"
:style="{color: props.eventDialogData.color}"
@click="redirectToTracking(props.eventDialogData.title)">
@click="redirectToTracking(props.eventDialogData.id)">
<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>
@@ -175,17 +256,49 @@
.box-indicators h2 {
display: flex;
justify-content: end;
justify-content: start;
font-weight: 600;
font-size: 1.2rem;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
gap: 1rem;
align-items: center;
// flex-wrap: wrap;
}
.box-filter {
padding: 12px 8px;
background-color: #FFF;
border-radius: 5px;
display: flex;
flex-direction: row;
border: 1px rgb(186, 175, 175) solid;
gap: 1rem;
align-items: center;
cursor: pointer;
}
.filters {
display: flex;
flex-direction: row;
align-items: center;
// flex-wrap: wrap;
flex: 1;
justify-content: end;
}
.indicators {
display: flex;
// flex: 1;
justify-content: end;
flex-direction: row;
align-items: center;
gap: 1rem;
gap: 0.7rem;
flex-wrap: wrap;
}
@@ -193,6 +306,10 @@
.calendar {
height: calc(100vh - 280px);
}
.header {
align-items: start;
}
}
</style>

3
src/views/LoadsPublishedView.vue
View File

@@ -57,6 +57,7 @@
const getLoadWithFilters = async(filter) => {
loading.value = true;
console.log(filter);
await loadStore.getCompanyLoads(filter, true);
loading.value = false;
}
@@ -64,7 +65,7 @@
const search = () => {
setTimeout(() => {
if(query.value.length >= 2){
// filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
// filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
filterQuery.value.search = "posted_by_name[$regex]="+query.value+"&posted_by_name[$options]=i";
getLoadWithFilters(filterQuery.value);
}

1
src/views/LocationsView.vue
View File

@@ -116,7 +116,6 @@
}
const selectedType = (type) => {
console.log(type)
typeDirection.value = type
openPopup.value = false
}

4
src/views/SearchLoadsView.vue
View File

@@ -75,8 +75,8 @@
const search = () => {
if(query.value.length >= 2){
// filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
filterQuery.value.search = "company.company_name[$regex]=" + query.value + "&company.company_name[$options]=i";
filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
// filterQuery.value.search = "company.company_name[$regex]=" + query.value + "&company.company_name[$options]=i";
getLoadsPublished(filterQuery.value);
}