refactor(settings): extraire UI_SIZE_DEFAULTS partagé + catch erreur saveUiSettings
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -51,6 +51,7 @@ import AppHeader from '@/components/AppHeader.vue'
|
|||||||
import AppDrawer from '@/components/AppDrawer.vue'
|
import AppDrawer from '@/components/AppDrawer.vue'
|
||||||
import { meteoApi } from '@/api/meteo'
|
import { meteoApi } from '@/api/meteo'
|
||||||
import { settingsApi, type DebugSystemStats } from '@/api/settings'
|
import { settingsApi, type DebugSystemStats } from '@/api/settings'
|
||||||
|
import { applyUiSizesToRoot } from '@/utils/uiSizeDefaults'
|
||||||
|
|
||||||
const drawerOpen = ref(false)
|
const drawerOpen = ref(false)
|
||||||
const debugMode = ref(localStorage.getItem('debug_mode') === '1')
|
const debugMode = ref(localStorage.getItem('debug_mode') === '1')
|
||||||
@@ -124,13 +125,7 @@ function startDebugPolling() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function applyUiSizesFromSettings(data: Record<string, string>) {
|
function applyUiSizesFromSettings(data: Record<string, string>) {
|
||||||
const defaults: Record<string, number> = { ui_font_size: 14, ui_menu_font_size: 13, ui_menu_icon_size: 18, ui_thumb_size: 96 }
|
applyUiSizesToRoot(data)
|
||||||
const root = document.documentElement
|
|
||||||
for (const [key, def] of Object.entries(defaults)) {
|
|
||||||
const val = Number(data[key]) || def
|
|
||||||
const prop = '--' + key.replace(/_/g, '-')
|
|
||||||
root.style.setProperty(prop, `${val}px`)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadDebugModeFromApi() {
|
async function loadDebugModeFromApi() {
|
||||||
|
|||||||
15
frontend/src/utils/uiSizeDefaults.ts
Normal file
15
frontend/src/utils/uiSizeDefaults.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
export const UI_SIZE_DEFAULTS: Record<string, number> = {
|
||||||
|
ui_font_size: 14,
|
||||||
|
ui_menu_font_size: 13,
|
||||||
|
ui_menu_icon_size: 18,
|
||||||
|
ui_thumb_size: 96,
|
||||||
|
}
|
||||||
|
|
||||||
|
export function applyUiSizesToRoot(data: Record<string, string | number>): void {
|
||||||
|
const root = document.documentElement
|
||||||
|
for (const [key, def] of Object.entries(UI_SIZE_DEFAULTS)) {
|
||||||
|
const val = Number(data[key]) || def
|
||||||
|
const prop = '--' + key.replace(/_/g, '-')
|
||||||
|
root.style.setProperty(prop, `${val}px`)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -118,6 +118,7 @@
|
|||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { settingsApi } from '@/api/settings'
|
import { settingsApi } from '@/api/settings'
|
||||||
import { meteoApi } from '@/api/meteo'
|
import { meteoApi } from '@/api/meteo'
|
||||||
|
import { UI_SIZE_DEFAULTS, applyUiSizesToRoot } from '@/utils/uiSizeDefaults'
|
||||||
|
|
||||||
const debugMode = ref(false)
|
const debugMode = ref(false)
|
||||||
const saving = ref(false)
|
const saving = ref(false)
|
||||||
@@ -128,13 +129,6 @@ const backupMsg = ref('')
|
|||||||
const apiBaseUrl = detectApiBaseUrl()
|
const apiBaseUrl = detectApiBaseUrl()
|
||||||
|
|
||||||
// --- UI Size settings ---
|
// --- UI Size settings ---
|
||||||
const UI_DEFAULTS: Record<string, number> = {
|
|
||||||
ui_font_size: 14,
|
|
||||||
ui_menu_font_size: 13,
|
|
||||||
ui_menu_icon_size: 18,
|
|
||||||
ui_thumb_size: 96,
|
|
||||||
}
|
|
||||||
|
|
||||||
const uiSizeSettings = [
|
const uiSizeSettings = [
|
||||||
{ key: 'ui_font_size', label: 'Taille texte', min: 12, max: 20, step: 1, unit: 'px' },
|
{ key: 'ui_font_size', label: 'Taille texte', min: 12, max: 20, step: 1, unit: 'px' },
|
||||||
{ key: 'ui_menu_font_size', label: 'Texte menu latéral', min: 11, max: 18, step: 1, unit: 'px' },
|
{ key: 'ui_menu_font_size', label: 'Texte menu latéral', min: 11, max: 18, step: 1, unit: 'px' },
|
||||||
@@ -142,16 +136,12 @@ const uiSizeSettings = [
|
|||||||
{ key: 'ui_thumb_size', label: 'Miniatures images/vidéo', min: 60, max: 200, step: 4, unit: 'px' },
|
{ key: 'ui_thumb_size', label: 'Miniatures images/vidéo', min: 60, max: 200, step: 4, unit: 'px' },
|
||||||
]
|
]
|
||||||
|
|
||||||
const uiSizes = ref<Record<string, number>>({ ...UI_DEFAULTS })
|
const uiSizes = ref<Record<string, number>>({ ...UI_SIZE_DEFAULTS })
|
||||||
const savingUi = ref(false)
|
const savingUi = ref(false)
|
||||||
const uiSavedMsg = ref('')
|
const uiSavedMsg = ref('')
|
||||||
|
|
||||||
function applyUiSizes() {
|
function applyUiSizes() {
|
||||||
const root = document.documentElement
|
applyUiSizesToRoot(uiSizes.value)
|
||||||
root.style.setProperty('--ui-font-size', `${uiSizes.value.ui_font_size}px`)
|
|
||||||
root.style.setProperty('--ui-menu-font-size', `${uiSizes.value.ui_menu_font_size}px`)
|
|
||||||
root.style.setProperty('--ui-menu-icon-size', `${uiSizes.value.ui_menu_icon_size}px`)
|
|
||||||
root.style.setProperty('--ui-thumb-size', `${uiSizes.value.ui_thumb_size}px`)
|
|
||||||
window.dispatchEvent(new CustomEvent('ui-sizes-updated', { detail: { ...uiSizes.value } }))
|
window.dispatchEvent(new CustomEvent('ui-sizes-updated', { detail: { ...uiSizes.value } }))
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -165,13 +155,16 @@ async function saveUiSettings() {
|
|||||||
applyUiSizes()
|
applyUiSizes()
|
||||||
uiSavedMsg.value = 'Enregistré'
|
uiSavedMsg.value = 'Enregistré'
|
||||||
setTimeout(() => { uiSavedMsg.value = '' }, 1800)
|
setTimeout(() => { uiSavedMsg.value = '' }, 1800)
|
||||||
|
} catch {
|
||||||
|
uiSavedMsg.value = 'Erreur lors de l\'enregistrement.'
|
||||||
|
setTimeout(() => { uiSavedMsg.value = '' }, 2200)
|
||||||
} finally {
|
} finally {
|
||||||
savingUi.value = false
|
savingUi.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetUiSettings() {
|
function resetUiSettings() {
|
||||||
uiSizes.value = { ...UI_DEFAULTS }
|
uiSizes.value = { ...UI_SIZE_DEFAULTS }
|
||||||
applyUiSizes()
|
applyUiSizes()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -226,7 +219,7 @@ async function loadSettings() {
|
|||||||
notifyDebugChanged(debugMode.value)
|
notifyDebugChanged(debugMode.value)
|
||||||
for (const s of uiSizeSettings) {
|
for (const s of uiSizeSettings) {
|
||||||
const v = data[s.key]
|
const v = data[s.key]
|
||||||
if (v != null) uiSizes.value[s.key] = Number(v) || UI_DEFAULTS[s.key]
|
if (v != null) uiSizes.value[s.key] = Number(v) || UI_SIZE_DEFAULTS[s.key]
|
||||||
}
|
}
|
||||||
applyUiSizes()
|
applyUiSizes()
|
||||||
} catch {
|
} catch {
|
||||||
|
|||||||
Reference in New Issue
Block a user