v0.14.15
This commit is contained in:
Mateusz Gruszczyński
@@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||||
<meta name="theme-color" content="#151515" id="themeColorMeta">
|
||||
<meta name="referrer" content="no-referrer">
|
||||
<link rel="icon" href="__GREE_BASE_PATH__/favicon.svg" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="__GREE_STYLES_ASSET__">
|
||||
<script src="__GREE_THEME_INIT_ASSET__"></script>
|
||||
<title>GREE Controller · Custom chart</title>
|
||||
</head>
|
||||
<body class="public-custom-chart-page">
|
||||
<main class="public-custom-chart-shell">
|
||||
<section class="panel chart-panel history-chart-card public-custom-chart-card" aria-live="polite">
|
||||
<div class="chart-title-row">
|
||||
<div>
|
||||
<h3 id="publicChartTitle">Custom chart</h3>
|
||||
<p id="publicChartHint">Loading…</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrap public-custom-chart-wrap">
|
||||
<canvas id="publicCustomChart" width="1200" height="520" tabindex="0" aria-label="Custom chart"></canvas>
|
||||
<div class="chart-hover-line" hidden></div>
|
||||
<div class="chart-tooltip" hidden></div>
|
||||
</div>
|
||||
<div class="legend" id="publicCustomChartLegend"></div>
|
||||
<div class="public-custom-chart-error" id="publicChartError" hidden></div>
|
||||
</section>
|
||||
</main>
|
||||
<script src="__GREE_CUSTOM_CHART_ASSET__"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,236 @@
|
||||
'use strict';
|
||||
|
||||
const PUBLIC_CHART_COLORS = ['--accent', '--info', '--warning', '--purple', '--danger', '--teal', '--orange', '--blue'];
|
||||
const $ = selector => document.querySelector(selector);
|
||||
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
|
||||
|
||||
function basePathFromScript() {
|
||||
const src = document.currentScript?.src || '';
|
||||
try {
|
||||
const path = new URL(src, location.href).pathname;
|
||||
const slash = path.lastIndexOf('/');
|
||||
return path.slice(0, slash).replace(/\/$/, '');
|
||||
} catch (_) { return ''; }
|
||||
}
|
||||
|
||||
const PUBLIC_BASE = basePathFromScript();
|
||||
const withBase = path => `${PUBLIC_BASE}${path.startsWith('/') ? path : `/${path}`}`;
|
||||
|
||||
function cssColor(name, fallback) {
|
||||
const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
||||
return value || fallback;
|
||||
}
|
||||
|
||||
function localeFor(lang) {
|
||||
return lang === 'pl' ? 'pl-PL' : 'en-GB';
|
||||
}
|
||||
|
||||
function timeLabel(timestamp, hours, locale) {
|
||||
const options = Number(hours) > 48
|
||||
? { day: '2-digit', month: '2-digit', hour: '2-digit' }
|
||||
: { hour: '2-digit', minute: '2-digit' };
|
||||
return new Date(timestamp).toLocaleString(locale, options);
|
||||
}
|
||||
|
||||
function preciseTime(timestamp, locale) {
|
||||
return new Intl.DateTimeFormat(locale, {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'
|
||||
}).format(new Date(timestamp));
|
||||
}
|
||||
|
||||
function prepareCanvas(canvas, height = 520) {
|
||||
const wrap = canvas.parentElement;
|
||||
const width = Math.max(720, Math.floor(wrap?.clientWidth || canvas.getBoundingClientRect().width || 720));
|
||||
const actualHeight = Math.max(320, Math.floor(wrap?.clientHeight || height));
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = Math.floor(width * dpr);
|
||||
canvas.height = Math.floor(actualHeight * dpr);
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${actualHeight}px`;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
ctx.clearRect(0, 0, width, actualHeight);
|
||||
return { ctx, width, height: actualHeight };
|
||||
}
|
||||
|
||||
function renderLegend(series) {
|
||||
const host = $('#publicCustomChartLegend');
|
||||
host.innerHTML = series.map((item, index) => {
|
||||
const color = cssColor(PUBLIC_CHART_COLORS[index % PUBLIC_CHART_COLORS.length], '#3ecf8e');
|
||||
const dashed = item.dashed ? ' is-dashed' : '';
|
||||
return `<span class="legend-item public-chart-legend-item"><i class="legend-line${dashed}" style="--legend-color:${color}"></i><span>${escapeHtml(item.label)}</span></span>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '').replace(/[&<>'"]/g, char => ({ '&': '&', '<': '<', '>': '>', "'": ''', '"': '"' }[char]));
|
||||
}
|
||||
|
||||
function drawEmpty(canvas, message) {
|
||||
const { ctx, width, height } = prepareCanvas(canvas);
|
||||
ctx.fillStyle = cssColor('--muted', '#888');
|
||||
ctx.font = '13px system-ui';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(message, width / 2, height / 2);
|
||||
}
|
||||
|
||||
function nearestPoint(points, targetTs) {
|
||||
if (!points.length) return null;
|
||||
let lo = 0, hi = points.length - 1;
|
||||
while (lo < hi) {
|
||||
const mid = Math.floor((lo + hi) / 2);
|
||||
if (points[mid].ts < targetTs) lo = mid + 1; else hi = mid;
|
||||
}
|
||||
const after = points[lo];
|
||||
const before = lo > 0 ? points[lo - 1] : null;
|
||||
if (!before) return after;
|
||||
return Math.abs(before.ts - targetTs) <= Math.abs(after.ts - targetTs) ? before : after;
|
||||
}
|
||||
|
||||
function bindTooltip(canvas, series, geometry, locale) {
|
||||
const wrap = canvas.parentElement;
|
||||
const tooltip = wrap.querySelector('.chart-tooltip');
|
||||
const line = wrap.querySelector('.chart-hover-line');
|
||||
const { pad, width, height, firstTs, lastTs } = geometry;
|
||||
const plotWidth = width - pad.left - pad.right;
|
||||
const timestamps = [...new Set(series.flatMap(item => item.points.map(point => new Date(point.timestamp).getTime())).filter(Number.isFinite))].sort((a, b) => a - b);
|
||||
const timestampPoints = timestamps.map(ts => ({ ts }));
|
||||
const seriesPoints = series.map((item, index) => ({
|
||||
item,
|
||||
color: cssColor(PUBLIC_CHART_COLORS[index % PUBLIC_CHART_COLORS.length], '#3ecf8e'),
|
||||
points: item.points.map(point => ({ ts: new Date(point.timestamp).getTime(), value: Number(point.value) }))
|
||||
.filter(point => Number.isFinite(point.ts) && Number.isFinite(point.value))
|
||||
.sort((a, b) => a.ts - b.ts)
|
||||
}));
|
||||
|
||||
const hide = () => { tooltip.hidden = true; line.hidden = true; };
|
||||
const showAt = clientX => {
|
||||
if (!timestamps.length) return hide();
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const localX = clamp(clientX - rect.left, pad.left, width - pad.right);
|
||||
const targetTs = firstTs + ((localX - pad.left) / Math.max(1, plotWidth)) * (lastTs - firstTs);
|
||||
const snapped = nearestPoint(timestampPoints, targetTs)?.ts;
|
||||
if (!Number.isFinite(snapped)) return hide();
|
||||
const values = seriesPoints.map(entry => ({ ...entry, point: nearestPoint(entry.points, snapped) })).filter(entry => entry.point);
|
||||
if (!values.length) return hide();
|
||||
|
||||
const px = pad.left + (snapped - firstTs) / Math.max(1, lastTs - firstTs) * plotWidth;
|
||||
tooltip.innerHTML = `<strong class="chart-tooltip-time">${escapeHtml(preciseTime(snapped, locale))}</strong><div class="chart-tooltip-values">${values.map(({ item, point, color }) => `<div class="chart-tooltip-row"><span class="chart-tooltip-label"><i style="--tooltip-color:${color}"></i><span>${escapeHtml(item.label)}</span></span><span class="chart-tooltip-value">${Number(point.value).toLocaleString(locale, { minimumFractionDigits: 1, maximumFractionDigits: 2 })} °C</span></div>`).join('')}</div>`;
|
||||
tooltip.hidden = false;
|
||||
line.hidden = false;
|
||||
line.style.left = `${px}px`;
|
||||
line.style.top = `${pad.top}px`;
|
||||
line.style.height = `${Math.max(0, height - pad.top - pad.bottom)}px`;
|
||||
const minLeft = wrap.scrollLeft + 8;
|
||||
const maxLeft = wrap.scrollLeft + wrap.clientWidth - tooltip.offsetWidth - 8;
|
||||
let tooltipLeft = px + 12;
|
||||
if (tooltipLeft + tooltip.offsetWidth > wrap.scrollLeft + wrap.clientWidth - 8) tooltipLeft = px - tooltip.offsetWidth - 12;
|
||||
tooltip.style.left = `${Math.max(minLeft, Math.min(tooltipLeft, Math.max(minLeft, maxLeft)))}px`;
|
||||
tooltip.style.top = `${pad.top + 8}px`;
|
||||
};
|
||||
canvas.onpointermove = event => { if (event.pointerType !== 'touch') showAt(event.clientX); };
|
||||
canvas.onpointerleave = event => { if (event.pointerType !== 'touch') hide(); };
|
||||
}
|
||||
|
||||
function drawChart(canvas, payload, locale) {
|
||||
const series = (payload.series || []).map((item, index) => ({
|
||||
...item,
|
||||
color: cssColor(PUBLIC_CHART_COLORS[index % PUBLIC_CHART_COLORS.length], '#3ecf8e'),
|
||||
points: Array.isArray(item.points) ? item.points : []
|
||||
}));
|
||||
renderLegend(series);
|
||||
const allPoints = series.flatMap(item => item.points.map(point => ({ ...point, value: Number(point.value) })))
|
||||
.filter(point => Number.isFinite(point.value) && Number.isFinite(new Date(point.timestamp).getTime()));
|
||||
if (!allPoints.length) return drawEmpty(canvas, payload.no_data_label || 'No data');
|
||||
|
||||
const { ctx, width, height } = prepareCanvas(canvas);
|
||||
const text = cssColor('--muted', '#888');
|
||||
const grid = cssColor('--grid', '#333');
|
||||
const compact = width < 520;
|
||||
const pad = compact ? { left: 43, right: 12, top: 16, bottom: 34 } : { left: 54, right: 20, top: 20, bottom: 42 };
|
||||
const values = allPoints.map(point => point.value);
|
||||
let min = Math.floor(Math.min(...values) - 1);
|
||||
let max = Math.ceil(Math.max(...values) + 1);
|
||||
if (max - min < 2) { min -= 1; max += 1; }
|
||||
const firstTs = Math.min(...allPoints.map(point => new Date(point.timestamp).getTime()));
|
||||
const lastTs = Math.max(...allPoints.map(point => new Date(point.timestamp).getTime()));
|
||||
const span = Math.max(1, lastTs - firstTs);
|
||||
const x = ts => pad.left + (ts - firstTs) / span * (width - pad.left - pad.right);
|
||||
const y = value => pad.top + (max - value) / (max - min) * (height - pad.top - pad.bottom);
|
||||
|
||||
ctx.font = '10px system-ui';
|
||||
ctx.fillStyle = text;
|
||||
ctx.strokeStyle = grid;
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 0; i <= 5; i += 1) {
|
||||
const value = min + (max - min) * i / 5;
|
||||
const py = y(value);
|
||||
ctx.beginPath(); ctx.moveTo(pad.left, py); ctx.lineTo(width - pad.right, py); ctx.stroke();
|
||||
ctx.textAlign = 'right'; ctx.fillText(`${value.toFixed(1)}°`, pad.left - 8, py + 3);
|
||||
}
|
||||
const ticks = width < 420 ? 2 : width < 620 ? 3 : 5;
|
||||
for (let i = 0; i <= ticks; i += 1) {
|
||||
const ts = firstTs + (span * i / ticks);
|
||||
const px = x(ts);
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(timeLabel(ts, payload.hours, locale), px, height - 14);
|
||||
}
|
||||
series.forEach(item => {
|
||||
const points = item.points.map(point => ({ ts: new Date(point.timestamp).getTime(), value: Number(point.value) }))
|
||||
.filter(point => Number.isFinite(point.ts) && Number.isFinite(point.value))
|
||||
.sort((a, b) => a.ts - b.ts);
|
||||
if (!points.length) return;
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = item.color;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.setLineDash(item.dashed ? [6, 4] : []);
|
||||
points.forEach((point, index) => {
|
||||
const px = x(point.ts), py = y(point.value);
|
||||
if (index === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
|
||||
});
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
});
|
||||
bindTooltip(canvas, series, { pad, width, height, firstTs, lastTs }, locale);
|
||||
}
|
||||
|
||||
async function loadPublicChart() {
|
||||
const token = decodeURIComponent(location.pathname.split('/').filter(Boolean).pop() || '');
|
||||
const title = $('#publicChartTitle');
|
||||
const hint = $('#publicChartHint');
|
||||
const error = $('#publicChartError');
|
||||
const canvas = $('#publicCustomChart');
|
||||
|
||||
if (!token.startsWith('chart_')) {
|
||||
title.textContent = 'Custom chart';
|
||||
hint.textContent = '';
|
||||
error.hidden = false;
|
||||
error.textContent = 'Invalid chart link.';
|
||||
drawEmpty(canvas, error.textContent);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch(withBase(`/api/public/charts/custom/${encodeURIComponent(token)}`), { headers: { Accept: 'application/json' }, cache: 'no-store' });
|
||||
if (!response.ok) {
|
||||
let message = `${response.status}`;
|
||||
try { message = (await response.json()).error || message; } catch (_) { }
|
||||
throw new Error(message);
|
||||
}
|
||||
const payload = await response.json();
|
||||
const lang = payload.lang === 'pl' ? 'pl' : 'en';
|
||||
const locale = localeFor(lang);
|
||||
document.documentElement.lang = payload.lang || lang;
|
||||
title.textContent = payload.title || (lang === 'pl' ? 'Wykres niestandardowy' : 'Custom chart');
|
||||
hint.textContent = payload.hint || '';
|
||||
canvas.setAttribute('aria-label', title.textContent);
|
||||
drawChart(canvas, payload, locale);
|
||||
window.addEventListener('resize', () => drawChart(canvas, payload, locale));
|
||||
}
|
||||
|
||||
loadPublicChart().catch(error => {
|
||||
const host = $('#publicChartError');
|
||||
host.hidden = false;
|
||||
host.textContent = `Unable to load chart: ${error.message}`;
|
||||
$('#publicChartHint').textContent = '';
|
||||
drawEmpty($('#publicCustomChart'), host.textContent);
|
||||
});
|
||||
+28
-3
@@ -311,6 +311,17 @@ function drawCurrentChartIfVisible() {
|
||||
if (app.currentView === 'history') renderHistoryPage();
|
||||
}
|
||||
|
||||
function publicCustomChartUrl(path) {
|
||||
if (!APP_BASE.startsWith('/api/hassio_ingress/')) return `${location.origin}${APP_BASE}${path}`;
|
||||
const bind = String(app.system?.bind || '');
|
||||
const port = bind.match(/:(\d+)$/)?.[1] || '8787';
|
||||
const rawHost = location.hostname || 'localhost';
|
||||
const host = rawHost.includes(':') && !rawHost.startsWith('[') ? `[${rawHost}]` : rawHost;
|
||||
const configuredBase = String(app.system?.base_path || '').trim();
|
||||
const directBase = configuredBase === '/' ? '' : configuredBase.replace(/\/$/, '');
|
||||
return `http://${host}:${port}${directBase}${path}`;
|
||||
}
|
||||
|
||||
async function handleHistoryAction(button) {
|
||||
const action = button.dataset.historyAction;
|
||||
if (action === 'add-series') {
|
||||
@@ -338,9 +349,23 @@ async function handleHistoryAction(button) {
|
||||
}
|
||||
if (action === 'copy-chart-link') {
|
||||
if (!app.customChartSeries.length) return toast(tr('history.noCustomSeries'), true);
|
||||
const path = currentHistoryPath(); updateBrowserUrl(path, true); const link = `${location.origin}${APP_BASE}${path}`;
|
||||
try { await navigator.clipboard.writeText(link); } catch (_) { const area = document.createElement('textarea'); area.value = link; document.body.appendChild(area); area.select(); document.execCommand('copy'); area.remove(); }
|
||||
toast(tr('history.linkCopied')); return;
|
||||
try {
|
||||
const share = await api('/api/charts/custom/share', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
title: $('#customChartName')?.value.trim() || tr('history.customChart'),
|
||||
series: [...app.customChartSeries],
|
||||
hours: Number($('#historyHours')?.value || 24),
|
||||
lang: app.language === 'pl' ? 'pl' : 'en',
|
||||
},
|
||||
});
|
||||
const link = publicCustomChartUrl(share.path);
|
||||
try { await navigator.clipboard.writeText(link); } catch (_) { const area = document.createElement('textarea'); area.value = link; document.body.appendChild(area); area.select(); document.execCommand('copy'); area.remove(); }
|
||||
toast(tr('history.linkCopied'));
|
||||
} catch (error) {
|
||||
toast(error.message, true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+318
-67
@@ -1664,7 +1664,7 @@ button.outside-pill:focus-visible {
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.outdoor-history-links > div {
|
||||
.outdoor-history-links>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
@@ -2937,7 +2937,9 @@ button.outside-pill:focus-visible {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.history-network-controls label { min-width: 0; }
|
||||
.history-network-controls label {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.history-jitter-toggle {
|
||||
min-height: 45px;
|
||||
@@ -9038,13 +9040,25 @@ body.flow-editor-open {
|
||||
}
|
||||
|
||||
@keyframes cloud-command-pulse {
|
||||
from { opacity: .72; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cloud-command-dot {
|
||||
from { transform: scale(.65); opacity: .45; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
from {
|
||||
transform: scale(.65);
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9376,7 +9390,7 @@ body.flow-editor-open {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
/* Notification delivery audit in Events. */
|
||||
|
||||
.log-row .kind .log-notification-badge {
|
||||
margin-left: .45rem;
|
||||
padding: 3px 7px;
|
||||
@@ -9389,7 +9403,6 @@ body.flow-editor-open {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Keep the Flow footer compact before the full mobile layout kicks in. */
|
||||
@media (min-width:761px) and (max-width:1200px) {
|
||||
.flow-natural-preview {
|
||||
display: block;
|
||||
@@ -9459,14 +9472,13 @@ body.flow-editor-open {
|
||||
}
|
||||
}
|
||||
|
||||
/* GREE Cloud runtime summary */
|
||||
.cloud-runtime-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cloud-runtime-summary > div {
|
||||
.cloud-runtime-summary>div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
@@ -9528,7 +9540,6 @@ body.flow-editor-open {
|
||||
}
|
||||
}
|
||||
|
||||
/* Shared alerts and split/multisplit installation configuration */
|
||||
.inline-alert {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
@@ -9559,18 +9570,30 @@ body.flow-editor-open {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.inline-alert.error strong { color: var(--danger); }
|
||||
.inline-alert.error strong {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.inline-alert.success {
|
||||
border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
|
||||
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
|
||||
}
|
||||
|
||||
.inline-alert.info {
|
||||
border-color: color-mix(in srgb, var(--info) 38%, var(--line));
|
||||
background: color-mix(in srgb, var(--info) 9%, var(--surface));
|
||||
}
|
||||
.inline-alert.wide { grid-column: 1 / -1; }
|
||||
|
||||
.device-installation-summary { display: grid; gap: 8px; margin-bottom: 12px; }
|
||||
.inline-alert.wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.device-installation-summary {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.installation-summary-card,
|
||||
.installation-list-row {
|
||||
display: grid;
|
||||
@@ -9582,36 +9605,106 @@ body.flow-editor-open {
|
||||
border-radius: 12px;
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
.installation-summary-card > div,
|
||||
.installation-list-row > button:first-child { display: grid; gap: 3px; }
|
||||
|
||||
.installation-summary-card>div,
|
||||
.installation-list-row>button:first-child {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.installation-summary-card strong,
|
||||
.installation-list-row strong { color: var(--text); }
|
||||
.installation-list-row strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.installation-summary-card small,
|
||||
.installation-list-row small { color: var(--muted); }
|
||||
.installation-list { display: grid; gap: 8px; }
|
||||
.installation-list-row > button:first-child { border: 0; background: transparent; padding: 0; text-align: left; }
|
||||
.installation-list-row > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
|
||||
.installation-form { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
|
||||
.installation-device-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
|
||||
.installation-device-choices .check { margin: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
|
||||
.installation-device-choices .check.disabled { opacity: .55; }
|
||||
.installation-list-row small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.installation-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.installation-list-row>button:first-child {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.installation-list-row>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.installation-form {
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 14px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.installation-device-choices {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.installation-device-choices .check {
|
||||
margin: 0;
|
||||
padding: 8px 9px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.installation-device-choices .check.disabled {
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
.installation-energy-metric b {
|
||||
color: var(--text);
|
||||
font-size: 18px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.history-context-controls.energy-context-controls {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(132px, .8fr));
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
}
|
||||
.history-energy-targets { display: grid; gap: 7px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 650; }
|
||||
|
||||
.history-energy-targets {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.history-energy-targets small,
|
||||
.history-range-control small { display: block; color: var(--muted); font-size: 10px; font-weight: 550; line-height: 1.35; }
|
||||
.history-energy-picker { position: relative; min-width: 0; }
|
||||
.history-energy-picker > summary {
|
||||
.history-range-control small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
font-weight: 550;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.history-energy-picker {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.history-energy-picker>summary {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
@@ -9625,9 +9718,18 @@ body.flow-editor-open {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
.history-energy-picker > summary::-webkit-details-marker { display: none; }
|
||||
.history-energy-picker > summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.history-energy-picker > summary b {
|
||||
|
||||
.history-energy-picker>summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.history-energy-picker>summary span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.history-energy-picker>summary b {
|
||||
min-width: 34px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 999px;
|
||||
@@ -9636,7 +9738,13 @@ body.flow-editor-open {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.history-energy-picker[open] > summary { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent); outline-offset: 1px; }
|
||||
|
||||
.history-energy-picker[open]>summary {
|
||||
border-color: var(--accent);
|
||||
outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.history-energy-options {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
@@ -9651,6 +9759,7 @@ body.flow-editor-open {
|
||||
background: var(--surface);
|
||||
box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
|
||||
}
|
||||
|
||||
.history-energy-option {
|
||||
display: grid;
|
||||
grid-template-columns: 20px minmax(0, 1fr);
|
||||
@@ -9664,28 +9773,67 @@ body.flow-editor-open {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.history-energy-option:hover { background: var(--surface-muted); }
|
||||
.history-energy-option input { width: 17px; min-height: 17px; margin: 0; padding: 0; accent-color: var(--accent); }
|
||||
.history-energy-option span { overflow-wrap: anywhere; }
|
||||
.history-range-control.energy-period-control { min-width: 0; }
|
||||
|
||||
.history-energy-option:hover {
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.history-energy-option input {
|
||||
width: 17px;
|
||||
min-height: 17px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.history-energy-option span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.history-range-control.energy-period-control {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
|
||||
.installation-summary-card,
|
||||
.installation-list-row { grid-template-columns: 1fr; }
|
||||
.installation-list-row > div { justify-content: flex-start; }
|
||||
.installation-device-choices { grid-template-columns: 1fr; }
|
||||
.history-context-controls.energy-context-controls { grid-template-columns: 1fr; }
|
||||
.history-toolbar-panel .chart-toolbar.energy-toolbar .history-refresh-button { margin-top: 0; }
|
||||
.history-energy-options { width: min(420px, calc(100vw - 40px)); max-height: 46vh; }
|
||||
.installation-list-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.installation-list-row>div {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.installation-device-choices {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.history-context-controls.energy-context-controls {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.history-toolbar-panel .chart-toolbar.energy-toolbar .history-refresh-button {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.history-energy-options {
|
||||
width: min(420px, calc(100vw - 40px));
|
||||
max-height: 46vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.history-network-controls { grid-template-columns: 1fr; }
|
||||
.history-jitter-toggle { width: 100%; }
|
||||
.history-network-controls {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.history-jitter-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Unified custom selects -------------------------------------------------- */
|
||||
.select-native-proxy {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
@@ -9874,8 +10022,8 @@ body.flow-editor-open {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.has-error > .custom-select .custom-select-trigger,
|
||||
select.select-native-proxy[aria-invalid="true"] + .custom-select .custom-select-trigger {
|
||||
.has-error>.custom-select .custom-select-trigger,
|
||||
select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-trigger {
|
||||
border-color: color-mix(in srgb, var(--danger) 68%, var(--line));
|
||||
outline: 2px solid color-mix(in srgb, var(--danger) 13%, transparent);
|
||||
}
|
||||
@@ -9886,13 +10034,26 @@ select.select-native-proxy[aria-invalid="true"] + .custom-select .custom-select-
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px), (orientation: landscape) and (max-height: 700px) {
|
||||
.flow-fit-button-icon { display: inline-grid; place-items: center; }
|
||||
.flow-fit-button-label { display: none; }
|
||||
@media (max-width: 900px),
|
||||
(orientation: landscape) and (max-height: 700px) {
|
||||
.flow-fit-button-icon {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.flow-fit-button-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-height: 700px) and (min-width: 500px) {
|
||||
.flow-fit-button-icon { display: none; }
|
||||
.flow-fit-button-label { display: inline; }
|
||||
.flow-fit-button-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flow-fit-button-label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.ha-supervisor-status {
|
||||
@@ -9905,11 +10066,27 @@ select.select-native-proxy[aria-invalid="true"] + .custom-select .custom-select-
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.ha-supervisor-status strong { font-size: .92rem; }
|
||||
.ha-supervisor-status span { color: var(--muted); font-size: .82rem; line-height: 1.45; }
|
||||
.ha-supervisor-status.success { border-left-color: var(--teal); }
|
||||
.ha-supervisor-status.warning { border-left-color: var(--accent); }
|
||||
.ha-supervisor-status.error { border-left-color: var(--danger); }
|
||||
.ha-supervisor-status strong {
|
||||
font-size: .92rem;
|
||||
}
|
||||
|
||||
.ha-supervisor-status span {
|
||||
color: var(--muted);
|
||||
font-size: .82rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.ha-supervisor-status.success {
|
||||
border-left-color: var(--teal);
|
||||
}
|
||||
|
||||
.ha-supervisor-status.warning {
|
||||
border-left-color: var(--accent);
|
||||
}
|
||||
|
||||
.ha-supervisor-status.error {
|
||||
border-left-color: var(--danger);
|
||||
}
|
||||
|
||||
.ha-entity-picker {
|
||||
display: grid;
|
||||
@@ -9917,8 +10094,13 @@ select.select-native-proxy[aria-invalid="true"] + .custom-select .custom-select-
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ha-entity-picker > label { margin: 0; }
|
||||
.ha-entity-picker > .field-note { margin: 0; }
|
||||
.ha-entity-picker>label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ha-entity-picker>.field-note {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ha-entity-results {
|
||||
display: grid;
|
||||
@@ -9951,7 +10133,7 @@ select.select-native-proxy[aria-invalid="true"] + .custom-select .custom-select-
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.ha-entity-option > span {
|
||||
.ha-entity-option>span {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
@@ -9971,10 +10153,79 @@ select.select-native-proxy[aria-invalid="true"] + .custom-select .custom-select-
|
||||
font-size: .76rem;
|
||||
}
|
||||
|
||||
.ha-entity-option small { flex: 0 0 auto; }
|
||||
.ha-entity-empty { padding: 9px 10px; }
|
||||
.ha-entity-option small {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Shared Flow HA entity picker: keep search and selected entity visually distinct. */
|
||||
.ha-entity-search-field input[type="search"] { width: 100%; }
|
||||
.ha-entity-selected-field { margin-top: 2px; }
|
||||
.ha-entity-selected-field input { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
|
||||
.ha-entity-empty {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.ha-entity-search-field input[type="search"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ha-entity-selected-field {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.ha-entity-selected-field input {
|
||||
font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
|
||||
}
|
||||
|
||||
.public-custom-chart-page {
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.public-custom-chart-shell {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.public-custom-chart-card {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 32px);
|
||||
margin: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.public-custom-chart-wrap {
|
||||
flex: 1 1 auto;
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
#publicCustomChart {
|
||||
width: 100%;
|
||||
min-width: 720px;
|
||||
height: 100%;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.public-chart-legend-item {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.public-chart-legend-item:hover {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.public-custom-chart-error {
|
||||
margin-top: 12px;
|
||||
color: var(--danger);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.public-custom-chart-shell {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.public-custom-chart-card {
|
||||
min-height: calc(100vh - 16px);
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user