332 lines
13 KiB
Vue
332 lines
13 KiB
Vue
<template>
|
|
<div class="p-4 max-w-[1800px] mx-auto space-y-8">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-green tracking-tight">Réglages Système</h1>
|
|
<p class="text-text-muted text-xs mt-1">Configurez l'interface, la maintenance et la sécurité de votre application.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
|
|
<!-- Section Interface -->
|
|
<section class="card-jardin flex flex-col h-full border-green/20">
|
|
<div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
|
|
<span class="text-2xl">🎨</span>
|
|
<div>
|
|
<h2 class="text-text font-bold uppercase tracking-widest text-xs">Interface Graphique</h2>
|
|
<p class="text-[10px] text-text-muted font-bold">Ajustez les échelles visuelles.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 space-y-6">
|
|
<div v-for="s in uiSizeSettings" :key="s.key" class="space-y-2">
|
|
<div class="flex justify-between items-center">
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-text-muted">{{ s.label }}</label>
|
|
<span class="text-xs font-mono text-green">{{ uiSizes[s.key] }}{{ s.unit }}</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
:min="s.min" :max="s.max" :step="s.step"
|
|
v-model.number="uiSizes[s.key]"
|
|
class="w-full h-1.5 bg-bg-hard rounded-lg appearance-none cursor-pointer accent-green"
|
|
@input="applyUiSizes"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 pt-4 border-t border-bg-hard flex items-center justify-between">
|
|
<button
|
|
class="text-[10px] font-black uppercase tracking-widest text-text-muted hover:text-text transition-colors"
|
|
@click="resetUiSettings"
|
|
>Réinitialiser</button>
|
|
<div class="flex items-center gap-3">
|
|
<span v-if="uiSavedMsg" class="text-[10px] font-bold text-aqua animate-pulse">{{ uiSavedMsg }}</span>
|
|
<button
|
|
class="btn-primary !py-2 !px-6 text-xs"
|
|
:disabled="savingUi"
|
|
@click="saveUiSettings"
|
|
>{{ savingUi ? '...' : 'Enregistrer' }}</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section Général / Debug -->
|
|
<section class="card-jardin flex flex-col h-full border-yellow/20">
|
|
<div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
|
|
<span class="text-2xl">⚙️</span>
|
|
<div>
|
|
<h2 class="text-text font-bold uppercase tracking-widest text-xs">Général & Debug</h2>
|
|
<p class="text-[10px] text-text-muted font-bold">Options globales du système.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 space-y-6">
|
|
<label class="flex items-start gap-4 cursor-pointer group bg-bg-hard/30 p-4 rounded-2xl border border-bg-soft/50 hover:border-yellow/30 transition-all">
|
|
<div class="relative mt-1">
|
|
<input v-model="debugMode" type="checkbox" class="sr-only peer" />
|
|
<div class="w-10 h-5 bg-bg-hard rounded-full peer peer-checked:bg-yellow transition-colors"></div>
|
|
<div class="absolute left-1 top-1 w-3 h-3 bg-text-muted peer-checked:bg-bg peer-checked:translate-x-5 rounded-full transition-all"></div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-sm font-bold text-text group-hover:text-yellow transition-colors">Mode Debug Interactif</div>
|
|
<p class="text-[10px] text-text-muted mt-1 leading-relaxed italic">Affiche les statistiques vitales (CPU, RAM, Disque) dans la barre de navigation supérieure.</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-8 pt-4 border-t border-bg-hard flex items-center justify-end gap-3">
|
|
<span v-if="savedMsg" class="text-[10px] font-bold text-aqua">{{ savedMsg }}</span>
|
|
<button
|
|
class="btn-primary !bg-yellow !text-bg !py-2 !px-6 text-xs"
|
|
:disabled="saving"
|
|
@click="saveSettings"
|
|
>
|
|
{{ saving ? '...' : 'Appliquer' }}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section Maintenance -->
|
|
<section class="card-jardin flex flex-col h-full border-blue/20">
|
|
<div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
|
|
<span class="text-2xl">🌦️</span>
|
|
<div>
|
|
<h2 class="text-text font-bold uppercase tracking-widest text-xs">Maintenance Météo</h2>
|
|
<p class="text-[10px] text-text-muted font-bold">Synchronisation des données externes.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<p class="text-xs text-text-muted leading-relaxed mb-6">
|
|
Force le rafraîchissement des prévisions Open-Meteo et des relevés de la station locale WeeWX. Les données sont normalement mises à jour toutes les heures automatiquement.
|
|
</p>
|
|
|
|
<button
|
|
class="btn-outline w-full py-4 border-blue/20 text-blue hover:bg-blue/10 flex flex-col items-center gap-2"
|
|
:disabled="refreshingMeteo"
|
|
@click="refreshMeteo"
|
|
>
|
|
<span class="text-lg">{{ refreshingMeteo ? '🔄' : '⚡' }}</span>
|
|
<span class="text-[10px] font-black uppercase tracking-widest">{{ refreshingMeteo ? 'Rafraîchissement en cours...' : 'Forcer la mise à jour' }}</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section Sauvegarde -->
|
|
<section class="card-jardin flex flex-col h-full border-aqua/20">
|
|
<div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
|
|
<span class="text-2xl">📦</span>
|
|
<div>
|
|
<h2 class="text-text font-bold uppercase tracking-widest text-xs">Sauvegarde & Export</h2>
|
|
<p class="text-[10px] text-text-muted font-bold">Protégez vos données.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 space-y-6">
|
|
<p class="text-xs text-text-muted leading-relaxed">
|
|
Génère une archive complète (.zip) incluant votre base de données SQLite et tous les médias (photos/vidéos) uploadés.
|
|
</p>
|
|
|
|
<button
|
|
class="btn-primary !bg-aqua !text-bg w-full py-4 flex flex-col items-center gap-2 shadow-lg hover:shadow-aqua/20"
|
|
:disabled="downloadingBackup"
|
|
@click="downloadBackup"
|
|
>
|
|
<span class="text-xl">💾</span>
|
|
<span class="text-[10px] font-black uppercase tracking-widest">{{ downloadingBackup ? 'Préparation...' : 'Télécharger le Pack Complet' }}</span>
|
|
</button>
|
|
|
|
<div v-if="backupMsg" class="text-[10px] text-center font-bold text-aqua animate-bounce">{{ backupMsg }}</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section API Docs (Largeur double sur XL+) -->
|
|
<section class="card-jardin xl:col-span-2 flex flex-col border-bg-soft/50">
|
|
<div class="flex items-center gap-3 mb-6 border-b border-bg-hard pb-4">
|
|
<span class="text-2xl">🛠️</span>
|
|
<div>
|
|
<h2 class="text-text font-bold uppercase tracking-widest text-xs">Outils Développeur & API</h2>
|
|
<p class="text-[10px] text-text-muted font-bold">Documentation technique et monitoring.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<button @click="openApiDocs" class="btn-outline flex flex-col items-center gap-2 py-6 border-bg-soft hover:bg-bg-hard transition-all">
|
|
<span class="text-xl">📖</span>
|
|
<span class="text-[10px] font-bold uppercase">Swagger UI</span>
|
|
</button>
|
|
<button @click="openApiRedoc" class="btn-outline flex flex-col items-center gap-2 py-6 border-bg-soft hover:bg-bg-hard transition-all">
|
|
<span class="text-xl">📄</span>
|
|
<span class="text-[10px] font-bold uppercase">ReDoc Docs</span>
|
|
</button>
|
|
<button @click="openApiHealth" class="btn-outline flex flex-col items-center gap-2 py-6 border-bg-soft hover:bg-bg-hard transition-all">
|
|
<span class="text-xl">💓</span>
|
|
<span class="text-[10px] font-bold uppercase">Santé API</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-6 p-3 bg-bg-hard/50 rounded-xl border border-bg-soft/30 flex items-center justify-between">
|
|
<span class="text-[9px] font-bold text-text-muted uppercase tracking-widest">Base URL API détectée</span>
|
|
<span class="text-xs font-mono text-aqua">{{ apiBaseUrl }}</span>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, 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)
|
|
const savedMsg = ref('')
|
|
const refreshingMeteo = ref(false)
|
|
const downloadingBackup = ref(false)
|
|
const backupMsg = ref('')
|
|
const apiBaseUrl = detectApiBaseUrl()
|
|
|
|
// --- UI Size settings ---
|
|
const uiSizeSettings = [
|
|
{ key: 'ui_font_size', label: 'Corps de texte', min: 12, max: 24, step: 1, unit: 'px' },
|
|
{ key: 'ui_menu_font_size', label: 'Texte menu latéral', min: 11, max: 20, step: 1, unit: 'px' },
|
|
{ key: 'ui_menu_icon_size', label: 'Icônes menu', min: 14, max: 32, step: 1, unit: 'px' },
|
|
{ key: 'ui_thumb_size', label: 'Miniatures médias', min: 60, max: 300, step: 4, unit: 'px' },
|
|
{ key: 'ui_weather_icon_size', label: 'Icônes Météo', min: 32, max: 128, step: 4, unit: 'px' },
|
|
{ key: 'ui_dashboard_icon_size', label: 'Icônes Dashboard', min: 16, max: 64, step: 2, unit: 'px' },
|
|
]
|
|
|
|
const uiSizes = ref<Record<string, number>>({ ...UI_SIZE_DEFAULTS })
|
|
const savingUi = ref(false)
|
|
const uiSavedMsg = ref('')
|
|
|
|
function applyUiSizes() {
|
|
applyUiSizesToRoot(uiSizes.value)
|
|
window.dispatchEvent(new CustomEvent('ui-sizes-updated', { detail: { ...uiSizes.value } }))
|
|
}
|
|
|
|
async function saveUiSettings() {
|
|
savingUi.value = true
|
|
uiSavedMsg.value = ''
|
|
try {
|
|
const payload: Record<string, string> = {}
|
|
for (const [k, v] of Object.entries(uiSizes.value)) payload[k] = String(v)
|
|
await settingsApi.update(payload)
|
|
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_SIZE_DEFAULTS }
|
|
applyUiSizes()
|
|
}
|
|
|
|
function detectApiBaseUrl(): string {
|
|
const envBase = String((import.meta as any).env?.VITE_API_URL || '').trim()
|
|
if (envBase) {
|
|
if (envBase.startsWith('http://') || envBase.startsWith('https://')) {
|
|
return envBase.replace(/\/$/, '')
|
|
}
|
|
if (envBase.startsWith('/')) {
|
|
return window.location.origin
|
|
}
|
|
}
|
|
if (window.location.port === '8060') {
|
|
return window.location.origin
|
|
}
|
|
return `${window.location.protocol}//${window.location.hostname}:8060`
|
|
}
|
|
|
|
function openInNewTab(path: string) {
|
|
const url = `${apiBaseUrl}${path}`
|
|
window.open(url, '_blank', 'noopener,noreferrer')
|
|
}
|
|
|
|
function openApiDocs() { openInNewTab('/docs') }
|
|
function openApiRedoc() { openInNewTab('/redoc') }
|
|
function openApiHealth() { openInNewTab('/api/health') }
|
|
|
|
function toBool(value: unknown): boolean {
|
|
if (typeof value === 'boolean') return value
|
|
const s = String(value ?? '').toLowerCase().trim()
|
|
return s === '1' || s === 'true' || s === 'yes' || s === 'on'
|
|
}
|
|
|
|
function notifyDebugChanged(enabled: boolean) {
|
|
localStorage.setItem('debug_mode', enabled ? '1' : '0')
|
|
window.dispatchEvent(new CustomEvent('settings-updated', { detail: { debug_mode: enabled } }))
|
|
}
|
|
|
|
async function loadSettings() {
|
|
try {
|
|
const data = await settingsApi.get()
|
|
debugMode.value = toBool(data.debug_mode)
|
|
notifyDebugChanged(debugMode.value)
|
|
for (const s of uiSizeSettings) {
|
|
const v = data[s.key]
|
|
if (v != null) uiSizes.value[s.key] = Number(v) || UI_SIZE_DEFAULTS[s.key]
|
|
}
|
|
applyUiSizes()
|
|
} catch {
|
|
// Laisse la valeur locale
|
|
}
|
|
}
|
|
|
|
async function saveSettings() {
|
|
saving.value = true
|
|
savedMsg.value = ''
|
|
try {
|
|
await settingsApi.update({ debug_mode: debugMode.value ? '1' : '0' })
|
|
notifyDebugChanged(debugMode.value)
|
|
savedMsg.value = 'Pris en compte'
|
|
window.setTimeout(() => { savedMsg.value = '' }, 1800)
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
async function refreshMeteo() {
|
|
refreshingMeteo.value = true
|
|
try {
|
|
await meteoApi.refresh()
|
|
} finally {
|
|
refreshingMeteo.value = false
|
|
}
|
|
}
|
|
|
|
async function downloadBackup() {
|
|
downloadingBackup.value = true
|
|
backupMsg.value = ''
|
|
try {
|
|
const { blob, filename } = await settingsApi.downloadBackup()
|
|
const url = window.URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = filename
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
window.URL.revokeObjectURL(url)
|
|
backupMsg.value = 'ZIP prêt !'
|
|
} catch {
|
|
backupMsg.value = 'Erreur export.'
|
|
} finally {
|
|
downloadingBackup.value = false
|
|
window.setTimeout(() => { backupMsg.value = '' }, 2200)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
void loadSettings()
|
|
})
|
|
</script>
|