From 76cbc901c1891efa46836b94dc9b9e30e77c4d83 Mon Sep 17 00:00:00 2001 From: jb-alvarado Date: Fri, 19 Apr 2024 10:59:17 +0200 Subject: [PATCH] add missing translation, add bigger drop area when list is empty --- components/PlaylistGenerator.vue | 107 ++++++++++++++++--------------- components/PlaylistTable.vue | 41 ++++++++++-- composables/helper.ts | 58 +++++++++-------- lang/de-DE.js | 13 ++++ lang/en-US.js | 13 ++++ pages/player.vue | 71 ++++++++++++-------- 6 files changed, 196 insertions(+), 107 deletions(-) diff --git a/components/PlaylistGenerator.vue b/components/PlaylistGenerator.vue index 116e5e80..51e4b749 100644 --- a/components/PlaylistGenerator.vue +++ b/components/PlaylistGenerator.vue @@ -5,7 +5,7 @@
-
Generate Program
+
{{ $t('player.generateProgram') }}
@@ -14,7 +14,7 @@ name="my_tabs_2" role="tab" class="tab" - aria-label="Simple" + :aria-label="$t('player.simple')" checked @change="advancedGenerator = false" /> @@ -91,7 +91,7 @@ name="my_tabs_2" role="tab" class="tab" - aria-label="Advanced" + :aria-label="$t('player.advanced')" @change=";(advancedGenerator = true), resetCheckboxes()" />
@@ -118,7 +118,7 @@
@@ -241,7 +241,7 @@
@@ -278,13 +278,19 @@ const playlistStore = usePlaylist() const { processPlaylist } = playlistOperations() -defineProps({ +const prop = defineProps({ close: { type: Function, default() { return '' }, }, + switchClass: { + type: Function, + default() { + return '' + }, + }, }) const advancedGenerator = ref(false) @@ -311,42 +317,6 @@ const templateTargetSortOptions = { handle: '.grabbing', } -async function generatePlaylist() { - playlistStore.isLoading = true - let body = null as BodyObject | null - - if (selectedFolders.value.length > 0 && !generateFromAll.value) { - body = { paths: selectedFolders.value } - } - - if (advancedGenerator.value) { - if (body) { - body.template = template.value - } else { - body = { template: template.value } - } - } - - await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/generate/${playlistStore.listDate}`, { - method: 'POST', - headers: { ...configStore.contentType, ...authStore.authHeader }, - body, - }) - .then((response: any) => { - playlistStore.playlist = processPlaylist(playlistStore.listDate, response.program, false) - indexStore.msgAlert('success', 'Generate Playlist done...', 2) - }) - .catch((e: any) => { - indexStore.msgAlert('error', e.data ? e.data : e, 4) - }) - - // reset selections - resetCheckboxes() - resetTemplate() - - playlistStore.isLoading = false -} - function setSelectedFolder(event: any, folder: string) { if (event.target.checked) { selectedFolders.value.push(folder) @@ -414,4 +384,41 @@ function addTemplate() { paths: [], }) } + +async function generatePlaylist() { + playlistStore.isLoading = true + let body = null as BodyObject | null + + if (selectedFolders.value.length > 0 && !generateFromAll.value) { + body = { paths: selectedFolders.value } + } + + if (advancedGenerator.value) { + if (body) { + body.template = template.value + } else { + body = { template: template.value } + } + } + + await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/generate/${playlistStore.listDate}`, { + method: 'POST', + headers: { ...configStore.contentType, ...authStore.authHeader }, + body, + }) + .then((response: any) => { + playlistStore.playlist = processPlaylist(playlistStore.listDate, response.program, false) + prop.switchClass() + indexStore.msgAlert('success', 'Generate Playlist done...', 2) + }) + .catch((e: any) => { + indexStore.msgAlert('error', e.data ? e.data : e, 4) + }) + + // reset selections + resetCheckboxes() + resetTemplate() + + playlistStore.isLoading = false +} diff --git a/components/PlaylistTable.vue b/components/PlaylistTable.vue index b9802b6c..b89e6641 100644 --- a/components/PlaylistTable.vue +++ b/components/PlaylistTable.vue @@ -11,7 +11,7 @@ {{ $t('player.start') }}
- +
{{ $t('player.file') }}
@@ -53,7 +53,10 @@ + { props.getPlaylist() }) -watch([listDate], async () => { - await props.getPlaylist() +watch([listDate], () => { + props.getPlaylist() }) +defineExpose({ + classSwitcher, +}) + +function classSwitcher() { + if (playlistStore.playlist.length === 0 && sortContainer.value) { + sortContainer.value.sortable.el.classList.add('is-empty') + } else { + sortContainer.value.sortable.el.classList.remove('is-empty') + } +} + function setCategory(event: any, item: PlaylistItem) { if (event.target.checked) { item.category = 'advertisement' @@ -209,7 +225,8 @@ function addClip(event: any) { duration: mediaStore.folderTree.files[o].duration, }) - playlistStore.playlist = processPlaylist(listDate.value, playlistStore.playlist, false) + classSwitcher() + processPlaylist(listDate.value, playlistStore.playlist, false) nextTick(() => { const newNode = document.getElementById(`clip-${n}`) @@ -221,16 +238,30 @@ function addClip(event: any) { function moveItemInArray(event: any) { playlistStore.playlist.splice(event.newIndex, 0, playlistStore.playlist.splice(event.oldIndex, 1)[0]) - playlistStore.playlist = processPlaylist(listDate.value, playlistStore.playlist, false) + processPlaylist(listDate.value, playlistStore.playlist, false) removeBG(event.item) } function deletePlaylistItem(index: number) { playlistStore.playlist.splice(index, 1) + classSwitcher() }