salix-front/src/pages/Ticket/Card/TicketBoxing.vue

<script setup>
import axios from 'axios';
import { date, useQuasar } from 'quasar';
import { computed, onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';

const router = useRouter();
const { t } = useI18n();
const quasar = useQuasar();

onMounted(async () => {
    await fetch();
});

const entityId = computed(function () {
    return router.currentRoute.value.params.id;
});

const expeditions = ref({});
const lastExpedition = ref();
const slide = ref(null);
const videoList = ref([]);
const time = reactive({
    min: 0,
    max: 24,
});
async function fetch() {
    try {
        const filter = {
            where: {
                ticketFk: entityId.value,
            },
        };
        const { data } = await axios.get(`/Expeditions/filter`, {
            params: { filter },
        });

        if (data) expeditions.value = data;
    } catch (e) {
        //
    }
}

async function getVideoList(expeditionId, timed) {
    lastExpedition.value = expeditionId;
    const params = {
        id: expeditionId,
    };

    if (timed) {
        if (timed.max == timed.min) {
            if (timed.max != 24) timed.max += 1;
            else timed.min -= 1;
        }
        Object.assign(params, { from: timed.min, to: timed.max });
    }
    await axios.get(`/Boxings/getVideoList`, { params: params }).then((res) => {
        const data = res.data;
        if (!data.length) {
            return quasar.notify({
                message: t('ticket.boxing.notFound'),
                type: 'negative',
            });
        }
        const list = [];
        for (const video of data) {
            const videoName = video.split('.')[0].split('T')[1].replace(/-/g, ':');
            list.push({
                label: videoName,
                value: video,
                url: `api/Boxings/getVideo?id=${expeditionId}&filename=${video}`,
            });
        }

        videoList.value = list.reverse();
        if (list[0]) {
            slide.value = list[0].value;
            time.min = parseInt(list[0].label.split(':')[0]);
            time.max = parseInt(list[list.length - 1].label.split(':')[0]) + 1;
        }
    });
}
</script>

<template>
    <QDrawer show-if-above side="right">
        <QScrollArea class="fit">
            <QList bordered separator style="max-width: 318px">
                <QItem v-if="lastExpedition && videoList.length">
                    <QItemSection>
                        <QItemLabel class="text-h6">
                            {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{
                                time.max
                            }})
                        </QItemLabel>
                        <QRange
                            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"
                        />
                    </QItemSection>
                </QItem>
                <QItem v-if="lastExpedition && videoList.length">
                    <QItemSection>
                        <QSelect
                            color="orange"
                            v-model="slide"
                            :options="videoList"
                            :label="t('ticket.boxing.selectVideo')"
                            emit-value
                            map-options
                        >
                            <template #prepend>
                                <QIcon name="schedule" />
                            </template>
                        </QSelect>
                    </QItemSection>
                </QItem>
                <QItem
                    v-for="expedition in expeditions"
                    :key="expedition.id"
                    @click="getVideoList(expedition.id)"
                    clickable
                    v-ripple
                >
                    <QItemSection>
                        <QItemLabel class="text-h6">#{{ expedition.id }}</QItemLabel>
                    </QItemSection>
                    <QItemSection>
                        <QItemLabel caption>{{ t('ticket.boxing.created') }}</QItemLabel>
                        <QItemLabel>
                            {{
                                date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss')
                            }}
                        </QItemLabel>
                        <QItemLabel caption>{{ t('ticket.boxing.item') }}</QItemLabel>
                        <QItemLabel>{{ expedition.packagingItemFk }}</QItemLabel>
                        <QItemLabel caption>{{ t('ticket.boxing.worker') }}</QItemLabel>
                        <QItemLabel>{{ expedition.userName }}</QItemLabel>
                    </QItemSection>
                </QItem>
            </QList>
        </QScrollArea>
    </QDrawer>

    <QCard>
        <QCarousel animated v-model="slide" height="max-content">
            <QCarouselSlide
                v-for="video in videoList"
                :key="video.value"
                :name="video.value"
            >
                <QVideo :src="video.url" :ratio="16 / 9" />
            </QCarouselSlide>
        </QCarousel>
    </QCard>
</template>