666 lines
22 KiB
Vue
666 lines
22 KiB
Vue
<template>
|
|
|
|
<template v-if="simpleMode">
|
|
<Connection :status="socket.connectionStatus" @reconnect="() => socket.reconnect()" />
|
|
<Simple @show_settings="() => show_settings = true" :class="{ 'settings-open': show_settings }" />
|
|
</template>
|
|
|
|
<SettingsPanel :isOpen="show_settings" :isLoading="loadingImage" @close="closeSettings()"
|
|
@reload_bg="() => loadImage(true)" direction="right" />
|
|
|
|
<template v-if="!simpleMode">
|
|
<Shutdown v-if="app_shutdown" />
|
|
<div id="main_container" class="container" :class="{ 'settings-open': show_settings }" v-else>
|
|
<NewVersion v-if="newVersionIsAvailable" />
|
|
<nav class="navbar is-mobile is-dark">
|
|
<div class="navbar-brand pl-5">
|
|
<NuxtLink class="navbar-item is-text-overflow" to="/" @click.prevent="(e: MouseEvent) => changeRoute(e)"
|
|
v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'" id="top">
|
|
<span class="is-text-overflow">
|
|
<span class="icon">
|
|
<i v-if="'connecting' === socket.connectionStatus" class="fas fa-arrows-rotate fa-spin" />
|
|
<i v-else class="fas fa-home" />
|
|
</span>
|
|
<span class="has-text-bold" :class="connectionStatusColor">
|
|
YTPTube
|
|
</span>
|
|
<span class="has-text-bold" v-if="config?.app?.instance_title">: {{ config.app.instance_title }}</span>
|
|
</span>
|
|
</NuxtLink>
|
|
|
|
<button class="navbar-burger burger" @click="showMenu = !showMenu">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="navbar-menu is-unselectable" :class="{ 'is-active': showMenu }">
|
|
<div class="navbar-start">
|
|
<NuxtLink class="navbar-item" to="/browser" @click.prevent="(e: MouseEvent) => changeRoute(e)">
|
|
<span class="icon"><i class="fa-solid fa-folder-tree" /></span>
|
|
<span>Files</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink class="navbar-item" to="/presets" @click.prevent="(e: MouseEvent) => changeRoute(e)">
|
|
<span class="icon"><i class="fa-solid fa-sliders" /></span>
|
|
<span>Presets</span>
|
|
</NuxtLink>
|
|
|
|
<div class="navbar-item has-dropdown">
|
|
<a class="navbar-link" @click="(e: MouseEvent) => openMenu(e)">
|
|
<span class="icon"><i class="fas fa-tasks" /></span>
|
|
<span>Tasks</span>
|
|
</a>
|
|
<div class="navbar-dropdown">
|
|
<NuxtLink class="navbar-item" to="/tasks" @click.prevent="(e: MouseEvent) => changeRoute(e)">
|
|
<span class="icon"><i class="fa-solid fa-tasks" /></span>
|
|
<span>List</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink class="navbar-item" to="/task_definitions" @click.prevent="(e: MouseEvent) => changeRoute(e)">
|
|
<span class="icon"><i class="fa-solid fa-diagram-project" /></span>
|
|
<span>Definitions</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<NuxtLink class="navbar-item" to="/notifications" @click.prevent="(e: MouseEvent) => changeRoute(e)">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fa-solid fa-paper-plane" /></span>
|
|
<span>Notifications</span>
|
|
</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink class="navbar-item" to="/conditions" @click.prevent="(e: MouseEvent) => changeRoute(e)">
|
|
<span class="icon"><i class="fa-solid fa-filter" /></span>
|
|
<span>Conditions</span>
|
|
</NuxtLink>
|
|
|
|
</div>
|
|
<div class="navbar-end">
|
|
<div class="navbar-item has-dropdown">
|
|
<a class="navbar-link" @click="(e: MouseEvent) => openMenu(e)">
|
|
<span class="icon"><i class="fas fa-tools" /></span>
|
|
<span>Other</span>
|
|
</a>
|
|
|
|
<div class="navbar-dropdown">
|
|
<NuxtLink class="navbar-item" to="/logs" @click.prevent="(e: MouseEvent) => changeRoute(e)"
|
|
v-if="config.app?.file_logging">
|
|
<span class="icon"><i class="fa-solid fa-file-lines" /></span>
|
|
<span>Logs</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink class="navbar-item" to="/console" @click.prevent="(e: MouseEvent) => changeRoute(e)"
|
|
v-if="config.app.console_enabled">
|
|
<span class="icon"><i class="fa-solid fa-terminal" /></span>
|
|
<span>Console</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink class="navbar-item" to="/dl_fields" @click.prevent="(e: MouseEvent) => changeRoute(e)">
|
|
<span class="icon"><i class="fa-solid fa-file-lines" /></span>
|
|
<span>Custom fields</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar-item" v-if="true === config.app.is_native">
|
|
<button class="button is-dark" @click="shutdownApp">
|
|
<span class="icon"><i class="fas fa-power-off" /></span>
|
|
<span v-if="isMobile">Shutdown</span>
|
|
</button>
|
|
</div>
|
|
|
|
<NotifyDropdown />
|
|
|
|
<div class="navbar-item">
|
|
<button class="button is-dark" @click="reloadPage">
|
|
<span class="icon"><i class="fas fa-refresh" /></span>
|
|
<span v-if="isMobile">Reload</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="navbar-item">
|
|
<button class="button is-dark " :class="{ 'has-tooltip-bottom mr-4': !isMobile }"
|
|
@click="show_settings = !show_settings">
|
|
<span class="icon"><i class="fas fa-cog" /></span>
|
|
<span v-if="isMobile">WebUI Settings</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div>
|
|
<NuxtLoadingIndicator />
|
|
<NuxtPage v-if="config.is_loaded" :isLoading="loadingImage" @reload_bg="() => loadImage(true)" />
|
|
<Message v-if="!config.is_loaded" class="is-info mt-5" title="Loading Configuration"
|
|
icon="fas fa-spinner fa-spin">
|
|
<p>This usually takes less than a second. If this is taking too long,
|
|
<NuxtLink class="button is-text p-0" @click="config.loadConfig">reload configuration</NuxtLink>.
|
|
</p>
|
|
<template v-if="socket.error">
|
|
<hr>
|
|
<p class="has-text-danger">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fas fa-triangle-exclamation" /></span>
|
|
<span class="tag is-danger">{{ socket.error_count }}</span>
|
|
{{ socket.error }}. Check the developer console for more information.
|
|
</span>
|
|
</p>
|
|
</template>
|
|
</Message>
|
|
<Markdown @closeModel="() => doc.file = ''" :file="doc.file" v-if="doc.file" />
|
|
<ClientOnly>
|
|
<Dialog />
|
|
</ClientOnly>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<div class="columns is-multiline">
|
|
<div class="column is-12">
|
|
<Connection :status="socket.connectionStatus" @reconnect="() => socket.reconnect()" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="footer py-5 is-unselectable" v-if="config.is_loaded">
|
|
<div class="columns is-multiline is-variable is-8">
|
|
<div class="column is-12-mobile is-6-tablet">
|
|
<div class="mb-3">
|
|
<NuxtLink href="https://github.com/ArabCoders/ytptube" target="_blank"
|
|
class="has-text-weight-semibold is-size-6">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fab fa-github" /></span>
|
|
<span>YTPTube</span>
|
|
</span>
|
|
</NuxtLink>
|
|
<span class="is-size-7 ml-2 has-tooltip" style="opacity: 0.7"
|
|
v-tooltip="`Build: ${config.app?.app_build_date}, Branch: ${config.app?.app_branch}, SHA: ${config.app?.app_commit_sha}`">
|
|
{{ config?.app?.app_version || 'unknown' }}
|
|
</span>
|
|
</div>
|
|
|
|
<template v-if="config.app?.check_for_updates">
|
|
<p v-if="config.app?.new_version" class="is-size-7 mb-2" style="opacity: 0.8">
|
|
<span class="icon-text">
|
|
<span class="icon has-text-warning"><i class="fas fa-circle-info" /></span>
|
|
<span>Update available:</span>
|
|
<NuxtLink :href="`https://github.com/ArabCoders/ytptube/releases/tag/${config.app.new_version}`"
|
|
target="_blank" class="has-text-weight-semibold ml-1">
|
|
{{ config.app.new_version }}
|
|
</NuxtLink>
|
|
</span>
|
|
</p>
|
|
|
|
<p v-else class="is-size-7 mb-2" style="opacity: 0.6">
|
|
<button @click="checkForUpdates" :disabled="checkingUpdates" class="is-text is-small p-0 is-size-7"
|
|
:class="{ 'is-loading': checkingUpdates }"
|
|
style="opacity: 0.8; height: auto; vertical-align: baseline; border: none; text-decoration: none; background: none;">
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<i class="fas" :class="checkingUpdates ? 'fa-spinner fa-spin' : 'fa-circle-check'" />
|
|
</span>
|
|
<span>{{ updateCheckMessage }}</span>
|
|
</span>
|
|
</button>
|
|
</p>
|
|
</template>
|
|
|
|
<p v-if="config.app?.started" class="is-size-7 mb-0" style="opacity: 0.6">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fas fa-clock" /></span>
|
|
<span class="has-tooltip"
|
|
v-tooltip="'Started: ' + moment.unix(config.app?.started).format('YYYY-MM-DD HH:mm Z')">
|
|
{{ moment.unix(config.app?.started).fromNow() }}
|
|
</span>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="column is-12-mobile is-3-tablet">
|
|
<div class="footer-divider"
|
|
style="border-left: 1px solid rgba(128,128,128,0.2); border-right: 1px solid rgba(128,128,128,0.2); padding: 0 2rem;">
|
|
<p class="is-size-7 mb-2" style="opacity: 0.7">Powered by</p>
|
|
<NuxtLink href="https://github.com/yt-dlp/yt-dlp" target="_blank" class="has-text-weight-semibold">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fab fa-github" /></span>
|
|
<span>yt-dlp</span>
|
|
</span>
|
|
</NuxtLink>
|
|
<span class="is-size-7 ml-1" style="opacity: 0.6">{{ config?.app?.ytdlp_version || 'unknown' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-12-mobile is-3-tablet">
|
|
<p class="is-size-7 mb-2" style="opacity: 0.7">Quick Links</p>
|
|
<div
|
|
class="is-flex is-flex-direction-row is-flex-wrap-wrap is-justify-content-flex-start is-justify-content-flex-end-tablet"
|
|
style="gap: 0.75rem;">
|
|
<NuxtLink to="/changelog" class="is-size-7">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fas fa-list" /></span>
|
|
<span>Changelog</span>
|
|
</span>
|
|
</NuxtLink>
|
|
<NuxtLink @click="doc.file = '/api/docs/FAQ.md'" class="is-size-7">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fas fa-question-circle" /></span>
|
|
<span>FAQ</span>
|
|
</span>
|
|
</NuxtLink>
|
|
<NuxtLink @click="doc.file = '/api/docs/README.md'" class="is-size-7">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fas fa-book" /></span>
|
|
<span>Docs</span>
|
|
</span>
|
|
</NuxtLink>
|
|
<NuxtLink @click="doc.file = '/api/docs/API.md'" class="is-size-7">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fas fa-code" /></span>
|
|
<span>API</span>
|
|
</span>
|
|
</NuxtLink>
|
|
<button @click="scrollToTop" class="is-size-7 button is-text is-small p-0">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fas fa-arrow-up" /></span>
|
|
<span>Top</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, watch, readonly } from 'vue'
|
|
import 'assets/css/bulma.css'
|
|
import 'assets/css/style.css'
|
|
import 'assets/css/all.css'
|
|
import { useStorage } from '@vueuse/core'
|
|
import moment from 'moment'
|
|
import type { YTDLPOption } from '~/types/ytdlp'
|
|
import { useDialog } from '~/composables/useDialog'
|
|
import Dialog from '~/components/Dialog.vue'
|
|
import Simple from '~/components/Simple.vue'
|
|
import Shutdown from '~/components/shutdown.vue'
|
|
import Markdown from '~/components/Markdown.vue'
|
|
|
|
const selectedTheme = useStorage('theme', 'auto')
|
|
const socket = useSocketStore()
|
|
const config = useConfigStore()
|
|
const loadedImage = ref()
|
|
const loadingImage = ref(false)
|
|
const bg_enable = useStorage('random_bg', true)
|
|
const bg_opacity = useStorage('random_bg_opacity', 0.95)
|
|
const showMenu = ref(false)
|
|
const isMobile = useMediaQuery({ maxWidth: 1024 })
|
|
const app_shutdown = ref<boolean>(false)
|
|
const simpleMode = useStorage<boolean>('simple_mode', config.app.simple_mode || false)
|
|
const show_settings = ref(false)
|
|
const doc = ref<{ file: string }>({ file: '' })
|
|
const checkingUpdates = ref(false)
|
|
const updateCheckMessage = ref('Up to date - Click to check')
|
|
|
|
const checkForUpdates = async () => {
|
|
if (checkingUpdates.value) {
|
|
return
|
|
}
|
|
|
|
const msg = 'Up to date - Click to check'
|
|
|
|
try {
|
|
checkingUpdates.value = true
|
|
updateCheckMessage.value = 'Checking...'
|
|
|
|
const response = await fetch('/api/system/check-updates', { method: 'POST' })
|
|
|
|
if (!response.ok) {
|
|
await response.json()
|
|
updateCheckMessage.value = 'Check failed'
|
|
setTimeout(() => updateCheckMessage.value = msg, 3000)
|
|
return
|
|
}
|
|
|
|
const data = await response.json()
|
|
|
|
switch (data.status) {
|
|
case 'update_available':
|
|
updateCheckMessage.value = 'Update found!'
|
|
config.app.new_version = data.new_version
|
|
break
|
|
case 'up_to_date':
|
|
updateCheckMessage.value = 'Up to date ✓'
|
|
setTimeout(() => updateCheckMessage.value = msg, 3000)
|
|
break
|
|
case 'error':
|
|
updateCheckMessage.value = 'Check failed'
|
|
setTimeout(() => updateCheckMessage.value = msg, 3000)
|
|
break
|
|
}
|
|
} catch (e) {
|
|
console.error('Update check failed:', e)
|
|
updateCheckMessage.value = 'Check failed'
|
|
setTimeout(() => updateCheckMessage.value = msg, 3000)
|
|
} finally {
|
|
checkingUpdates.value = false
|
|
}
|
|
}
|
|
|
|
const applyPreferredColorScheme = (scheme: string) => {
|
|
if (!scheme || scheme === 'auto') {
|
|
return
|
|
}
|
|
|
|
for (let s = 0; s < document.styleSheets.length; s++) {
|
|
const styleSheet = document.styleSheets[s]
|
|
if (!styleSheet?.cssRules) {
|
|
continue
|
|
}
|
|
|
|
let rules: CSSRuleList
|
|
try {
|
|
rules = styleSheet.cssRules
|
|
} catch (e) {
|
|
// Cross-origin stylesheet
|
|
console.debug("Unable to access stylesheet rules:", e)
|
|
continue
|
|
}
|
|
|
|
for (let i = 0; i < rules.length; i++) {
|
|
const rule = rules[i]
|
|
|
|
if (rule instanceof CSSMediaRule && rule.media.mediaText.includes("prefers-color-scheme")) {
|
|
const media = rule.media
|
|
|
|
const safeDelete = (medium: string) => {
|
|
if (media.mediaText.includes(medium)) {
|
|
try {
|
|
media.deleteMedium(medium)
|
|
} catch (e) {
|
|
console.debug(`Failed to delete medium "${medium}"`, e)
|
|
}
|
|
}
|
|
}
|
|
|
|
try {
|
|
switch (scheme) {
|
|
case "light":
|
|
if (!media.mediaText.includes("original-prefers-color-scheme")) {
|
|
media.appendMedium("original-prefers-color-scheme")
|
|
}
|
|
safeDelete("(prefers-color-scheme: light)")
|
|
safeDelete("(prefers-color-scheme: dark)")
|
|
break
|
|
|
|
case "dark":
|
|
if (!media.mediaText.includes("(prefers-color-scheme: light)")) {
|
|
media.appendMedium("(prefers-color-scheme: light)")
|
|
}
|
|
if (!media.mediaText.includes("(prefers-color-scheme: dark)")) {
|
|
media.appendMedium("(prefers-color-scheme: dark)")
|
|
}
|
|
safeDelete("original-prefers-color-scheme")
|
|
break
|
|
|
|
default:
|
|
if (!media.mediaText.includes("(prefers-color-scheme: dark)")) {
|
|
media.appendMedium("(prefers-color-scheme: dark)")
|
|
}
|
|
safeDelete("(prefers-color-scheme: light)")
|
|
safeDelete("original-prefers-color-scheme")
|
|
break
|
|
}
|
|
} catch (e) {
|
|
console.debug("Error modifying media rule:", e)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
applyPreferredColorScheme(selectedTheme.value)
|
|
} catch { }
|
|
|
|
try {
|
|
await config.loadConfig()
|
|
} catch { }
|
|
|
|
try {
|
|
const opts = await request('/api/yt-dlp/options')
|
|
if (opts.ok) {
|
|
config.ytdlp_options = await opts.json() as Array<YTDLPOption>
|
|
}
|
|
} catch { }
|
|
|
|
try {
|
|
socket.connect()
|
|
} catch { }
|
|
|
|
try {
|
|
await handleImage(bg_enable.value)
|
|
} catch { }
|
|
})
|
|
|
|
watch(selectedTheme, value => {
|
|
try {
|
|
if ('auto' === value) {
|
|
applyPreferredColorScheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
|
return
|
|
}
|
|
applyPreferredColorScheme(value)
|
|
} catch { }
|
|
})
|
|
|
|
watch(bg_enable, async v => await handleImage(v))
|
|
watch(bg_opacity, v => {
|
|
if (false === bg_enable.value) {
|
|
return
|
|
}
|
|
document.querySelector('body')?.setAttribute("style", `opacity: ${v}`)
|
|
})
|
|
|
|
watch(loadedImage, _ => {
|
|
if (false === bg_enable.value) {
|
|
return
|
|
}
|
|
|
|
const html = document.documentElement
|
|
const body = document.querySelector('body')
|
|
|
|
const style = {
|
|
"background-color": "unset",
|
|
"display": 'block',
|
|
"min-height": '100%',
|
|
"min-width": '100%',
|
|
"background-image": `url(${loadedImage.value})`,
|
|
} as any
|
|
|
|
html.setAttribute("style", Object.keys(style).map(k => `${k}: ${style[k]}`).join('; ').trim())
|
|
html.classList.add('bg-fanart')
|
|
body?.setAttribute("style", `opacity: ${bg_opacity.value}`)
|
|
})
|
|
|
|
const handleImage = async (enabled: boolean) => {
|
|
if (false === enabled) {
|
|
if (!loadedImage.value) {
|
|
return
|
|
}
|
|
|
|
const html = document.documentElement
|
|
const body = document.querySelector('body')
|
|
|
|
if (html.getAttribute("style")) {
|
|
html.removeAttribute("style")
|
|
}
|
|
|
|
if (body?.getAttribute("style")) {
|
|
body.removeAttribute("style")
|
|
}
|
|
|
|
loadedImage.value = ''
|
|
return
|
|
}
|
|
|
|
if (loadedImage.value) {
|
|
return
|
|
}
|
|
|
|
await loadImage()
|
|
}
|
|
|
|
const loadImage = async (force = false) => {
|
|
if (loadingImage.value) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
loadingImage.value = true
|
|
|
|
let url = '/api/random/background'
|
|
if (force) {
|
|
url += '?force=true'
|
|
}
|
|
|
|
const imgRequest = await request(url)
|
|
if (200 !== imgRequest.status) {
|
|
return
|
|
}
|
|
|
|
loadedImage.value = URL.createObjectURL(await imgRequest.blob())
|
|
} catch (e) {
|
|
console.error(e)
|
|
} finally {
|
|
loadingImage.value = false
|
|
}
|
|
}
|
|
|
|
const changeRoute = async (_: MouseEvent, callback: (() => void) | null = null) => {
|
|
showMenu.value = false
|
|
document.querySelectorAll('div.has-dropdown').forEach(el => el.classList.remove('is-active'))
|
|
if (callback) {
|
|
callback()
|
|
}
|
|
}
|
|
|
|
const useVersionUpdate = () => {
|
|
const newVersionIsAvailable = ref(false)
|
|
const nuxtApp = useNuxtApp()
|
|
nuxtApp.hooks.addHooks({
|
|
'app:manifest:update': () => {
|
|
newVersionIsAvailable.value = true
|
|
}
|
|
});
|
|
|
|
return {
|
|
newVersionIsAvailable: readonly(newVersionIsAvailable),
|
|
}
|
|
}
|
|
|
|
const { newVersionIsAvailable } = useVersionUpdate()
|
|
|
|
const closeSettings = () => show_settings.value = false
|
|
|
|
const shutdownApp = async () => {
|
|
const { alertDialog, confirmDialog: cDialog } = useDialog()
|
|
|
|
if (false === config.app.is_native) {
|
|
await alertDialog({
|
|
title: 'Shutdown Unavailable',
|
|
message: 'The shutdown feature is only available when running as native application.',
|
|
})
|
|
return
|
|
}
|
|
|
|
const { status } = await cDialog({
|
|
title: 'Shutdown Application',
|
|
message: 'Are you sure you want to shutdown the application?',
|
|
})
|
|
|
|
if (false === status) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
const resp = await fetch('/api/system/shutdown', { method: 'POST' })
|
|
if (!resp.ok) {
|
|
const body = await resp.json()
|
|
await alertDialog({
|
|
title: 'Shutdown Failed',
|
|
message: `Failed to shutdown the application: ${body.error || resp.statusText || resp.status}`,
|
|
})
|
|
return
|
|
}
|
|
app_shutdown.value = true
|
|
await nextTick()
|
|
} catch (e: any) {
|
|
await alertDialog({
|
|
title: 'Shutdown Failed',
|
|
message: `Failed to shutdown the application: ${e.message || e}`,
|
|
})
|
|
}
|
|
}
|
|
|
|
const openMenu = (e: MouseEvent) => {
|
|
const elm = (e.target as HTMLElement)?.closest('div.has-dropdown') as HTMLElement | null
|
|
|
|
document.querySelectorAll<HTMLElement>('div.has-dropdown').forEach(el => {
|
|
if (el !== elm) {
|
|
el.classList.remove('is-active')
|
|
}
|
|
})
|
|
|
|
elm?.classList.toggle('is-active')
|
|
}
|
|
|
|
const reloadPage = () => window.location.reload()
|
|
|
|
const connectionStatusColor = computed(() => {
|
|
switch (socket.connectionStatus) {
|
|
case 'connected':
|
|
return 'has-text-success'
|
|
case 'connecting':
|
|
return 'has-text-warning'
|
|
case 'disconnected':
|
|
default:
|
|
return 'has-text-danger'
|
|
}
|
|
})
|
|
|
|
const scrollToTop = () => document.getElementById('top')?.scrollIntoView({ behavior: 'smooth' });
|
|
</script>
|
|
|
|
<style>
|
|
#main_container,
|
|
.basic-wrapper {
|
|
transition: transform 0.3s ease, margin-right 0.3s ease;
|
|
}
|
|
|
|
#main_container.settings-open,
|
|
.basic-wrapper.settings-open {
|
|
transform: translateX(-300px);
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
|
#main_container.settings-open,
|
|
.basic-wrapper.settings-open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.footer .footer-divider {
|
|
border-left: none !important;
|
|
border-right: none !important;
|
|
padding: 0 !important;
|
|
border-top: 1px solid rgba(128, 128, 128, 0.2);
|
|
padding-top: 1.5rem !important;
|
|
margin-top: 1.5rem !important;
|
|
}
|
|
}
|
|
</style>
|