diff --git a/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx b/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx index 59f5e51..fbd9591 100644 --- a/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx +++ b/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx @@ -15,7 +15,10 @@ import styles from './lvgmc.module.css' // Latvija_LTV_pilsetas_tekosa_dn.csv // Latvija_faktiskais_laiks.csv +type Section = 'evening' | 'morning' + export const LvgmcForecast: Component<{}> = () => { + const [getActiveSection, setActiveSection] = createSignal
('evening') const [getEveningLines, setEveningLines] = createSignal([]) const [getMorningLines, setMorningLines] = createSignal([]) @@ -30,34 +33,49 @@ export const LvgmcForecast: Component<{}> = () => { ) return <> -

Vakara ēters

- -
- getEveningLines().slice(60, 67)} /> - getEveningLines().slice(69, 76)} /> + setActiveSection('evening')} + class={getActiveSection() === 'evening' ? styles.activeButton : styles.button} + /> + setActiveSection('morning')} + class={getActiveSection() === 'morning' ? styles.activeButton : styles.button} + /> +

+ +
+ getEveningLines().slice(4, 22)} + getWindLine={() => getEveningLines()[26]} + bgImgUrl={nightBgMap} + /> + getEveningLines().slice(31, 49)} + getWindLine={() => getEveningLines()[57]} + bgImgUrl={dayBgMap} + /> + getEveningLines()} /> +
+ getEveningLines().slice(60, 67)} /> + getEveningLines().slice(69, 76)} /> +
- getEveningLines().slice(4, 22)} - getWindLine={() => getEveningLines()[26]} - bgImgUrl={nightBgMap} - /> - getEveningLines().slice(31, 49)} - getWindLine={() => getEveningLines()[57]} - bgImgUrl={dayBgMap} - /> - getEveningLines()} /> -

Rīta ēters

- getMorningLines().slice(4, 22)} - getWindLine={() => getMorningLines()[23]} - bgImgUrl={dayBgMap} - /> - getMorningLines()} /> -
- getMorningLines().slice(33, 40)} /> - getMorningLines().slice(42, 49)} /> +
+ getMorningLines().slice(4, 22)} + getWindLine={() => getMorningLines()[23]} + bgImgUrl={dayBgMap} + /> + getMorningLines()} /> +
+ getMorningLines().slice(33, 40)} /> + getMorningLines().slice(42, 49)} /> +
} diff --git a/web/src/pages/lvgmc-forecast/lvgmc.module.css b/web/src/pages/lvgmc-forecast/lvgmc.module.css index df32655..7b1b9bb 100644 --- a/web/src/pages/lvgmc-forecast/lvgmc.module.css +++ b/web/src/pages/lvgmc-forecast/lvgmc.module.css @@ -3,4 +3,19 @@ justify-content: space-between; gap: 20px; width: 1040px; +} + +.activeButton { + background-color: #333; + color: white; + border: none; + padding: 3px 5px; + font-weight: bold; +} + +.button { + background-color: #ddd; + color: #333; + border: none; + padding: 3px 10px; } \ No newline at end of file