Toggle between evening and morning forecasts

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<Section>('evening')
     const [getEveningLines, setEveningLines] = createSignal<string[]>([])
     const [getMorningLines, setMorningLines] = createSignal<string[]>([])
 
@@ -30,34 +33,49 @@ export const LvgmcForecast: Component<{}> = () => {
     )
 
     return <>
-        <p>Vakara ēters</p>
+        <input
+            type='button'
+            value='Vakara ēters'
+            onClick={()=>setActiveSection('evening')}
+            class={getActiveSection() === 'evening' ? styles.activeButton : styles.button}
+        />
+        <input
+            type='button'
+            value='Rīta ēters'
+            onClick={()=>setActiveSection('morning')}
+            class={getActiveSection() === 'morning' ? styles.activeButton : styles.button}
+        />
+        <br/><br/>
         
-        <div class={styles.twoCanvas}>
+        <div style={{ display: getActiveSection() === 'evening' ? 'block' : 'none' }}>
-            <TableTwo getCsvLines={() => getEveningLines().slice(60, 67)} />
+            <CsvMapData
-            <TableTwo getCsvLines={() => getEveningLines().slice(69, 76)} />
+                getCityLines={() => getEveningLines().slice(4, 22)}
+                getWindLine={() => getEveningLines()[26]}
+                bgImgUrl={nightBgMap}
+            />
+            <CsvMapData
+                getCityLines={() => getEveningLines().slice(31, 49)}
+                getWindLine={() => getEveningLines()[57]}
+                bgImgUrl={dayBgMap}
+            />
+            <TableFour getCsvLines={() => getEveningLines()} />
+            <div class={styles.twoCanvas}>
+                <TableTwo getCsvLines={() => getEveningLines().slice(60, 67)} />
+                <TableTwo getCsvLines={() => getEveningLines().slice(69, 76)} />
+            </div>
         </div>
-        <CsvMapData
-            getCityLines={() => getEveningLines().slice(4, 22)}
-            getWindLine={() => getEveningLines()[26]}
-            bgImgUrl={nightBgMap}
-        />
-        <CsvMapData
-            getCityLines={() => getEveningLines().slice(31, 49)}
-            getWindLine={() => getEveningLines()[57]}
-            bgImgUrl={dayBgMap}
-        />
-        <TableFour getCsvLines={() => getEveningLines()} />
 
-        <p>Rīta ēters</p>
+        <div style={{ display: getActiveSection() === 'morning' ? 'block' : 'none' }}>
-        <CsvMapData
+            <CsvMapData
-            getCityLines={() => getMorningLines().slice(4, 22)}
+                getCityLines={() => getMorningLines().slice(4, 22)}
-            getWindLine={() => getMorningLines()[23]}
+                getWindLine={() => getMorningLines()[23]}
-            bgImgUrl={dayBgMap}
+                bgImgUrl={dayBgMap}
-        />
+            />
-        <TableFour getCsvLines={() => getMorningLines()} />
+            <TableFour getCsvLines={() => getMorningLines()} />
-        <div class={styles.twoCanvas}>
+            <div class={styles.twoCanvas}>
-            <TableTwo getCsvLines={() => getMorningLines().slice(33, 40)} />
+                <TableTwo getCsvLines={() => getMorningLines().slice(33, 40)} />
-            <TableTwo getCsvLines={() => getMorningLines().slice(42, 49)} />
+                <TableTwo getCsvLines={() => getMorningLines().slice(42, 49)} />
+            </div>
         </div>
     </>
 }

web/src/pages/lvgmc-forecast/lvgmc.module.css

@@ -4,3 +4,18 @@
     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;
+}