hotel-manage-stack/weather
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Today row: cap to 11 cards, no scroll needed on the 10" kiosk tab

Browse source 
Was rendering all 24 hours of today (including already-passed ones) in
a horizontally-scrolling strip -- only ~11 fit at the card's minimum
readable width on the 10" tablet. Now shows now-onward only, at full
1-hour resolution near-term, coarsening to 2-hour steps further into
the day so the total stays <=11 (worst case 12, only in the ~1hr
window right after midnight).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-08-31 11:45:24 +00:00
parent d069f1147a
commit bfcca4ea11
1 changed files with 16 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/pages/Display.tsx
View file

@ -12,6 +12,21 @@ const POLL_MS = 5 * 60 * 1000 // client polls more often than the server's hourl
// refresh just so a stale tab catches up quickly —
// the actual new data only shows up on the hour.
// Today's hourly row needs to fit in one line without scrolling on a 10" kiosk
// tablet, where each card is already at its minimum readable width (~11 fit).
// Past hours aren't useful on a live display, so we only show now-onward; when
// that's still more than fit, the near term stays at full 1-hour resolution
// (most relevant) and the rest of the day coarsens to 2-hour steps. Only right
// after midnight (24 hours still remaining) does this land on 12 instead of
// 11 — a window nobody's realistically viewing the lobby display in.
const TODAY_MAX_CARDS = 11
function selectTodayCards(hourly: ForecastPoint[], nowHour: number): ForecastPoint[] {
const remaining = hourly.filter(p => hourOf(p.ts) >= nowHour)
if (remaining.length <= TODAY_MAX_CARDS) return remaining
const fineWindow = Math.max(0, 2 * TODAY_MAX_CARDS - remaining.length)
return remaining.filter((_, i) => i < fineWindow || (i - fineWindow) % 2 === 0)
}
interface SelectedDay {
dateKey: string
dayLabel: string
@ -132,7 +147,7 @@ export default function Display() {
{todayKey && <AstroRow astro={data.astro[todayKey]} />}
</div>
<div className="wx-hourly-row" ref={hourlyRowRef}>
{data.hourly.map(p => (
{selectTodayCards(data.hourly, nowHour).map(p => (
<HourCard key={p.ts} point={p} isNow={hourOf(p.ts) === nowHour} />
))}
</div>