Page Menu
Home
DevCentral
Search
Configure Global Search
Log In
Files
F24854587
D3989.id10394.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
13 KB
Referenced Files
None
Subscribers
None
D3989.id10394.diff
View Options
diff --git a/frontend/src/components/AppNavbar.vue b/frontend/src/components/AppNavbar.vue
--- a/frontend/src/components/AppNavbar.vue
+++ b/frontend/src/components/AppNavbar.vue
@@ -3,9 +3,11 @@
import { RouterLink } from 'vue-router'
import { configApi } from '@/plugins/api'
import { useAuth } from '@/composables/useAuth'
+import { useDarkMode } from '@/composables/useDarkMode'
const config = ref(null)
const { isAuthenticated, logout } = useAuth()
+const { isDark, isToggleable, toggleDarkMode } = useDarkMode()
onMounted(async () => {
try {
@@ -22,7 +24,7 @@
</script>
<template>
- <nav class="bg-gray-900 text-white shadow-lg">
+ <nav class="full-bleed bg-gray-900 text-white shadow-lg">
<div class="max-w-5xl mx-auto px-4 sm:px-6">
<div class="flex items-center justify-between h-14">
<div class="flex items-center gap-4">
@@ -41,6 +43,20 @@
</RouterLink>
<div class="flex items-center gap-4">
+ <!-- Icons: Heroicons (https://heroicons.com/) -->
+ <button
+ v-if="isToggleable"
+ @click="toggleDarkMode"
+ class="text-gray-400 hover:text-white transition-colors"
+ :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+ >
+ <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+ <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
+ </svg>
+ <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+ <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+ </svg>
+ </button>
<RouterLink
v-if="isAuthenticated"
to="/admin"
@@ -62,7 +78,6 @@
>
Admin
</RouterLink>
-
</div>
</div>
</div>
diff --git a/frontend/src/components/__tests__/App.test.js b/frontend/src/components/__tests__/App.test.js
new file mode 100644
--- /dev/null
+++ b/frontend/src/components/__tests__/App.test.js
@@ -0,0 +1,60 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import App from '@/App.vue'
+
+// Mock child components to isolate App layout testing
+vi.mock('@/components/AppNavbar.vue', () => ({
+ default: { template: '<nav data-testid="navbar">AppNavbar</nav>' },
+}))
+
+vi.mock('@/components/AppFooter.vue', () => ({
+ default: { template: '<footer data-testid="footer">AppFooter</footer>' },
+}))
+
+// Mock vue-router
+vi.mock('vue-router', () => ({
+ RouterView: {
+ template: '<div data-testid="router-view"><slot :Component="null" /></div>',
+ },
+ RouterLink: {
+ template: '<a><slot /></a>',
+ props: ['to'],
+ },
+}))
+
+describe('App', () => {
+ it('renders the root layout', () => {
+ const wrapper = mount(App)
+ expect(wrapper.find('[data-testid="navbar"]').exists()).toBe(true)
+ expect(wrapper.find('[data-testid="footer"]').exists()).toBe(true)
+ })
+
+ it('has a full-height flex column layout', () => {
+ const wrapper = mount(App)
+ const root = wrapper.find('div')
+ expect(root.classes()).toContain('min-h-screen')
+ expect(root.classes()).toContain('flex')
+ expect(root.classes()).toContain('flex-col')
+ })
+
+ it('renders main content area with flex-1', () => {
+ const wrapper = mount(App)
+ const main = wrapper.find('main')
+ expect(main.exists()).toBe(true)
+ expect(main.classes()).toContain('flex-1')
+ })
+
+ it('renders navbar before main content', () => {
+ const wrapper = mount(App)
+ const children = wrapper.find('div').element.children
+ expect(children[0].tagName).toBe('NAV')
+ expect(children[1].tagName).toBe('MAIN')
+ })
+
+ it('renders footer after main content', () => {
+ const wrapper = mount(App)
+ const children = wrapper.find('div').element.children
+ const lastChild = children[children.length - 1]
+ expect(lastChild.tagName).toBe('FOOTER')
+ })
+})
diff --git a/frontend/src/components/__tests__/useDarkMode.test.js b/frontend/src/components/__tests__/useDarkMode.test.js
new file mode 100644
--- /dev/null
+++ b/frontend/src/components/__tests__/useDarkMode.test.js
@@ -0,0 +1,98 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+const localStorageMock = (() => {
+ let store = {}
+ return {
+ getItem: vi.fn((key) => store[key] || null),
+ setItem: vi.fn((key, value) => { store[key] = String(value) }),
+ removeItem: vi.fn((key) => { delete store[key] }),
+ clear: () => { store = {} },
+ }
+})()
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock })
+
+Object.defineProperty(window, 'matchMedia', {
+ value: vi.fn((query) => ({
+ matches: false,
+ media: query,
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ })),
+})
+
+vi.mock('@/plugins/api', () => ({
+ configApi: {
+ getAll: vi.fn(() => Promise.resolve({ theme: { name: 'Standard' } })),
+ },
+}))
+
+describe('useDarkMode', () => {
+ beforeEach(() => {
+ localStorageMock.clear()
+ vi.clearAllMocks()
+ document.documentElement.removeAttribute('data-theme')
+ vi.resetModules()
+ })
+
+ it('defaults to Standard theme light variant', async () => {
+ const { useDarkMode } = await import('@/composables/useDarkMode')
+ const { activeTheme, activeVariant, isToggleable } = useDarkMode()
+
+ await new Promise((r) => setTimeout(r, 10))
+
+ expect(activeTheme.value.name).toBe('Standard')
+ expect(activeVariant.value).toBe('light')
+ expect(isToggleable.value).toBe(true)
+ })
+
+ it('toggleDarkMode cycles variants', async () => {
+ const { useDarkMode } = await import('@/composables/useDarkMode')
+ const { activeVariant, toggleDarkMode } = useDarkMode()
+
+ await new Promise((r) => setTimeout(r, 10))
+
+ toggleDarkMode()
+ expect(activeVariant.value).toBe('dark')
+
+ toggleDarkMode()
+ expect(activeVariant.value).toBe('light')
+ })
+
+ it('toggleDarkMode persists to localStorage', async () => {
+ const { useDarkMode } = await import('@/composables/useDarkMode')
+ const { toggleDarkMode } = useDarkMode()
+
+ await new Promise((r) => setTimeout(r, 10))
+
+ toggleDarkMode()
+
+ expect(localStorageMock.setItem).toHaveBeenCalledWith(
+ 'servpulse_theme_variant',
+ 'dark'
+ )
+ })
+
+ it('sets data-theme attribute on toggle', async () => {
+ const { useDarkMode } = await import('@/composables/useDarkMode')
+ const { toggleDarkMode } = useDarkMode()
+
+ await new Promise((r) => setTimeout(r, 10))
+
+ toggleDarkMode()
+ expect(document.documentElement.getAttribute('data-theme')).toBe('dark')
+ })
+
+ it('single variant theme is not toggleable', async () => {
+ const { configApi } = await import('@/plugins/api')
+ configApi.getAll.mockResolvedValue({ theme: { name: 'Sepia' } })
+
+ const { useDarkMode } = await import('@/composables/useDarkMode')
+ const { isToggleable, activeVariant } = useDarkMode()
+
+ await new Promise((r) => setTimeout(r, 10))
+
+ expect(isToggleable.value).toBe(false)
+ expect(activeVariant.value).toBe('sepia')
+ })
+})
diff --git a/frontend/src/composables/useDarkMode.js b/frontend/src/composables/useDarkMode.js
new file mode 100644
--- /dev/null
+++ b/frontend/src/composables/useDarkMode.js
@@ -0,0 +1,68 @@
+import { ref, computed } from 'vue'
+import { configApi } from '@/plugins/api'
+
+const STORAGE_KEY = 'servpulse_theme_variant'
+
+const THEMES = [
+ { name: 'Standard', variants: ['light', 'dark'], default: 'light' },
+ { name: 'Sepia', variants: ['sepia'] },
+]
+
+const activeTheme = ref(THEMES[0])
+const activeVariant = ref(activeTheme.value.default || activeTheme.value.variants[0])
+const isToggleable = computed(() => activeTheme.value.variants.length > 1)
+
+function applyTheme(variant) {
+ document.documentElement.setAttribute('data-theme', variant)
+}
+
+async function initTheme() {
+ try {
+ const config = await configApi.getAll()
+ if (config.theme && config.theme.name) {
+ const found = THEMES.find((t) => t.name === config.theme.name)
+ if (found) {
+ activeTheme.value = found
+ }
+ }
+ } catch {
+ activeTheme.value = THEMES[0]
+ }
+
+ const defaultVariant = activeTheme.value.default || activeTheme.value.variants[0]
+
+ if (isToggleable.value) {
+ const stored = localStorage.getItem(STORAGE_KEY)
+ if (stored !== null && activeTheme.value.variants.includes(stored)) {
+ activeVariant.value = stored
+ } else {
+ activeVariant.value = defaultVariant
+ }
+ } else {
+ activeVariant.value = defaultVariant
+ }
+
+ applyTheme(activeVariant.value)
+}
+
+function toggleDarkMode() {
+ if (!isToggleable.value) {
+ return
+ }
+ const variants = activeTheme.value.variants
+ const currentIndex = variants.indexOf(activeVariant.value)
+ const nextIndex = (currentIndex + 1) % variants.length
+ activeVariant.value = variants[nextIndex]
+ localStorage.setItem(STORAGE_KEY, activeVariant.value)
+ applyTheme(activeVariant.value)
+}
+
+initTheme()
+
+export { THEMES }
+
+export function useDarkMode() {
+ const isDark = computed(() => activeVariant.value === 'dark')
+
+ return { isDark, activeTheme, activeVariant, isToggleable, toggleDarkMode }
+}
diff --git a/frontend/src/views/AdminDashboard.vue b/frontend/src/views/AdminDashboard.vue
--- a/frontend/src/views/AdminDashboard.vue
+++ b/frontend/src/views/AdminDashboard.vue
@@ -1,11 +1,6 @@
<script setup>
-import { ref, onMounted } from 'vue'
-import { useServices } from '@/composables/useServices'
-import { useIncidents } from '@/composables/useIncidents'
-import { useMaintenances } from '@/composables/useMaintenances'
-import { servicesApi, incidentsApi, maintenancesApi, configApi } from '@/plugins/api'
-import StatusBadge from '@/components/StatusBadge.vue'
-import { formatDate } from '@/utils/status'
+import { THEMES } from '@/composables/useDarkMode'
+import...
const activeTab = ref('services')
const tabs = [
@@ -148,6 +143,7 @@
// Settings
const settingsForm = ref({
navbar: { title: 'ServPulse', buttons_left: [] },
+ theme: { name: 'Standard' },
footer: {
line1: { text: '', link1_label: '', link1_url: '', link2_label: '', link2_url: '' },
line2: { text: '', link_label: '', link_url: '' },
@@ -167,7 +163,9 @@
if (!data.footer) data.footer = { ...defaultFooter }
if (!data.footer.line1) data.footer.line1 = { ...defaultFooter.line1 }
if (!data.footer.line2) data.footer.line2 = { ...defaultFooter.line2 }
+ if (!data.theme) data.theme = { name: 'Standard' }
settingsForm.value = data
+
} catch (err) {
alert('Error loading settings: ' + err.message)
}
@@ -217,11 +215,11 @@
</script>
<template>
- <div class="max-w-5xl mx-auto px-4 sm:px-6 py-8">
- <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">Admin Dashboard</h1>
+ <div class="max-w-5xl mx-auto px-4 sm:px-6 pt-6 pb-8">
+ <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Admin Dashboard</h1>
<!-- Tabs -->
- <div class="flex gap-1 mb-6 border-b border-gray-200 dark:border-gray-700">
+ <div class="flex gap-1 mb-4 border-b border-gray-200 dark:border-gray-700">
<button
v-for="tab in tabs"
:key="tab.key"
@@ -455,8 +453,8 @@
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Settings</h2>
</div>
-
<form @submit.prevent="saveSettings" class="space-y-6">
+
<!-- Site Title -->
<div class="card p-5">
<h3 class="text-sm font-semibold mb-3">Site Title</h3>
@@ -466,6 +464,22 @@
</div>
</div>
+ <!-- Theme -->
+ <div class="card p-5">
+ <h3 class="text-sm font-semibold mb-3">Theme</h3>
+ <div>
+ <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Active Theme</label>
+ <select v-model="settingsForm.theme.name" class="input-field max-w-sm">
+ <option v-for="t in THEMES" :key="t.name" :value="t.name">
+ {{ t.name }} ({{ t.variants.join(' / ') }})
+ </option>
+ </select>
+ <p class="text-xs text-gray-400 mt-2">
+ Themes with multiple variants show a toggle button in the navbar.
+ </p>
+ </div>
+ </div>
+
<!-- Navigation Buttons -->
<div class="card p-5">
<div class="flex justify-between items-center mb-3">
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -4,7 +4,7 @@
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
- darkMode: 'class',
+ darkMode: ['class', '[data-theme="dark"]'],
theme: {
extend: {
colors: {
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Sun, Mar 15, 10:08 (12 h, 36 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
3528559
Default Alt Text
D3989.id10394.diff (13 KB)
Attached To
Mode
D3989: Add dark mode toggle button
Attached
Detach File
Event Timeline
Log In to Comment