feat(wagonCounter): refs #6545 move to test

src/i18n/en/index.js

@@ -448,6 +448,7 @@ export default {
             typesList: 'Types List',
             typeCreate: 'Create type',
             typeEdit: 'Edit type',
+            wagonCounter: 'Trolley counter',
         },
         type: {
             name: 'Name',

src/i18n/es/index.js

@@ -448,6 +448,7 @@ export default {
             typesList: 'Listado tipos',
             typeCreate: 'Crear tipo',
             typeEdit: 'Editar tipo',
+            wagonCounter: 'Contador de carros',
         },
         type: {
             name: 'Nombre',

src/pages/Wagon/WagonCounter.vue

@@ -0,0 +1,128 @@
+<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: 1, title: 'Alquiler de CC Bandeja' },
+    bandejaRota: { count: 0, id: 2, title: 'CC Bandeja Rota' },
+    carryOficial: { count: 0, id: 3, title: ' Alquiler de CC Carry OFICIAL' },
+    candadoRojo: { count: 0, id: 4, title: 'CC Candado rojo' },
+    sacadores: { count: 0, id: 5, title: 'CC Sacadores' },
+    sinChapa: { count: 0, id: 6, title: 'CC Sin Chapa' },
+    carroRoto: { count: 0, id: 7, title: 'Carro Roto' },
+});
+
+const actions = {
+    add: (value) => value + 1,
+    substract: (value) => (value ? value - 1 : 0),
+    flush: () => 0,
+};
+
+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) {
+    const counter = counters.value[type].count;
+    let isOk = true;
+
+    if (action == 'flush') isOk = await confirm();
+
+    if (isOk) {
+        counters.value[type].count = actions[action](counter);
+        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('Se pondrá el contador a cero'),
+                },
+            })
+            .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"
+                        @click="handleEvent(name, 'substract')"
+                    >
+                        {{ t('Substract 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:
+    Substract 1: Quitar 1
+    Flush: Vaciar
+    Are you sure?: ¿Estás seguro?
+    It will set to 0: Se pondrá a 0
+</i18n>

src/router/modules/wagon.js

@@ -10,7 +10,7 @@ export default {
     component: RouterView,
     redirect: { name: 'WagonMain' },
     menus: {
-        main: ['WagonList', 'WagonTypeList'],
+        main: ['WagonList', 'WagonTypeList', 'WagonCounter'],
         card: [],
     },
     children: [
@@ -47,6 +47,15 @@ export default {
                     },
                     component: () => import('src/pages/Wagon/WagonCreate.vue'),
                 },
+                {
+                    path: 'counter',
+                    name: 'WagonCounter',
+                    meta: {
+                        title: 'wagonCounter',
+                        icon: 'add_circle',
+                    },
+                    component: () => import('src/pages/Wagon/WagonCounter.vue'),
+                },
             ],
         },
         {