work : виджет стал более "горизонтальным"
This commit is contained in:
+8
-4
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user