work : виджет стал более "горизонтальным"

This commit is contained in:
Fedorov Dmitriy
2026-09-20 11:28:48 +03:00
parent 33cdb205b3
commit fdb798a430
9 changed files with 379 additions and 47 deletions
+8 -4
View File
@@ -1,4 +1,4 @@
import { api, airQuality, configureTheme, isDemo, modeInfo, numberOrDash, setRangeProgress, showToast } from "./api.js";
import { api, airMeterPalette, airQuality, configureTheme, isDemo, modeInfo, numberOrDash, setRangeProgress, showToast } from "./api.js";
const $ = selector => document.querySelector(selector);
configureTheme($("#theme-button"));
@@ -27,7 +27,6 @@ if (isDemo) $("#demo-note").hidden = false;
function text(selector, value) { $(selector).textContent = value; }
function setPill(selector, label, tone) { const element = $(selector); element.textContent = label; element.className = `pill ${tone}`; }
function toneColor(tone) { return `var(--${tone === "bad" ? "red" : tone === "warn" ? "orange" : tone === "good" ? "green" : tone === "info" ? "blue" : "muted"})`; }
function toggle(selector, active, label = "") {
const button = $(selector);
@@ -63,11 +62,16 @@ function actionLabel(value) {
function renderAir(sensor, tion) {
const quality = airQuality(sensor.co2);
const airTone = ["good", "warn", "bad"].includes(quality.tone) ? quality.tone : "muted";
const airPalette = airMeterPalette(sensor.co2);
const airCard = $(".co2-card");
text("#co2", numberOrDash(sensor.co2));
text("#air-label", quality.label);
text("#air-advice", quality.tone === "good" ? "Проветривание работает нормально" : quality.tone === "warn" ? "Автоматика при необходимости повысит скорость" : quality.tone === "bad" ? "Рекомендуется усилить вентиляцию" : "Ожидаем показания датчика");
$("#air-label").style.color = toneColor(quality.tone);
$("#air-label").style.background = `var(--${quality.tone === "bad" ? "red" : quality.tone === "warn" ? "orange" : quality.tone === "good" ? "green" : "glass"}-soft)`;
$("#air-label").className = `quality-chip ${airTone}`;
airCard.dataset.airTone = airTone;
airCard.style.setProperty("--air-color", airPalette.color);
airCard.style.setProperty("--air-glow", airPalette.glow);
$("#co2-progress").style.width = `${Math.max(0, Math.min(100, quality.pct))}%`;
setPill("#sensor-status", sensor.online ? "Online" : "Offline", sensor.online ? "good" : "bad");
text("#room-temp", numberOrDash(sensor.temperature ?? tion.in_temp, 1));