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 { meteoApi } from '@/api/meteo'
|
||||
import { settingsApi, type DebugSystemStats } from '@/api/settings'
|
||||
import { applyUiSizesToRoot } from '@/utils/uiSizeDefaults'
|
||||
|
||||
const drawerOpen = ref(false)
|
||||
const debugMode = ref(localStorage.getItem('debug_mode') === '1')
|
||||
@@ -124,13 +125,7 @@ function startDebugPolling() {
|
||||
}
|
||||
|
||||
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 }
|
||||
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`)
|
||||
}
|
||||
applyUiSizesToRoot(data)
|
||||
}
|
||||
|
||||
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 { settingsApi } from '@/api/settings'
|
||||
import { meteoApi } from '@/api/meteo'
|
||||
import { UI_SIZE_DEFAULTS, applyUiSizesToRoot } from '@/utils/uiSizeDefaults'
|
||||
|
||||
const debugMode = ref(false)
|
||||
const saving = ref(false)
|
||||
@@ -128,13 +129,6 @@ const backupMsg = ref('')
|
||||
const apiBaseUrl = detectApiBaseUrl()
|
||||
|
||||
// --- 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 = [
|
||||
{ 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' },
|
||||
@@ -142,16 +136,12 @@ const uiSizeSettings = [
|
||||
{ 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 uiSavedMsg = ref('')
|
||||
|
||||
function applyUiSizes() {
|
||||
const root = document.documentElement
|
||||
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`)
|
||||
applyUiSizesToRoot(uiSizes.value)
|
||||
window.dispatchEvent(new CustomEvent('ui-sizes-updated', { detail: { ...uiSizes.value } }))
|
||||
}
|
||||
|
||||
@@ -165,13 +155,16 @@ async function saveUiSettings() {
|
||||
applyUiSizes()
|
||||
uiSavedMsg.value = 'Enregistré'
|
||||
setTimeout(() => { uiSavedMsg.value = '' }, 1800)
|
||||
} catch {
|
||||
uiSavedMsg.value = 'Erreur lors de l\'enregistrement.'
|
||||
setTimeout(() => { uiSavedMsg.value = '' }, 2200)
|
||||
} finally {
|
||||
savingUi.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function resetUiSettings() {
|
||||
uiSizes.value = { ...UI_DEFAULTS }
|
||||
uiSizes.value = { ...UI_SIZE_DEFAULTS }
|
||||
applyUiSizes()
|
||||
}
|
||||
|
||||
@@ -226,7 +219,7 @@ async function loadSettings() {
|
||||
notifyDebugChanged(debugMode.value)
|
||||
for (const s of uiSizeSettings) {
|
||||
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()
|
||||
} catch {
|
||||
|
||||
Reference in New Issue
Block a user