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,12 +33,21 @@ 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}>
-            <TableTwo getCsvLines={() => getEveningLines().slice(60, 67)} />
-            <TableTwo getCsvLines={() => getEveningLines().slice(69, 76)} />
-        </div>
+        <div style={{ display: getActiveSection() === 'evening' ? 'block' : 'none' }}>
             <CsvMapData
                 getCityLines={() => getEveningLines().slice(4, 22)}
                 getWindLine={() => getEveningLines()[26]}
@@ -47,8 +59,13 @@ export const LvgmcForecast: Component<{}> = () => {
                 bgImgUrl={dayBgMap}
             />
             <TableFour getCsvLines={() => getEveningLines()} />
+            <div class={styles.twoCanvas}>
+                <TableTwo getCsvLines={() => getEveningLines().slice(60, 67)} />
+                <TableTwo getCsvLines={() => getEveningLines().slice(69, 76)} />
+            </div>
+        </div>
 
-        <p>Rīta ēters</p>
+        <div style={{ display: getActiveSection() === 'morning' ? 'block' : 'none' }}>
             <CsvMapData
                 getCityLines={() => getMorningLines().slice(4, 22)}
                 getWindLine={() => getMorningLines()[23]}
@@ -59,5 +76,6 @@ export const LvgmcForecast: Component<{}> = () => {
                 <TableTwo getCsvLines={() => getMorningLines().slice(33, 40)} />
                 <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;
+}