Add morning and evening broadcast forecasts

web/src/components/table/Table.tsx

@@ -1,6 +1,4 @@
-import { Component } from 'solid-js'
-import { fetchText } from '../../helpers/fetch'
-import { apiHost } from '../../consts'
+import { Accessor, Component, createEffect } from 'solid-js'
 import { codeToIcon } from '../weatherIcons/iconConsts'
 import rigaBgUrl from '../../assets/bg-riga.webp'
 import arrowUrl from '../../assets/arrow.webp'
@@ -15,9 +13,9 @@ type TableWeather = {
 }
 
 export const Table: Component<{
-    csvUrl: string,
+    getCsvLines: Accessor<string[]>,
 }> = ({
-    csvUrl,
+    getCsvLines,
 }) => {
     let canvas: HTMLCanvasElement | undefined
     const rigaBg = new Image()
@@ -25,9 +23,9 @@ export const Table: Component<{
     const arrowImg = new Image()
     arrowImg.src = arrowUrl
 
-    fetchText(`${apiHost}/api/show/lvgmc-forecast/${csvUrl}`)
-        .then(csv => {
-            const csvLines = csv.split('\n')
+    createEffect(() => {
+        const csvLines = getCsvLines()
+        if (csvLines.length <= 0) return;
         const dateStr = csvLines[2].split(';')[0].split('.').reverse().join('.')
         const weekDay = new Date(dateStr).getDay()
         const weekDayLV = weekDaysLV.get(weekDay)?.toUpperCase() ?? ''
@@ -104,11 +102,11 @@ function drawTable(
 }
 
 const weekDaysLV = new Map([
+    [0, 'svētdiena'],
     [1, 'pirmdiena'],
     [2, 'otrdiena'],
     [3, 'trešdiena'],
     [4, 'ceturtdiena'],
     [5, 'piektdiena'],
     [6, 'sestdiena'],
-    [7, 'svētdiena'],
 ])

web/src/pages/lvgmc-forecast/CsvMapData.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, onMount } from 'solid-js'
+import { Accessor, Component, createEffect, createSignal, onMount } from 'solid-js'
 import { apiHost } from '../../consts'
 import { fetchText } from '../../helpers/fetch'
 import { codeToIcon } from '../../components/weatherIcons/iconConsts'
@@ -10,24 +10,22 @@ import arrowUrl from '../../assets/arrow.webp'
 import { resolutionProps, windProps, WindProps } from '../../components/map/mapConsts'
 
 export const CsvMapData: Component<{
-    csvUrl: string,
+    getCityLines: Accessor<string[]>,
+    getWindLine: Accessor<string>,
     bgImgUrl: string,
 }> = ({
-    csvUrl,
+    getCityLines,
+    getWindLine,
     bgImgUrl,
 }) => {
     const [getCityData, setCityData] = createSignal<CityData[]>([])
     const [getWindData, setWindData] = createSignal<[string, string, string]>(['', '', ''])
 
-    fetchText(`${apiHost}/api/show/lvgmc-forecast/${csvUrl}`)
-        .then(csv => {
-            const csvLines = csv.split('\n')
-            const dayOrNight = csvLines[2].split(';')[1]
-            // console.log(csvLines)
-            const citiesOffset = 4
+    createEffect(() => {
+        if (getCityLines().length <= 0) return;
         const cityData: CityData[] = csvCityListInOrder
             .map((city, i): CityData => {
-                    const parts = csvLines[i + citiesOffset].split(';')
+                const parts = getCityLines()[i].split(';')
                 const temperature = Number(parts[1])
                 const iconCode = Number(parts[2])
                 const icon = codeToIcon(iconCode)
@@ -37,14 +35,13 @@ export const CsvMapData: Component<{
             })
             .filter(([city]) => citiesToShow.includes(city))
         
-            const windOffset = dayOrNight === 'DIENA' ? 30 : 26
-            const windParts = csvLines[windOffset].split(';')
+        const windParts = getWindLine().split(';')
         const windSpped = windParts[1]
         const windGusts = windParts[3]
         const windDirection = windParts[5]
         setWindData([windDirection, windSpped, windGusts])
-
         setCityData(cityData)
+
         draw()
     })
 

web/src/pages/lvgmc-forecast/LvgmcForecast.tsx

@@ -1,9 +1,11 @@
-import { Component } from 'solid-js'
+import { Component, createEffect, createSignal, Setter } from 'solid-js'
 
 import dayBgMap from '../../assets/map_3840x1440_wind.webp'
 import nightBgMap from '../../assets/map_night_3840x1440_wind.webp'
 import { CsvMapData } from './CsvMapData'
 import { Table } from '../../components/table/Table'
+import { apiHost } from '../../consts'
+import { fetchText } from '../../helpers/fetch'
 
 //  Eiropa_LTV_pilsetas_nakama_dn.csv
 //  Eiropa_LTV_pilsetas_tekosa_dn.csv
@@ -12,24 +14,44 @@ import { Table } from '../../components/table/Table'
 //  Latvija_faktiskais_laiks.csv
 
 export const LvgmcForecast: Component<{}> = () => {
-    return <>
-        <Table
-            csvUrl='Latvija_LTV_pilsetas_nakama_dnn.csv'
-        />
-        <Table
-            csvUrl='Latvija_LTV_pilsetas_tekosa_dn.csv'
-        />
+    const [getEveningLines, setEveningLines] = createSignal<string[]>([])
+    const [getMorningLines, setMorningLines] = createSignal<string[]>([])
 
-        <p>Night</p>
+    const urlsAndSignals: [string, Setter<string[]>][] = [
+        ['Latvija_LTV_pilsetas_nakama_dnn.csv', setEveningLines],
+        ['Latvija_LTV_pilsetas_tekosa_dn.csv', setMorningLines],
+    ]
+    urlsAndSignals.forEach(([csvUrl, setLines]) =>
+        fetchText(`${apiHost}/api/show/lvgmc-forecast/${csvUrl}`)
+            .then(csv => setLines(csv.split('\n')))
+            .catch(console.warn)
+    )
+
+    createEffect(() => {
+        console.log(getMorningLines())
+    })
+    
+
+    return <>
+        <p>Vakara ēters</p>
         <CsvMapData
-            csvUrl='Latvija_LTV_pilsetas_nakama_dnn.csv'
+            getCityLines={() => getEveningLines().slice(4, 22)}
+            getWindLine={() => getEveningLines()[26]}
             bgImgUrl={nightBgMap}
         />
-
-        <p>Day</p>
         <CsvMapData
-            csvUrl='Latvija_LTV_pilsetas_tekosa_dn.csv'
+            getCityLines={() => getEveningLines().slice(31, 49)}
+            getWindLine={() => getEveningLines()[57]}
             bgImgUrl={dayBgMap}
         />
+        <Table getCsvLines={() => getEveningLines()} />
+
+        <p>Rīta ēters</p>
+        <CsvMapData
+            getCityLines={() => getMorningLines().slice(4, 22)}
+            getWindLine={() => getMorningLines()[23]}
+            bgImgUrl={dayBgMap}
+        />
+        <Table getCsvLines={() => getMorningLines()} />
     </>
 }