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

2.5

Browse Source 
Data table compact hours 1h, 2h, 3h or 4h. Calc max/min or average
This commit is contained in:
fraxle
2026-06-02 23:31:14 +01:00
parent 7b603867dd
commit 5a03077d9e
5 changed files with 147 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+18 -7
View File
@@ -56,6 +56,7 @@ export function UTCIForecast() {
visibleCols, setVisibleCols, toggleCol,
showDecimals, toggleShowDecimals,
showUnits, toggleShowUnits,
tableInterval, setTableInterval,
activityOptions, placeOptions, workOptions,
activityValue, activityLabel, placeValue, placeLabel, workValue, workLabel,
skinType, setSkinType,
@@ -79,7 +80,7 @@ export function UTCIForecast() {
closePopup, closeEventTagPopup,
tableCanScrollLeft, tableCanScrollRight, handleBodyScroll,
hourlyRows, days, utcOffsetMs,
visible, nowLocalISO, currentRow, currentCat,
visible, tableRows, nowLocalISO, currentRow, currentCat,
activeEvents, lensEvent, selectedDayEvents,
bannerIndex, bannerTransition, bannerPrevIndex,
bannerVisible, bannerStageRef,
@@ -690,7 +691,17 @@ export function UTCIForecast() {
<thead>
${groupLabelRow()}
<tr>
<th class="col-info-th" scope="col" onClick=${(e) => handleThClick('hour', e)} onMouseEnter=${(e) => handleThEnter('hour', e)} onMouseLeave=${handleThLeave}>Hour</th>
<th class="col-info-th" scope="col" onClick=${(e) => handleThClick('hour', e)} onMouseEnter=${(e) => handleThEnter('hour', e)} onMouseLeave=${handleThLeave}>
<span>Hour</span>
<span class="hour-interval" onClick=${(e) => e.stopPropagation()}>
${[1, 2, 3, 4].map(n => html`
<button key=${n} type="button"
class=${`hour-interval-btn${tableInterval === n ? ' on' : ''}`}
title=${n === 1 ? 'Every hour' : `Every ${n} hours`}
onClick=${(e) => { e.stopPropagation(); setTableInterval(n); }}
>${n}h</button>`)}
</span>
</th>
${visibleCols.utciP && html`<th class=${`col-info-th ${groupStart('utciP')} ${groupColor('utciP')}`} scope="col" onClick=${(e) => handleThClick('utciP', e)} onMouseEnter=${(e) => handleThEnter('utciP', e)} onMouseLeave=${handleThLeave}>SunSoak <span class="col-unit">°C felt</span>${UTCI_ENVIRONMENTS[utciEnv]?.shortLabel ? html`<span class="col-env-badge">${UTCI_ENVIRONMENTS[utciEnv].shortLabel}</span>` : null}</th>`}
${visibleCols.vehicleT && html`<th class=${`col-info-th ${groupStart('vehicleT')} ${groupColor('vehicleT')}`} scope="col" onClick=${(e) => handleThClick('vehicleT', e)} onMouseEnter=${(e) => handleThEnter('vehicleT', e)} onMouseLeave=${handleThLeave}>Vehicle <span class="col-unit">°C peak</span></th>`}
${indoorMode === 'on' && !indoorManaged && html`<th class=${`col-info-th ${groupStart('indoorT')} ${groupColor('indoorT')}`} scope="col" onClick=${(e) => handleThClick('indoorT', e)} onMouseEnter=${(e) => handleThEnter('indoorT', e)} onMouseLeave=${handleThLeave}>Indoors <span class="col-unit">°C est.</span></th>`}
@@ -728,12 +739,12 @@ export function UTCIForecast() {
<div class="utci-tbody-scroll" ref=${bodyScrollRef} onScroll=${handleBodyScroll}>
<table class="utci-table utci-table-body" ref=${bodyTableRef}>
<tbody>
${visible.map((r, rowIdx) => {
const rPrev = visible[rowIdx - 1];
const rNext = visible[rowIdx + 1];
${tableRows.map((r, rowIdx) => {
const rPrev = tableRows[rowIdx - 1];
const rNext = tableRows[rowIdx + 1];
const cat = utciCategory(r.utci);
const isNight = r.elev < 0;
const isNow = r.iso.slice(0, 13) === nowLocalISO;
const isNow = r.isoHours ? r.isoHours.includes(nowLocalISO) : r.iso.slice(0, 13) === nowLocalISO;
const delta = r.utci - r.Ta;
const adjCat = utciCategory(r.utciAdj);
// Converts a band hex colour to rgba at the given alpha — used to
@@ -932,7 +943,7 @@ export function UTCIForecast() {
</span>
</td>`}
${visibleCols.aqi && (() => {
const v = r.aqi;
const v = r.aqi == null ? null : Math.round(r.aqi);
const bg = v == null ? 'transparent'
: v < 20 ? 'rgba(80,180,100,0.15)'
: v < 40 ? 'rgba(140,200,100,0.13)'