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

3.6

Browse Source 
New hour selection
Animated UI elements
This commit is contained in:
fraxle
2026-07-30 23:09:42 +01:00
parent e32a774c1e
commit 2869694634
5 changed files with 165 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+5 -9
View File
@@ -31,7 +31,7 @@ import {
FUR_COLORS,
confidenceBand, moonGlyph, skyFillForElev,
} from './utils.js';
import { SkyScope, WindVane, CloudIcon, ScopeReticle, PrecipIcon, CustomSelect, VentPill } from './components.js';
import { SkyScope, WindVane, CloudIcon, ScopeReticle, PrecipIcon, CustomSelect, VentPill, RowStepper } from './components.js';
import { getCellTagEvents, getUpcomingEvents } from './events.js';
import { POLLEN_TYPES, COL_DESCRIPTIONS, UTCI_ENVIRONMENTS, FILTER_PROFILES, variantIcons, deriveProfileMain } from './config.js';
import { useAppState } from './hooks/useAppState.js';
@@ -1103,10 +1103,10 @@ export function UTCIForecast() {
`;
})()}
</div>
<div key=${forecastView} class=${'col-toggles-wrap' + (colTogglesOpen ? ' col-toggles-wrap--open' : '')}>
<div class=${'col-toggles' + (colTogglesOpen ? ' col-toggles--open' : '')}>
<span class="fvt-interval">
<span class="fvt-interval-label">Hours:</span>
${[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=${() => setTableInterval(n)}>${n}h</button>`)}
<${RowStepper} value=${tableInterval} onChange=${setTableInterval} />
</span>
<div class="col-toggles-body">
${isPro && html`<${Fragment}>
@@ -1157,6 +1157,7 @@ export function UTCIForecast() {
</span>
</div>
</div>
</div>
<div class="forecast-simple-wrap">
<div class="forecast-simple-scroll" ref=${fscScrollRef}>
@@ -1291,12 +1292,7 @@ export function UTCIForecast() {
<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>`)}
<${RowStepper} value=${tableInterval} onChange=${setTableInterval} showLabel=${false} />
</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>`}