2.1
New profile icons New profile higher position Updated Column toggle row Fixed text encoding
This commit is contained in:
fraxle
+14
-17
@@ -291,7 +291,7 @@ export function UTCIForecast() {
|
||||
utciEnvShort=${UTCI_ENVIRONMENTS[utciEnv]?.shortLabel ?? null}
|
||||
/>
|
||||
<div class="scope-env-row" data-env=${utciEnv}>
|
||||
<span class="scope-env-label">Surroundings</span>
|
||||
<span class="scope-env-label">Environment</span>
|
||||
<${CustomSelect}
|
||||
value=${utciEnv}
|
||||
isOn=${true}
|
||||
@@ -385,11 +385,9 @@ export function UTCIForecast() {
|
||||
/>`}
|
||||
|
||||
|
||||
${(isPro || activeCols['utciP'] || activeCols['burn'] || activeCols['vehicleT'] || activeCols['indoorT'] || activeCols['managedT'] || activeCols['pollen']) && html`
|
||||
<div class="col-toggles">
|
||||
<div class="col-toggles">
|
||||
<span class="col-toggles-label">Columns:</span>
|
||||
|
||||
${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['utciP']) : activeCols['utciP']) && html`
|
||||
${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['utciP']) : activeCols['utciP']) && html`
|
||||
<span class=${'col-toggle-group' + (visibleCols.utciP ? ' col-toggle-group--expanded' : '')}>
|
||||
<${CustomSelect}
|
||||
value=${utciEnv}
|
||||
@@ -541,19 +539,18 @@ ${(isPro ? (activeProfile === 'custom' || activeProfile === 'showall' || activeC
|
||||
${isPro && (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['direct']) && html`<button class=${`col-toggle grp-solar${visibleCols.direct ? ' on' : ''}`} onClick=${() => toggleCol('direct')}>Direct</button>`}
|
||||
${isPro && (activeProfile === 'custom' || activeProfile === 'showall' || activeCols['diffuse']) && html`<button class=${`col-toggle grp-solar${visibleCols.diffuse ? ' on' : ''}`} onClick=${() => toggleCol('diffuse')}>Diffuse</button>`}
|
||||
|
||||
</div>`}
|
||||
|
||||
<div class="display-options">
|
||||
<label class="display-opt">
|
||||
<input type="checkbox" checked=${showDecimals} onChange=${toggleShowDecimals} />
|
||||
Decimals
|
||||
</label>
|
||||
<label class="display-opt">
|
||||
<input type="checkbox" checked=${showUnits} onChange=${toggleShowUnits} />
|
||||
Units
|
||||
</label>
|
||||
<span class="col-toggles-display-opts">
|
||||
<label class="display-opt">
|
||||
<input type="checkbox" checked=${showDecimals} onChange=${toggleShowDecimals} />
|
||||
Decimals
|
||||
</label>
|
||||
<label class="display-opt">
|
||||
<input type="checkbox" checked=${showUnits} onChange=${toggleShowUnits} />
|
||||
Units
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class=${`utci-table-wrap${tableCanScrollLeft ? ' scroll-fade-left' : ''}${tableCanScrollRight ? ' scroll-fade-right' : ''}${showUnits ? '' : ' no-units'}`} ref=${tableWrapRef}>
|
||||
<span class="utci-scroll-chevron left" aria-hidden="true">‹</span>
|
||||
<span class="utci-scroll-chevron right" aria-hidden="true">›</span>
|
||||
|
||||
@@ -41,7 +41,7 @@ const MOON_TEX = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADD
|
||||
// groupedLeft - bool - fuse right side with a VentPill
|
||||
// isLastChild - bool - restore right border-radius when no sibling follows
|
||||
// -------------------------------------------------------------------
|
||||
export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel, buttonLabel, isOn, noHide, groupedLeft, isLastChild, grpClass }) {
|
||||
export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel, buttonLabel, isOn, noHide, groupedLeft, isLastChild, grpClass, sceneStyle, sceneContent }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [flipRight, setFlipRight] = useState(false);
|
||||
const wrapRef = useRef(null);
|
||||
@@ -94,6 +94,7 @@ export function CustomSelect({ value, options, onChange, hideLabel, hidingLabel,
|
||||
onClick=${(e) => { e.stopPropagation(); setOpen(o => !o); }}
|
||||
type="button"
|
||||
>
|
||||
${sceneStyle !== undefined && html`<span class="cs-btn-scene" style=${sceneStyle}>${sceneContent || ''}</span>`}
|
||||
<span class="cs-btn-overlay"></span>
|
||||
<span class="cs-btn-label">${btnLabel}</span>
|
||||
<span class="cs-arrow"></span>
|
||||
|
||||
+197
-119
@@ -42,6 +42,7 @@
|
||||
// ------------------------------------------------------------------------
|
||||
|
||||
import { h, Fragment } from '../../vendor/preact.js';
|
||||
import { useRef, useEffect } from '../../vendor/preact-hooks.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';
|
||||
@@ -79,9 +80,205 @@ export function DayTabs({
|
||||
setIndoorMode, setIndoorManaged, setBuildingType,
|
||||
dayTabsRef, canScrollLeft, canScrollRight, scrollDayTabs,
|
||||
}) {
|
||||
const profileScrollRef = useRef(null);
|
||||
const profileWrapRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = profileScrollRef.current;
|
||||
const wrap = profileWrapRef.current;
|
||||
if (!el) return;
|
||||
let isDown = false, startX = 0, startScroll = 0, hasDragged = false;
|
||||
|
||||
const updateFades = () => {
|
||||
if (!wrap) return;
|
||||
wrap.classList.toggle('fade-left', el.scrollLeft > 1);
|
||||
wrap.classList.toggle('fade-right', el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
|
||||
};
|
||||
|
||||
const onMouseDown = (e) => {
|
||||
if (!el.contains(e.target) || e.button !== 0) return;
|
||||
isDown = true; hasDragged = false;
|
||||
startX = e.clientX; startScroll = el.scrollLeft;
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.style.webkitUserSelect = 'none';
|
||||
};
|
||||
const onMouseMove = (e) => {
|
||||
if (!isDown) return;
|
||||
const dx = e.clientX - startX;
|
||||
if (Math.abs(dx) > 5) {
|
||||
hasDragged = true;
|
||||
el.style.cursor = 'grabbing';
|
||||
el.scrollLeft = startScroll - dx;
|
||||
}
|
||||
};
|
||||
const onMouseUp = () => {
|
||||
if (!isDown) return;
|
||||
isDown = false;
|
||||
el.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
document.body.style.webkitUserSelect = '';
|
||||
};
|
||||
const onClickCapture = (e) => {
|
||||
if (hasDragged) { e.stopPropagation(); e.preventDefault(); hasDragged = false; }
|
||||
};
|
||||
|
||||
el.addEventListener('scroll', updateFades);
|
||||
updateFades(); // set initial fade state
|
||||
|
||||
document.addEventListener('mousedown', onMouseDown);
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
el.addEventListener('click', onClickCapture, true);
|
||||
return () => {
|
||||
el.removeEventListener('scroll', updateFades);
|
||||
document.removeEventListener('mousedown', onMouseDown);
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
el.removeEventListener('click', onClickCapture, true);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return html`
|
||||
<${Fragment}>
|
||||
|
||||
<div class="filter-profiles">
|
||||
<div class="profile-scroll-wrap" ref=${profileWrapRef}>
|
||||
<div class="profile-scroll" ref=${profileScrollRef}>
|
||||
${profileButtonOrder.slice(0, 3).map((key) => {
|
||||
const profile = FILTER_PROFILES[key];
|
||||
const locked = profile.proOnly && !isPro;
|
||||
return html`
|
||||
<button
|
||||
key=${key}
|
||||
class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
|
||||
style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||||
title=${locked ? `🔒 ${profile.label} is part of SunScope Extra` : ''}
|
||||
onClick=${() => {
|
||||
if (locked) {
|
||||
setProPromptSource(`profile:${key}`);
|
||||
setProPromptDay(0);
|
||||
return;
|
||||
}
|
||||
activateProfile(key);
|
||||
}}
|
||||
>
|
||||
<span class="profile-btn-scene" style=${{ background: profile.scene }}>${profile.scene.includes('url(') ? null : profile.icon}</span>
|
||||
<span class="profile-btn-label">${profile.label}${locked ? ' 🔒' : ''}</span>
|
||||
</button>`;
|
||||
})}
|
||||
<span class="profile-divider" aria-hidden="true"></span>
|
||||
<${CustomSelect}
|
||||
key="places"
|
||||
value=${placeValue}
|
||||
isOn=${activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)}
|
||||
noHide=${true}
|
||||
hideLabel="Places"
|
||||
buttonLabel=${placeValue === 'off' ? 'Places' : `${placeLabel}`}
|
||||
grpClass="profile-card"
|
||||
sceneStyle=${{ background: placeValue !== 'off' && OUTDOORS_VARIANTS[placeValue]?.scene ? OUTDOORS_VARIANTS[placeValue].scene : "url('assets/images/profiles/places.png') center / cover no-repeat, linear-gradient(160deg,#98ccc0,#c4e4dc)" }}
|
||||
sceneContent=${null}
|
||||
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}`}
|
||||
grpClass="profile-card"
|
||||
sceneStyle=${{ background: activityValue !== 'off' && OUTDOORS_VARIANTS[activityValue]?.scene ? OUTDOORS_VARIANTS[activityValue].scene : "url('assets/images/profiles/activities.png') center / cover no-repeat, linear-gradient(160deg,#e0c0a0,#f0d8c0)" }}
|
||||
sceneContent=${null}
|
||||
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}`}
|
||||
grpClass="profile-card"
|
||||
sceneStyle=${{ background: workValue === 'farming' ? FILTER_PROFILES.farming.scene : workValue !== 'off' && OUTDOORS_VARIANTS[workValue]?.scene ? OUTDOORS_VARIANTS[workValue].scene : "url('assets/images/profiles/work.png') center / cover no-repeat, linear-gradient(160deg,#b0b0d4,#d0d0e8)" }}
|
||||
sceneContent=${null}
|
||||
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);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span class="profile-divider" aria-hidden="true"></span>
|
||||
${profileButtonOrder.slice(3).map((key) => {
|
||||
const profile = FILTER_PROFILES[key];
|
||||
const locked = profile.proOnly && !isPro;
|
||||
return html`
|
||||
<button
|
||||
key=${key}
|
||||
class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
|
||||
style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||||
title=${locked ? `🔒 ${profile.label} is part of SunScope Extra` : ''}
|
||||
onClick=${() => {
|
||||
if (locked) {
|
||||
setProPromptSource(`profile:${key}`);
|
||||
setProPromptDay(0);
|
||||
return;
|
||||
}
|
||||
activateProfile(key);
|
||||
}}
|
||||
>
|
||||
<span class="profile-btn-scene" style=${{ background: profile.scene }}>${profile.scene.includes('url(') ? null : profile.icon}</span>
|
||||
<span class="profile-btn-label">${profile.label}${locked ? ' 🔒' : ''}</span>
|
||||
</button>`;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class=${`utci-day-tabs-wrap${canScrollLeft ? ' fade-left' : ''}${canScrollRight ? ' fade-right' : ''}`}>
|
||||
<button
|
||||
class=${`utci-day-scroll left${canScrollLeft ? '' : ' hidden'}`}
|
||||
@@ -419,125 +616,6 @@ export function DayTabs({
|
||||
</div>`;
|
||||
})()}
|
||||
|
||||
<div class="filter-profiles" style=${{ borderBottom: isPro ? 'none' : '' }}>
|
||||
<span class="filter-profiles-label">Profile:</span>
|
||||
${profileButtonOrder.slice(0, 3).map((key) => {
|
||||
const profile = FILTER_PROFILES[key];
|
||||
const locked = profile.proOnly && !isPro;
|
||||
return html`
|
||||
<button
|
||||
key=${key}
|
||||
class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
|
||||
style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||||
title=${locked ? `🔒 ${profile.label} is part of SunScope Extra` : ''}
|
||||
onClick=${() => {
|
||||
if (locked) {
|
||||
setProPromptSource(`profile:${key}`);
|
||||
setProPromptDay(0);
|
||||
return;
|
||||
}
|
||||
activateProfile(key);
|
||||
}}
|
||||
>${profile.icon} ${profile.label}${locked ? ' 🔒' : ''}</button>`;
|
||||
})}
|
||||
<span class="profile-divider" aria-hidden="true"></span>
|
||||
<${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);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span class="profile-divider" aria-hidden="true"></span>
|
||||
${profileButtonOrder.slice(3).map((key) => {
|
||||
const profile = FILTER_PROFILES[key];
|
||||
const locked = profile.proOnly && !isPro;
|
||||
return html`
|
||||
<button
|
||||
key=${key}
|
||||
class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
|
||||
style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||||
title=${locked ? `🔒 ${profile.label} is part of SunScope Extra` : ''}
|
||||
onClick=${() => {
|
||||
if (locked) {
|
||||
setProPromptSource(`profile:${key}`);
|
||||
setProPromptDay(0);
|
||||
return;
|
||||
}
|
||||
activateProfile(key);
|
||||
}}
|
||||
>${profile.icon} ${profile.label}${locked ? ' 🔒' : ''}</button>`;
|
||||
})}
|
||||
</div>
|
||||
|
||||
</${Fragment}>`;
|
||||
}
|
||||
|
||||
@@ -28,44 +28,52 @@ export const FILTER_PROFILES = {
|
||||
basic: {
|
||||
label: 'Basic',
|
||||
icon: '🌡️',
|
||||
scene: "url('assets/images/profiles/basic.png') center / cover no-repeat, linear-gradient(160deg,#b8d8e8,#daeef8)",
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, precipProb: true, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: true, aqi: false, pollen: false },
|
||||
},
|
||||
home: {
|
||||
label: 'Home',
|
||||
icon: '🏠',
|
||||
scene: "url('assets/images/profiles/home.png') center / cover no-repeat, linear-gradient(160deg,#b0d890,#d0ecb8)",
|
||||
cols: { hour: true, air: true, rh: true, dew: true, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: false, precip: true, precipProb: true, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: true, managedT: true, vis: false, aqi: true, pollen: true },
|
||||
},
|
||||
vehicle: {
|
||||
label: 'Vehicle',
|
||||
icon: '🚗',
|
||||
scene: "url('assets/images/profiles/vehicle.png') center / cover no-repeat, linear-gradient(160deg,#a8bcc8,#ccd8e4)",
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: false, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, precipProb: true, soilT: false, soilT6: false, soilM: true, concreteT: false, vehicleT: true, indoorT: false, managedT: false, vis: true, aqi: false, pollen: false },
|
||||
},
|
||||
farming: {
|
||||
label: 'Farming',
|
||||
icon: '🌾',
|
||||
scene: "url('assets/images/profiles/farming.png') center / cover no-repeat, linear-gradient(160deg,#d8bc90,#ece0b8)",
|
||||
cols: { hour: true, air: true, rh: true, dew: true, wind: true, dir: true, cloud: true, sun: true, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: true, precipProb: true, soilT: true, soilT6: true, soilM: true, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: true, pollen: true },
|
||||
},
|
||||
outdoors: {
|
||||
label: 'Places',
|
||||
icon: '🌤️',
|
||||
scene: "url('assets/images/profiles/places.png') center / cover no-repeat, linear-gradient(160deg,#98ccc0,#c4e4dc)",
|
||||
// Default cols match the first variant (urban). Switching variant updates visibleCols.
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: true, dir: true, cloud: true, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: true, uvB: false, burn: true, utciP: true, precip: true, precipProb: true, soilT: false, soilT6: false, soilM: false, concreteT: true, vehicleT: false, indoorT: false, managedT: false, vis: true, aqi: true, pollen: false },
|
||||
},
|
||||
alltemps: {
|
||||
label: 'Temps',
|
||||
icon: '🌡️',
|
||||
scene: "url('assets/images/profiles/temps.png') center / cover no-repeat, linear-gradient(160deg,#d8b0b0,#ecd0c8)",
|
||||
proOnly: true,
|
||||
cols: { hour: true, air: true, rh: false, dew: false, wind: false, dir: false, cloud: false, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: true, precip: false, precipProb: false, soilT: true, soilT6: false, soilM: false, concreteT: true, vehicleT: true, indoorT: true, managedT: true, vis: false, aqi: false, pollen: false },
|
||||
},
|
||||
showall: {
|
||||
label: 'Show All',
|
||||
icon: '⚙️',
|
||||
scene: "url('assets/images/profiles/all.png') center / cover no-repeat, linear-gradient(160deg,#b4b4d4,#d4d4ec)",
|
||||
proOnly: true,
|
||||
cols: { hour: true, air: true, rh: true, dew: true, wind: true, dir: true, cloud: true, sun: true, direct: true, diffuse: true, tmrt: true, delta: true, utci: true, uvA: true, uvB: true, burn: true, utciP: true, precip: true, precipProb: true, soilT: true, soilT6: true, soilM: true, concreteT: true, vehicleT: true, indoorT: true, managedT: true, vis: true, aqi: true, pollen: true },
|
||||
},
|
||||
custom: {
|
||||
label: 'Custom',
|
||||
icon: '✏️',
|
||||
scene: "url('assets/images/profiles/custom.png') center / cover no-repeat, linear-gradient(160deg,#d8b0cc,#ecd0e4)",
|
||||
proOnly: true,
|
||||
// Blank slate - only Hour is on. User enables whichever columns they want.
|
||||
cols: { hour: true, air: false, rh: false, dew: false, wind: false, dir: false, cloud: false, sun: false, direct: false, diffuse: false, tmrt: false, delta: false, utci: false, uvA: false, uvB: false, burn: false, utciP: false, precip: false, precipProb: false, soilT: false, soilT6: false, soilM: false, concreteT: false, vehicleT: false, indoorT: false, managedT: false, vis: false, aqi: false, pollen: false },
|
||||
|
||||
@@ -298,26 +298,41 @@ export function useAppState() {
|
||||
// Derived selectors used by profile controls
|
||||
const activityOptions = activityVariantKeys.map((k) => {
|
||||
const v = OUTDOORS_VARIANTS[k];
|
||||
const locked = v.proOnly && !isPro;
|
||||
return {
|
||||
value: k,
|
||||
label: `${variantIcons[k]} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`,
|
||||
label: `${variantIcons[k]} ${v.name}${locked ? ' 🔒' : ''}`,
|
||||
name: `${v.name}${locked ? ' 🔒' : ''}`,
|
||||
scene: v.scene,
|
||||
icon: v.icon,
|
||||
disabled: locked,
|
||||
};
|
||||
});
|
||||
const placeOptions = placeVariantKeys.map((k) => {
|
||||
const v = OUTDOORS_VARIANTS[k];
|
||||
const locked = v.proOnly && !isPro;
|
||||
return {
|
||||
value: k,
|
||||
label: `${variantIcons[k]} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`,
|
||||
label: `${variantIcons[k]} ${v.name}${locked ? ' 🔒' : ''}`,
|
||||
name: `${v.name}${locked ? ' 🔒' : ''}`,
|
||||
scene: v.scene,
|
||||
icon: v.icon,
|
||||
disabled: locked,
|
||||
};
|
||||
});
|
||||
const workOptions = workVariantKeys.map((k) => {
|
||||
const v = k === 'farming'
|
||||
? { name: FILTER_PROFILES.farming.label, proOnly: false }
|
||||
? { name: FILTER_PROFILES.farming.label, proOnly: false, scene: FILTER_PROFILES.farming.scene, icon: FILTER_PROFILES.farming.icon }
|
||||
: OUTDOORS_VARIANTS[k];
|
||||
const icon = k === 'farming' ? FILTER_PROFILES.farming.icon : variantIcons[k];
|
||||
const locked = v.proOnly && !isPro;
|
||||
const iconGlyph = k === 'farming' ? FILTER_PROFILES.farming.icon : variantIcons[k];
|
||||
return {
|
||||
value: k,
|
||||
label: `${icon} ${v.name}${v.proOnly && !isPro ? ' 🔒' : ''}`,
|
||||
label: `${iconGlyph} ${v.name}${locked ? ' 🔒' : ''}`,
|
||||
name: `${v.name}${locked ? ' 🔒' : ''}`,
|
||||
scene: v.scene,
|
||||
icon: v.icon || iconGlyph,
|
||||
disabled: locked,
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user