bot/WeatherTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Toggle between evening and morning forecasts

Browse Source
This commit is contained in:
Guntis Smaukstelis
2025-03-15 22:51:59 +02:00
parent ba58ff893a
commit a5aeddd351
2 changed files with 59 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/lvgmc-forecast/LvgmcForecast.tsx
+44 -26
View File
@@ -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>
<div class={styles.twoCanvas}>
<TableTwo getCsvLines={() => getEveningLines().slice(60, 67)} />
<TableTwo getCsvLines={() => getEveningLines().slice(69, 76)} />
<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 style={{ display: getActiveSection() === 'evening' ? 'block' : 'none' }}>
<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()} />
<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>
<CsvMapData
getCityLines={() => getMorningLines().slice(4, 22)}
getWindLine={() => getMorningLines()[23]}
bgImgUrl={dayBgMap}
/>
<TableFour getCsvLines={() => getMorningLines()} />
<div class={styles.twoCanvas}>
<TableTwo getCsvLines={() => getMorningLines().slice(33, 40)} />
<TableTwo getCsvLines={() => getMorningLines().slice(42, 49)} />
<div style={{ display: getActiveSection() === 'morning' ? 'block' : 'none' }}>
<CsvMapData
getCityLines={() => getMorningLines().slice(4, 22)}
getWindLine={() => getMorningLines()[23]}
bgImgUrl={dayBgMap}
/>
<TableFour getCsvLines={() => getMorningLines()} />
<div class={styles.twoCanvas}>
<TableTwo getCsvLines={() => getMorningLines().slice(33, 40)} />
<TableTwo getCsvLines={() => getMorningLines().slice(42, 49)} />
</div>
</div>
</>
}
web/src/pages/lvgmc-forecast/lvgmc.module.css
+15
View File
@@ -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;
}