Add settings page and store with UI customization options
- Implement SettingsView with appearance, data, notifications, and advanced tabs - Add settings store (Pinia) for theme, navigation, notifications, and app config - Integrate settings store into HomeView and BottomNav for theme and navigation mode - Add room management modal and store methods for adding/removing rooms - Update SensorManagementView with room management button and modal - Support exporting/importing settings and resetting to defaults - Enable dark mode via Tailwind config
This commit is contained in:
rafaeldpsilva
511
src/views/SettingsView.vue
Normal file
511
src/views/SettingsView.vue
Normal file
@@ -0,0 +1,511 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user