From a3d6275b2f581e36eb0cd027dd5c319dc38ce01c Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 4 Dec 2023 10:38:35 +0100
Subject: [PATCH 1/2] refs #6545 counters created

---
 src/i18n/en/index.js             |  1 +
 src/i18n/es/index.js             |  1 +
 src/pages/Wagon/WagonCounter.vue | 90 ++++++++++++++++++++++++++++++++
 src/router/modules/wagon.js      | 11 +++-
 4 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Wagon/WagonCounter.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 0cd5788483..ab5842cf6b 100644
--- a/src/i18n/en/index.js
+++ b/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',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index daaf93e33e..04a25cb88d 100644
--- a/src/i18n/es/index.js
+++ b/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',
diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
new file mode 100644
index 0000000000..8e1cabf1b5
--- /dev/null
+++ b/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>
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
index 3fb808778f..238e482dd2 100644
--- a/src/router/modules/wagon.js
+++ b/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'),
+                },
             ],
         },
         {

From a730f2c073977409517d6371d334ac986ec207d9 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 4 Dec 2023 15:07:40 +0100
Subject: [PATCH 2/2] refs #6545 refactor

---
 src/pages/Wagon/WagonCounter.vue | 68 +++++++++++++++++++++++++-------
 1 file changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
index 8e1cabf1b5..38e9bc529a 100644
--- a/src/pages/Wagon/WagonCounter.vue
+++ b/src/pages/Wagon/WagonCounter.vue
@@ -2,19 +2,22 @@
 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: 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' },
+    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 = {
@@ -35,24 +38,45 @@ function getUrl(id) {
     return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
 }
 
-function handleEvent(type, action) {
+async function handleEvent(type, action) {
     const counter = counters.value[type].count;
-    counters.value[type].count = actions[action](counter);
-    localStorage.setItem(type, 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="q-mx-auto q-mt-xl">
-        <QItem v-for="(props, name) in counters" :key="name">
+    <QList class="row q-mx-auto q-mt-xl">
+        <QItem v-for="(props, name) in counters" :key="name" class="col-6">
             <QItemSection>
-                <p class="text-h5">{{ props.title }}</p>
                 <QImg
                     :src="getUrl(props.id)"
-                    width="150px"
+                    width="130px"
                     @click="handleEvent(name, 'add')"
                 />
+                <p class="title">{{ props.title }}</p>
             </QItemSection>
-            <QItemSection>
+            <QItemSection class="q-ma-none">
                 <QItemLabel class="text-h4">
                     {{ props.count }}
                 </QItemLabel>
@@ -61,6 +85,7 @@ function handleEvent(type, action) {
                         class="text-center q-mr-xs"
                         color="warning"
                         dense
+                        size="sm"
                         @click="handleEvent(name, 'substract')"
                     >
                         {{ t('Substract 1') }}
@@ -69,12 +94,14 @@ function handleEvent(type, action) {
                         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>
@@ -82,9 +109,20 @@ function handleEvent(type, action) {
 .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>