diff --git a/data/app.js b/data/app.js index 121baec..9c6e587 100644 --- a/data/app.js +++ b/data/app.js @@ -18,6 +18,34 @@ function connectWS() { powerBar.value = pct; powerBarValue.textContent = pct + '%'; } + + // Mettre à jour l'état des boutons selon le mode (manuel/auto) + if (typeof data.auto !== 'undefined' || typeof data.manual !== 'undefined') { + try { + updateButton(btnPreheat, !!data.manual); + updateButton(btnProfil, !!data.auto); + } catch (e) { + // ignore si les boutons ne sont pas encore disponibles + } + } + + // Si mode automatique, appliquer la classe 'active' sur la row correspondante + if (typeof data.step !== 'undefined') { + const mapping = {0: 'row-preheat', 1: 'row-soak', 2: 'row-reflow'}; + // Retirer la classe active de toutes + Object.values(mapping).forEach(id => { + const el = document.getElementById(id); + if (el) el.classList.remove('active'); + }); + // Si auto activé, ajouter la classe sur la step active + if (data.auto) { + const target = mapping[data.step]; + if (target) { + const el = document.getElementById(target); + if (el) el.classList.add('active'); + } + } + } } catch { if (tempDiv) tempDiv.textContent = e.data; } @@ -26,6 +54,47 @@ function connectWS() { connectWS(); +// Récupérer l'état initial depuis le serveur (après reload de la page) +function refreshState() { + fetch('/state').then(r => { + if (!r.ok) throw new Error('no state'); + return r.json(); + }).then(data => { + const btnPreheatEl = document.getElementById('validateChauffeManuelle'); + const btnProfilEl = document.getElementById('validateChauffeAuto'); + if (btnPreheatEl) updateButton(btnPreheatEl, !!data.manual); + if (btnProfilEl) updateButton(btnProfilEl, !!data.auto); + const powerBar = document.getElementById('power-bar'); + const powerBarValue = document.getElementById('power-bar-value'); + if (powerBar && typeof data.power !== 'undefined') { + let pct = Math.max(0, Math.min(100, Math.round(data.power))); + powerBar.value = pct; + if (powerBarValue) powerBarValue.textContent = pct + '%'; + } + // Ajuster la jauge de préchauffage sur la valeur de setpoint si présente + const gauge = document.getElementById('preheat-gauge'); + const gaugeValue = document.getElementById('preheat-gauge-value'); + if (gauge && gaugeValue && typeof data.setpoint !== 'undefined') { + gauge.value = Math.round(data.setpoint); + gaugeValue.textContent = gauge.value + '°C'; + } + + // Gérer la classe 'active' sur les lignes (si mode auto) + const mapping = {0: 'row-preheat', 1: 'row-soak', 2: 'row-reflow'}; + Object.values(mapping).forEach(id => { + const el = document.getElementById(id); + if (el) el.classList.remove('active'); + }); + if (data.auto && typeof data.step !== 'undefined') { + const target = mapping[data.step]; + if (target) { + const el = document.getElementById(target); + if (el) el.classList.add('active'); + } + } + }).catch(err => console.log('refreshState failed', err)); +} + // Fonction utilitaire pour modifier l'aspect d'un bouton function updateButton(btn, isActive) { if (isActive) { @@ -37,9 +106,8 @@ function updateButton(btn, isActive) { } } -// Initialisation : aucun mode actif -updateButton(btnPreheat, false); -updateButton(btnProfil, false); +// L'état initial est chargé depuis le serveur + btnPreheat.onclick = function() { if (btnPreheat.className === 'stop') { @@ -124,4 +192,6 @@ document.addEventListener('DOMContentLoaded', () => { } }; } + // Après que le DOM est prêt, récupérer et appliquer l'état initial + refreshState(); }); diff --git a/data/index.html b/data/index.html index c61c680..55b43ca 100644 --- a/data/index.html +++ b/data/index.html @@ -26,17 +26,17 @@