From 7f42655b1dc7a75b5157cd07badf849bc6c8207f Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 6 Sep 2022 13:59:00 +0200
Subject: [PATCH] feat(ticket_boxing): add section

---
 src/i18n/en/index.js                   |   4 +-
 src/i18n/es/index.js                   |   4 +-
 src/pages/Customer/CustomerMain.vue    |   2 +-
 src/pages/Ticket/Card/TicketBoxing.vue | 175 ++++++++++++++++---------
 src/pages/Ticket/Card/TicketCard.vue   |  18 +--
 src/pages/Ticket/TicketMain.vue        |   6 +-
 6 files changed, 130 insertions(+), 79 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 8b452ee83..4211416ca 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -61,7 +61,9 @@ export default {
             expedition: 'Expedition',
             item: 'Item',
             created: 'Created',
-            worker: 'Worker'
+            worker: 'Worker',
+            selectTime: 'Select time:',
+            selectVideo: 'Select video:'
         }
     },
     components: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index ccf991b5c..dd147ac42 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -61,7 +61,9 @@ export default {
             expedition: 'Expedición',
             item: 'Artículo',
             created: 'Creado',
-            worker: 'Trabajador'
+            worker: 'Trabajador',
+            selectTime: 'Seleccionar hora:',
+            selectVideo: 'Seleccionar video:'
         }
     },
     components: {
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index 9787fc415..a3d80e05c 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useState } from 'src/composables/useState';
-import LeftMenu from 'src/components/LeftMenu.vue';
+//import LeftMenu from 'src/components/LeftMenu.vue';
 
 const state = useState();
 const miniState = ref(true);
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 716310336..44231b06f 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -17,8 +17,13 @@ const entityId = computed(function () {
 });
 
 const expeditions = ref({});
-const url = ref({});
-//const video = ref({});
+const lastExpedition = ref();
+const slide = ref(null);
+const videoList = ref([]);
+const time = ref({
+    min: 0,
+    max: 24,
+});
 
 async function fetch() {
     const filter = {
@@ -26,84 +31,126 @@ async function fetch() {
             ticketFk: entityId.value,
         },
     };
-    const { data } = await axios.get(`/api/Expeditions/filter`, {
+    const { data } = await axios.get(`/Expeditions/filter`, {
         params: { filter },
     });
 
     if (data) expeditions.value = data;
-    console.log(expeditions.value);
 }
 
-async function selectVideo(expeditionId) {
-    url.value = `${window.location.origin}/api/Boxings/getVideo?id=${expeditionId}`;
-}
+async function getVideoList(expeditionId, timed) {
+    console.log('entry');
+    lastExpedition.value = expeditionId;
+    const params = {
+        id: expeditionId,
+    };
 
-/*async function getVideo(expeditionId) {
-    const { data } = await axios.get(`/api/Boxings/getVideo?id=${expeditionId}`);
-    const myUrl = window.URL.createObjectURL(new Blob([data]));
-    console.log(myUrl);
-    if (data) url.value = data;
-}*/
+    if (timed) {
+        Object.assign(params, { from: timed.min, to: timed.max });
+    }
+    const { data } = await axios.get(`/Boxings/getVideoList`, { params: params });
+    const list = [];
+
+    for (const video of data) {
+        const videName = video.split('.')[0].split('T')[1].replaceAll('-', ':');
+        list.push({
+            label: videName,
+            value: video,
+            url: `api/Boxings/getVideo?id=${expeditionId}&filename=${video}`,
+        });
+    }
+
+    console.log(list);
+    videoList.value = list.reverse();
+    if (list[0]) {
+        slide.value = list[0].value;
+        console.log({ min: list[0].label.split(':')[0], max: list[list.length - 1].label.split(':')[0] });
+        time.value = {
+            min: parseInt(list[0].label.split(':')[0]),
+            max: parseInt(list[list.length - 1].label.split(':')[0]),
+        };
+    }
+    console.log('slide', slide);
+    console.log('videoList', videoList);
+}
 </script>
 
 <template>
-    <q-layout view="hHh Lpr lff" container class="shadow-2 rounded-borders q-gutter-md">
-        <q-drawer
-            v-model="drawerLeft"
-            show-if-above
-            :width="200"
-            :breakpoint="700"
-            elevated
-            class="bg-primary text-white"
-        >
+    <q-layout view="hhh lpr ffr" class="fit">
+        <q-drawer show-if-above side="right" bordered>
             <q-scroll-area class="fit">
-                <q-card class="q-pa-md col">
-                    <q-video :title="url" :src="url" v-if="Object.keys(url).length !== 0" :ratio="16 / 9" />
-                </q-card>
-            </q-scroll-area>
-        </q-drawer>
-    </q-layout>
-</template>
-<!--
-<template>
-    <q-page class="q-pa-md row q-gutter-md">
-        <q-card class="q-pa-md col-2">
-            <q-scroll-area class="fit">
-                <q-list class="q-pa-xs q-gutter-md">
-                    <q-card
+                <q-list bordered separator style="max-width: 318px">
+                    <q-item v-if="lastExpedition">
+                        <q-item-section>
+                            <q-item-label class="text-h6">
+                                {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
+                            </q-item-label>
+                            <q-range
+                                v-model="time"
+                                @change="getVideoList(lastExpedition, time)"
+                                :min="0"
+                                :max="24"
+                                :step="1"
+                                :left-label-value="time.min + ':00'"
+                                :right-label-value="time.max + ':00'"
+                                label
+                                markers
+                                snap
+                                color="orange"
+                            />
+                        </q-item-section>
+                    </q-item>
+                    <q-item v-if="lastExpedition">
+                        <q-item-section>
+                            <q-select
+                                color="orange"
+                                v-model="slide"
+                                :options="videoList"
+                                :label="t('ticket.boxing.selectVideo')"
+                                emit-value
+                                map-options
+                            >
+                                <template #prepend>
+                                    <q-icon name="schedule" />
+                                </template>
+                            </q-select>
+                        </q-item-section>
+                    </q-item>
+                    <q-item
                         v-for="expedition in expeditions"
                         :key="expedition.id"
-                        @click="selectVideo(expedition.id)"
+                        @click="getVideoList(expedition.id)"
                         clickable
                         v-ripple
                     >
-                        <q-card-section>
-                            <q-item class="q-pa-none">
-                                <q-item-section>
-                                    <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-separator spaced color="orange" />
-                            <q-item class="q-pa-none">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
-                                    <q-item-label>
-                                        {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}</q-item-label
-                                    >
-                                    <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
-                                    <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
-                                    <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
-                                    <q-item-label>{{ expedition.userName }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-card-section>
-                    </q-card>
+                        <q-item-section>
+                            <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
+                        </q-item-section>
+                        <q-item-section>
+                            <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
+                            <q-item-label>
+                                {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
+                            </q-item-label>
+                            <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
+                            <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
+                            <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
+                            <q-item-label>{{ expedition.userName }}</q-item-label>
+                        </q-item-section>
+                    </q-item>
                 </q-list>
             </q-scroll-area>
-        </q-card>
-        <q-card class="q-pa-md col">
-            <q-video :title="url" :src="url" v-if="Object.keys(url).length !== 0" :ratio="16 / 9" />
-        </q-card>
-    </q-page>
+        </q-drawer>
+
+        <q-page-container>
+            <q-page>
+                <q-card>
+                    <q-carousel animated v-model="slide" height="max-content">
+                        <q-carousel-slide v-for="video in videoList" :key="video.value" :name="video.value">
+                            <q-video :src="video.url" :ratio="16 / 9" />
+                        </q-carousel-slide>
+                    </q-carousel>
+                </q-card>
+            </q-page>
+        </q-page-container>
+    </q-layout>
 </template>
--->
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 7ac41ebf4..73a26d406 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,23 +1,23 @@
 <script setup>
-import { computed } from 'vue';
-import { useState } from 'src/composables/useState';
-import { useRouter } from 'vue-router';
+//import { computed } from 'vue';
+//import { useState } from 'src/composables/useState';
+//import { useRouter } from 'vue-router';
 
-const state = useState();
-const router = useRouter();
-const entityId = computed(function () {
+//const state = useState();
+//const router = useRouter();
+/*const entityId = computed(function () {
     return router.currentRoute.value.params.id;
-});
+});*/
 </script>
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
+    <!--<q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
         <q-scroll-area class="fit text-grey-8">
             <router-link :to="{ path: '/customer/list' }">
                 <q-icon name="arrow_back" size="md" color="primary" />
             </router-link>
             <div>Customer ID: {{ entityId }}</div>
         </q-scroll-area>
-    </q-drawer>
+    </q-drawer>-->
     <q-page-container>
         <router-view></router-view>
     </q-page-container>
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
index 9787fc415..ed84a7ca6 100644
--- a/src/pages/Ticket/TicketMain.vue
+++ b/src/pages/Ticket/TicketMain.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useState } from 'src/composables/useState';
-import LeftMenu from 'src/components/LeftMenu.vue';
+//import LeftMenu from 'src/components/LeftMenu.vue';
 
 const state = useState();
 const miniState = ref(true);
@@ -18,9 +18,9 @@ const miniState = ref(true);
         :width="256"
         :breakpoint="500"
     >
-        <q-scroll-area class="fit text-grey-8">
+        <!--<q-scroll-area class="fit text-grey-8">
             <LeftMenu />
-        </q-scroll-area>
+        </q-scroll-area>-->
     </q-drawer>
     <q-page-container>
         <router-view></router-view>