forked from verdnatura/salix-front
feat(ticket_boxing): add section
This commit is contained in:
parent
22b5d06fca
commit
7f42655b1d
|
|
@ -61,7 +61,9 @@ export default {
|
|||
expedition: 'Expedition',
|
||||
item: 'Item',
|
||||
created: 'Created',
|
||||
worker: 'Worker'
|
||||
worker: 'Worker',
|
||||
selectTime: 'Select time:',
|
||||
selectVideo: 'Select video:'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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-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
|
||||
>
|
||||
<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
|
||||
<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
|
||||
>
|
||||
{{ 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-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-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>
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue