gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

5.0.3

Browse Source 
The Week Ahead - Best Times Out
This commit is contained in:
fraxle
2026-08-09 11:24:26 +01:00
parent dace65b750
commit 1083023165
7 changed files with 284 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+17 -9
View File
@@ -29,7 +29,7 @@ import {
SKIN_TYPES, sunburnMinutes, burnLabel,
VEHICLE_TYPES, VEHICLE_SPEEDS, BUILDING_TYPES,
FUR_COLORS,
confidenceBand, moonGlyph, skyFillForElev,
confidenceBand, moonGlyph, skyFillForElev, titleCaseText, scoreFillColor,
} from './utils.js';
import { SkyScope, WindVane, CloudIcon, ScopeReticle, PrecipIcon, CustomSelect, VentPill, RowStepper } from './components.js';
import { getCellTagEvents, getUpcomingEvents, PRIORITY_WEATHER_IDS } from './events.js';
@@ -40,7 +40,7 @@ import { ConfigPanel } from './components/ConfigPanel.js';
import { WelcomeModal } from './components/WelcomeModal.js';
import { RestoreModal } from './components/RestoreModal.js';
import { buildColumnDefs, airTempRgb, petAirTempRgb } from './tableColumns.js';
import { computeWhyFeelsLike, computeGlanceSummary, computeBestDay } from './compute.js';
import { computeWhyFeelsLike, computeGlanceSummary, computeBestDay, bestDaysLabel } from './compute.js';
import { solarElevationDeg } from './physics.js';
import { exportDayXls } from './export.js';
@@ -534,7 +534,7 @@ export function UTCIForecast() {
);
// Week-scoped, so it is kept out of the day-scoped "At a glance" panel and
// rendered in its own "The Week Ahead" box beneath it.
const weekAhead = computeBestDay(days, activeProfile, outdoorsVariant, nowLocalISO);
const weekAhead = computeBestDay(days, nowLocalISO);
// Human-readable date for the "Day at a glance" heading, e.g. "Mon 2nd June 2026".
const glanceDate = (() => {
@@ -1582,8 +1582,8 @@ export function UTCIForecast() {
const renderRow = ({ icon, label, value, alert, grp }, keyPrefix = '') => html`
<div class=${`insight-row${alert ? ' insight-row--alert' : ''}${grp ? ` insight-row--${grp}` : ''}`} key=${`${keyPrefix}${label}`}>
<span class="insight-icon">${icon}</span>
<span class="insight-label">${label}</span>
<span class="insight-value">${value}</span>
<span class="insight-label">${titleCaseText(label)}</span>
<span class="insight-value">${titleCaseText(value)}</span>
</div>`;
// Only the outdoors profile reorders items around the heat block
// (it has a 'Peak felt temp' anchor). Other profiles render in order.
@@ -1612,11 +1612,19 @@ export function UTCIForecast() {
${weekAhead.length > 0 && html`
<div class="insight-panel insight-panel--week">
<div class="insight-panel-title">The Week Ahead</div>
${weekAhead.map(({ icon, label, value, grp }) => html`
<div class=${`insight-row${grp ? ` insight-row--${grp}` : ''}`} key=${label}>
<div class="insight-panel-sub">${titleCaseText(bestDaysLabel(activeProfile, outdoorsVariant))}</div>
${weekAhead.map(({ icon, label, value, score }) => html`
<div class="insight-row" key=${label}>
<span class="insight-icon">${icon}</span>
<span class="insight-label">${label}</span>
<span class="insight-value">${value}</span>
<span class="insight-label">${titleCaseText(label)}</span>
<span class="insight-value">${titleCaseText(value)}</span>
${score != null && html`
<span class="week-score" title=${`${score}% of an ideal day out — longer comfortable stretches and temperatures nearer 20 °C score higher`}>
<span class="week-score__track">
<span class="week-score__fill" style=${`width:${score}%;background:${scoreFillColor(score)}`}></span>
</span>
<span class="week-score__pct">${score}%</span>
</span>`}
</div>`)}
</div>`}
${visible.length > 0 && html`