452 lines
31 KiB
JavaScript
452 lines
31 KiB
JavaScript
function renderAll() {
|
|
renderSummary();
|
|
renderHouseClimate();
|
|
renderGroups();
|
|
renderControlPlan();
|
|
renderSimulationPage();
|
|
renderDevices();
|
|
renderZones();
|
|
renderSchedules();
|
|
renderAutomations();
|
|
renderFlows();
|
|
renderAccessTokens();
|
|
fillSelects();
|
|
renderSettings();
|
|
renderNightSettings();
|
|
renderHomeAssistantSettings();
|
|
renderSimulationModeBanner();
|
|
renderDebugOverlay();
|
|
}
|
|
|
|
function renderSummary() {
|
|
const temperatures = app.devices.map(d => d.current_temperature).filter(Number.isFinite);
|
|
const average = temperatures.length ? temperatures.reduce((a, b) => a + b, 0) / temperatures.length : null;
|
|
const online = app.devices.filter(d => d.online).length;
|
|
const active = app.devices.filter(d => d.power).length;
|
|
const demand = app.zones.filter(z => z.enabled && z.demand).length;
|
|
const toolbarStatus = $('#toolbarRuntimeStatus');
|
|
if (toolbarStatus) toolbarStatus.textContent = tr('dashboard.toolbarWorking', { active, total: app.devices.length });
|
|
$('#heroTemperature').innerHTML = `${average === null ? '--' : average.toFixed(1)}<small>°C</small>`;
|
|
const activeSuffix = active ? tr('dashboard.summaryActive', { count: active }) : '';
|
|
$('#summaryText').textContent = app.devices.length
|
|
? tr('dashboard.summary', { online, total: app.devices.length, active: activeSuffix })
|
|
: tr('dashboard.empty');
|
|
$('#metrics').innerHTML = [
|
|
[tr('dashboard.metricOnline'), `${online}/${app.devices.length}`],
|
|
[tr('dashboard.metricActive'), active],
|
|
[tr('dashboard.metricDemand'), demand],
|
|
].map(([label, value]) => `<div class="metric"><span>${esc(label)}</span><strong>${esc(value)}</strong></div>`).join('');
|
|
renderSystemInfo();
|
|
}
|
|
|
|
function renderHouseClimate() {
|
|
const node = $('#houseClimate'); if (!node || !app.settings) return;
|
|
const mode = app.settings.house_mode || 'cool';
|
|
const zonePresets = (app.zones || []).map(zone => zone.manual_preset || 'auto');
|
|
const preset = zonePresets.length && zonePresets.every(value => value === zonePresets[0]) ? zonePresets[0] : null;
|
|
const outdoor = app.outdoorTemperature == null ? tr('common.unavailable') : fmtTemp(app.outdoorTemperature);
|
|
const powerOn = $('#housePowerOn'), powerOff = $('#housePowerOff');
|
|
|
|
if (powerOn) { powerOn.classList.remove('active'); powerOn.removeAttribute('aria-pressed'); }
|
|
if (powerOff) { powerOff.classList.remove('active'); powerOff.removeAttribute('aria-pressed'); }
|
|
node.innerHTML = `<div class="house-climate-head"><div><span class="eyebrow">${esc(tr('house.seasonMode'))}</span><h3>${esc(tr('house.smartThermostat'))}</h3><p>${esc(tr('house.setpointStrategy'))}</p></div><button type="button" class="outside-pill" data-action="open-outdoor-history" title="${esc(tr('house.outdoorHistoryOpen'))}" aria-label="${esc(tr('house.outdoorHistoryOpen'))}"><small>${esc(tr('house.outdoor'))}</small><strong>${esc(outdoor)}</strong></button></div>
|
|
<div class="house-mode-row">
|
|
<button class="${mode === 'cool' ? 'active' : ''}" data-action="house-mode" data-value="cool" aria-pressed="${mode === 'cool'}">${esc(tr('mode.cool'))}</button>
|
|
<button class="${mode === 'heat' ? 'active' : ''}" data-action="house-mode" data-value="heat" aria-pressed="${mode === 'heat'}">${esc(tr('mode.heat'))}</button>
|
|
<button class="${mode === 'off' ? 'active' : ''}" data-action="house-mode" data-value="off" aria-pressed="${mode === 'off'}">${esc(tr('house.noControl'))}</button>
|
|
</div>
|
|
<div class="preset-row house-preset-row">${['auto', 'comfort', 'sleep', 'away'].map(p => `<button class="${preset === p ? 'active' : ''}" data-action="house-preset" data-value="${p}" aria-pressed="${preset === p}">${esc(p === 'sleep' ? tr('house.sleepAll') : p === 'comfort' ? tr('house.comfortAll') : p === 'away' ? tr('house.awayAll') : tr('house.autoAll'))}</button>`).join('')}</div>`;
|
|
}
|
|
|
|
function planEventMarkup(event) {
|
|
const when = event?.at ? new Date(event.at).toLocaleString(locale(), { weekday: 'short', hour: '2-digit', minute: '2-digit' }) : '—';
|
|
const target = event?.target_temperature == null ? '' : ` · ${fmtTemp(event.target_temperature)}`;
|
|
return `<li><time>${esc(when)}</time><span>${esc(event?.label || event?.kind || tr('plan.event'))}${esc(target)}</span></li>`;
|
|
}
|
|
|
|
function automationTriggerLabel(item) {
|
|
if (item.trigger_kind === 'time') return tr('automations.triggerAt', { time: item.at_time || '—' });
|
|
if (item.trigger_kind === 'flow') return tr('flow.generated');
|
|
const key = item.trigger_kind === 'temperature_above' ? 'automations.triggerAbove' : 'automations.triggerBelow';
|
|
return tr(key, { temperature: fmtTemp(item.threshold) });
|
|
}
|
|
|
|
function planZoneEffectiveEnabled(zone) {
|
|
if (!zone) return undefined;
|
|
return zone.effective_enabled ?? zone.enabled ?? false;
|
|
}
|
|
|
|
function renderControlPlan() {
|
|
const host = $('#controlPlan'); if (!host) return;
|
|
const section = $('#controlPlanSection');
|
|
const plan = app.controlPlan;
|
|
if (!plan) {
|
|
if (section) section.hidden = false;
|
|
host.innerHTML = `<div class="panel plan-loading">${esc(tr('plan.loading'))}</div>`;
|
|
return;
|
|
}
|
|
|
|
const allZones = plan.zones || [];
|
|
const houseEvents = (plan.next_events || []).slice(0, 3);
|
|
const house = houseEvents.length ? `<article class="panel plan-card plan-house"><div class="plan-card-head"><div><span class="eyebrow">${esc(tr('plan.house'))}</span><h3>${esc(houseModeLabel(plan.house_mode || 'off'))}</h3></div><span class="badge active">${esc((plan.control_strategy || 'setpoint') === 'setpoint' ? tr('plan.strategySetpoint') : (plan.control_strategy || 'setpoint'))}</span></div><p>${esc(tr('plan.houseSummary', { zones: allZones.filter(planZoneEffectiveEnabled).length, demand: allZones.filter(zone => planZoneEffectiveEnabled(zone) && zone.demand).length }))}</p><ul class="plan-events">${houseEvents.map(planEventMarkup).join('')}</ul></article>` : '';
|
|
|
|
const groupCards = (app.groups || []).map(group => {
|
|
const memberIds = new Set(group.zone_ids || []);
|
|
const members = allZones.filter(zone => memberIds.has(zone.zone_id));
|
|
const state = groupState(group);
|
|
const powerEnabled = group.power_enabled !== false;
|
|
const demand = members.filter(zone => planZoneEffectiveEnabled(zone) && zone.demand).length;
|
|
const mode = state.mode === 'house' ? tr('groups.followHouse') : state.mode === 'mixed' ? tr('groups.mixed') : modeLabel(state.mode);
|
|
const preset = state.preset === 'mixed' ? tr('groups.mixed') : zonePresetLabel(state.preset);
|
|
const events = members.flatMap(zone => (zone.next_events || []).map(event => ({ ...event, label: `${zone.zone_name}: ${event.label}` })))
|
|
.sort((a, b) => new Date(a.at) - new Date(b.at)).slice(0, 2);
|
|
if (!events.length) return '';
|
|
return `<article class="panel plan-card plan-group ${powerEnabled ? '' : 'disabled'}"><div class="plan-card-head"><div><span class="eyebrow">${esc(tr('groups.group'))}</span><h3>${esc(group.name)}</h3></div><span class="badge ${powerEnabled ? 'active' : ''}">${esc(powerEnabled ? tr('common.on') : tr('common.off'))}</span></div><div class="plan-group-state"><strong>${esc(mode)}</strong><span>·</span><strong>${esc(preset)}</strong></div><p>${esc(tr('plan.groupSummary', { zones: members.length, demand }))}</p><ul class="plan-events">${events.map(planEventMarkup).join('')}</ul></article>`;
|
|
}).join('');
|
|
|
|
const zoneGroups = new Map();
|
|
(app.groups || []).forEach(group => (group.zone_ids || []).forEach(zoneId => {
|
|
const names = zoneGroups.get(zoneId) || [];
|
|
names.push(group.name);
|
|
zoneGroups.set(zoneId, names);
|
|
}));
|
|
const zones = allZones.map(zone => {
|
|
const events = (zone.next_events || []).slice(0, 2);
|
|
if (!events.length) return '';
|
|
const target = zone.target_temperature == null ? '--' : Number(zone.target_temperature).toFixed(1);
|
|
const groupNames = zoneGroups.get(zone.zone_id) || [];
|
|
const scope = groupNames.length ? `${tr('groups.group')}: ${groupNames.join(' · ')}` : (zone.device_name || tr('common.noDevice'));
|
|
const planState = zoneRuntimeStatusLabel(zone, zone.mode || 'off');
|
|
return `<article class="panel plan-card plan-zone ${planZoneEffectiveEnabled(zone) ? '' : 'disabled'}"><div class="plan-card-head"><div><span class="eyebrow">${esc(scope)}</span><h3>${esc(zone.zone_name)}</h3></div><span class="badge ${zone.device_manual_override ? 'manual-override' : (planZoneEffectiveEnabled(zone) && zone.demand ? 'active' : '')}">${esc(planState)}</span></div><div class="plan-temp"><span>${fmtTemp(zone.current_temperature)}</span><b>→</b><strong>${esc(target)}<small>°C</small></strong></div><p>${esc(houseModeLabel(zone.mode || 'off'))} · ${esc(zonePresetLabel(zone.preset))}${zone.current_schedule_name ? ` · ${esc(zone.current_schedule_name)}` : ''}</p><ul class="plan-events">${events.map(planEventMarkup).join('')}</ul></article>`;
|
|
}).join('');
|
|
|
|
const rules = (plan.rules || []).filter(rule => rule.enabled);
|
|
const ruleCard = rules.length ? `<article class="panel plan-card plan-rules"><div class="plan-card-head"><div><span class="eyebrow">${esc(tr('plan.rules'))}</span><h3>${esc(tr('plan.ruleCount', { count: rules.length }))}</h3></div></div><ul class="plan-events">${rules.slice(0, 3).map(rule => {
|
|
const automation = (app.automations || []).find(item => item.id === rule.id);
|
|
const flow = automation?.flow_id ? (app.flows || []).find(item => item.id === automation.flow_id) : null;
|
|
const displayName = flow?.name || rule.name;
|
|
const target = rule.action_group_name ? `${tr('groups.group')}: ${rule.action_group_name}` : (rule.action_device_name || '');
|
|
return `<li><time>${esc(automationTriggerLabel(rule))}</time><span class="plan-rule-summary"><strong>${esc(displayName)}</strong>${target ? `<small>→ ${esc(target)}</small>` : ''}</span></li>`;
|
|
}).join('')}</ul></article>` : '';
|
|
|
|
const content = house + groupCards + zones + ruleCard;
|
|
host.innerHTML = content;
|
|
if (section) section.hidden = !content;
|
|
}
|
|
function applyControlPlan(plan, revision = null) {
|
|
if (!plan || typeof plan !== 'object') return false;
|
|
const hasRevision = revision !== null && revision !== undefined && revision !== '';
|
|
const hasCurrentRevision = app.controlPlanRevision !== null && app.controlPlanRevision !== undefined && app.controlPlanRevision !== '';
|
|
const nextRevision = hasRevision ? Number(revision) : NaN;
|
|
const currentRevision = hasCurrentRevision ? Number(app.controlPlanRevision) : NaN;
|
|
if (Number.isFinite(nextRevision) && Number.isFinite(currentRevision) && nextRevision < currentRevision) return false;
|
|
app.controlPlan = plan;
|
|
if (Number.isFinite(nextRevision)) app.controlPlanRevision = nextRevision;
|
|
renderControlPlan();
|
|
renderSimulationPage();
|
|
return true;
|
|
}
|
|
|
|
function controlPlanWebSocketReady() {
|
|
return !!app.ws && app.ws.readyState === WebSocket.OPEN && app.controlPlanPushReady;
|
|
}
|
|
|
|
async function loadControlPlan() {
|
|
try {
|
|
const plan = await api('/api/control-plan');
|
|
// A fallback request may have started while disconnected and finish after WS resync.
|
|
// Never let that older unversioned HTTP response overwrite a revisioned pushed plan.
|
|
if (!controlPlanWebSocketReady()) applyControlPlan(plan);
|
|
}
|
|
catch (error) { console.warn('Unable to load control plan:', error); }
|
|
finally {
|
|
if (!controlPlanWebSocketReady()) {
|
|
clearTimeout(app.controlPlanTimer);
|
|
app.controlPlanTimer = setTimeout(loadControlPlan, 10000);
|
|
}
|
|
}
|
|
}
|
|
|
|
function simulationTime(value, options = {}) {
|
|
if (!value) return '—';
|
|
const date = new Date(value);
|
|
return date.toLocaleString(locale(), { weekday: options.withDay === false ? undefined : 'short', hour: '2-digit', minute: '2-digit' }).replace(',', '');
|
|
}
|
|
|
|
function simulationNumeric(value) {
|
|
const n = Number(value);
|
|
return Number.isFinite(n) ? n : null;
|
|
}
|
|
|
|
function simulationOutdoorAssist(mode, outdoor, room, target) {
|
|
if (outdoor == null || room == null || target == null) return 0;
|
|
const roomError = Math.abs(room - target);
|
|
const weather = mode === 'heat' ? clamp((5 - outdoor) / 15, 0, 1) : clamp((outdoor - 30) / 10, 0, 1);
|
|
return clamp(weather * clamp(roomError, 0, 2) * 0.5, 0, 1);
|
|
}
|
|
|
|
function simulationRoundDeviceSetpoint(mode, demand, value) {
|
|
const safe = clamp(Number(value) || 0, 16, 30);
|
|
if (mode === 'heat' && demand) return Math.ceil(safe);
|
|
if (mode === 'heat' && !demand) return Math.floor(safe);
|
|
if (mode !== 'heat' && demand) return Math.floor(safe);
|
|
return Math.ceil(safe);
|
|
}
|
|
|
|
function simulationSmartFanSpeed(mode, room, target, outdoor, demand) {
|
|
if (!demand) return 1;
|
|
const error = Math.abs(room - target);
|
|
const extremeWeather = mode === 'heat' ? outdoor != null && outdoor <= 0 : outdoor != null && outdoor >= 32;
|
|
if (error >= 2 || extremeWeather) return 3;
|
|
if (error >= 1) return 2;
|
|
return 0;
|
|
}
|
|
|
|
function simulationStatusInfo(status) {
|
|
const map = {
|
|
disabled: { label: tr('common.disabled'), badge: '' },
|
|
off: { label: tr('house.noControl'), badge: '' },
|
|
waiting: { label: tr('simulation.waitingForData'), badge: '' },
|
|
demand: { label: tr('simulation.stateDemand'), badge: 'active' },
|
|
satisfied: { label: tr('simulation.stateSatisfied'), badge: '' },
|
|
};
|
|
return map[status] || { label: status, badge: '' };
|
|
}
|
|
|
|
function buildZoneSimulation(zone, planZone) {
|
|
const device = app.devices.find(item => item.id === (planZone?.device_id || zone?.device_id));
|
|
const mode = planZone?.mode || zone?.effective_mode || zone?.mode || app.settings?.house_mode || 'off';
|
|
const current = simulationNumeric(planZone?.current_temperature ?? zone?.current_temperature ?? zone?.device_temperature ?? device?.current_temperature);
|
|
const target = mode === 'off' ? null : simulationNumeric(planZone?.target_temperature ?? zone?.effective_setpoint ?? zone?.manual_setpoint ?? zone?.setpoint);
|
|
const outdoor = simulationNumeric(app.outdoorTemperature ?? app.controlPlan?.outdoor_temperature);
|
|
const hysteresis = Math.max(simulationNumeric(zoneHysteresisForMode(zone, mode)) || 0.4, 0.1);
|
|
const half = hysteresis / 2;
|
|
let status = 'waiting';
|
|
let demand = false;
|
|
if (!zone?.enabled || planZoneEffectiveEnabled(planZone) === false) status = 'disabled';
|
|
else if (mode === 'off') status = 'off';
|
|
else if (current == null || target == null) status = 'waiting';
|
|
else {
|
|
if (mode === 'heat') {
|
|
if (current <= target - half) demand = true;
|
|
else if (current >= target + half) demand = false;
|
|
else demand = !!zone?.demand;
|
|
} else {
|
|
if (current >= target + half) demand = true;
|
|
else if (current <= target - half) demand = false;
|
|
else demand = !!zone?.demand;
|
|
}
|
|
status = demand ? 'demand' : 'satisfied';
|
|
}
|
|
const standbyOffset = Math.max(simulationNumeric(zone?.standby_offset_c) || 0.5, 0.5);
|
|
const assist = current == null || target == null ? 0 : simulationOutdoorAssist(mode, outdoor, current, target);
|
|
const activeTarget = current == null || target == null ? null : (mode === 'heat' ? target + assist : target - assist);
|
|
const standbyTarget = target == null ? null : (mode === 'heat' ? target - standbyOffset : target + standbyOffset);
|
|
const desiredDeviceTarget = current == null || target == null ? null : simulationRoundDeviceSetpoint(mode, demand, demand ? activeTarget : standbyTarget);
|
|
const nightActive = !!app.controlPlan?.night_mode_active;
|
|
const nightMaxFan = clamp(Number(app.controlPlan?.night_mode_max_fan_speed || 1), 1, 5);
|
|
let fanSpeed = simulationNumeric(device?.fan_speed);
|
|
if (mode !== 'off') {
|
|
fanSpeed = zone?.smart_fan && current != null && target != null ? simulationSmartFanSpeed(mode, current, target, outdoor, demand) : fanSpeed;
|
|
if (nightActive) {
|
|
if (zone?.smart_fan) fanSpeed = fanSpeed === 0 ? 1 : Math.min(fanSpeed ?? nightMaxFan, nightMaxFan);
|
|
else if (fanSpeed === 0 || fanSpeed == null || fanSpeed > nightMaxFan) fanSpeed = nightMaxFan;
|
|
}
|
|
}
|
|
const quiet = mode === 'off'
|
|
? tr('simulation.manual')
|
|
: nightActive && app.settings?.night_mode?.force_quiet
|
|
? tr('simulation.quietIfSupported')
|
|
: (zone?.smart_fan ? (!demand ? tr('simulation.quietIfSupported') : tr('common.off')) : tr('simulation.manual'));
|
|
const nativeSleep = mode !== 'off' && nightActive && app.settings?.night_mode?.use_native_sleep && device?.supports_sleep === true;
|
|
const reasoning = !zone?.enabled || planZoneEffectiveEnabled(planZone) === false
|
|
? tr('simulation.reasonDisabled')
|
|
: mode === 'off'
|
|
? tr('simulation.reasonHouseOff')
|
|
: current == null || target == null
|
|
? tr('simulation.reasonWaiting')
|
|
: demand
|
|
? tr('simulation.reasonDemand', { mode: modeLabel(mode), target: target.toFixed(1), hysteresis: hysteresis.toFixed(1) })
|
|
: tr('simulation.reasonSatisfied', { target: target.toFixed(1), standby: standbyTarget.toFixed(1) });
|
|
return { device, mode, current, target, demand, status, outdoor, hysteresis, assist, activeTarget, standbyTarget, desiredDeviceTarget, fanSpeed, quiet, nativeSleep, reasoning };
|
|
}
|
|
|
|
function simulationRuleAction(rule) {
|
|
const bits = [];
|
|
if (rule.action?.power != null) bits.push(`${tr('common.power')}: ${rule.action.power ? tr('common.on') : tr('common.off')}`);
|
|
if (rule.action?.mode) bits.push(`${tr('common.mode')}: ${rule.action_group_id && rule.action.mode === 'auto' ? tr('groups.followHouse') : modeLabel(rule.action.mode)}`);
|
|
if (rule.action?.target_temperature != null) bits.push(`${tr('common.temperature')}: ${fmtTemp(rule.action.target_temperature)}`);
|
|
if (rule.action_preset) bits.push(`${tr('groups.profile')}: ${zonePresetLabel(rule.action_preset)}`);
|
|
return bits.length ? bits.join(' · ') : tr('simulation.noActionPreview');
|
|
}
|
|
|
|
function simulationGroupsForZone(zoneId) {
|
|
return app.groups.filter(group => (group.zone_ids || []).includes(zoneId));
|
|
}
|
|
|
|
function renderSimulationScopeControls(plan) {
|
|
const scope = $('#simulationScope');
|
|
const target = $('#simulationTarget');
|
|
if (!scope || !target) return;
|
|
if (!['units', 'groups'].includes(app.simulationScope)) app.simulationScope = 'units';
|
|
scope.value = app.simulationScope;
|
|
const zones = plan?.zones || [];
|
|
const options = app.simulationScope === 'groups'
|
|
? [{ id: 'all', name: tr('simulation.allGroups') }, ...app.groups.map(group => ({ id: group.id, name: group.name }))]
|
|
: [{ id: 'all', name: tr('simulation.allUnits') }, ...zones.map(zone => ({ id: zone.zone_id, name: `${zone.zone_name} · ${zone.device_name || tr('common.device')}` }))];
|
|
if (!options.some(option => option.id === app.simulationTarget)) app.simulationTarget = 'all';
|
|
target.innerHTML = options.map(option => `<option value="${esc(option.id)}">${esc(option.name)}</option>`).join('');
|
|
target.value = app.simulationTarget;
|
|
}
|
|
|
|
function simulationFilteredZones(plan) {
|
|
const zones = plan?.zones || [];
|
|
if (app.simulationScope === 'groups') {
|
|
if (app.simulationTarget === 'all') {
|
|
const grouped = new Set(app.groups.flatMap(group => group.zone_ids || []));
|
|
return zones.filter(zone => grouped.has(zone.zone_id));
|
|
}
|
|
const group = app.groups.find(item => item.id === app.simulationTarget);
|
|
const wanted = new Set(group?.zone_ids || []);
|
|
return zones.filter(zone => wanted.has(zone.zone_id));
|
|
}
|
|
return app.simulationTarget === 'all' ? zones : zones.filter(zone => zone.zone_id === app.simulationTarget);
|
|
}
|
|
|
|
function simulationRuleVisible(rule, zones) {
|
|
if (app.simulationTarget === 'all') return true;
|
|
const zoneIds = new Set(zones.map(zone => zone.zone_id));
|
|
const deviceIds = new Set(zones.map(zone => zone.device_id).filter(Boolean));
|
|
if (app.simulationScope === 'groups') {
|
|
if (rule.action_group_id === app.simulationTarget) return true;
|
|
return deviceIds.has(rule.trigger_device_id) || deviceIds.has(rule.action_device_id);
|
|
}
|
|
const directZone = [...zoneIds][0];
|
|
if (simulationGroupsForZone(directZone).some(group => group.id === rule.action_group_id)) return true;
|
|
return deviceIds.has(rule.trigger_device_id) || deviceIds.has(rule.action_device_id);
|
|
}
|
|
|
|
function simulationLaneContext(planZone) {
|
|
if (app.simulationScope !== 'groups') return planZone.device_name || '';
|
|
const groups = simulationGroupsForZone(planZone.zone_id);
|
|
return groups.length ? groups.map(group => group.name).join(' · ') : (planZone.device_name || '');
|
|
}
|
|
|
|
function updateSimulationUrl() {
|
|
if (app.currentView !== 'simulation') return;
|
|
const params = new URLSearchParams();
|
|
if (app.standaloneSimulation) params.set('standalone', '1');
|
|
if (app.simulationScope !== 'units') params.set('scope', app.simulationScope);
|
|
if (app.simulationTarget !== 'all') params.set('target', app.simulationTarget);
|
|
const query = params.toString();
|
|
updateBrowserUrl(`/simulation${query ? `?${query}` : ''}`, true);
|
|
}
|
|
|
|
function renderSimulationPage() {
|
|
const summaryHost = $('#simulationSummary');
|
|
const timelineHost = $('#simulationTimeline');
|
|
const boardHost = $('#simulationFlowBoard');
|
|
const rulesHost = $('#simulationRules');
|
|
if (!summaryHost || !timelineHost || !boardHost || !rulesHost) return;
|
|
const plan = app.controlPlan;
|
|
if (!plan) {
|
|
summaryHost.innerHTML = `<div class="panel plan-loading">${esc(tr('plan.loading'))}</div>`;
|
|
timelineHost.innerHTML = ''; boardHost.innerHTML = ''; rulesHost.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
renderSimulationScopeControls(plan);
|
|
const zones = simulationFilteredZones(plan);
|
|
const enabledZones = zones.filter(zone => zone.enabled);
|
|
const demandingZones = enabledZones.filter(zone => zone.demand);
|
|
const nightOn = !!plan.night_mode_active;
|
|
summaryHost.innerHTML = [
|
|
{ label: tr('simulation.houseMode'), value: houseModeLabel(plan.house_mode || 'off'), note: tr('simulation.strategy', { strategy: (plan.control_strategy || 'setpoint') === 'setpoint' ? tr('plan.strategySetpoint') : (plan.control_strategy || 'setpoint') }) },
|
|
{ label: tr('settings.nightMode'), value: nightOn ? tr('common.active') : (app.settings?.night_mode?.enabled ? tr('simulation.scheduled') : tr('common.disabled')), note: `${plan.night_mode_start || '22:00'} → ${plan.night_mode_end || '06:00'} · ${tr('simulation.fanMax')} ${fanLabel(plan.night_mode_max_fan_speed || 1)}` },
|
|
{ label: tr('simulation.outdoor'), value: plan.outdoor_temperature == null ? '—' : fmtTemp(plan.outdoor_temperature), note: tr('simulation.generatedAt', { time: dateTime(plan.generated_at) }) },
|
|
{ label: tr('simulation.activeZones'), value: String(enabledZones.length), note: `${tr('simulation.requestingZones', { count: demandingZones.length })} · ${tr('simulation.rulesLabel')}: ${(plan.rules || []).filter(rule => rule.enabled && simulationRuleVisible(rule, zones)).length}` },
|
|
].map(card => `<article class="panel simulation-summary-card"><small>${esc(card.label)}</small><strong>${esc(card.value)}</strong><span>${esc(card.note)}</span></article>`).join('');
|
|
|
|
const nodeW = 190, nodeH = 106, rowH = 190, topY = 155;
|
|
const x = { sensor: 45, thermostat: 305, decision: 565, unit: 825, event: 1085 };
|
|
const boardW = 1325, boardH = Math.max(390, topY + zones.length * rowH + 35);
|
|
const nodes = [];
|
|
const links = [];
|
|
const pathBetween = (ax, ay, bx, by, cls = '') => {
|
|
const bend = Math.max(36, (bx - ax) * .45);
|
|
return `<path class="flow-link ${cls}" d="M ${ax} ${ay} C ${ax + bend} ${ay}, ${bx - bend} ${by}, ${bx} ${by}"/>`;
|
|
};
|
|
const verticalLink = (ax, ay, bx, by, cls = 'bus') => `<path class="flow-link ${cls}" d="M ${ax} ${ay} C ${ax} ${ay + 35}, ${bx} ${by - 35}, ${bx} ${by}"/>`;
|
|
const node = ({ left, top, kind, eyebrow, title, value, meta = '', badge = '', badgeIcon = '', badgeClass = '' }) => `<article class="diagram-node ${kind}" style="left:${left}px;top:${top}px;width:${nodeW}px;min-height:${nodeH}px"><div class="flow-node-top"><span>${esc(eyebrow)}</span>${badge || badgeIcon ? `<b class="flow-node-badge ${badgeClass}">${badgeIcon ? uiIcon(badgeIcon) : esc(badge)}</b>` : ''}</div><h3>${esc(title)}</h3><strong>${esc(value)}</strong>${meta ? `<p>${esc(meta)}</p>` : ''}<i class="diagram-port in"></i><i class="diagram-port out"></i></article>`;
|
|
|
|
const globalHouseLeft = 305, globalNightLeft = 565, globalTop = 28;
|
|
nodes.push(node({ left: globalHouseLeft, top: globalTop, kind: 'logic global', eyebrow: tr('simulation.globalInput'), title: tr('simulation.houseMode'), value: houseModeLabel(plan.house_mode || 'off'), meta: tr('simulation.strategy', { strategy: (plan.control_strategy || 'setpoint') === 'setpoint' ? tr('plan.strategySetpoint') : (plan.control_strategy || 'setpoint') }), badge: tr('simulation.house') }));
|
|
nodes.push(node({ left: globalNightLeft, top: globalTop, kind: `logic global ${nightOn ? 'night-active' : ''}`, eyebrow: tr('simulation.globalInput'), title: tr('settings.nightMode'), value: nightOn ? tr('common.active') : (app.settings?.night_mode?.enabled ? tr('simulation.scheduled') : tr('common.disabled')), meta: `${plan.night_mode_start || '22:00'} → ${plan.night_mode_end || '06:00'} · ${fanLabel(plan.night_mode_max_fan_speed || 1)}`, badgeIcon: nightOn ? 'moon' : 'circle', badgeClass: nightOn ? 'active' : '' }));
|
|
|
|
zones.forEach((planZone, index) => {
|
|
const zone = app.zones.find(item => item.id === planZone.zone_id);
|
|
const sim = buildZoneSimulation(zone, planZone);
|
|
const status = simulationStatusInfo(sim.status);
|
|
const y = topY + index * rowH;
|
|
const mid = y + nodeH / 2;
|
|
const next = (planZone.next_events || [])[0];
|
|
const source = zoneControlSourceLabel(planZone.control_source);
|
|
const sensorName = planZone.control_source === 'external' || planZone.control_source === 'combined'
|
|
? haSensorLabel(zoneHaEntityId(zone) || source)
|
|
: (planZone.device_name || tr('common.device'));
|
|
const fanText = sim.fanSpeed == null ? '—' : fanLabel(sim.fanSpeed);
|
|
const quietText = sim.quiet;
|
|
const command = sim.desiredDeviceTarget == null ? tr('simulation.noCommand') : `${fmtTemp(sim.desiredDeviceTarget)} · ${fanText}`;
|
|
const eventValue = next ? simulationTime(next.at) : tr('simulation.noEventShort');
|
|
const eventMeta = next ? `${next.label}${next.target_temperature == null ? '' : ` · ${fmtTemp(next.target_temperature)}`}` : tr('plan.noEvents');
|
|
|
|
nodes.push(`<div class="flow-lane-label" style="top:${y - 27}px"><strong>${esc(planZone.zone_name)}</strong><span>${esc(simulationLaneContext(planZone))}</span></div>`);
|
|
nodes.push(node({ left: x.sensor, top: y, kind: 'input', eyebrow: tr('simulation.stepRoom'), title: sensorName, value: fmtTemp(sim.current), meta: source, badgeIcon: 'status-dot', badgeClass: sim.current == null ? '' : 'active' }));
|
|
nodes.push(node({ left: x.thermostat, top: y, kind: 'logic', eyebrow: tr('simulation.thermostat'), title: planZone.zone_name, value: sim.target == null ? '—' : fmtTemp(sim.target), meta: `${zonePresetLabel(planZone.preset)} · ${tr('simulation.hysteresis', { value: sim.hysteresis.toFixed(1) })}`, badge: houseModeLabel(sim.mode) }));
|
|
nodes.push(node({ left: x.decision, top: y, kind: `logic decision ${sim.demand ? 'demand' : 'satisfied'}`, eyebrow: tr('simulation.stepDecision'), title: status.label, value: sim.demand ? tr('simulation.callForComfort') : tr('simulation.standby'), meta: sim.reasoning, badgeIcon: sim.demand ? 'play' : 'check', badgeClass: status.badge }));
|
|
const sleepMeta = sim.nativeSleep ? ` · ${tr('devices.sleep')}: ${tr('common.on')}` : '';
|
|
nodes.push(node({ left: x.unit, top: y, kind: 'action', eyebrow: tr('simulation.stepCommand'), title: planZone.device_name || tr('common.device'), value: command, meta: `${tr('devices.quiet')}: ${quietText}${sleepMeta}`, badge: sim.mode === 'off' ? tr('simulation.manual') : (sim.demand ? tr('simulation.running') : tr('simulation.idle')), badgeClass: sim.demand ? 'active' : '' }));
|
|
nodes.push(node({ left: x.event, top: y, kind: 'event', eyebrow: tr('simulation.nextEvent'), title: eventValue, value: next?.preset ? zonePresetLabel(next.preset) : tr('simulation.schedule'), meta: eventMeta, badgeIcon: 'chevron-right' }));
|
|
|
|
links.push(pathBetween(x.sensor + nodeW, mid, x.thermostat, mid, 'input-link'));
|
|
links.push(pathBetween(x.thermostat + nodeW, mid, x.decision, mid, 'logic-link'));
|
|
links.push(pathBetween(x.decision + nodeW, mid, x.unit, mid, sim.demand ? 'active-link' : 'logic-link'));
|
|
links.push(pathBetween(x.unit + nodeW, mid, x.event, mid, 'action-link'));
|
|
links.push(verticalLink(globalHouseLeft + nodeW / 2, globalTop + nodeH, x.thermostat + nodeW / 2, y, 'bus'));
|
|
if (app.settings?.night_mode?.enabled) links.push(verticalLink(globalNightLeft + nodeW / 2, globalTop + nodeH, x.decision + nodeW / 2, y, nightOn ? 'night-link' : 'bus'));
|
|
});
|
|
|
|
boardHost.style.width = `${boardW}px`;
|
|
boardHost.style.height = `${boardH}px`;
|
|
boardHost.innerHTML = `<svg class="flow-links" viewBox="0 0 ${boardW} ${boardH}" width="${boardW}" height="${boardH}" aria-hidden="true">${links.join('')}</svg>${nodes.join('')}`;
|
|
|
|
const timelineItems = [];
|
|
if (app.simulationTarget === 'all') (plan.next_events || []).forEach(event => timelineItems.push({ scope: tr('simulation.house'), event }));
|
|
zones.forEach(zone => (zone.next_events || []).forEach(event => timelineItems.push({ scope: zone.zone_name, event, device: zone.device_name })));
|
|
timelineItems.sort((a, b) => new Date(a.event.at) - new Date(b.event.at));
|
|
const unique = [], seen = new Set();
|
|
for (const item of timelineItems) {
|
|
const key = `${item.scope}|${item.event.at}|${item.event.label}`;
|
|
if (seen.has(key)) continue; seen.add(key); unique.push(item); if (unique.length >= 16) break;
|
|
}
|
|
timelineHost.innerHTML = unique.length ? unique.map(item => {
|
|
const target = item.event.target_temperature == null ? '' : ` · ${fmtTemp(item.event.target_temperature)}`;
|
|
return `<article class="simulation-timeline-item"><time>${esc(simulationTime(item.event.at))}</time><div><strong>${esc(item.scope)}</strong><p>${esc(item.event.label)}${esc(target)}${item.device ? ` · ${esc(item.device)}` : ''}</p></div></article>`;
|
|
}).join('') : `<div class="empty">${esc(tr('plan.noEvents'))}</div>`;
|
|
|
|
const activeRules = (plan.rules || []).filter(rule => rule.enabled && simulationRuleVisible(rule, zones));
|
|
rulesHost.innerHTML = activeRules.length ? activeRules.map(rule => `<article class="simulation-rule-card"><div class="simulation-rule-head"><div><span class="eyebrow">${esc(tr('common.automation'))}</span><h3>${esc(rule.name)}</h3></div><span class="badge active">${esc(automationTriggerLabel(rule))}</span></div><p>${esc(tr('simulation.ruleOnDevice', { device: rule.action_device_name || tr('common.noDevice') }))}</p><div class="simulation-rule-action">${esc(simulationRuleAction(rule))}</div><div class="simulation-rule-meta"><small>${esc(tr('automations.last'))}: ${esc(dateTime(rule.last_fired_at))}</small><small>${esc(tr('simulation.nextReady'))}: ${esc(dateTime(rule.next_ready_at))}</small></div></article>`).join('') : `<div class="empty">${esc(tr('simulation.noRules'))}</div>`;
|
|
}
|
|
|
|
function scheduleControlPlanLoad(delay = 180) {
|
|
if (controlPlanWebSocketReady()) return;
|
|
clearTimeout(app.controlPlanTimer);
|
|
app.controlPlanTimer = setTimeout(loadControlPlan, delay);
|
|
}
|
|
|
|
function stopControlPlanFallback() {
|
|
clearTimeout(app.controlPlanTimer);
|
|
app.controlPlanTimer = null;
|
|
}
|
|
|