// ------------------------------------------------------------------------ // components/DayTabs.js - Day-tab strip, pro-prompt card, confidence // band bar, and filter-profile row for the UTCIForecast app. // // Extracted from app.js to keep the main component under the AI edit // safe-zone. All state lives in useAppState - this component is purely // presentational and receives everything it needs as props. // // Props: // days - array of day objects from buildHourlyRows // selectedDay - index of the active day tab // setSelectedDay - setter for selectedDay // isPro - boolean Pro status // FREE_DAYS - number of free days // proPromptDay - index of locked day that was clicked // setProPromptDay - setter for proPromptDay // proPromptSource - string key for upsell copy // setProPromptSource - setter for proPromptSource // activeProfile - current filter profile key // activateProfile - function to switch profile // activeCols - effective column set for current profile // visibleCols - object of col-key -> boolean visibility // activityOptions - dropdown options for Activities selector // placeOptions - dropdown options for Places selector // workOptions - dropdown options for Work selector // activityValue - current activity dropdown value // activityLabel - current activity dropdown label // placeValue - current place dropdown value // placeLabel - current place dropdown label // workValue - current work dropdown value // workLabel - current work dropdown label // outdoorsVariant - current outdoors sub-variant key // setOutdoorsVariantAndSave - setter that also persists to localStorage // setActiveProfile - raw setter for activeProfile // setVisibleCols - raw setter for visibleCols // setIndoorMode - setter for indoorMode // setIndoorManaged - setter for indoorManaged // dayTabsRef - ref for the scrollable tab strip element // canScrollLeft - boolean for left-fade chevron // canScrollRight - boolean for right-fade chevron // scrollDayTabs - function(dir) to scroll strip left/right // ------------------------------------------------------------------------ import { h, Fragment } from '../../vendor/preact.js'; import htm from '../../vendor/htm.js'; import { confidenceBand } from '../utils.js'; import { FREE_DAYS, FILTER_PROFILES, OUTDOORS_VARIANTS, profileButtonOrder, activityVariantKeys, placeVariantKeys, workVariantKeys } from '../config.js'; import { CloudIcon, PrecipIcon, CustomSelect } from '../components.js'; const html = htm.bind(h); // Converts a base RGB colour into the same 135° gradient used by the thermal // bands legend: 50% white blend to pastelise, then a subtle light→dark sweep. function weatherGradient(r, g, b) { const blend = (c) => Math.round(c + (255 - c) * 0.68); const [mr, mg, mb] = [blend(r), blend(g), blend(b)]; const lighten = (c) => Math.min(255, Math.round(c + (255 - c) * 0.30)); const darken = (c) => Math.round(c * 0.96); const light = `rgb(${lighten(mr)},${lighten(mg)},${lighten(mb)})`; const mid = `rgb(${mr},${mg},${mb})`; const dark = `rgb(${darken(mr)},${darken(mg)},${darken(mb)})`; return `linear-gradient(135deg, ${light} 0%, ${mid} 60%, ${dark} 100%)`; } export function DayTabs({ days, selectedDay, setSelectedDay, isPro, proPromptDay, setProPromptDay, proPromptSource, setProPromptSource, activeProfile, activateProfile, activeCols, visibleCols, activityOptions, placeOptions, workOptions, activityValue, activityLabel, placeValue, placeLabel, workValue, workLabel, outdoorsVariant, setOutdoorsVariantAndSave, setActiveProfile, setVisibleCols, setIndoorMode, setIndoorManaged, setBuildingType, dayTabsRef, canScrollLeft, canScrollRight, scrollDayTabs, }) { return html` <${Fragment}>
${days.map((d, i) => { const band = confidenceBand(i); const locked = !isPro && i >= FREE_DAYS; const isActive = i === selectedDay; const dDate = new Date(d.key + 'T00:00Z'); const dayName = i === 0 ? 'Today' : i === 1 ? 'Tomorrow' : dDate.toLocaleDateString('en-GB', { weekday: 'short', timeZone: 'UTC' }); const utcipVals = d.rows.map(r => r.utciAdj).filter(v => isFinite(v)); const dayHi = utcipVals.length ? Math.round(Math.max(...utcipVals)) : null; const dayLo = utcipVals.length ? Math.round(Math.min(...utcipVals)) : null; // Day-tab weather icon - use daytime rows where available const dayRows = d.rows.filter(r => r.elev > 0); const repRows = dayRows.length > 0 ? dayRows : d.rows; const dayPrecip = repRows.reduce((s, r) => s + (r.precip || 0), 0); const daySnow = repRows.reduce((s, r) => s + (r.snow || 0), 0); const catCounts = {}; repRows.forEach(r => { if (r.cloudCat) catCounts[r.cloudCat] = (catCounts[r.cloudCat] || 0) + 1; }); const modalCloudCat = Object.keys(catCounts).sort((a, b) => catCounts[b] - catCounts[a])[0] || 'clear'; const midRow = repRows[Math.floor(repRows.length / 2)]; const repElev = midRow ? midRow.elev : 45; const repDt = midRow ? midRow.dt : dDate; const showPrecip = dayPrecip >= 0.3 || daySnow >= 0.1; // Base RGB for each weather condition — pastelised by weatherGradient() const [wR, wG, wB] = (daySnow >= 0.1) ? [100, 160, 230] : (dayHi > 38) ? [210, 60, 30] : showPrecip ? [ 50, 120, 200] : (dayHi > 32) ? [220, 110, 30] : (dayHi > 26) ? [220, 180, 30] : modalCloudCat === 'overcast' ? [100, 110, 130] : (dayHi !== null && dayHi < 9) ? [ 60, 110, 180] : modalCloudCat === 'scattered' ? [160, 150, 130] : modalCloudCat === 'wispy' ? [200, 180, 130] : [220, 190, 50]; const wBg = weatherGradient(wR, wG, wB); const wText = '#2a1d10'; return html` `; })}
${proPromptDay !== null && days[proPromptDay] && (() => { const promptDate = new Date(days[proPromptDay].key + 'T00:00Z'); const dayName = promptDate.toLocaleDateString('en-GB', { weekday: 'long', timeZone: 'UTC' }); const extraPromptCopy = { // Profile buttons 'profile:alltemps': { title: 'Temps is part of SunScope Extra', detail: 'Extra unlocks the temperature comparison view — air, soil, concrete, vehicle interior, and indoor estimates side by side in one place.', }, 'profile:showall': { title: 'Show All is part of SunScope Extra', detail: 'Extra unlocks the full column set — every data point SunScope tracks, visible at once for deep-dive analysis.', }, 'profile:custom': { title: 'Custom columns are part of SunScope Extra', detail: 'Extra lets you hand-pick exactly which columns appear. Mix and match air, dew, soil, UV, UTCI and more to build your perfect view.', }, // Places 'variant:construction': { title: 'Construction is part of SunScope Extra', detail: 'Extra adds the Construction profile with felt temperature, wind, rain probability, visibility, and air quality — the key factors for safe site working.', }, // Activities 'variant:hiking': { title: 'Hiking is part of SunScope Extra', detail: 'Extra adds the Hiking profile with felt temperature, UV index, burn time, wind direction, and visibility — essential for longer days on exposed terrain.', }, 'variant:photography': { title: 'Photography is part of SunScope Extra', detail: 'Extra adds the Photography profile with direct and diffuse radiation, sun elevation, cloud cover, and visibility — the conditions that make or break a shoot.', }, 'variant:sailing': { title: 'Sailing is part of SunScope Extra', detail: 'Extra adds the Sailing profile with wind speed and direction, dew point, UV, burn time, sun elevation, and visibility for on-water planning.', }, 'variant:wintersports': { title: 'Winter Sports is part of SunScope Extra', detail: 'Extra adds the Winter Sports profile with UV-A and UV-B, burn time, sun elevation, wind direction, and visibility for snow and slope conditions.', }, 'variant:naturist': { title: 'Naturist is part of SunScope Extra', detail: 'Extra adds the Naturist profile with full skin-exposure detail — UV, burn time, felt temperature, dew point, humidity, and air quality.', }, // Work 'variant:market': { title: 'Market Trading is part of SunScope Extra', detail: 'Extra adds the Market Trading profile with felt temperature, wind direction, rain probability, and visibility — the key factors for planning stall days.', }, 'variant:windowcleaning': { title: 'Window Cleaning is part of SunScope Extra', detail: 'Extra adds the Window Cleaning profile focused on wind speed and direction, rain, and felt temperature — the conditions that determine whether work is safe and worthwhile.', }, 'variant:office': { title: 'Office is part of SunScope Extra', detail: 'Extra adds the Office profile with solar gain, managed indoor temperature, humidity, air quality, and rain probability — useful for commute planning and building comfort.', }, }; const promptCopy = extraPromptCopy[proPromptSource] || { title: `${dayName}'s forecast is part of SunScope Extra`, detail: 'Extra unlocks the full 14-day forecast, customisable columns, specialist profiles, and an ad-free view.', }; return html`
🔒 ${promptCopy.title}
${promptCopy.detail}
£2 / month · cancel any time
Subscribe — £2/month Already subscribed? Restore access → Manage or cancel subscription →
`; })()} ${(() => { const band = confidenceBand(selectedDay); const isOutlook = selectedDay >= 7; return html`
Day ${selectedDay + 1} of 14 · Forecast clarity: ${band.label} ${isOutlook && html` forecast skill is reduced — treat hourly detail as trend, not precision `}
`; })()}
Profile: ${profileButtonOrder.slice(0, 3).map((key) => { const profile = FILTER_PROFILES[key]; const locked = profile.proOnly && !isPro; return html` `; })} <${CustomSelect} key="places" value=${placeValue} isOn=${activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)} noHide=${true} hideLabel="🌤️ Places" buttonLabel=${placeValue === 'off' ? '🌤️ Places' : `${placeLabel}`} options=${placeOptions} onChange=${(v) => { if (v === 'off') { activateProfile('basic'); return; } if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) { setProPromptSource(`variant:${v}`); setProPromptDay(0); return; } try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ } setActiveProfile('outdoors'); setOutdoorsVariantAndSave(v); setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols }); setIndoorMode('off'); setIndoorManaged(false); }} /> <${CustomSelect} key="activities" value=${activityValue} isOn=${activeProfile === 'outdoors' && activityVariantKeys.includes(outdoorsVariant)} noHide=${true} hideLabel="🎯 Activities" buttonLabel=${activityValue === 'off' ? '🎯 Activities' : ` ${activityLabel}`} options=${activityOptions} onChange=${(v) => { if (v === 'off') { activateProfile('basic'); return; } if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) { setProPromptSource(`variant:${v}`); setProPromptDay(0); return; } try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ } setActiveProfile('outdoors'); setOutdoorsVariantAndSave(v); setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols }); setIndoorMode('off'); setIndoorManaged(false); }} /> <${CustomSelect} key="work" value=${workValue} isOn=${activeProfile === 'farming' || (activeProfile === 'outdoors' && workVariantKeys.includes(outdoorsVariant))} noHide=${true} hideLabel="💼 Work" buttonLabel=${workValue === 'off' ? '💼 Work' : ` ${workLabel}`} options=${workOptions} onChange=${(v) => { if (v === 'off') { activateProfile('basic'); return; } if (v === 'farming') { activateProfile('farming'); return; } if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) { setProPromptSource(`variant:${v}`); setProPromptDay(0); return; } try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ } setActiveProfile('outdoors'); setOutdoorsVariantAndSave(v); setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols }); if (v === 'office') { setBuildingType('office'); setIndoorMode('on'); setIndoorManaged(false); } else { setIndoorMode('off'); setIndoorManaged(false); } }} /> ${profileButtonOrder.slice(3).map((key) => { const profile = FILTER_PROFILES[key]; const locked = profile.proOnly && !isPro; return html` `; })}
`; }