653 lines
26 KiB
Vue
653 lines
26 KiB
Vue
<template>
|
|
<div class="space-y-6">
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900">Settings</h1>
|
|
<p class="text-gray-600">Customize your dashboard experience and application preferences</p>
|
|
</div>
|
|
<div class="mt-4 sm:mt-0 flex items-center gap-3">
|
|
<span v-if="settingsStore.lastSaved" class="text-xs text-gray-500">
|
|
Last saved: {{ formatTime(settingsStore.lastSaved) }}
|
|
</span>
|
|
<button
|
|
@click="showResetDialog = true"
|
|
class="px-3 py-1.5 text-red-600 hover:bg-red-50 rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
Reset All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Settings Navigation -->
|
|
<div class="lg:col-span-1">
|
|
<nav class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 sticky top-4">
|
|
<ul class="space-y-1">
|
|
<li v-for="section in settingSections" :key="section.id">
|
|
<button
|
|
@click="activeSection = section.id"
|
|
class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors"
|
|
:class="
|
|
activeSection === section.id
|
|
? 'bg-blue-100 text-blue-700'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
"
|
|
>
|
|
<span class="text-lg">{{ section.icon }}</span>
|
|
<div>
|
|
<div class="font-medium">{{ section.name }}</div>
|
|
<div class="text-xs opacity-75">{{ section.description }}</div>
|
|
</div>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Settings Content -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<!-- Appearance Settings -->
|
|
<div
|
|
v-if="activeSection === 'appearance'"
|
|
class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
|
|
>
|
|
<div class="p-6 border-b border-gray-100">
|
|
<h3 class="text-lg font-semibold text-gray-900">Appearance</h3>
|
|
<p class="text-gray-600 text-sm mt-1">Customize the look and feel of your dashboard</p>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<!-- Theme Selection -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-3">Theme</label>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<div
|
|
v-for="theme in settingsStore.getThemeOptions()"
|
|
:key="theme.value"
|
|
@click="settingsStore.updateSetting('theme', theme.value)"
|
|
class="relative p-4 border-2 rounded-lg cursor-pointer transition-all hover:border-blue-300"
|
|
:class="
|
|
settingsStore.settings.theme === theme.value
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-gray-200'
|
|
"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-lg">{{ theme.icon }}</span>
|
|
<span class="font-medium text-gray-900">{{ theme.label }}</span>
|
|
</div>
|
|
<div v-if="settingsStore.settings.theme === theme.value" class="text-blue-600">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Mode -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-3">Bottom Navigation</label>
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="mode in settingsStore.getNavigationModeOptions()"
|
|
:key="mode.value"
|
|
@click="settingsStore.updateSetting('ui.navigationMode', mode.value)"
|
|
class="relative p-4 border-2 rounded-lg cursor-pointer transition-all hover:border-blue-300"
|
|
:class="
|
|
settingsStore.settings.ui.navigationMode === mode.value
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-gray-200'
|
|
"
|
|
>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex items-start gap-3">
|
|
<span class="text-lg mt-0.5">{{ mode.icon }}</span>
|
|
<div>
|
|
<div class="font-medium text-gray-900">{{ mode.label }}</div>
|
|
<div class="text-sm text-gray-600 mt-1">{{ mode.description }}</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="settingsStore.settings.ui.navigationMode === mode.value"
|
|
class="text-blue-600 mt-1"
|
|
>
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- UI Options -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-900">Compact Mode</div>
|
|
<div class="text-sm text-gray-600">Reduce spacing and padding</div>
|
|
</div>
|
|
<button
|
|
@click="
|
|
settingsStore.updateSetting(
|
|
'ui.compactMode',
|
|
!settingsStore.settings.ui.compactMode,
|
|
)
|
|
"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
:class="settingsStore.settings.ui.compactMode ? 'bg-blue-600' : 'bg-gray-200'"
|
|
>
|
|
<span
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="
|
|
settingsStore.settings.ui.compactMode ? 'translate-x-6' : 'translate-x-1'
|
|
"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-900">Animations</div>
|
|
<div class="text-sm text-gray-600">Enable smooth transitions</div>
|
|
</div>
|
|
<button
|
|
@click="
|
|
settingsStore.updateSetting(
|
|
'ui.showAnimations',
|
|
!settingsStore.settings.ui.showAnimations,
|
|
)
|
|
"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
:class="settingsStore.settings.ui.showAnimations ? 'bg-blue-600' : 'bg-gray-200'"
|
|
>
|
|
<span
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="
|
|
settingsStore.settings.ui.showAnimations ? 'translate-x-6' : 'translate-x-1'
|
|
"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data & Sync Settings -->
|
|
<div
|
|
v-if="activeSection === 'data'"
|
|
class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
|
|
>
|
|
<div class="p-6 border-b border-gray-100">
|
|
<h3 class="text-lg font-semibold text-gray-900">Data & Synchronization</h3>
|
|
<p class="text-gray-600 text-sm mt-1">Configure data refresh and connection settings</p>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<!-- Auto Refresh -->
|
|
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-900">Auto Refresh</div>
|
|
<div class="text-sm text-gray-600">Automatically refresh data periodically</div>
|
|
</div>
|
|
<button
|
|
@click="
|
|
settingsStore.updateSetting(
|
|
'ui.autoRefresh',
|
|
!settingsStore.settings.ui.autoRefresh,
|
|
)
|
|
"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
:class="settingsStore.settings.ui.autoRefresh ? 'bg-blue-600' : 'bg-gray-200'"
|
|
>
|
|
<span
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="settingsStore.settings.ui.autoRefresh ? 'translate-x-6' : 'translate-x-1'"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Refresh Interval -->
|
|
<div v-if="settingsStore.settings.ui.autoRefresh">
|
|
<label class="block text-sm font-medium text-gray-700 mb-3">Refresh Interval</label>
|
|
<div class="flex items-center gap-4">
|
|
<input
|
|
type="range"
|
|
min="1"
|
|
max="60"
|
|
:value="settingsStore.settings.ui.refreshInterval"
|
|
@input="
|
|
settingsStore.updateSetting(
|
|
'ui.refreshInterval',
|
|
parseInt(($event.target as HTMLInputElement).value),
|
|
)
|
|
"
|
|
class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
|
/>
|
|
<div
|
|
class="bg-gray-100 px-3 py-1 rounded text-sm font-medium min-w-[80px] text-center"
|
|
>
|
|
{{ settingsStore.settings.ui.refreshInterval }}s
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- WebSocket URL -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">WebSocket URL</label>
|
|
<div class="flex gap-3">
|
|
<input
|
|
v-model="websocketUrlInput"
|
|
type="text"
|
|
placeholder="ws://localhost:8000/ws"
|
|
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
:class="{
|
|
'border-red-300 focus:ring-red-500 focus:border-red-500': websocketUrlError,
|
|
}"
|
|
/>
|
|
<button
|
|
@click="updateWebSocketUrl"
|
|
:disabled="
|
|
!websocketUrlInput || websocketUrlInput === settingsStore.settings.websocketUrl
|
|
"
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
Update
|
|
</button>
|
|
</div>
|
|
<p v-if="websocketUrlError" class="text-red-600 text-sm mt-1">
|
|
{{ websocketUrlError }}
|
|
</p>
|
|
<p v-else class="text-gray-500 text-sm mt-1">
|
|
Current: {{ settingsStore.settings.websocketUrl }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Auto Connect -->
|
|
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-900">Auto Connect</div>
|
|
<div class="text-sm text-gray-600">
|
|
Automatically connect to WebSocket on app start
|
|
</div>
|
|
</div>
|
|
<button
|
|
@click="
|
|
settingsStore.updateSetting('autoConnect', !settingsStore.settings.autoConnect)
|
|
"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
:class="settingsStore.settings.autoConnect ? 'bg-blue-600' : 'bg-gray-200'"
|
|
>
|
|
<span
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="settingsStore.settings.autoConnect ? 'translate-x-6' : 'translate-x-1'"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notifications Settings -->
|
|
<div
|
|
v-if="activeSection === 'notifications'"
|
|
class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
|
|
>
|
|
<div class="p-6 border-b border-gray-100">
|
|
<h3 class="text-lg font-semibold text-gray-900">Notifications</h3>
|
|
<p class="text-gray-600 text-sm mt-1">
|
|
Configure how you receive alerts and notifications
|
|
</p>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<!-- Enable Notifications -->
|
|
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-900">Enable Notifications</div>
|
|
<div class="text-sm text-gray-600">Receive system alerts and updates</div>
|
|
</div>
|
|
<button
|
|
@click="
|
|
settingsStore.updateSetting(
|
|
'notifications.enabled',
|
|
!settingsStore.settings.notifications.enabled,
|
|
)
|
|
"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
:class="
|
|
settingsStore.settings.notifications.enabled ? 'bg-blue-600' : 'bg-gray-200'
|
|
"
|
|
>
|
|
<span
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="
|
|
settingsStore.settings.notifications.enabled ? 'translate-x-6' : 'translate-x-1'
|
|
"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="settingsStore.settings.notifications.enabled" class="space-y-4">
|
|
<!-- Notification Types -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div
|
|
class="flex items-center justify-between p-4 border border-gray-200 rounded-lg"
|
|
>
|
|
<div>
|
|
<div class="font-medium text-gray-900">Sound Alerts</div>
|
|
<div class="text-sm text-gray-600">Play sound for notifications</div>
|
|
</div>
|
|
<button
|
|
@click="
|
|
settingsStore.updateSetting(
|
|
'notifications.sound',
|
|
!settingsStore.settings.notifications.sound,
|
|
)
|
|
"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
:class="
|
|
settingsStore.settings.notifications.sound ? 'bg-blue-600' : 'bg-gray-200'
|
|
"
|
|
>
|
|
<span
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="
|
|
settingsStore.settings.notifications.sound
|
|
? 'translate-x-6'
|
|
: 'translate-x-1'
|
|
"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
class="flex items-center justify-between p-4 border border-gray-200 rounded-lg"
|
|
>
|
|
<div>
|
|
<div class="font-medium text-gray-900">Desktop Notifications</div>
|
|
<div class="text-sm text-gray-600">Show browser notifications</div>
|
|
</div>
|
|
<button
|
|
@click="toggleDesktopNotifications"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
:class="
|
|
settingsStore.settings.notifications.desktop ? 'bg-blue-600' : 'bg-gray-200'
|
|
"
|
|
>
|
|
<span
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="
|
|
settingsStore.settings.notifications.desktop
|
|
? 'translate-x-6'
|
|
: 'translate-x-1'
|
|
"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Critical Only -->
|
|
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-900">Critical Alerts Only</div>
|
|
<div class="text-sm text-gray-600">Only show high-priority notifications</div>
|
|
</div>
|
|
<button
|
|
@click="
|
|
settingsStore.updateSetting(
|
|
'notifications.criticalOnly',
|
|
!settingsStore.settings.notifications.criticalOnly,
|
|
)
|
|
"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
:class="
|
|
settingsStore.settings.notifications.criticalOnly
|
|
? 'bg-blue-600'
|
|
: 'bg-gray-200'
|
|
"
|
|
>
|
|
<span
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="
|
|
settingsStore.settings.notifications.criticalOnly
|
|
? 'translate-x-6'
|
|
: 'translate-x-1'
|
|
"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Settings -->
|
|
<div
|
|
v-if="activeSection === 'advanced'"
|
|
class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
|
|
>
|
|
<div class="p-6 border-b border-gray-100">
|
|
<h3 class="text-lg font-semibold text-gray-900">Advanced</h3>
|
|
<p class="text-gray-600 text-sm mt-1">Developer options and advanced configuration</p>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<!-- Developer Mode -->
|
|
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
|
<div>
|
|
<div class="font-medium text-gray-900">Developer Mode</div>
|
|
<div class="text-sm text-gray-600">Enable debug logs and development features</div>
|
|
</div>
|
|
<button
|
|
@click="
|
|
settingsStore.updateSetting(
|
|
'developerMode',
|
|
!settingsStore.settings.developerMode,
|
|
)
|
|
"
|
|
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
|
|
:class="settingsStore.settings.developerMode ? 'bg-blue-600' : 'bg-gray-200'"
|
|
>
|
|
<span
|
|
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
|
|
:class="settingsStore.settings.developerMode ? 'translate-x-6' : 'translate-x-1'"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Export/Import Settings -->
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Export Settings</label>
|
|
<button
|
|
@click="exportSettings"
|
|
class="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
Export Configuration
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Import Settings</label>
|
|
<div class="flex gap-3">
|
|
<textarea
|
|
v-model="importSettingsJson"
|
|
placeholder="Paste exported settings JSON here..."
|
|
rows="3"
|
|
class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
<button
|
|
@click="importSettings"
|
|
:disabled="!importSettingsJson.trim()"
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
Import
|
|
</button>
|
|
</div>
|
|
<p v-if="importError" class="text-red-600 text-sm mt-1">{{ importError }}</p>
|
|
<p v-if="importSuccess" class="text-green-600 text-sm mt-1">
|
|
Settings imported successfully!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reset Confirmation Dialog -->
|
|
<div
|
|
v-if="showResetDialog"
|
|
class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
|
|
>
|
|
<div class="bg-white rounded-xl max-w-md w-full p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Reset All Settings</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Are you sure you want to reset all settings to their default values? This action cannot be
|
|
undone.
|
|
</p>
|
|
<div class="flex gap-3">
|
|
<button
|
|
@click="showResetDialog = false"
|
|
class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
@click="resetAllSettings"
|
|
class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
Reset Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useSettingsStore } from '@/stores/settings'
|
|
|
|
const settingsStore = useSettingsStore()
|
|
|
|
// Component state
|
|
const activeSection = ref('appearance')
|
|
const showResetDialog = ref(false)
|
|
const websocketUrlInput = ref('')
|
|
const websocketUrlError = ref('')
|
|
const importSettingsJson = ref('')
|
|
const importError = ref('')
|
|
const importSuccess = ref(false)
|
|
|
|
// Settings sections
|
|
const settingSections = [
|
|
{
|
|
id: 'appearance',
|
|
name: 'Appearance',
|
|
description: 'Theme & UI',
|
|
icon: '🎨',
|
|
},
|
|
{
|
|
id: 'data',
|
|
name: 'Data & Sync',
|
|
description: 'Connection & refresh',
|
|
icon: '🔄',
|
|
},
|
|
{
|
|
id: 'notifications',
|
|
name: 'Notifications',
|
|
description: 'Alerts & sounds',
|
|
icon: '🔔',
|
|
},
|
|
{
|
|
id: 'advanced',
|
|
name: 'Advanced',
|
|
description: 'Developer options',
|
|
icon: '⚙️',
|
|
},
|
|
]
|
|
|
|
// Methods
|
|
const formatTime = (date: Date) => {
|
|
return new Intl.DateTimeFormat('en-US', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
}).format(date)
|
|
}
|
|
|
|
const updateWebSocketUrl = () => {
|
|
if (!settingsStore.isValidWebSocketUrl(websocketUrlInput.value)) {
|
|
websocketUrlError.value = 'Please enter a valid WebSocket URL (ws:// or wss://)'
|
|
return
|
|
}
|
|
|
|
settingsStore.updateSetting('websocketUrl', websocketUrlInput.value)
|
|
websocketUrlError.value = ''
|
|
}
|
|
|
|
const toggleDesktopNotifications = async () => {
|
|
if (!settingsStore.settings.notifications.desktop) {
|
|
const permission = await settingsStore.requestNotificationPermission()
|
|
if (permission) {
|
|
settingsStore.updateSetting('notifications.desktop', true)
|
|
} else {
|
|
alert('Notification permission is required to enable desktop notifications.')
|
|
}
|
|
} else {
|
|
settingsStore.updateSetting('notifications.desktop', false)
|
|
}
|
|
}
|
|
|
|
const exportSettings = () => {
|
|
const settingsJson = settingsStore.exportSettings()
|
|
const blob = new Blob([settingsJson], { type: 'application/json' })
|
|
const url = URL.createObjectURL(blob)
|
|
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `dashboard-settings-${new Date().toISOString().split('T')[0]}.json`
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
const importSettings = () => {
|
|
importError.value = ''
|
|
importSuccess.value = false
|
|
|
|
const success = settingsStore.importSettings(importSettingsJson.value)
|
|
|
|
if (success) {
|
|
importSuccess.value = true
|
|
importSettingsJson.value = ''
|
|
setTimeout(() => {
|
|
importSuccess.value = false
|
|
}, 3000)
|
|
} else {
|
|
importError.value = 'Invalid settings format. Please check the JSON structure.'
|
|
}
|
|
}
|
|
|
|
const resetAllSettings = () => {
|
|
settingsStore.resetToDefaults()
|
|
showResetDialog.value = false
|
|
websocketUrlInput.value = settingsStore.settings.websocketUrl
|
|
}
|
|
|
|
// Initialize
|
|
onMounted(() => {
|
|
settingsStore.initialize()
|
|
websocketUrlInput.value = settingsStore.settings.websocketUrl
|
|
})
|
|
</script>
|