fix eslint
This commit is contained in:
jb-alvarado
parent
c35cb6f178
commit
6c574feda1
@ -6,19 +6,19 @@
|
||||
</div>
|
||||
<form
|
||||
v-if="configStore.configGui && configStore.configGui[configStore.configID]"
|
||||
@submit.prevent="onSubmitGui"
|
||||
class="w-full"
|
||||
@submit.prevent="onSubmitGui"
|
||||
>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('config.name') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="configStore.configGui[configStore.configID].name"
|
||||
type="text"
|
||||
placeholder="Type here"
|
||||
class="input input-bordered w-full"
|
||||
v-model="configStore.configGui[configStore.configID].name"
|
||||
/>
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-5">
|
||||
@ -26,10 +26,10 @@
|
||||
<span class="label-text">{{ $t('config.previewUrl') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="configStore.configGui[configStore.configID].preview_url"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
v-model="configStore.configGui[configStore.configID].preview_url"
|
||||
/>
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-5">
|
||||
@ -37,10 +37,10 @@
|
||||
<span class="label-text">{{ $t('config.configPath') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="configStore.configGui[configStore.configID].config_path"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
v-model="configStore.configGui[configStore.configID].config_path"
|
||||
/>
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-5">
|
||||
@ -48,10 +48,10 @@
|
||||
<span class="label-text">{{ $t('config.extensions') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="configStore.configGui[configStore.configID].extra_extensions"
|
||||
type="text"
|
||||
class="input input-bordered w-full"
|
||||
v-model="configStore.configGui[configStore.configID].extra_extensions"
|
||||
/>
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-5">
|
||||
@ -59,18 +59,18 @@
|
||||
<span class="label-text">{{ $t('config.service') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="configStore.configGui[configStore.configID].service"
|
||||
type="text"
|
||||
class="input input-bordered w-full !bg-base-100"
|
||||
v-model="configStore.configGui[configStore.configID].service"
|
||||
disabled
|
||||
/>
|
||||
>
|
||||
</label>
|
||||
|
||||
<div class="join my-4">
|
||||
<button class="join-item btn btn-primary" type="submit">{{ $t('config.save') }}</button>
|
||||
<button
|
||||
class="join-item btn btn-primary"
|
||||
v-if="configStore.configGui.length > 1 && configStore.configGui[configStore.configID].id > 1"
|
||||
class="join-item btn btn-primary"
|
||||
@click="deleteChannel()"
|
||||
>
|
||||
{{ $t('config.delete') }}
|
||||
|
||||
@ -3,14 +3,15 @@
|
||||
<h2 class="pt-3 text-3xl">{{ $t('config.playoutConf') }}</h2>
|
||||
<form
|
||||
v-if="configStore.configPlayout"
|
||||
@submit.prevent="onSubmitPlayout"
|
||||
class="mt-10 grid md:grid-cols-[180px_auto] gap-5"
|
||||
@submit.prevent="onSubmitPlayout"
|
||||
>
|
||||
<template v-for="(item, key, _) in configStore.configPlayout" :key="key">
|
||||
<template v-for="(item, key) in configStore.configPlayout" :key="key">
|
||||
<div class="text-xl pt-3 text-right">{{ setTitle(key.toString()) }}:</div>
|
||||
<div class="md:pt-4">
|
||||
<label
|
||||
v-for="(prop, name) in (item as Record<string, any>)"
|
||||
:key="name"
|
||||
class="form-control w-full"
|
||||
:class="[typeof prop === 'boolean' && 'flex-row', name.toString() !== 'help_text' && 'mt-2']"
|
||||
>
|
||||
@ -22,50 +23,50 @@
|
||||
</div>
|
||||
<input
|
||||
v-else-if="name.toString() === 'sender_pass'"
|
||||
v-model="item[name]"
|
||||
type="password"
|
||||
:placeholder="$t('config.placeholderPass')"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="item[name]"
|
||||
/>
|
||||
>
|
||||
<textarea
|
||||
v-else-if="name.toString() === 'output_param' || name.toString() === 'custom_filter'"
|
||||
class="textarea textarea-bordered"
|
||||
v-model="item[name]"
|
||||
class="textarea textarea-bordered"
|
||||
rows="3"
|
||||
/>
|
||||
<input
|
||||
v-else-if="typeof prop === 'number' && prop % 1 === 0"
|
||||
v-model="item[name]"
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="item[name]"
|
||||
/>
|
||||
>
|
||||
<input
|
||||
v-else-if="typeof prop === 'number'"
|
||||
v-model="item[name]"
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="item[name]"
|
||||
step="0.0001"
|
||||
style="max-width: 250px"
|
||||
/>
|
||||
>
|
||||
<input
|
||||
v-else-if="typeof prop === 'boolean'"
|
||||
v-model="item[name]"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-sm ms-2 mt-2"
|
||||
v-model="item[name]"
|
||||
/>
|
||||
>
|
||||
<input
|
||||
v-else-if="name === 'ignore_lines'"
|
||||
v-model="formatIgnoreLines"
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="formatIgnoreLines"
|
||||
/>
|
||||
>
|
||||
<input
|
||||
v-else
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
:id="name"
|
||||
v-model="item[name]"
|
||||
/>
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
@ -75,11 +76,11 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
<GenericModal
|
||||
:title="$t('config.restartTile')"
|
||||
:text="$t('config.restartText')"
|
||||
:show="showModal"
|
||||
:modalAction="restart"
|
||||
:modal-action="restart"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -102,7 +103,7 @@ const formatIgnoreLines = computed({
|
||||
},
|
||||
})
|
||||
|
||||
function setTitle(input: string): String {
|
||||
function setTitle(input: string): string {
|
||||
switch (input) {
|
||||
case 'general':
|
||||
return t('config.general')
|
||||
@ -131,7 +132,7 @@ function setTitle(input: string): String {
|
||||
}
|
||||
}
|
||||
|
||||
function setHelp(key: string, text: string): String {
|
||||
function setHelp(key: string, text: string): string {
|
||||
switch (key) {
|
||||
case 'general':
|
||||
return t('config.generalText')
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<Modal :show="showUserModal" title="Add user" :modal-action="addUser">
|
||||
<GenericModal :show="showUserModal" title="Add user" :modal-action="addUser">
|
||||
<div class="w-full max-w-[500px] h-[420px]">
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
@ -113,7 +113,7 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</GenericModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="flex gap-2">
|
||||
<div class="font-bold text-lg truncate flex-1 w-0">{{ title }}</div>
|
||||
<button v-if="hideButtons" class="btn btn-sm w-8 h-8 rounded-full" @click="modalAction(false)">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
<i class="bi bi-x-lg"/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="navbar bg-base-100 min-h-[52px] p-0 shadow">
|
||||
<NuxtLink class="navbar-brand min-w-[46px] p-2" href="/">
|
||||
<img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
|
||||
<img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" >
|
||||
</NuxtLink>
|
||||
<div class="navbar-end w-1/5 grow">
|
||||
<label class="swap swap-rotate me-2 md:hidden">
|
||||
<input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
|
||||
<input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" >
|
||||
<SvgIcon name="swap-on" classes="w-5 h-5" />
|
||||
<SvgIcon name="swap-off" classes="w-5 h-5" />
|
||||
</label>
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
<ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
|
||||
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md">
|
||||
<NuxtLink :to="item.link" class="h-[27px] text-base" exactActiveClass="is-active">
|
||||
<NuxtLink :to="item.link" class="h-[27px] text-base" exact-active-class="is-active">
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
@ -51,7 +51,7 @@
|
||||
<NuxtLink
|
||||
:to="item.link"
|
||||
class="px-2 h-[27px] relative text-base text-base-content"
|
||||
activeClass="is-active"
|
||||
active-class="is-active"
|
||||
>
|
||||
<span>
|
||||
{{ item.name }}
|
||||
@ -81,7 +81,7 @@
|
||||
</li>
|
||||
<li class="p-0">
|
||||
<label class="swap swap-rotate">
|
||||
<input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
|
||||
<input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" >
|
||||
<SvgIcon name="swap-on" classes="w-5 h-5" />
|
||||
<SvgIcon name="swap-off" classes="w-5 h-5" />
|
||||
</label>
|
||||
@ -22,7 +22,7 @@
|
||||
</div>
|
||||
|
||||
<div class="w-full h-[calc(100%-48px)] overflow-auto m-1">
|
||||
<div class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
|
||||
<div v-for="folder in mediaStore.folderTree.folders" :key="folder.uid" class="flex px-1">
|
||||
<button class="truncate" @click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)">
|
||||
<i class="bi-folder-fill" />
|
||||
{{ folder.name }}
|
||||
@ -38,9 +38,9 @@
|
||||
<template #item="{ element, index }">
|
||||
<tr
|
||||
:id="`file-${index}`"
|
||||
:key="element.name"
|
||||
class="w-full"
|
||||
:class="{ 'grabbing cursor-grab': width > 768 }"
|
||||
:key="element.name"
|
||||
>
|
||||
<td class="ps-1 py-1 w-[20px]">
|
||||
<i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
<div class="w-full h-full p-2">
|
||||
<video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
|
||||
<VideoPlayer
|
||||
class="live-player"
|
||||
v-else-if="configStore.configGui[configStore.configID]"
|
||||
:key="configStore.configID"
|
||||
class="live-player"
|
||||
reference="httpStream"
|
||||
:options="{
|
||||
liveui: true,
|
||||
@ -70,7 +70,7 @@
|
||||
class="progress progress-accent w-full"
|
||||
:value="playlistStore.progressValue"
|
||||
max="100"
|
||||
></progress>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -15,9 +15,9 @@
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="Simple"
|
||||
@change="advancedGenerator = false"
|
||||
checked
|
||||
/>
|
||||
@change="advancedGenerator = false"
|
||||
>
|
||||
<div role="tabpanel" class="tab-content w-full pt-3">
|
||||
<div class="w-full">
|
||||
<div class="grid">
|
||||
@ -42,9 +42,9 @@
|
||||
|
||||
<ul class="h-[475px] border border-my-gray rounded overflow-auto bg-base-300 m-1 py-1">
|
||||
<li
|
||||
class="even:bg-base-200 px-2 w-full"
|
||||
v-for="folder in mediaStore.folderList.folders"
|
||||
:key="folder.uid"
|
||||
class="even:bg-base-200 px-2 w-full"
|
||||
>
|
||||
<div class="grid grid-cols-[auto_24px]">
|
||||
<button
|
||||
@ -78,7 +78,7 @@
|
||||
)
|
||||
)
|
||||
"
|
||||
/>
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@ -93,7 +93,7 @@
|
||||
class="tab"
|
||||
aria-label="Advanced"
|
||||
@change=";(advancedGenerator = true), resetCheckboxes()"
|
||||
/>
|
||||
>
|
||||
<div role="tabpanel" class="tab-content pt-3">
|
||||
<div class="w-full">
|
||||
<div class="grid grid-cols-[auto_48px] px-3 pt-0">
|
||||
@ -121,7 +121,7 @@
|
||||
title="Add time block"
|
||||
@click="addTemplate()"
|
||||
>
|
||||
<i class="bi bi-folder-plus"></i>
|
||||
<i class="bi bi-folder-plus"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -140,8 +140,8 @@
|
||||
<template #item="{ element, index }">
|
||||
<li
|
||||
:id="`adv_folder_${index}`"
|
||||
class="even:bg-base-200 draggable px-2 w-full"
|
||||
:key="element.uid"
|
||||
class="even:bg-base-200 draggable px-2 w-full"
|
||||
>
|
||||
<button
|
||||
class="w-full truncate text-left"
|
||||
@ -177,20 +177,20 @@
|
||||
Start:
|
||||
</div>
|
||||
<input
|
||||
v-model="item.start"
|
||||
type="text"
|
||||
class="input input-sm input-bordered join-item px-2 text-center"
|
||||
v-model="item.start"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="input input-sm input-bordered join-item px-2 text-center bg-base-200"
|
||||
>
|
||||
Duration:
|
||||
</div>
|
||||
<input
|
||||
v-model="item.duration"
|
||||
type="text"
|
||||
class="input input-sm input-bordered join-item px-2 text-center"
|
||||
v-model="item.duration"
|
||||
/>
|
||||
>
|
||||
<button
|
||||
class="btn btn-sm input-bordered join-item"
|
||||
:class="item.shuffle ? 'bg-base-100' : 'bg-base-300'"
|
||||
@ -212,8 +212,8 @@
|
||||
<template #item="{ element, index }">
|
||||
<li
|
||||
:id="`path_${index}`"
|
||||
class="draggable grabbing py-0 even:bg-base-200 px-2"
|
||||
:key="index"
|
||||
class="draggable grabbing py-0 even:bg-base-200 px-2"
|
||||
>
|
||||
<i class="bi-folder-fill" />
|
||||
{{ element.split(/[\\/]+/).pop() }}
|
||||
@ -243,11 +243,11 @@
|
||||
<label class="label cursor-pointer w-12">
|
||||
<span class="label-text">All</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="generateFromAll"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-xs rounded"
|
||||
@change="resetCheckboxes()"
|
||||
/>
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div class="join ms-2">
|
||||
@ -364,11 +364,10 @@ function setSelectedFolder(event: any, folder: string) {
|
||||
|
||||
function resetCheckboxes() {
|
||||
selectedFolders.value = []
|
||||
const checkboxes = document.getElementsByClassName('folder-check')
|
||||
const checkboxes = document.getElementsByClassName('folder-check') as HTMLCollectionOf<HTMLInputElement>
|
||||
|
||||
if (checkboxes) {
|
||||
for (const box of checkboxes) {
|
||||
// @ts-ignore
|
||||
box.checked = false
|
||||
}
|
||||
}
|
||||
@ -401,14 +400,11 @@ function removeTemplate(item: TemplateItem) {
|
||||
|
||||
function addTemplate() {
|
||||
const last = template.value.sources[template.value.sources.length - 1]
|
||||
// @ts-ignore
|
||||
let start = $dayjs('00:00:00', 'HH:mm:ss')
|
||||
let start = $dayjs('2000-01-01T00:00:00')
|
||||
|
||||
if (last) {
|
||||
// @ts-ignore
|
||||
const t = $dayjs(last.duration, 'HH:mm:ss')
|
||||
// @ts-ignore
|
||||
start = $dayjs(last.start, 'HH:mm:ss').add(t.hour(), 'hour').add(t.minute(), 'minute').add(t.second(), 'second')
|
||||
const t = $dayjs(`2000-01-01T${last.duration}`)
|
||||
start = $dayjs(`2000-01-01T${last.start}`).add(t.hour(), 'hour').add(t.minute(), 'minute').add(t.second(), 'second')
|
||||
}
|
||||
|
||||
template.value.sources.push({
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
<template #item="{ element, index }">
|
||||
<tr
|
||||
:id="`clip-${index}`"
|
||||
:key="element.uid"
|
||||
class="draggable border-t border-b border-base-content/20 duration-1000 transition-all"
|
||||
:class="{
|
||||
'!bg-lime-500/30':
|
||||
@ -72,7 +73,6 @@
|
||||
listDate === todayDate &&
|
||||
index === playlistStore.currentClipIndex,
|
||||
}"
|
||||
:key="element.uid"
|
||||
>
|
||||
<td class="ps-4 py-2 text-left">{{ secondsToTime(element.begin) }}</td>
|
||||
<td class="py-2 text-left truncate" :class="{ 'grabbing cursor-grab': width > 768 }">
|
||||
@ -96,7 +96,7 @@
|
||||
type="checkbox"
|
||||
:checked="element.category && element.category === 'advertisement' ? true : false"
|
||||
@change="setCategory($event, element)"
|
||||
/>
|
||||
>
|
||||
</td>
|
||||
<td class="py-2 text-center hover:text-base-content/70">
|
||||
<button @click="editItem(index)">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="p-4 bg-base-100">
|
||||
<span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
|
||||
<span v-if="sysStat.system.kernel">
|
||||
<br />
|
||||
<br >
|
||||
{{ sysStat.system.kernel }}
|
||||
</span>
|
||||
</div>
|
||||
@ -57,7 +57,7 @@
|
||||
<div class="text-xl">{{ $t('system.storage') }}</div>
|
||||
<div v-if="sysStat.storage"><strong>{{ $t('system.device') }}:</strong> {{ sysStat.storage?.path }}</div>
|
||||
|
||||
<div class="grid grid-cols-2" v-if="sysStat.storage">
|
||||
<div v-if="sysStat.storage" class="grid grid-cols-2">
|
||||
<div><strong>{{ $t('system.size') }}:</strong> {{ fileSize(sysStat.storage?.total) }}</div>
|
||||
<div><strong>{{ $t('system.used') }}:</strong> {{ fileSize(sysStat.storage?.used) }}</div>
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,10 @@ import type { NuxtError } from '#app'
|
||||
const localePath = useLocalePath()
|
||||
|
||||
const props = defineProps({
|
||||
error: Object as () => NuxtError,
|
||||
error: {
|
||||
type: Object,
|
||||
default: {} as NuxtError,
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -1,6 +1,20 @@
|
||||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||
|
||||
export default withNuxt(
|
||||
// Your custom configs here
|
||||
// your custom flat configs go here, for example:
|
||||
// {
|
||||
// files: ['**/*.ts', '**/*.tsx'],
|
||||
// rules: {
|
||||
// 'no-console': 'off' // allow console.log in TypeScript files
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// ...
|
||||
// }
|
||||
{
|
||||
rules: {
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"vue/no-v-html": "off",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-base-200">
|
||||
<div v-if="authStore.isLogin && !String(route.name).includes('index')" class="sticky top-0 z-10">
|
||||
<Menu />
|
||||
<HeaderMenu />
|
||||
</div>
|
||||
|
||||
<main :class="authStore.isLogin && !String(route.name).includes('index') ? 'h-[calc(100%-52px)]' : 'h-full'">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<Alert />
|
||||
<AlertMsg />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export default defineNuxtRouteMiddleware((to, from) => {
|
||||
export default defineNuxtRouteMiddleware((to) => {
|
||||
const auth = useAuth()
|
||||
const localePath = useLocalePath()
|
||||
|
||||
|
||||
@ -26,8 +26,8 @@
|
||||
{{ $t('button.logout') }}
|
||||
</button>
|
||||
<select
|
||||
class="select select-primary select-bordered join-item max-w-xs ps-2"
|
||||
v-model="selectedLang"
|
||||
class="select select-primary select-bordered join-item max-w-xs ps-2"
|
||||
@change="changeLang(selectedLang)"
|
||||
>
|
||||
<option v-for="(loc, index) in locales" :key="index" :value="/* @ts-ignore */ loc.code">
|
||||
@ -38,7 +38,7 @@
|
||||
</option>
|
||||
</select>
|
||||
<label class="join-item btn btn-primary swap swap-rotate me-2">
|
||||
<input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
|
||||
<input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" >
|
||||
<SvgIcon name="swap-on" classes="w-5 h-5" />
|
||||
<SvgIcon name="swap-off" classes="w-5 h-5" />
|
||||
</label>
|
||||
@ -49,20 +49,20 @@
|
||||
|
||||
<form class="mt-10" @submit.prevent="login">
|
||||
<input
|
||||
type="text"
|
||||
v-model="formUsername"
|
||||
type="text"
|
||||
:placeholder="$t('input.username')"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
v-model="formPassword"
|
||||
type="password"
|
||||
:placeholder="$t('input.password')"
|
||||
class="input input-bordered w-full mt-5"
|
||||
required
|
||||
/>
|
||||
>
|
||||
|
||||
<div class="w-full mt-4 grid grid-flow-row-dense grid-cols-12 grid-rows-1 gap-2">
|
||||
<div class="col-span-3">
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div class="flex justify-end p-3 h-14">
|
||||
<div>
|
||||
<VueDatePicker
|
||||
<div>
|
||||
<div class="flex justify-end p-3 h-14">
|
||||
<div>
|
||||
<VueDatePicker
|
||||
v-model="listDate"
|
||||
:clearable="false"
|
||||
:hide-navigation="['time']"
|
||||
@ -14,10 +15,11 @@
|
||||
input-class-name="input input-sm !input-bordered !w-[250px] text-right !pe-3"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
|
||||
<div class="bg-base-300 whitespace-pre h-full font-mono overflow-auto p-3" v-html="formatLog(currentLog)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
|
||||
<div class="bg-base-300 whitespace-pre h-full font-mono overflow-auto p-3" v-html="formatLog(currentLog)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
463
pages/media.vue
463
pages/media.vue
@ -1,150 +1,107 @@
|
||||
<template>
|
||||
<div class="h-[calc(100vh-140px)] px-2">
|
||||
<nav class="text-sm breadcrumbs px-3">
|
||||
<ul v-on:dragover.prevent>
|
||||
<li
|
||||
v-for="(crumb, index) in mediaStore.crumbs"
|
||||
:key="index"
|
||||
v-on:drop="handleDrop($event, crumb.path, null)"
|
||||
v-on:dragover="handleDragOver"
|
||||
v-on:dragleave="handleDragLeave"
|
||||
>
|
||||
<button
|
||||
v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
|
||||
@click="mediaStore.getTree(crumb.path)"
|
||||
<div>
|
||||
<div class="h-[calc(100vh-140px)] px-2">
|
||||
<nav class="text-sm breadcrumbs px-3">
|
||||
<ul @dragover.prevent>
|
||||
<li
|
||||
v-for="(crumb, index) in mediaStore.crumbs"
|
||||
:key="index"
|
||||
@drop="handleDrop($event, crumb.path, null)"
|
||||
@dragover="handleDragOver"
|
||||
@dragleave="handleDragLeave"
|
||||
>
|
||||
<i class="bi-folder-fill me-1" />
|
||||
{{ crumb.text }}
|
||||
</button>
|
||||
<span v-else><i class="bi-folder-fill me-1" /> {{ crumb.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="relative h-[calc(100%-34px)] min-h-[300px] bg-base-100">
|
||||
<div v-if="mediaStore.isLoading" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
<splitpanes :horizontal="horizontal" class="border border-my-gray rounded shadow">
|
||||
<pane
|
||||
min-size="14"
|
||||
max-size="80"
|
||||
size="20"
|
||||
class="h-full pb-1 !bg-base-300"
|
||||
:class="horizontal ? 'rounded-t' : 'rounded-s'"
|
||||
>
|
||||
<ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1" v-on:dragover.prevent>
|
||||
<li
|
||||
v-if="mediaStore.folderTree.parent_folders.length > 0"
|
||||
v-for="folder in mediaStore.folderTree.parent_folders"
|
||||
class="grid grid-cols-[auto_28px] gap-1 px-2"
|
||||
:class="filename(mediaStore.folderTree.source) === folder.name && 'bg-base-300 rounded'"
|
||||
:key="folder.uid"
|
||||
v-on:drop="handleDrop($event, folder, true)"
|
||||
v-on:dragover="handleDragOver"
|
||||
v-on:dragleave="handleDragLeave"
|
||||
<button
|
||||
v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
|
||||
@click="mediaStore.getTree(crumb.path)"
|
||||
>
|
||||
<button
|
||||
class="truncate text-left"
|
||||
@click="mediaStore.getTree(`/${parent(mediaStore.folderTree.source)}/${folder.name}`)"
|
||||
>
|
||||
<i class="bi-folder-fill" />
|
||||
{{ folder.name }}
|
||||
</button>
|
||||
<button
|
||||
class="w-7 opacity-30 hover:opacity-100"
|
||||
@click="
|
||||
;(showDeleteModal = true),
|
||||
(deleteName = `/${parent(mediaStore.folderTree.source)}/${folder.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
))
|
||||
"
|
||||
>
|
||||
<i class="bi-x-circle-fill" />
|
||||
</button>
|
||||
</li>
|
||||
<li v-else class="px-2">
|
||||
<div class="truncate text-left">
|
||||
<i class="bi-folder-fill" />
|
||||
{{ mediaStore.folderTree.parent }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</pane>
|
||||
<pane class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-b' : 'rounded-e'">
|
||||
<ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1" v-on:dragover.prevent>
|
||||
<li
|
||||
class="grid grid-cols-[auto_28px] px-2 gap-1"
|
||||
v-for="folder in mediaStore.folderTree.folders"
|
||||
:key="folder.uid"
|
||||
v-on:drop="handleDrop($event, folder, false)"
|
||||
v-on:dragover="handleDragOver"
|
||||
v-on:dragleave="handleDragLeave"
|
||||
>
|
||||
<button
|
||||
class="truncate text-left"
|
||||
@click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)"
|
||||
>
|
||||
<i class="bi-folder-fill" />
|
||||
{{ folder.name }}
|
||||
</button>
|
||||
<button
|
||||
class="w-7 opacity-30 hover:opacity-100"
|
||||
@click="
|
||||
;(showDeleteModal = true),
|
||||
(deleteName = `/${mediaStore.folderTree.source}/${folder.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
))
|
||||
"
|
||||
>
|
||||
<i class="bi-x-circle-fill" />
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
v-for="(element, index) in mediaStore.folderTree.files"
|
||||
:id="`file_${index}`"
|
||||
class="grid grid-cols-[auto_166px] px-2"
|
||||
:key="element.name"
|
||||
draggable="true"
|
||||
v-on:dragstart="handleDragStart($event, element)"
|
||||
>
|
||||
<div class="truncate cursor-grab">
|
||||
<i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
|
||||
<i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
|
||||
<i v-else-if="mediaType(element.name) === 'image'" class="bi-file-earmark-image" />
|
||||
<i v-else class="bi-file-binary" />
|
||||
<i class="bi-folder-fill me-1" />
|
||||
{{ crumb.text }}
|
||||
</button>
|
||||
<span v-else><i class="bi-folder-fill me-1" /> {{ crumb.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{{ element.name }}
|
||||
</div>
|
||||
<div>
|
||||
<button class="w-7" @click=";(showPreviewModal = true), setPreviewData(element.name)">
|
||||
<i class="bi-play-fill" />
|
||||
</button>
|
||||
|
||||
<div class="inline-block w-[82px]">{{ toMin(element.duration) }}</div>
|
||||
|
||||
<button
|
||||
class="w-7"
|
||||
@click="
|
||||
;(showRenameModal = true),
|
||||
setRenameValues(
|
||||
`/${mediaStore.folderTree.source}/${element.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
)
|
||||
)
|
||||
<div class="relative h-[calc(100%-34px)] min-h-[300px] bg-base-100">
|
||||
<div v-if="mediaStore.isLoading" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70">
|
||||
<span class="loading loading-spinner loading-lg" />
|
||||
</div>
|
||||
<splitpanes :horizontal="horizontal" class="border border-my-gray rounded shadow">
|
||||
<pane
|
||||
min-size="14"
|
||||
max-size="80"
|
||||
size="20"
|
||||
class="h-full pb-1 !bg-base-300"
|
||||
:class="horizontal ? 'rounded-t' : 'rounded-s'"
|
||||
>
|
||||
<ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1" @dragover.prevent>
|
||||
<template v-if="mediaStore.folderTree.parent_folders.length > 0">
|
||||
<li
|
||||
v-for="folder in mediaStore.folderTree.parent_folders"
|
||||
:key="folder.uid"
|
||||
class="grid grid-cols-[auto_28px] gap-1 px-2"
|
||||
:class="
|
||||
filename(mediaStore.folderTree.source) === folder.name && 'bg-base-300 rounded'
|
||||
"
|
||||
@drop="handleDrop($event, folder, true)"
|
||||
@dragover="handleDragOver"
|
||||
@dragleave="handleDragLeave"
|
||||
>
|
||||
<i class="bi-pencil-square" />
|
||||
</button>
|
||||
<button
|
||||
class="truncate text-left"
|
||||
@click="
|
||||
mediaStore.getTree(
|
||||
`/${parent(mediaStore.folderTree.source)}/${folder.name}`
|
||||
)
|
||||
"
|
||||
>
|
||||
<i class="bi-folder-fill" />
|
||||
{{ folder.name }}
|
||||
</button>
|
||||
<button
|
||||
class="w-7 opacity-30 hover:opacity-100"
|
||||
@click="
|
||||
;(showDeleteModal = true),
|
||||
(deleteName = `/${parent(mediaStore.folderTree.source)}/${
|
||||
folder.name
|
||||
}`.replace(/\/[/]+/g, '/'))
|
||||
"
|
||||
>
|
||||
<i class="bi-x-circle-fill" />
|
||||
</button>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<li v-else class="px-2">
|
||||
<div class="truncate text-left">
|
||||
<i class="bi-folder-fill" />
|
||||
{{ mediaStore.folderTree.parent }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</pane>
|
||||
<pane class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-b' : 'rounded-e'">
|
||||
<ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1" @dragover.prevent>
|
||||
<li
|
||||
v-for="folder in mediaStore.folderTree.folders"
|
||||
:key="folder.uid"
|
||||
class="grid grid-cols-[auto_28px] px-2 gap-1"
|
||||
@drop="handleDrop($event, folder, false)"
|
||||
@dragover="handleDragOver"
|
||||
@dragleave="handleDragLeave"
|
||||
>
|
||||
<button
|
||||
class="truncate text-left"
|
||||
@click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)"
|
||||
>
|
||||
<i class="bi-folder-fill" />
|
||||
{{ folder.name }}
|
||||
</button>
|
||||
<button
|
||||
class="w-7 opacity-30 hover:opacity-100"
|
||||
@click="
|
||||
;(showDeleteModal = true),
|
||||
(deleteName = `/${mediaStore.folderTree.source}/${element.name}`.replace(
|
||||
(deleteName = `/${mediaStore.folderTree.source}/${folder.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
))
|
||||
@ -152,99 +109,159 @@
|
||||
>
|
||||
<i class="bi-x-circle-fill" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-for="(element, index) in mediaStore.folderTree.files"
|
||||
:id="`file_${index}`"
|
||||
:key="element.name"
|
||||
class="grid grid-cols-[auto_166px] px-2"
|
||||
draggable="true"
|
||||
@dragstart="handleDragStart($event, element)"
|
||||
>
|
||||
<div class="truncate cursor-grab">
|
||||
<i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
|
||||
<i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
|
||||
<i v-else-if="mediaType(element.name) === 'image'" class="bi-file-earmark-image" />
|
||||
<i v-else class="bi-file-binary" />
|
||||
|
||||
<div class="flex justify-end py-4 pe-2">
|
||||
<div class="join">
|
||||
<button
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
:title="$t('media.create')"
|
||||
@click="showCreateModal = true"
|
||||
>
|
||||
<i class="bi-folder-plus" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
:title="$t('media.upload')"
|
||||
@click="showUploadModal = true"
|
||||
>
|
||||
<i class="bi-upload" />
|
||||
</button>
|
||||
{{ element.name }}
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="w-7"
|
||||
@click=";(showPreviewModal = true), setPreviewData(element.name)"
|
||||
>
|
||||
<i class="bi-play-fill" />
|
||||
</button>
|
||||
|
||||
<div class="inline-block w-[82px]">{{ toMin(element.duration) }}</div>
|
||||
|
||||
<button
|
||||
class="w-7"
|
||||
@click="
|
||||
;(showRenameModal = true),
|
||||
setRenameValues(
|
||||
`/${mediaStore.folderTree.source}/${element.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
)
|
||||
)
|
||||
"
|
||||
>
|
||||
<i class="bi-pencil-square" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="w-7 opacity-30 hover:opacity-100"
|
||||
@click="
|
||||
;(showDeleteModal = true),
|
||||
(deleteName =
|
||||
`/${mediaStore.folderTree.source}/${element.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
))
|
||||
"
|
||||
>
|
||||
<i class="bi-x-circle-fill" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
:show="showDeleteModal"
|
||||
:title="$t('media.deleteTitle')"
|
||||
:text="`${$t('media.deleteQuestion')}:<br /><strong>${deleteName}</strong>`"
|
||||
:modal-action="deleteFileOrFolder"
|
||||
/>
|
||||
|
||||
<Modal :show="showPreviewModal" :title="`${$t('media.preview')}: ${previewName}`" :modal-action="closePlayer">
|
||||
<div class="w-[1024px] max-w-full aspect-video">
|
||||
<VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
|
||||
<img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Modal :show="showRenameModal" :title="$t('media.rename')" :modal-action="renameFile">
|
||||
<label class="form-control w-full max-w-md">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('media.newFile') }}</span>
|
||||
</div>
|
||||
<input type="text" class="input input-bordered w-full" v-model="renameNewName" />
|
||||
</label>
|
||||
</Modal>
|
||||
|
||||
<Modal :show="showCreateModal" :title="$t('media.createFolder')" :modal-action="createFolder">
|
||||
<label class="form-control w-full max-w-md">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('media.foldername') }}</span>
|
||||
</div>
|
||||
<input type="text" class="input input-bordered w-full" v-model="folderName.name" />
|
||||
</label>
|
||||
</Modal>
|
||||
|
||||
<Modal :show="showUploadModal" :title="$t('media.upload')" :modal-action="uploadFiles">
|
||||
<div class="w-[700px] max-w-full">
|
||||
<input
|
||||
type="file"
|
||||
class="file-input file-input-bordered w-full"
|
||||
ref="fileInputName"
|
||||
:accept="extensions"
|
||||
v-on:change="onFileChange"
|
||||
multiple
|
||||
/>
|
||||
|
||||
<label class="form-control w-full mt-3">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('media.current') }}:</span>
|
||||
</div>
|
||||
<progress class="progress progress-accent" :value="currentProgress" max="100" />
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-1">
|
||||
<div class="label">
|
||||
<span class="label-text"
|
||||
>{{ $t('media.overall') }} ({{ currentNumber }}/{{ inputFiles.length }}):</span
|
||||
<div class="flex justify-end py-4 pe-2">
|
||||
<div class="join">
|
||||
<button
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
:title="$t('media.create')"
|
||||
@click="showCreateModal = true"
|
||||
>
|
||||
<i class="bi-folder-plus" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
:title="$t('media.upload')"
|
||||
@click="showUploadModal = true"
|
||||
>
|
||||
<i class="bi-upload" />
|
||||
</button>
|
||||
</div>
|
||||
<progress class="progress progress-accent" :value="overallProgress" max="100" />
|
||||
</label>
|
||||
<label class="form-control w-full mt-1">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('media.uploading') }}:</span>
|
||||
</div>
|
||||
<input type="text" class="input input-sm input-bordered w-full" v-model="uploadTask" disabled />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<GenericModal
|
||||
:show="showDeleteModal"
|
||||
:title="$t('media.deleteTitle')"
|
||||
:text="`${$t('media.deleteQuestion')}:<br /><strong>${deleteName}</strong>`"
|
||||
:modal-action="deleteFileOrFolder"
|
||||
/>
|
||||
|
||||
<GenericModal
|
||||
:show="showPreviewModal"
|
||||
:title="`${$t('media.preview')}: ${previewName}`"
|
||||
:modal-action="closePlayer"
|
||||
>
|
||||
<div class="w-[1024px] max-w-full aspect-video">
|
||||
<VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
|
||||
<img v-else :src="previewUrl" class="img-fluid" :alt="previewName" >
|
||||
</div>
|
||||
</GenericModal>
|
||||
|
||||
<GenericModal :show="showRenameModal" :title="$t('media.rename')" :modal-action="renameFile">
|
||||
<label class="form-control w-full max-w-md">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('media.newFile') }}</span>
|
||||
</div>
|
||||
<input v-model="renameNewName" type="text" class="input input-bordered w-full" >
|
||||
</label>
|
||||
</GenericModal>
|
||||
|
||||
<GenericModal :show="showCreateModal" :title="$t('media.createFolder')" :modal-action="createFolder">
|
||||
<label class="form-control w-full max-w-md">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('media.foldername') }}</span>
|
||||
</div>
|
||||
<input v-model="folderName.name" type="text" class="input input-bordered w-full" >
|
||||
</label>
|
||||
</GenericModal>
|
||||
|
||||
<GenericModal :show="showUploadModal" :title="$t('media.upload')" :modal-action="uploadFiles">
|
||||
<div class="w-[700px] max-w-full">
|
||||
<input
|
||||
ref="fileInputName"
|
||||
type="file"
|
||||
class="file-input file-input-bordered w-full"
|
||||
:accept="extensions"
|
||||
multiple
|
||||
@change="onFileChange"
|
||||
>
|
||||
|
||||
<label class="form-control w-full mt-3">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('media.current') }}:</span>
|
||||
</div>
|
||||
<progress class="progress progress-accent" :value="currentProgress" max="100" />
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-1">
|
||||
<div class="label">
|
||||
<span class="label-text"
|
||||
>{{ $t('media.overall') }} ({{ currentNumber }}/{{ inputFiles.length }}):</span
|
||||
>
|
||||
</div>
|
||||
<progress class="progress progress-accent" :value="overallProgress" max="100" />
|
||||
</label>
|
||||
<label class="form-control w-full mt-1">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('media.uploading') }}:</span>
|
||||
</div>
|
||||
<input v-model="uploadTask" type="text" class="input input-sm input-bordered w-full" disabled >
|
||||
</label>
|
||||
</div>
|
||||
</GenericModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,219 +1,225 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center pt-10 px-8">
|
||||
<div class="mt-2 w-full max-w-4xl">
|
||||
<div class="flex flex-col xs:flex-row w-full gap-4">
|
||||
<div class="grow xs:max-w-72">
|
||||
<select
|
||||
class="select select-sm select-bordered w-full"
|
||||
v-model="selected"
|
||||
@change="onChange($event)"
|
||||
>
|
||||
<option v-for="item in presets">{{ item.name }}</option>
|
||||
</select>
|
||||
<div>
|
||||
<div class="flex flex-col items-center pt-10 px-8">
|
||||
<div class="mt-2 w-full max-w-4xl">
|
||||
<div class="flex flex-col xs:flex-row w-full gap-4">
|
||||
<div class="grow xs:max-w-72">
|
||||
<select
|
||||
v-model="selected"
|
||||
class="select select-sm select-bordered w-full"
|
||||
@change="onChange($event)"
|
||||
>
|
||||
<option v-for="item in presets" :key="item.name">{{ item.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="join">
|
||||
<button
|
||||
class="btn btn-sm join-item btn-primary"
|
||||
:title="$t('message.savePreset')"
|
||||
@click="savePreset()"
|
||||
>
|
||||
<i class="bi-cloud-upload" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm join-item btn-primary"
|
||||
:title="$t('message.newPreset')"
|
||||
@click="showCreateModal = true"
|
||||
>
|
||||
<i class="bi-file-plus" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm join-item btn-primary"
|
||||
:title="$t('message.delPreset')"
|
||||
@click="showDeleteModal = true"
|
||||
>
|
||||
<i class="bi-file-minus" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="join">
|
||||
<button
|
||||
class="btn btn-sm join-item btn-primary"
|
||||
:title="$t('message.savePreset')"
|
||||
@click="savePreset()"
|
||||
>
|
||||
<i class="bi-cloud-upload" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm join-item btn-primary"
|
||||
:title="$t('message.newPreset')"
|
||||
@click="showCreateModal = true"
|
||||
>
|
||||
<i class="bi-file-plus" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm join-item btn-primary"
|
||||
:title="$t('message.delPreset')"
|
||||
@click="showDeleteModal = true"
|
||||
>
|
||||
<i class="bi-file-minus" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submitMessage" class="my-6 w-full">
|
||||
<textarea
|
||||
class="textarea textarea-bordered w-full"
|
||||
v-model="form.text"
|
||||
rows="4"
|
||||
:placeholder="$t('message.placeholder')"
|
||||
/>
|
||||
<form class="my-6 w-full" @submit.prevent="submitMessage">
|
||||
<textarea
|
||||
v-model="form.text"
|
||||
class="textarea textarea-bordered w-full"
|
||||
rows="4"
|
||||
:placeholder="$t('message.placeholder')"
|
||||
/>
|
||||
|
||||
<div class="mt-2 grid xs:grid-cols-[auto_150px_150px] gap-4">
|
||||
<div class="grow">
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer p-0">
|
||||
<div class="mt-2 grid xs:grid-cols-[auto_150px_150px] gap-4">
|
||||
<div class="grow">
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer p-0">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.xAxis') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.x"
|
||||
class="input input-sm input-bordered w-full"
|
||||
type="text"
|
||||
placeholder="X"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer p-0">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.yAxis') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.y"
|
||||
class="input input-sm input-bordered w-full"
|
||||
type="text"
|
||||
placeholder="Y"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="xs:mt-10">
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer p-0">
|
||||
<span class="label-text">{{ $t('message.showBox') }}</span>
|
||||
<input
|
||||
v-model="form.showBox"
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-xs rounded-sm"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="mt-2 form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.xAxis') }}</span>
|
||||
<span class="label-text">{{ $t('message.boxColor') }}</span>
|
||||
</div>
|
||||
<input
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="form.x"
|
||||
type="text"
|
||||
placeholder="X"
|
||||
v-model="form.boxColor"
|
||||
type="color"
|
||||
class="input input-sm input-bordered w-full p-1"
|
||||
required
|
||||
/>
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer p-0">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.yAxis') }}</span>
|
||||
</div>
|
||||
<input
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="form.y"
|
||||
type="text"
|
||||
placeholder="Y"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="xs:mt-10">
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer p-0">
|
||||
<span class="label-text">{{ $t('message.showBox') }}</span>
|
||||
<input type="checkbox" v-model="form.showBox" class="checkbox checkbox-xs rounded-sm" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="mt-2 form-control w-full">
|
||||
<label class="form-control w-full xs:mt-[68px]">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.boxColor') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="color"
|
||||
class="input input-sm input-bordered w-full p-1"
|
||||
v-model="form.boxColor"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label class="form-control w-full xs:mt-[68px]">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.boxAlpha') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="form.boxAlpha"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid xs:grid-cols-[150px_150px_auto] gap-4 mt-2">
|
||||
<div>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.size') }}</span>
|
||||
<span class="label-text">{{ $t('message.boxAlpha') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.boxAlpha"
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="form.fontSize"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-2">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.fontColor') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="color"
|
||||
class="input input-sm input-bordered w-full p-1"
|
||||
v-model="form.fontColor"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.spacing') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="form.fontSpacing"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="form-control w-full mt-2">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.fontAlpha') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="form.fontAlpha"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
class="input input-sm input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid xs:grid-cols-[150px_150px_auto] gap-4 mt-2">
|
||||
<div>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.size') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.fontSize"
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
|
||||
<div class="grow">
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.overallAlpha') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="form.overallAlpha"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="form-control w-full xs:max-w-[150px] mt-2">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.borderWidth') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model="form.border"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label class="form-control w-full mt-2">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.fontColor') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.fontColor"
|
||||
type="color"
|
||||
class="input input-sm input-bordered w-full p-1"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.spacing') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.fontSpacing"
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
<label class="form-control w-full mt-2">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.fontAlpha') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.fontAlpha"
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.overallAlpha') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.overallAlpha"
|
||||
type="text"
|
||||
class="input input-sm input-bordered w-full"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
<label class="form-control w-full xs:max-w-[150px] mt-2">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.borderWidth') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.border"
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<button class="btn btn-primary send-btn" type="submit">{{ $t('message.send') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal :show="showCreateModal" :title="$t('message.newPreset')" :modalAction="createNewPreset">
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.name') }}</span>
|
||||
<div class="mt-5">
|
||||
<button class="btn btn-primary send-btn" type="submit">{{ $t('message.send') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<input type="text" class="input input-bordered w-full" v-model="newPresetName" />
|
||||
</label>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
:show="showDeleteModal"
|
||||
:title="$t('message.delPreset')"
|
||||
:text="`${$t('message.delText')}: <strong> ${selected}</strong>?`"
|
||||
:modalAction="deletePreset"
|
||||
/>
|
||||
<GenericModal :show="showCreateModal" :title="$t('message.newPreset')" :modal-action="createNewPreset">
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ $t('message.name') }}</span>
|
||||
</div>
|
||||
<input v-model="newPresetName" type="text" class="input input-bordered w-full" >
|
||||
</label>
|
||||
</GenericModal>
|
||||
|
||||
<GenericModal
|
||||
:show="showDeleteModal"
|
||||
:title="$t('message.delPreset')"
|
||||
:text="`${$t('message.delText')}: <strong> ${selected}</strong>?`"
|
||||
:modal-action="deletePreset"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="h-full">
|
||||
<Control />
|
||||
<PlayerControl />
|
||||
<div class="flex justify-end p-1">
|
||||
<div>
|
||||
<VueDatePicker
|
||||
@ -91,7 +91,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
<GenericModal
|
||||
:show="showPreviewModal"
|
||||
:title="`Preview: ${previewName}`"
|
||||
:hide-buttons="true"
|
||||
@ -99,24 +99,24 @@
|
||||
>
|
||||
<div class="w-[1024px] max-w-full aspect-video">
|
||||
<VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
|
||||
<img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
|
||||
<img v-else :src="previewUrl" class="img-fluid" :alt="previewName" >
|
||||
</div>
|
||||
</Modal>
|
||||
</GenericModal>
|
||||
|
||||
<Modal :show="showSourceModal" title="Add/Edit Source" :modal-action="processSource">
|
||||
<GenericModal :show="showSourceModal" title="Add/Edit Source" :modal-action="processSource">
|
||||
<div>
|
||||
<label class="form-control w-full mt-3">
|
||||
<div class="label">
|
||||
<span class="label-text">In</span>
|
||||
</div>
|
||||
<input type="number" class="input input-sm input-bordered w-full" v-model.number="newSource.in" />
|
||||
<input v-model.number="newSource.in" type="number" class="input input-sm input-bordered w-full" >
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-3">
|
||||
<div class="label">
|
||||
<span class="label-text">Out</span>
|
||||
</div>
|
||||
<input type="number" class="input input-sm input-bordered w-full" v-model.number="newSource.out" />
|
||||
<input v-model.number="newSource.out" type="number" class="input input-sm input-bordered w-full" >
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-3">
|
||||
@ -124,60 +124,60 @@
|
||||
<span class="label-text">Duration</span>
|
||||
</div>
|
||||
<input
|
||||
v-model.number="newSource.duration"
|
||||
type="number"
|
||||
class="input input-sm input-bordered w-full"
|
||||
v-model.number="newSource.duration"
|
||||
/>
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-3">
|
||||
<div class="label">
|
||||
<span class="label-text">Source</span>
|
||||
</div>
|
||||
<input type="text" class="input input-sm input-bordered w-full" v-model="newSource.source" />
|
||||
<input v-model="newSource.source" type="text" class="input input-sm input-bordered w-full" >
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-3">
|
||||
<div class="label">
|
||||
<span class="label-text">Audio</span>
|
||||
</div>
|
||||
<input type="text" class="input input-sm input-bordered w-full" v-model="newSource.audio" />
|
||||
<input v-model="newSource.audio" type="text" class="input input-sm input-bordered w-full" >
|
||||
</label>
|
||||
|
||||
<label class="form-control w-full mt-3">
|
||||
<div class="label">
|
||||
<span class="label-text">Custom Filter</span>
|
||||
</div>
|
||||
<input type="text" class="input input-sm input-bordered w-full" v-model="newSource.custom_filter" />
|
||||
<input v-model="newSource.custom_filter" type="text" class="input input-sm input-bordered w-full" >
|
||||
</label>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="cursor-pointer label">
|
||||
<span class="label-text">Advertisement</span>
|
||||
<input type="checkbox" class="checkbox checkbox-sm" @click="isAd" />
|
||||
<input type="checkbox" class="checkbox checkbox-sm" @click="isAd" >
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</GenericModal>
|
||||
|
||||
<Modal :show="showImportModal" title="Import Playlist" :modal-action="importPlaylist">
|
||||
<GenericModal :show="showImportModal" title="Import Playlist" :modal-action="importPlaylist">
|
||||
<input
|
||||
type="file"
|
||||
class="file-input file-input-sm file-input-bordered w-full"
|
||||
v-on:change="onFileChange"
|
||||
multiple
|
||||
/>
|
||||
</Modal>
|
||||
@change="onFileChange"
|
||||
>
|
||||
</GenericModal>
|
||||
|
||||
<Modal :show="showCopyModal" :title="`Copy Program ${listDate}`" :modal-action="savePlaylist">
|
||||
<input type="date" class="input input-sm input-bordered w-full" v-model="targetDate" />
|
||||
</Modal>
|
||||
<GenericModal :show="showCopyModal" :title="`Copy Program ${listDate}`" :modal-action="savePlaylist">
|
||||
<input v-model="targetDate" type="date" class="input input-sm input-bordered w-full" >
|
||||
</GenericModal>
|
||||
|
||||
<Modal :show="showDeleteModal" title="Delete Program" :modal-action="deletePlaylist">
|
||||
<GenericModal :show="showDeleteModal" title="Delete Program" :modal-action="deletePlaylist">
|
||||
<span>
|
||||
Delete program from <strong>{{ listDate }}</strong>
|
||||
</span>
|
||||
</Modal>
|
||||
</GenericModal>
|
||||
|
||||
<PlaylistGenerator v-if="showPlaylistGenerator" :close="closeGenerator" />
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import lodash from 'lodash'
|
||||
import { LoDashStatic } from 'lodash'
|
||||
import type { LoDashStatic } from 'lodash'
|
||||
|
||||
declare module '#app' {
|
||||
interface NuxtApp {
|
||||
|
||||
@ -7,7 +7,7 @@ import { defineStore } from 'pinia'
|
||||
dayjs.extend(utc)
|
||||
dayjs.extend(timezone)
|
||||
|
||||
const { timeToSeconds } = stringFormatter()
|
||||
// const { timeToSeconds } = stringFormatter()
|
||||
const { processPlaylist } = playlistOperations()
|
||||
|
||||
export const usePlaylist = defineStore('playlist', {
|
||||
@ -36,13 +36,13 @@ export const usePlaylist = defineStore('playlist', {
|
||||
const indexStore = useIndex()
|
||||
let statusCode = 0
|
||||
|
||||
const timeInSec = timeToSeconds(dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss'))
|
||||
// const timeInSec = timeToSeconds(dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss'))
|
||||
const channel = configStore.configGui[configStore.configID].id
|
||||
let dateToday = dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')
|
||||
// let dateToday = dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')
|
||||
|
||||
if (configStore.startInSec > timeInSec) {
|
||||
dateToday = dayjs(dateToday).utcOffset(configStore.utcOffset).subtract(1, 'day').format('YYYY-MM-DD')
|
||||
}
|
||||
// if (configStore.startInSec > timeInSec) {
|
||||
// dateToday = dayjs(dateToday).utcOffset(configStore.utcOffset).subtract(1, 'day').format('YYYY-MM-DD')
|
||||
// }
|
||||
|
||||
await fetch(`/api/playlist/${channel}?date=${date}`, {
|
||||
method: 'GET',
|
||||
|
||||
18
types/index.d.ts
vendored
18
types/index.d.ts
vendored
@ -28,12 +28,12 @@ declare global {
|
||||
}
|
||||
|
||||
interface User {
|
||||
username: String
|
||||
mail?: String
|
||||
password?: String
|
||||
confirm?: String
|
||||
admin?: Boolean
|
||||
role_id?: Number
|
||||
username: string
|
||||
mail?: string
|
||||
password?: string
|
||||
confirm?: string
|
||||
admin?: boolean
|
||||
role_id?: number
|
||||
}
|
||||
|
||||
interface Crumb {
|
||||
@ -109,9 +109,9 @@ declare global {
|
||||
cpu: { cores: number; usage: number }
|
||||
load: { one: number; five: number; fifteen: number }
|
||||
memory: { total: number; used: number; free: number }
|
||||
network?: { name: String; current_in: number; current_out: number; total_in: number; total_out: number }
|
||||
storage?: { path: String; total: number; used: number }
|
||||
network?: { name: string; current_in: number; current_out: number; total_in: number; total_out: number }
|
||||
storage?: { path: string; total: number; used: number }
|
||||
swap: { total: number; used: number; free: number }
|
||||
system: { name?: String; kernel?: String; version?: String, ffp_version?: string }
|
||||
system: { name?: string; kernel?: string; version?: string, ffp_version?: string }
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user