refs #6545 counters created

src/i18n/en/index.js

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

src/i18n/es/index.js

@@ -449,6 +449,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,90 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useSession } from 'src/composables/useSession';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const session = useSession();
+const token = session.getToken();
+
+const counters = ref({
+    alquilerBandeja: { count: 0, id: 27098, title: 'Alquiler de CC Bandeja' },
+    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota' },
+    carryOficial: { count: 0, id: 27097, title: ' Alquiler de CC Carry OFICIAL' },
+    candadoRojo: { count: 0, id: 142252, title: 'CC Candado rojo' },
+    sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
+    sinChapa: { count: 0, id: 142258, title: 'CC Sin Chapa' },
+    carroRoto: { count: 0, id: 142251, 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}`;
+}
+
+function handleEvent(type, action) {
+    const counter = counters.value[type].count;
+    counters.value[type].count = actions[action](counter);
+    localStorage.setItem(type, counters.value[type].count);
+}
+</script>
+<template>
+    <QList class="q-mx-auto q-mt-xl">
+        <QItem v-for="(props, name) in counters" :key="name">
+            <QItemSection>
+                <p class="text-h5">{{ props.title }}</p>
+                <QImg
+                    :src="getUrl(props.id)"
+                    width="150px"
+                    @click="handleEvent(name, 'add')"
+                />
+            </QItemSection>
+            <QItemSection>
+                <QItemLabel class="text-h4">
+                    {{ props.count }}
+                </QItemLabel>
+                <QItemLabel>
+                    <QBtn
+                        class="text-center q-mr-xs"
+                        color="warning"
+                        dense
+                        @click="handleEvent(name, 'substract')"
+                    >
+                        {{ t('Substract 1') }}
+                    </QBtn>
+                    <QBtn
+                        class="text-center q-ml-xs"
+                        color="red"
+                        dense
+                        @click="handleEvent(name, 'flush')"
+                    >
+                        {{ t('Flush') }}
+                    </QBtn>
+                </QItemLabel>
+            </QItemSection>
+        </QItem>
+    </QList>
+</template>
+<style lang="scss" scoped>
+.q-list {
+    max-width: 50em;
+}
+</style>
+<i18n>
+es:
+    Substract 1: Quitar 1
+    Flush: Vaciar
+</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'),
+                },
             ],
         },
         {