feat: Home Assistant integration — live status + auto-sync print slots
Deploy via Portainer / deploy (push) Successful in 0s

This commit is contained in:
Jo
2026-07-07 11:40:52 +02:00
parent 4206a8934e
commit 5686706a4e
5 changed files with 281 additions and 6 deletions
+75
View File
@@ -92,6 +92,21 @@
</div>
</div>
</div>
<!-- Live HA Status -->
<div class="col-md-5">
<div class="card">
<div class="card-header py-3 d-flex justify-content-between align-items-center">
<span><i class="bi bi-activity me-2 text-success"></i>Imprimantes en direct</span>
<span id="haLastUpdate" class="text-muted" style="font-size:.7rem"></span>
</div>
<div class="card-body p-2" id="haPrinterCards">
<div class="text-center text-muted py-3 small">
<i class="bi bi-hourglass-split me-1"></i>Chargement…
</div>
</div>
</div>
</div>
</div>
<!-- Modal planification -->
@@ -537,5 +552,65 @@ async function deleteSlot() {
}
initTimeline();
// ── Home Assistant live status ──────────────────────────────────────────────
async function refreshHaStatus() {
try {
const r = await fetch('/api/ha/status');
const d = await r.json();
const el = document.getElementById('haPrinterCards');
const lu = document.getElementById('haLastUpdate');
lu.textContent = 'Mis à jour ' + new Date().toLocaleTimeString('fr-FR', {hour:'2-digit',minute:'2-digit'});
if (d.error && !d.printers) {
el.innerHTML = `<div class="text-muted small p-3"><i class="bi bi-info-circle me-1"></i>${d.error}</div>`;
return;
}
const printers = d.printers || {};
const keys = Object.keys(printers);
if (!keys.length) {
el.innerHTML = '<div class="text-muted small p-3"><i class="bi bi-info-circle me-1"></i>Aucune imprimante avec préfixe HA. Configurez dans Paramètres + Imprimantes.</div>';
return;
}
const STATUS_LABEL = {running:'En cours',finish:'Terminé',idle:'Idle',pause:'En pause',failed:'Erreur',offline:'Hors ligne',init:'Démarrage',unknown:'—'};
const STATUS_CLS = {running:'success',finish:'secondary',idle:'light',pause:'warning',failed:'danger',offline:'dark',init:'info',unknown:'light'};
el.innerHTML = keys.map(pid => {
const p = printers[pid];
const sc = STATUS_CLS[p.status] || 'light';
const sl = STATUS_LABEL[p.status] || p.status;
const prog = p.progress || 0;
const barColor = p.error ? '#ef4444' : p.status === 'running' ? '#22c55e' : '#94a3b8';
const layerInfo = (p.layers_total > 0)
? `<span class="text-muted" style="font-size:.7rem">Couche ${p.layer}/${p.layers_total}</span>`
: '';
const finInfo = (p.heure_fin && p.heure_fin !== 'unknown' && p.status === 'running')
? `<span class="text-muted" style="font-size:.7rem">Fin ≈ ${new Date(p.heure_fin).toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit'})}</span>`
: '';
const taskInfo = (p.task_name && p.task_name !== 'unknown')
? `<div class="text-truncate" style="font-size:.72rem;color:#6b7280;max-width:220px" title="${p.task_name}">${p.task_name}</div>`
: '';
return `<div class="p-2 mb-1 rounded" style="background:#f8f9fa;border:1px solid #e5e7eb">
<div class="d-flex justify-content-between align-items-center mb-1">
<span class="fw-semibold small">${p.printer_name}</span>
<span class="badge bg-${sc} text-${sc==='light'?'dark':'white'}">${sl}</span>
</div>
${taskInfo}
<div class="d-flex justify-content-between align-items-center mt-1">
<div class="flex-fill me-2">
<div style="height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden">
<div style="width:${prog}%;height:100%;background:${barColor};transition:width .5s"></div>
</div>
</div>
<span class="fw-bold small" style="min-width:36px;text-align:right">${prog}%</span>
</div>
<div class="d-flex gap-3 mt-1">${layerInfo}${finInfo}</div>
</div>`;
}).join('');
} catch(e) {
console.warn('HA status error:', e);
}
}
refreshHaStatus();
setInterval(refreshHaStatus, 30000);
</script>
{% endblock %}