wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

feat(ticket_boxing): add section

This commit is contained in:
Alex Moreno 2022-09-06 13:59:00 +02:00
parent 22b5d06fca
commit 7f42655b1d
6 changed files with 130 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/i18n/en/index.js
View File

@ -61,7 +61,9 @@ export default {
expedition: 'Expedition', expedition: 'Expedition',
item: 'Item', item: 'Item',
created: 'Created', created: 'Created',
worker: 'Worker' worker: 'Worker',
selectTime: 'Select time:',
selectVideo: 'Select video:'
} }
}, },
components: { components: {

4
src/i18n/es/index.js
View File

@ -61,7 +61,9 @@ export default {
expedition: 'Expedición', expedition: 'Expedición',
item: 'Artículo', item: 'Artículo',
created: 'Creado', created: 'Creado',
worker: 'Trabajador' worker: 'Trabajador',
selectTime: 'Seleccionar hora:',
selectVideo: 'Seleccionar video:'
} }
}, },
components: { components: {

2
src/pages/Customer/CustomerMain.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import LeftMenu from 'src/components/LeftMenu.vue'; //import LeftMenu from 'src/components/LeftMenu.vue';
const state = useState(); const state = useState();
const miniState = ref(true); const miniState = ref(true);

175
src/pages/Ticket/Card/TicketBoxing.vue
View File

@ -17,8 +17,13 @@ const entityId = computed(function () {
}); });
const expeditions = ref({}); const expeditions = ref({});
const url = ref({}); const lastExpedition = ref();
//const video = ref({}); const slide = ref(null);
const videoList = ref([]);
const time = ref({
min: 0,
max: 24,
});
async function fetch() { async function fetch() {
const filter = { const filter = {
@ -26,84 +31,126 @@ async function fetch() {
ticketFk: entityId.value, ticketFk: entityId.value,
}, },
}; };
const { data } = await axios.get(`/api/Expeditions/filter`, { const { data } = await axios.get(`/Expeditions/filter`, {
params: { filter }, params: { filter },
}); });
if (data) expeditions.value = data; if (data) expeditions.value = data;
console.log(expeditions.value);
} }
async function selectVideo(expeditionId) { async function getVideoList(expeditionId, timed) {
url.value = `${window.location.origin}/api/Boxings/getVideo?id=${expeditionId}`; console.log('entry');
} lastExpedition.value = expeditionId;
const params = {
id: expeditionId,
};
/*async function getVideo(expeditionId) { if (timed) {
const { data } = await axios.get(`/api/Boxings/getVideo?id=${expeditionId}`); Object.assign(params, { from: timed.min, to: timed.max });
const myUrl = window.URL.createObjectURL(new Blob([data])); }
console.log(myUrl); const { data } = await axios.get(`/Boxings/getVideoList`, { params: params });
if (data) url.value = data; 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> </script>
<template> <template>
<q-layout view="hHh Lpr lff" container class="shadow-2 rounded-borders q-gutter-md"> <q-layout view="hhh lpr ffr" class="fit">
<q-drawer <q-drawer show-if-above side="right" bordered>
v-model="drawerLeft"
show-if-above
:width="200"
:breakpoint="700"
elevated
class="bg-primary text-white"
>
<q-scroll-area class="fit"> <q-scroll-area class="fit">
<q-card class="q-pa-md col"> <q-list bordered separator style="max-width: 318px">
<q-video :title="url" :src="url" v-if="Object.keys(url).length !== 0" :ratio="16 / 9" /> <q-item v-if="lastExpedition">
</q-card> <q-item-section>
</q-scroll-area> <q-item-label class="text-h6">
</q-drawer> {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
</q-layout> </q-item-label>
</template> <q-range
<!-- v-model="time"
<template> @change="getVideoList(lastExpedition, time)"
<q-page class="q-pa-md row q-gutter-md"> :min="0"
<q-card class="q-pa-md col-2"> :max="24"
<q-scroll-area class="fit"> :step="1"
<q-list class="q-pa-xs q-gutter-md"> :left-label-value="time.min + ':00'"
<q-card :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" v-for="expedition in expeditions"
:key="expedition.id" :key="expedition.id"
@click="selectVideo(expedition.id)" @click="getVideoList(expedition.id)"
clickable clickable
v-ripple v-ripple
> >
<q-card-section> <q-item-section>
<q-item class="q-pa-none"> <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
<q-item-section> </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> <q-item-label>
<q-separator spaced color="orange" /> {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
<q-item class="q-pa-none"> </q-item-label>
<q-item-section> <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
<q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label> <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
<q-item-label> <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
{{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}</q-item-label <q-item-label>{{ expedition.userName }}</q-item-label>
> </q-item-section>
<q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label> </q-item>
<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-list> </q-list>
</q-scroll-area> </q-scroll-area>
</q-card> </q-drawer>
<q-card class="q-pa-md col">
<q-video :title="url" :src="url" v-if="Object.keys(url).length !== 0" :ratio="16 / 9" /> <q-page-container>
</q-card> <q-page>
</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> </template>
-->

18
src/pages/Ticket/Card/TicketCard.vue
View File

@ -1,23 +1,23 @@
<script setup> <script setup>
import { computed } from 'vue'; //import { computed } from 'vue';
import { useState } from 'src/composables/useState'; //import { useState } from 'src/composables/useState';
import { useRouter } from 'vue-router'; //import { useRouter } from 'vue-router';
const state = useState(); //const state = useState();
const router = useRouter(); //const router = useRouter();
const entityId = computed(function () { /*const entityId = computed(function () {
return router.currentRoute.value.params.id; return router.currentRoute.value.params.id;
}); });*/
</script> </script>
<template> <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"> <q-scroll-area class="fit text-grey-8">
<router-link :to="{ path: '/customer/list' }"> <router-link :to="{ path: '/customer/list' }">
<q-icon name="arrow_back" size="md" color="primary" /> <q-icon name="arrow_back" size="md" color="primary" />
</router-link> </router-link>
<div>Customer ID: {{ entityId }}</div> <div>Customer ID: {{ entityId }}</div>
</q-scroll-area> </q-scroll-area>
</q-drawer> </q-drawer>-->
<q-page-container> <q-page-container>
<router-view></router-view> <router-view></router-view>
</q-page-container> </q-page-container>

6
src/pages/Ticket/TicketMain.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import LeftMenu from 'src/components/LeftMenu.vue'; //import LeftMenu from 'src/components/LeftMenu.vue';
const state = useState(); const state = useState();
const miniState = ref(true); const miniState = ref(true);
@ -18,9 +18,9 @@ const miniState = ref(true);
:width="256" :width="256"
:breakpoint="500" :breakpoint="500"
> >
<q-scroll-area class="fit text-grey-8"> <!--<q-scroll-area class="fit text-grey-8">
<LeftMenu /> <LeftMenu />
</q-scroll-area> </q-scroll-area>-->
</q-drawer> </q-drawer>
<q-page-container> <q-page-container>
<router-view></router-view> <router-view></router-view>