155 lines
4.8 KiB
Vue
155 lines
4.8 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { useSession } from 'src/composables/useSession';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useQuasar } from 'quasar';
|
|
import VnConfirm from 'components/ui/VnConfirm.vue';
|
|
|
|
const quasar = useQuasar();
|
|
const { t } = useI18n();
|
|
const session = useSession();
|
|
const token = session.getToken();
|
|
|
|
const counters = ref({
|
|
alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja', isTray: true },
|
|
bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota', isTray: true },
|
|
carryOficial: { count: 0, id: 96000, title: 'CC Carry OFICIAL TAG5' },
|
|
candadoRojo: { count: 0, id: 96002, title: 'CC Carry NO OFICIAL' },
|
|
sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
|
|
sinChapa: { count: 0, id: 2214, title: 'DC Carry Sin Placa CC' },
|
|
carroRoto: { count: 0, id: 142251, title: 'Carro Roto' },
|
|
});
|
|
|
|
const actions = {
|
|
add: (counter) => counter + 1,
|
|
subtract: (counter) => (counter ? counter - 1 : 0),
|
|
flush: () => 0,
|
|
addSpecific: (counter, amount) => counter + amount,
|
|
};
|
|
|
|
onMounted(() => {
|
|
const types = Object.keys(counters.value);
|
|
for (let type of types) {
|
|
const counter = localStorage.getItem(type);
|
|
counters.value[type].count = counter ? parseInt(counter) : 0;
|
|
}
|
|
});
|
|
|
|
function getUrl(id) {
|
|
return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
|
|
}
|
|
|
|
async function handleEvent(type, action, amount) {
|
|
const counter = counters.value[type].count;
|
|
let isOk = true;
|
|
|
|
if (action == 'flush') isOk = await confirm();
|
|
|
|
if (isOk) {
|
|
counters.value[type].count = actions[action](counter, amount);
|
|
localStorage.setItem(type, counters.value[type].count);
|
|
}
|
|
}
|
|
|
|
function confirm() {
|
|
return new Promise((resolve) => {
|
|
quasar
|
|
.dialog({
|
|
component: VnConfirm,
|
|
componentProps: {
|
|
title: t('Are you sure?'),
|
|
message: t('The counter will be reset to zero'),
|
|
},
|
|
})
|
|
.onOk(() => resolve(true))
|
|
.onCancel(() => resolve(false));
|
|
});
|
|
}
|
|
</script>
|
|
<template>
|
|
<QList class="row q-mx-auto q-mt-xl">
|
|
<QItem v-for="(props, name) in counters" :key="name" class="col-6">
|
|
<QItemSection>
|
|
<QImg
|
|
:src="getUrl(props.id)"
|
|
width="130px"
|
|
@click="handleEvent(name, 'add')"
|
|
/>
|
|
<p class="title">{{ props.title }}</p>
|
|
</QItemSection>
|
|
<QItemSection class="q-ma-none">
|
|
<QItemLabel class="text-h4">
|
|
{{ props.count }}
|
|
</QItemLabel>
|
|
<QItemLabel>
|
|
<QBtn
|
|
class="text-center q-mr-xs"
|
|
color="warning"
|
|
dense
|
|
size="sm"
|
|
v-if="props.isTray"
|
|
@click="handleEvent(name, 'addSpecific', 30)"
|
|
>
|
|
{{ t('Add 30') }}
|
|
</QBtn>
|
|
<QBtn
|
|
class="text-center q-mr-xs"
|
|
color="warning"
|
|
dense
|
|
size="sm"
|
|
v-else
|
|
@click="handleEvent(name, 'addSpecific', 10)"
|
|
>
|
|
{{ t('Add 10') }}
|
|
</QBtn>
|
|
</QItemLabel>
|
|
<QItemLabel>
|
|
<QBtn
|
|
class="text-center q-mr-xs"
|
|
color="warning"
|
|
dense
|
|
size="sm"
|
|
@click="handleEvent(name, 'subtract')"
|
|
>
|
|
{{ t('Subtract 1') }}
|
|
</QBtn>
|
|
<QBtn
|
|
class="text-center q-ml-xs"
|
|
color="red"
|
|
dense
|
|
size="sm"
|
|
@click="handleEvent(name, 'flush')"
|
|
>
|
|
{{ t('Flush') }}
|
|
</QBtn>
|
|
</QItemLabel>
|
|
</QItemSection>
|
|
<QSeparator class="q-mt-sm q-mx-none" color="primary" />
|
|
</QItem>
|
|
</QList>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.q-list {
|
|
max-width: 50em;
|
|
}
|
|
@media (max-width: $breakpoint-sm) {
|
|
.q-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.title {
|
|
min-height: 3em;
|
|
}
|
|
}
|
|
</style>
|
|
<i18n>
|
|
es:
|
|
Subtract 1: Quitar 1
|
|
Add 30: Añadir 30
|
|
Add 10: Añadir 10
|
|
Flush: Vaciar
|
|
Are you sure?: ¿Estás seguro?
|
|
It will set to 0: Se pondrá a 0
|
|
The counter will be reset to zero: Se pondrá el contador a cero
|
|
</i18n>
|