vikingowl
80466464e6
Pass profile timezone through DashboardData so the frontend can compute the current hour and highlight it on the heatmap (white ring + orange triangle marker). Only activates when the dashboard date matches today in the profile timezone. In cold weather (peak < 22°C, risk low), the risk card now shows a teal "Comfortable" presentation with a checkmark icon instead of the generic green "Low" shield.
811 lines
34 KiB
JavaScript
811 lines
34 KiB
JavaScript
// Dashboard page logic
|
|
(function() {
|
|
"use strict";
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
const t = () => window.HG.t || {};
|
|
|
|
let _hourActionMap = null;
|
|
let _currentTimeline = null;
|
|
let _currentTimezone = null;
|
|
let _currentDashDate = null;
|
|
|
|
function show(id) { $(id).classList.remove("hidden"); }
|
|
function hide(id) { $(id).classList.add("hidden"); }
|
|
|
|
const riskColors = {
|
|
low: { bg: "bg-green-100 dark:bg-green-900", text: "text-green-700 dark:text-green-300", border: "border-green-500" },
|
|
comfort: { bg: "bg-teal-100 dark:bg-teal-900", text: "text-teal-700 dark:text-teal-300", border: "border-teal-500" },
|
|
moderate: { bg: "bg-yellow-100 dark:bg-yellow-900", text: "text-yellow-700 dark:text-yellow-300", border: "border-yellow-500" },
|
|
high: { bg: "bg-orange-100 dark:bg-orange-900", text: "text-orange-700 dark:text-orange-300", border: "border-orange-500" },
|
|
extreme: { bg: "bg-red-100 dark:bg-red-900", text: "text-red-700 dark:text-red-300", border: "border-red-500" },
|
|
};
|
|
|
|
const riskGradients = {
|
|
low: { from: "#f0fdf4", to: "#dcfce7", darkFrom: "#052e16", darkTo: "#064e3b" },
|
|
comfort: { from: "#f0fdfa", to: "#ccfbf1", darkFrom: "#042f2e", darkTo: "#134e4a" },
|
|
moderate: { from: "#fefce8", to: "#fef9c3", darkFrom: "#422006", darkTo: "#3f3f00" },
|
|
high: { from: "#fff7ed", to: "#ffedd5", darkFrom: "#431407", darkTo: "#7c2d12" },
|
|
extreme: { from: "#fef2f2", to: "#fecaca", darkFrom: "#450a0a", darkTo: "#7f1d1d" },
|
|
};
|
|
|
|
const warningSeverityColors = {
|
|
Minor: { bg: "bg-yellow-50 dark:bg-yellow-900/30", border: "border-yellow-300 dark:border-yellow-700", text: "text-yellow-700 dark:text-yellow-300", pill: "bg-yellow-200 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-200" },
|
|
Moderate: { bg: "bg-orange-50 dark:bg-orange-900/30", border: "border-orange-300 dark:border-orange-700", text: "text-orange-700 dark:text-orange-300", pill: "bg-orange-200 text-orange-800 dark:bg-orange-800 dark:text-orange-200" },
|
|
Severe: { bg: "bg-red-50 dark:bg-red-900/30", border: "border-red-300 dark:border-red-800", text: "text-red-700 dark:text-red-300", pill: "bg-red-200 text-red-800 dark:bg-red-800 dark:text-red-200" },
|
|
Extreme: { bg: "bg-red-100 dark:bg-red-900/50", border: "border-red-500 dark:border-red-600", text: "text-red-800 dark:text-red-200", pill: "bg-red-300 text-red-900 dark:bg-red-700 dark:text-red-100" },
|
|
};
|
|
|
|
const budgetBorderColors = {
|
|
comfortable: "border-green-400",
|
|
marginal: "border-yellow-400",
|
|
overloaded: "border-red-400",
|
|
};
|
|
|
|
const effortColors = {
|
|
none: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300",
|
|
low: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300",
|
|
medium: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300",
|
|
high: "bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300",
|
|
};
|
|
|
|
const impactColors = {
|
|
low: "bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300",
|
|
medium: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
|
|
high: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300",
|
|
};
|
|
|
|
const categoryIcons = {
|
|
shading: '<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18"/></svg>',
|
|
ventilation: '<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9.59 4.59A2 2 0 1111 8H2m10.59 11.41A2 2 0 1014 16H2m15.73-8.27A2.5 2.5 0 1119.5 12H2"/></svg>',
|
|
internal_gains: '<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>',
|
|
ac_strategy: '<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83"/><circle cx="12" cy="12" r="3"/></svg>',
|
|
hydration: '<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 11-11.31 0z"/></svg>',
|
|
care: '<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>',
|
|
};
|
|
|
|
function tempColorHex(temp) {
|
|
if (temp >= 40) return "#dc2626";
|
|
if (temp >= 35) return "#f97316";
|
|
if (temp >= 30) return "#facc15";
|
|
if (temp >= 25) return "#fde68a";
|
|
if (temp >= 20) return "#bbf7d0";
|
|
if (temp >= 10) return "#bfdbfe";
|
|
if (temp >= 0) return "#93c5fd";
|
|
return "#6366f1";
|
|
}
|
|
|
|
function isDark() {
|
|
return document.documentElement.classList.contains("dark") ||
|
|
window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
}
|
|
|
|
window.loadDashboard = async function() {
|
|
hide("no-data");
|
|
hide("no-forecast");
|
|
hide("error-state");
|
|
hide("data-display");
|
|
show("loading");
|
|
|
|
try {
|
|
const profileId = await getActiveProfileId();
|
|
if (!profileId) {
|
|
hide("loading");
|
|
show("no-data");
|
|
return;
|
|
}
|
|
|
|
const forecasts = await dbGetByIndex("forecasts", "profileId", profileId);
|
|
if (forecasts.length === 0) {
|
|
hide("loading");
|
|
show("no-forecast");
|
|
return;
|
|
}
|
|
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
const payload = await getComputePayload(profileId, today);
|
|
if (!payload) {
|
|
hide("loading");
|
|
show("no-data");
|
|
return;
|
|
}
|
|
|
|
const resp = await fetch("/api/compute/dashboard", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (!resp.ok) {
|
|
const err = await resp.json();
|
|
throw new Error(err.error || "Compute failed");
|
|
}
|
|
const data = await resp.json();
|
|
|
|
hide("loading");
|
|
show("data-display");
|
|
renderDashboard(data);
|
|
initQuickSettings();
|
|
|
|
// LLM credentials (shared between summary and actions)
|
|
const llmProvider = await getSetting("llmProvider");
|
|
const llmApiKey = await getSetting("llmApiKey");
|
|
const llmModel = await getSetting("llmModel");
|
|
const language = window.HG && window.HG.lang === "de" ? "German" : "English";
|
|
|
|
// LLM summary (async)
|
|
try {
|
|
const llmBody = {
|
|
date: data.date,
|
|
peakTempC: data.peakTempC,
|
|
minNightTempC: data.minNightTempC,
|
|
riskLevel: data.riskLevel,
|
|
acHeadroomBTUH: data.roomBudgets && data.roomBudgets.length > 0 ? data.roomBudgets[0].headroomBtuh : 0,
|
|
budgetStatus: data.roomBudgets && data.roomBudgets.length > 0 ? data.roomBudgets[0].status : "comfortable",
|
|
language: language,
|
|
};
|
|
if (llmProvider && llmApiKey) {
|
|
llmBody.provider = llmProvider;
|
|
llmBody.apiKey = llmApiKey;
|
|
if (llmModel) llmBody.model = llmModel;
|
|
}
|
|
|
|
const llmResp = await fetch("/api/llm/summarize", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(llmBody),
|
|
});
|
|
if (llmResp.ok) {
|
|
const llmData = await llmResp.json();
|
|
if (llmData.summary) {
|
|
renderLlmSummary(llmData.summary);
|
|
} else {
|
|
$("llm-section").classList.add("hidden");
|
|
}
|
|
}
|
|
} catch (e) {
|
|
$("llm-section").classList.add("hidden");
|
|
}
|
|
|
|
// AI actions (async) — skip when no heat risk
|
|
const needsHeatActions = data.peakTempC >= 22 || data.riskLevel !== "low";
|
|
if (llmProvider && llmApiKey && needsHeatActions) {
|
|
show("actions-loading");
|
|
try {
|
|
const rooms = (payload.rooms || []).map(r => ({
|
|
name: r.name,
|
|
orientation: r.orientation || "",
|
|
shadingType: r.shadingType || "none",
|
|
hasAC: (payload.acAssignments || []).some(a => a.roomId === r.id),
|
|
}));
|
|
const actionsBody = {
|
|
date: data.date,
|
|
indoorTempC: data.indoorTempC,
|
|
peakTempC: data.peakTempC,
|
|
minNightTempC: data.minNightTempC,
|
|
poorNightCool: data.poorNightCool,
|
|
riskLevel: data.riskLevel,
|
|
riskWindows: data.riskWindows || [],
|
|
timeline: (data.timeline || []).map(s => ({
|
|
hour: s.hour,
|
|
tempC: s.tempC,
|
|
humidityPct: s.humidityPct,
|
|
budgetStatus: s.budgetStatus,
|
|
coolMode: s.coolMode,
|
|
})),
|
|
roomBudgets: (data.roomBudgets || []).map(rb => ({
|
|
totalGainW: rb.totalGainW,
|
|
})),
|
|
rooms: rooms,
|
|
provider: llmProvider,
|
|
apiKey: llmApiKey,
|
|
language: language,
|
|
};
|
|
if (llmModel) actionsBody.model = llmModel;
|
|
|
|
const actResp = await fetch("/api/llm/actions", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(actionsBody),
|
|
});
|
|
if (actResp.ok) {
|
|
const actData = await actResp.json();
|
|
if (actData.actions && actData.actions.length > 0) {
|
|
renderAIActions(actData.actions);
|
|
_hourActionMap = buildHourActionMap(actData.actions);
|
|
if (_currentTimeline) {
|
|
renderTimelineAnnotations(_currentTimeline, _hourActionMap);
|
|
renderTimelineLegend(_currentTimeline, _hourActionMap);
|
|
}
|
|
} else {
|
|
hide("actions-loading");
|
|
}
|
|
} else {
|
|
hide("actions-loading");
|
|
}
|
|
} catch (e) {
|
|
hide("actions-loading");
|
|
}
|
|
}
|
|
|
|
} catch (err) {
|
|
hide("loading");
|
|
show("error-state");
|
|
console.error("Dashboard error:", err);
|
|
}
|
|
};
|
|
|
|
// ========== Mini Markdown ==========
|
|
function miniMarkdown(text) {
|
|
return text
|
|
.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
|
|
.replace(/^- (.+)$/gm, "<li class=\"ml-4 list-disc\">$1</li>");
|
|
}
|
|
|
|
// ========== LLM Summary ==========
|
|
function renderLlmSummary(summary) {
|
|
const paragraphs = summary.split(/\n\n+/).filter(Boolean);
|
|
const html = paragraphs.map(p => {
|
|
const rendered = miniMarkdown(esc(p));
|
|
if (rendered.includes("<li")) {
|
|
return `<ul class="text-sm space-y-1">${rendered}</ul>`;
|
|
}
|
|
return `<p class="text-sm">${rendered}</p>`;
|
|
}).join("");
|
|
|
|
const el = $("llm-summary");
|
|
el.innerHTML = `
|
|
<div class="space-y-2">${html}</div>
|
|
<p class="text-xs text-gray-400 mt-3">${esc(t().aiDisclaimer)}</p>
|
|
`;
|
|
// Fade in
|
|
requestAnimationFrame(() => el.classList.remove("opacity-0"));
|
|
}
|
|
|
|
// ========== Main Render ==========
|
|
function renderDashboard(data) {
|
|
$("profile-name").textContent = data.profileName + " \u2014 " + data.date;
|
|
|
|
// Detect comfort day: cold weather, low risk
|
|
const isComfort = data.peakTempC < 22 && data.riskLevel === "low";
|
|
const riskKey = isComfort ? "comfort" : data.riskLevel;
|
|
|
|
// Risk card with gradient
|
|
const rc = riskColors[riskKey] || riskColors.low;
|
|
const rg = riskGradients[riskKey] || riskGradients.low;
|
|
const dark = isDark();
|
|
const gradFrom = dark ? rg.darkFrom : rg.from;
|
|
const gradTo = dark ? rg.darkTo : rg.to;
|
|
const riskCard = $("risk-card");
|
|
riskCard.className = "rounded-xl p-4 text-center shadow-sm transition-all duration-200 hover:shadow-md";
|
|
riskCard.style.background = `linear-gradient(135deg, ${gradFrom}, ${gradTo})`;
|
|
|
|
const shieldSvg = '<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>';
|
|
const checkSvg = '<svg class="w-5 h-5 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>';
|
|
$("risk-icon").innerHTML = `<span class="${rc.text}">${isComfort ? checkSvg : shieldSvg}</span>`;
|
|
$("risk-level").className = `text-2xl font-bold capitalize ${rc.text}`;
|
|
$("risk-level").textContent = isComfort ? (t().riskComfort || "Comfortable") : data.riskLevel;
|
|
|
|
// Peak temp
|
|
$("peak-temp").textContent = data.peakTempC.toFixed(1) + "\u00b0C";
|
|
|
|
// Min night temp
|
|
$("min-night-temp").textContent = data.minNightTempC.toFixed(1) + "\u00b0C";
|
|
if (data.poorNightCool) {
|
|
$("poor-night-cool").classList.remove("hidden");
|
|
}
|
|
|
|
// Warnings — severity-based coloring
|
|
if (data.warnings && data.warnings.length > 0) {
|
|
show("warnings-section");
|
|
$("warnings-section").innerHTML = '<h2 class="text-lg font-semibold mb-2">' + esc(t().warnings) + '</h2>' +
|
|
data.warnings.map(w => {
|
|
const sc = warningSeverityColors[w.severity] || warningSeverityColors.Moderate;
|
|
return `
|
|
<div class="${sc.bg} border ${sc.border} rounded-lg p-3 transition-all duration-200 hover:shadow-md">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="font-medium ${sc.text}">${esc(w.headline)}</span>
|
|
<span class="text-xs px-2 py-0.5 rounded-full ${sc.pill}">${esc(w.severity)}</span>
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">${esc(w.description)}</div>
|
|
${w.instruction ? `<div class="text-sm text-orange-700 dark:text-orange-300 mt-1">${esc(w.instruction)}</div>` : ''}
|
|
<div class="text-xs text-gray-400 mt-1">${esc(w.onset)} \u2014 ${esc(w.expires)}</div>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
}
|
|
|
|
// Risk windows
|
|
if (data.riskWindows && data.riskWindows.length > 0) {
|
|
show("risk-windows-section");
|
|
$("risk-windows").innerHTML = data.riskWindows.map(w => {
|
|
const wc = riskColors[w.level] || riskColors.low;
|
|
return `
|
|
<div class="flex items-center gap-3 ${wc.bg} rounded-lg px-3 py-2 transition-all duration-200 hover:shadow-md">
|
|
<span class="font-mono text-sm">${String(w.startHour).padStart(2,'0')}:00\u2013${String(w.endHour).padStart(2,'0')}:00</span>
|
|
<span class="capitalize font-medium ${wc.text}">${w.level}</span>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">${w.peakTempC.toFixed(1)}\u00b0C \u2014 ${esc(w.reason)}</span>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
}
|
|
|
|
// Timeline heatmap
|
|
if (data.timeline && data.timeline.length > 0) {
|
|
renderTimelineHeatmap(data.timeline, data.timezone, data.date);
|
|
}
|
|
|
|
// Room budgets
|
|
if (data.roomBudgets && data.roomBudgets.length > 0) {
|
|
show("budgets-section");
|
|
$("room-budgets").innerHTML = data.roomBudgets.map(rb => {
|
|
const maxVal = Math.max(rb.totalGainBtuh, rb.acCapacityBtuh, 1);
|
|
const internalPct = (rb.internalGainsW / maxVal) * 100;
|
|
const solarPct = (rb.solarGainW / maxVal) * 100;
|
|
const ventPct = (rb.ventGainW / maxVal) * 100;
|
|
const capPct = Math.min((rb.acCapacityBtuh / maxVal) * 100, 100);
|
|
const bc = budgetBorderColors[rb.status] || budgetBorderColors.comfortable;
|
|
return `
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl p-3 shadow-sm border-l-4 ${bc}">
|
|
<div class="font-medium text-sm mb-2">${esc(rb.roomName)}</div>
|
|
<div class="space-y-0.5 text-xs">
|
|
<div class="flex justify-between"><span>${esc(t().internalGains)}</span><span>${rb.internalGainsW.toFixed(0)} W</span></div>
|
|
<div class="flex justify-between"><span>${esc(t().solarGain)}</span><span>${rb.solarGainW.toFixed(0)} W</span></div>
|
|
<div class="flex justify-between"><span>${esc(t().ventGain)}</span><span>${rb.ventGainW.toFixed(0)} W</span></div>
|
|
<div class="flex justify-between font-medium"><span>${esc(t().totalGain)}</span><span>${rb.totalGainBtuh.toFixed(0)} BTU/h</span></div>
|
|
<div class="flex justify-between"><span>${esc(t().acCapacity)}</span><span>${rb.acCapacityBtuh.toFixed(0)} BTU/h</span></div>
|
|
<div class="flex justify-between font-medium"><span>${esc(t().headroom)}</span><span>${rb.headroomBtuh.toFixed(0)} BTU/h</span></div>
|
|
</div>
|
|
<div class="mt-2 space-y-1">
|
|
<div class="h-2.5 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden flex">
|
|
<div class="h-full bg-amber-400" style="width: ${internalPct.toFixed(1)}%" title="${esc(t().internalGains)}"></div>
|
|
<div class="h-full bg-orange-400" style="width: ${solarPct.toFixed(1)}%" title="${esc(t().solarGain)}"></div>
|
|
<div class="h-full bg-rose-400" style="width: ${ventPct.toFixed(1)}%" title="${esc(t().ventGain)}"></div>
|
|
</div>
|
|
<div class="h-1.5 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
|
|
<div class="h-full rounded-full bg-blue-400" style="width: ${capPct.toFixed(1)}%"></div>
|
|
</div>
|
|
<div class="flex gap-2 text-xs text-gray-400 flex-wrap">
|
|
<span class="flex items-center gap-1"><span class="inline-block w-1.5 h-1.5 rounded-full bg-amber-400"></span>${esc(t().internalGains)}</span>
|
|
<span class="flex items-center gap-1"><span class="inline-block w-1.5 h-1.5 rounded-full bg-orange-400"></span>${esc(t().solarGain)}</span>
|
|
<span class="flex items-center gap-1"><span class="inline-block w-1.5 h-1.5 rounded-full bg-rose-400"></span>${esc(t().ventGain)}</span>
|
|
<span class="flex items-center gap-1"><span class="inline-block w-1.5 h-1.5 rounded-full bg-blue-400"></span>${esc(t().acCapacity)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
}
|
|
|
|
// Care checklist
|
|
if (data.careChecklist && data.careChecklist.length > 0) {
|
|
show("care-section");
|
|
$("care-checklist").innerHTML = data.careChecklist.map(item => `
|
|
<li class="flex items-start gap-2">
|
|
<input type="checkbox" class="mt-1 rounded">
|
|
<span class="text-sm">${esc(item)}</span>
|
|
</li>
|
|
`).join("");
|
|
}
|
|
|
|
// Fade in LLM skeleton
|
|
requestAnimationFrame(() => $("llm-summary").classList.remove("opacity-0"));
|
|
}
|
|
|
|
function formatHourRange(hours) {
|
|
if (hours.length === 0) return "";
|
|
if (hours.length === 1) return String(hours[0]).padStart(2, '0') + ":00";
|
|
|
|
const ranges = [];
|
|
let start = hours[0], end = hours[0];
|
|
for (let i = 1; i < hours.length; i++) {
|
|
if (hours[i] === end + 1) {
|
|
end = hours[i];
|
|
} else {
|
|
ranges.push(start === end
|
|
? String(start).padStart(2, '0') + ":00"
|
|
: String(start).padStart(2, '0') + ":00\u2013" + String(end).padStart(2, '0') + ":00");
|
|
start = end = hours[i];
|
|
}
|
|
}
|
|
ranges.push(start === end
|
|
? String(start).padStart(2, '0') + ":00"
|
|
: String(start).padStart(2, '0') + ":00\u2013" + String(end).padStart(2, '0') + ":00");
|
|
return ranges.join(", ");
|
|
}
|
|
|
|
// ========== AI Actions ==========
|
|
function renderAIActions(actions) {
|
|
const groups = {};
|
|
actions.forEach(a => {
|
|
const cat = a.category || "other";
|
|
if (!groups[cat]) groups[cat] = [];
|
|
groups[cat].push(a);
|
|
});
|
|
|
|
const categoryOrder = ["shading", "ventilation", "internal_gains", "ac_strategy", "hydration", "care"];
|
|
const sortedCats = Object.keys(groups).sort((a, b) => {
|
|
const ia = categoryOrder.indexOf(a);
|
|
const ib = categoryOrder.indexOf(b);
|
|
return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
|
|
});
|
|
|
|
const html = sortedCats.map(cat => {
|
|
const icon = categoryIcons[cat] || '';
|
|
const label = (t().category && t().category[cat]) || cat;
|
|
const cards = groups[cat].map(a => {
|
|
const hours = (a.hours || []).sort((x, y) => x - y);
|
|
const hourRange = formatHourRange(hours);
|
|
const ec = effortColors[a.effort] || effortColors.none;
|
|
const ic = impactColors[a.impact] || impactColors.low;
|
|
return `
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm transition-all duration-200 hover:shadow-md">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="font-medium text-sm">${esc(a.name)}</div>
|
|
<div class="text-xs text-gray-400 whitespace-nowrap">${hourRange}</div>
|
|
</div>
|
|
${a.description ? `<div class="text-xs text-gray-500 dark:text-gray-400 mt-1">${esc(a.description)}</div>` : ''}
|
|
<div class="flex gap-2 mt-2">
|
|
<span class="text-xs px-2 py-0.5 rounded-full ${ec}">${esc(t().effort)}: ${esc(a.effort || 'none')}</span>
|
|
<span class="text-xs px-2 py-0.5 rounded-full ${ic}">${esc(t().impact)}: ${esc(a.impact || 'low')}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
|
|
return `
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2 text-gray-600 dark:text-gray-300">
|
|
${icon}
|
|
<span class="font-medium text-sm">${esc(label)}</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 xl:grid-cols-2 gap-2">${cards}</div>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
|
|
hide("actions-loading");
|
|
show("actions-section");
|
|
const badge = $("actions-badge");
|
|
if (badge) {
|
|
badge.textContent = t().aiActions || "AI";
|
|
badge.classList.remove("hidden");
|
|
}
|
|
$("actions-list").innerHTML = html;
|
|
}
|
|
|
|
// ========== Heatmap Timeline ==========
|
|
const coolModeColors = {
|
|
comfort: "#6ee7b7",
|
|
ventilate: "#38bdf8",
|
|
ac: "#4ade80",
|
|
overloaded: "#f87171",
|
|
sealed: "#a78bfa",
|
|
};
|
|
|
|
const categoryColors = {
|
|
shading: "#f59e0b",
|
|
ventilation: "#38bdf8",
|
|
internal_gains: "#a78bfa",
|
|
ac_strategy: "#4ade80",
|
|
hydration: "#60a5fa",
|
|
care: "#fb7185",
|
|
};
|
|
|
|
const coolModeLabels = () => ({
|
|
comfort: t().coolComfort || "No cooling needed",
|
|
ventilate: t().coolVentilate || "Open windows",
|
|
ac: t().coolAC || "AC cooling",
|
|
overloaded: t().coolOverloaded || "AC overloaded",
|
|
sealed: t().coolSealed || "Keep sealed",
|
|
});
|
|
|
|
function renderTimelineHeatmap(timeline, timezone, dashDate) {
|
|
_currentTimeline = timeline;
|
|
_currentTimezone = timezone || null;
|
|
_currentDashDate = dashDate || null;
|
|
const container = $("timeline-chart");
|
|
const tooltip = $("timeline-tooltip");
|
|
const labels = coolModeLabels();
|
|
|
|
// Determine current hour in profile timezone (only if dashboard date is today)
|
|
let currentHour = -1;
|
|
if (timezone && dashDate) {
|
|
try {
|
|
const now = new Date();
|
|
const todayInTz = now.toLocaleDateString("en-CA", { timeZone: timezone });
|
|
if (todayInTz === dashDate) {
|
|
const hourStr = now.toLocaleString("en-US", { timeZone: timezone, hour12: false, hour: "2-digit" });
|
|
currentHour = parseInt(hourStr, 10);
|
|
}
|
|
} catch (_) { /* invalid timezone, skip */ }
|
|
}
|
|
|
|
// Hour labels (every 3h) + current hour marker
|
|
const hourLabelsHtml = timeline.map(s => {
|
|
const isCurrent = s.hour === currentHour;
|
|
if (isCurrent) return `<div class="text-center text-xs font-bold text-orange-500">▼</div>`;
|
|
if (s.hour % 3 !== 0) return `<div></div>`;
|
|
return `<div class="text-center text-xs text-gray-400">${String(s.hour).padStart(2, "0")}</div>`;
|
|
}).join("");
|
|
|
|
// Temp cells
|
|
const tempCellsHtml = timeline.map((s, i) => {
|
|
const color = tempColorHex(s.tempC);
|
|
const textColor = (s.tempC >= 35 || s.tempC < 0) ? "white" : "#1f2937";
|
|
const isCurrent = s.hour === currentHour;
|
|
const ringStyle = isCurrent ? "outline:2px solid white;outline-offset:-2px;box-shadow:0 0 0 3px rgba(249,115,22,0.6);" : "";
|
|
return `<div class="hm-temp-cell flex items-center justify-center rounded-sm cursor-pointer" data-idx="${i}" style="background:${color};color:${textColor};height:48px;${ringStyle}">`
|
|
+ `<span class="hm-temp-label hidden sm:inline text-xs font-medium">${Math.round(s.tempC)}</span></div>`;
|
|
}).join("");
|
|
|
|
// Cooling mode cells
|
|
const coolCellsHtml = timeline.map(s => {
|
|
const mode = s.coolMode || "ac";
|
|
const color = coolModeColors[mode] || "#d1d5db";
|
|
return `<div class="rounded-sm" style="background:${color};height:14px"></div>`;
|
|
}).join("");
|
|
|
|
container.innerHTML = `
|
|
<div class="grid gap-px" style="grid-template-columns:repeat(${timeline.length},minmax(0,1fr))">
|
|
${hourLabelsHtml}
|
|
</div>
|
|
<div class="grid gap-px mt-1" style="grid-template-columns:repeat(${timeline.length},minmax(0,1fr))">
|
|
${tempCellsHtml}
|
|
</div>
|
|
<div class="grid gap-px mt-px" style="grid-template-columns:repeat(${timeline.length},minmax(0,1fr))">
|
|
${coolCellsHtml}
|
|
</div>
|
|
`;
|
|
|
|
// Tooltip handlers
|
|
container.querySelectorAll(".hm-temp-cell").forEach(cell => {
|
|
const handler = () => {
|
|
const idx = parseInt(cell.dataset.idx);
|
|
const slot = timeline[idx];
|
|
const modeLabel = labels[slot.coolMode] || slot.coolMode || "";
|
|
let tooltipHtml = `
|
|
<div class="font-medium mb-1">${slot.hourStr}</div>
|
|
<div>${slot.tempC.toFixed(1)}\u00b0C \u00b7 ${(slot.humidityPct || 0).toFixed(0)}% RH${slot.pressureHpa ? ` \u00b7 ${slot.pressureHpa.toFixed(0)} hPa` : ""}</div>
|
|
<div class="capitalize">${slot.budgetStatus} \u00b7 ${esc(modeLabel)}</div>
|
|
`;
|
|
const hourActions = _hourActionMap && _hourActionMap[slot.hour];
|
|
if (hourActions && hourActions.length > 0) {
|
|
const catLabels = (t().category) || {};
|
|
const maxShow = 4;
|
|
const shown = hourActions.slice(0, maxShow);
|
|
const remaining = hourActions.length - maxShow;
|
|
tooltipHtml += `<div class="border-t border-gray-600 mt-1.5 pt-1.5">`;
|
|
shown.forEach(a => {
|
|
const color = categoryColors[a.category] || "#9ca3af";
|
|
tooltipHtml += `<div class="flex items-center gap-1.5"><span class="inline-block rounded-full flex-shrink-0" style="width:5px;height:5px;background:${color}"></span><span>${esc(a.name)}</span></div>`;
|
|
});
|
|
if (remaining > 0) {
|
|
tooltipHtml += `<div class="text-gray-400">+${remaining} more</div>`;
|
|
}
|
|
tooltipHtml += `</div>`;
|
|
}
|
|
tooltip.innerHTML = tooltipHtml;
|
|
const rect = cell.getBoundingClientRect();
|
|
const parentRect = tooltip.parentElement.getBoundingClientRect();
|
|
tooltip.style.left = (rect.left - parentRect.left + rect.width / 2 - 60) + "px";
|
|
tooltip.style.top = (rect.top - parentRect.top - tooltip.offsetHeight - 8) + "px";
|
|
tooltip.classList.remove("hidden");
|
|
};
|
|
cell.addEventListener("mouseenter", handler);
|
|
cell.addEventListener("click", handler);
|
|
});
|
|
container.addEventListener("mouseleave", () => tooltip.classList.add("hidden"));
|
|
|
|
// Legend (initial render without AI data)
|
|
renderTimelineLegend(timeline, _hourActionMap);
|
|
}
|
|
|
|
// ========== AI Timeline Annotations ==========
|
|
function buildHourActionMap(actions) {
|
|
const map = {};
|
|
(actions || []).forEach(a => {
|
|
(a.hours || []).forEach(h => {
|
|
if (!map[h]) map[h] = [];
|
|
map[h].push(a);
|
|
});
|
|
});
|
|
return Object.keys(map).length > 0 ? map : null;
|
|
}
|
|
|
|
function renderTimelineLegend(timeline, hourActionMap) {
|
|
const legend = $("cooling-legend");
|
|
if (!legend) return;
|
|
|
|
const labels = coolModeLabels();
|
|
const ts = t();
|
|
|
|
// Temperature scale
|
|
const tempSteps = [
|
|
{ label: "<0", color: "#6366f1" },
|
|
{ label: "0", color: "#93c5fd" },
|
|
{ label: "10", color: "#bfdbfe" },
|
|
{ label: "20", color: "#bbf7d0" },
|
|
{ label: "25", color: "#fde68a" },
|
|
{ label: "30", color: "#facc15" },
|
|
{ label: "35", color: "#f97316" },
|
|
{ label: "40+", color: "#dc2626" },
|
|
];
|
|
let html = `<div class="flex flex-wrap items-center gap-x-3 gap-y-1">`;
|
|
html += `<span class="font-medium text-gray-500 dark:text-gray-300">${esc(ts.legendTemp || "Temperature")}</span>`;
|
|
html += tempSteps.map(s =>
|
|
`<span class="flex items-center gap-1"><span class="inline-block w-3 h-3 rounded-sm" style="background:${s.color}"></span>${s.label}</span>`
|
|
).join("");
|
|
html += `</div>`;
|
|
|
|
// Cooling modes
|
|
const usedModes = [...new Set((timeline || []).map(s => s.coolMode || "ac"))];
|
|
html += `<div class="flex flex-wrap items-center gap-x-3 gap-y-1">`;
|
|
html += `<span class="font-medium text-gray-500 dark:text-gray-300">${esc(ts.legendCooling || "Cooling")}</span>`;
|
|
html += usedModes.map(mode => {
|
|
const color = coolModeColors[mode] || "#d1d5db";
|
|
const lbl = labels[mode] || mode;
|
|
return `<span class="flex items-center gap-1"><span class="inline-block w-2 h-2 rounded-full" style="background:${color}"></span>${esc(lbl)}</span>`;
|
|
}).join("");
|
|
html += `</div>`;
|
|
|
|
// AI categories (only when hourActionMap has entries)
|
|
if (hourActionMap) {
|
|
const usedCats = new Set();
|
|
Object.values(hourActionMap).forEach(actions => {
|
|
actions.forEach(a => { if (a.category) usedCats.add(a.category); });
|
|
});
|
|
if (usedCats.size > 0) {
|
|
const catLabels = ts.category || {};
|
|
html += `<div class="flex flex-wrap items-center gap-x-3 gap-y-1">`;
|
|
html += `<span class="font-medium text-gray-500 dark:text-gray-300">${esc(ts.legendAI || "AI Actions")}</span>`;
|
|
const categoryOrder = ["shading", "ventilation", "internal_gains", "ac_strategy", "hydration", "care"];
|
|
const sorted = [...usedCats].sort((a, b) => {
|
|
const ia = categoryOrder.indexOf(a);
|
|
const ib = categoryOrder.indexOf(b);
|
|
return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
|
|
});
|
|
html += sorted.map(cat => {
|
|
const color = categoryColors[cat] || "#9ca3af";
|
|
const lbl = catLabels[cat] || cat;
|
|
return `<span class="flex items-center gap-1"><span class="inline-block w-2 h-2 rounded-full" style="background:${color}"></span>${esc(lbl)}</span>`;
|
|
}).join("");
|
|
html += `</div>`;
|
|
}
|
|
}
|
|
|
|
legend.innerHTML = html;
|
|
}
|
|
|
|
function renderTimelineAnnotations(timeline, hourActionMap) {
|
|
if (!hourActionMap || !timeline) return;
|
|
const container = $("timeline-chart");
|
|
if (!container) return;
|
|
|
|
// Remove previous annotation row if any
|
|
const prev = container.querySelector(".hm-ai-row");
|
|
if (prev) prev.remove();
|
|
|
|
const cellsHtml = timeline.map(s => {
|
|
const actions = hourActionMap[s.hour];
|
|
if (!actions || actions.length === 0) {
|
|
return `<div style="height:18px"></div>`;
|
|
}
|
|
const cats = [...new Set(actions.map(a => a.category).filter(Boolean))];
|
|
const dots = cats.map(cat => {
|
|
const color = categoryColors[cat] || "#9ca3af";
|
|
return `<span class="inline-block rounded-full" style="width:5px;height:5px;background:${color}"></span>`;
|
|
}).join("");
|
|
return `<div class="flex items-center justify-center gap-px flex-wrap" style="height:18px">${dots}</div>`;
|
|
}).join("");
|
|
|
|
const row = document.createElement("div");
|
|
row.className = "hm-ai-row grid gap-px mt-px";
|
|
row.style.gridTemplateColumns = `repeat(${timeline.length},minmax(0,1fr))`;
|
|
row.innerHTML = cellsHtml;
|
|
container.appendChild(row);
|
|
}
|
|
|
|
// ========== Forecast Refresh ==========
|
|
async function refreshForecast() {
|
|
const btn = $("refresh-forecast-btn");
|
|
const icon = $("refresh-icon");
|
|
if (!btn) return;
|
|
|
|
btn.disabled = true;
|
|
icon.classList.add("animate-spin");
|
|
|
|
try {
|
|
const profileId = await getActiveProfileId();
|
|
if (!profileId) return;
|
|
|
|
await fetchForecastForProfile(profileId);
|
|
|
|
// Reset LLM/AI state so loadDashboard triggers fresh calls
|
|
_hourActionMap = null;
|
|
_currentTimeline = null;
|
|
_currentTimezone = null;
|
|
_currentDashDate = null;
|
|
_qsInitialized = false;
|
|
|
|
await loadDashboard();
|
|
} catch (err) {
|
|
console.error("Forecast refresh error:", err);
|
|
} finally {
|
|
btn.disabled = false;
|
|
icon.classList.remove("animate-spin");
|
|
}
|
|
}
|
|
|
|
// Attach handler after DOM is ready
|
|
const refreshBtn = $("refresh-forecast-btn");
|
|
if (refreshBtn) refreshBtn.addEventListener("click", refreshForecast);
|
|
|
|
// ========== Quick Settings ==========
|
|
let _qsInitialized = false;
|
|
async function initQuickSettings() {
|
|
if (_qsInitialized) return;
|
|
_qsInitialized = true;
|
|
|
|
const toggle = $("qs-toggle");
|
|
const body = $("qs-body");
|
|
const chevron = $("qs-chevron");
|
|
if (!toggle || !body) return;
|
|
|
|
toggle.addEventListener("click", () => {
|
|
body.classList.toggle("hidden");
|
|
chevron.style.transform = body.classList.contains("hidden") ? "" : "rotate(180deg)";
|
|
});
|
|
|
|
// Load current values from first room
|
|
try {
|
|
const profileId = await getActiveProfileId();
|
|
if (profileId) {
|
|
const rooms = await dbGetByIndex("rooms", "profileId", profileId);
|
|
if (rooms.length > 0) {
|
|
const r = rooms[0];
|
|
if (r.indoorTempC) $("qs-indoor-temp").value = r.indoorTempC;
|
|
if (r.indoorHumidityPct) $("qs-indoor-humidity").value = r.indoorHumidityPct;
|
|
}
|
|
}
|
|
} catch (_) { /* ignore */ }
|
|
|
|
$("qs-apply").addEventListener("click", async () => {
|
|
const tempVal = parseFloat($("qs-indoor-temp").value);
|
|
const humVal = parseFloat($("qs-indoor-humidity").value);
|
|
try {
|
|
const profileId = await getActiveProfileId();
|
|
if (!profileId) return;
|
|
const rooms = await dbGetByIndex("rooms", "profileId", profileId);
|
|
for (const room of rooms) {
|
|
if (!isNaN(tempVal) && tempVal >= 15 && tempVal <= 35) room.indoorTempC = tempVal;
|
|
if (!isNaN(humVal) && humVal >= 20 && humVal <= 95) {
|
|
room.indoorHumidityPct = humVal;
|
|
} else {
|
|
delete room.indoorHumidityPct;
|
|
}
|
|
await dbPut("rooms", room);
|
|
}
|
|
_qsInitialized = false;
|
|
_hourActionMap = null;
|
|
_currentTimeline = null;
|
|
_currentTimezone = null;
|
|
_currentDashDate = null;
|
|
loadDashboard();
|
|
} catch (e) {
|
|
console.error("Quick settings apply error:", e);
|
|
}
|
|
});
|
|
}
|
|
|
|
function esc(s) {
|
|
if (!s) return "";
|
|
const div = document.createElement("div");
|
|
div.textContent = s;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Init
|
|
loadDashboard();
|
|
})();
|