maj via codex

frontend/src/views/ReglagesView.vue

@@ -1,6 +1,106 @@
 <template>
-  <div class="p-4 max-w-2xl mx-auto">
+  <div class="p-4 max-w-3xl mx-auto">
     <h1 class="text-2xl font-bold text-green mb-4">Réglages</h1>
-    <p class="text-text-muted text-sm">Paramètres et export/import — prochaine étape.</p>
+
+    <section class="bg-bg-soft border border-bg-hard rounded-xl p-4 mb-4">
+      <h2 class="text-text font-semibold mb-2">Général</h2>
+      <p class="text-text-muted text-sm mb-3">Options globales de l'application.</p>
+
+      <label class="inline-flex items-center gap-2 text-sm text-text">
+        <input v-model="debugMode" type="checkbox" class="accent-green" />
+        Activer le mode debug (affichage CPU / RAM / disque en header)
+      </label>
+
+      <div class="mt-3 flex items-center gap-2">
+        <button
+          class="bg-green text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
+          :disabled="saving"
+          @click="saveSettings"
+        >
+          {{ saving ? 'Enregistrement...' : 'Enregistrer' }}
+        </button>
+        <span v-if="savedMsg" class="text-xs text-aqua">{{ savedMsg }}</span>
+      </div>
+    </section>
+
+    <section class="bg-bg-soft border border-bg-hard rounded-xl p-4 mb-4">
+      <h2 class="text-text font-semibold mb-2">Maintenance météo</h2>
+      <p class="text-text-muted text-sm mb-3">Déclenche un rafraîchissement immédiat des jobs météo backend.</p>
+      <button
+        class="bg-blue text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90"
+        :disabled="refreshingMeteo"
+        @click="refreshMeteo"
+      >
+        {{ refreshingMeteo ? 'Rafraîchissement...' : 'Rafraîchir maintenant' }}
+      </button>
+    </section>
+
+    <section class="bg-bg-soft border border-bg-hard rounded-xl p-4">
+      <h2 class="text-text font-semibold mb-2">Idées utiles (prochaine étape)</h2>
+      <ul class="text-text-muted text-sm space-y-1">
+        <li>• Sauvegarde/restauration JSON de la base métier</li>
+        <li>• Rotation/nettoyage des médias anciens</li>
+        <li>• Choix des unités météo (°C, mm, km/h)</li>
+        <li>• Paramètres de seuils alertes (gel, pluie, vent)</li>
+      </ul>
+    </section>
   </div>
 </template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { settingsApi } from '@/api/settings'
+import { meteoApi } from '@/api/meteo'
+
+const debugMode = ref(false)
+const saving = ref(false)
+const savedMsg = ref('')
+const refreshingMeteo = ref(false)
+
+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)
+  } catch {
+    // Laisse la valeur locale si l'API n'est pas disponible.
+  }
+}
+
+async function saveSettings() {
+  saving.value = true
+  savedMsg.value = ''
+  try {
+    await settingsApi.update({ debug_mode: debugMode.value ? '1' : '0' })
+    notifyDebugChanged(debugMode.value)
+    savedMsg.value = 'Enregistré'
+    window.setTimeout(() => { savedMsg.value = '' }, 1800)
+  } finally {
+    saving.value = false
+  }
+}
+
+async function refreshMeteo() {
+  refreshingMeteo.value = true
+  try {
+    await meteoApi.refresh()
+  } finally {
+    refreshingMeteo.value = false
+  }
+}
+
+onMounted(() => {
+  void loadSettings()
+})
+</script>