diff --git a/web/src/assets/bg-2-dienas.webp b/web/src/assets/bg-2-dienas.webp new file mode 100644 index 0000000..34fc23f Binary files /dev/null and b/web/src/assets/bg-2-dienas.webp differ diff --git a/web/src/components/table/Table.tsx b/web/src/components/table/Table.tsx index 09386e7..ddf3b08 100644 --- a/web/src/components/table/Table.tsx +++ b/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, }> = ({ - csvUrl, + getCsvLines, }) => { let canvas: HTMLCanvasElement | undefined const rigaBg = new Image() @@ -25,29 +23,29 @@ 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') - const dateStr = csvLines[2].split(';')[0].split('.').reverse().join('.') - const weekDay = new Date(dateStr).getDay() - const weekDayLV = weekDaysLV.get(weekDay)?.toUpperCase() ?? '' - const dayOrNight = csvLines[2].split(';')[1] - const rigaOffset = dayOrNight === 'DIENA' ? 24 : 51 - const data: TableWeather[] = csvLines - .slice(rigaOffset, rigaOffset+4) - .map((line): TableWeather => { - const parts = line.split(';') - const hour = parts[0].slice(6, 11).replace(':', '.') - const temperature = parts[1] - const windDirection = parts[3] - const windSpeed = parts[5] - const iconCode = Number(parts[7]) - const icon = codeToIcon(iconCode) + 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() ?? '' + const dayOrNight = csvLines[2].split(';')[1] + const rigaOffset = dayOrNight === 'DIENA' ? 24 : 51 + const data: TableWeather[] = csvLines + .slice(rigaOffset, rigaOffset+4) + .map((line): TableWeather => { + const parts = line.split(';') + const hour = parts[0].slice(6, 11).replace(':', '.') + const temperature = parts[1] + const windDirection = parts[3] + const windSpeed = parts[5] + const iconCode = Number(parts[7]) + const icon = codeToIcon(iconCode) - return { hour, temperature, windDirection, windSpeed, icon } - }) - drawTable(canvas!, rigaBg, arrowImg, data, weekDayLV) - }) + return { hour, temperature, windDirection, windSpeed, icon } + }) + drawTable(canvas!, rigaBg, arrowImg, data, weekDayLV) + }) return <> @@ -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'], ]) \ No newline at end of file diff --git a/web/src/pages/lvgmc-forecast/CsvMapData.tsx b/web/src/pages/lvgmc-forecast/CsvMapData.tsx index 8c1ef94..0609f50 100644 --- a/web/src/pages/lvgmc-forecast/CsvMapData.tsx +++ b/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,43 +10,40 @@ import arrowUrl from '../../assets/arrow.webp' import { resolutionProps, windProps, WindProps } from '../../components/map/mapConsts' export const CsvMapData: Component<{ - csvUrl: string, + getCityLines: Accessor, + getWindLine: Accessor, bgImgUrl: string, }> = ({ - csvUrl, + getCityLines, + getWindLine, bgImgUrl, }) => { const [getCityData, setCityData] = createSignal([]) 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 - const cityData: CityData[] = csvCityListInOrder - .map((city, i): CityData => { - const parts = csvLines[i + citiesOffset].split(';') - const temperature = Number(parts[1]) - const iconCode = Number(parts[2]) - const icon = codeToIcon(iconCode) - const coord = cityCoords[city] - if (!coord) throw new Error(`No coord found for city: ${city}`) - return [city, coord, temperature, icon] - }) - .filter(([city]) => citiesToShow.includes(city)) - - const windOffset = dayOrNight === 'DIENA' ? 30 : 26 - const windParts = csvLines[windOffset].split(';') - const windSpped = windParts[1] - const windGusts = windParts[3] - const windDirection = windParts[5] - setWindData([windDirection, windSpped, windGusts]) - setCityData(cityData) - draw() - }) + createEffect(() => { + if (getCityLines().length <= 0) return; + const cityData: CityData[] = csvCityListInOrder + .map((city, i): CityData => { + const parts = getCityLines()[i].split(';') + const temperature = Number(parts[1]) + const iconCode = Number(parts[2]) + const icon = codeToIcon(iconCode) + const coord = cityCoords[city] + if (!coord) throw new Error(`No coord found for city: ${city}`) + return [city, coord, temperature, icon] + }) + .filter(([city]) => citiesToShow.includes(city)) + + const windParts = getWindLine().split(';') + const windSpped = windParts[1] + const windGusts = windParts[3] + const windDirection = windParts[5] + setWindData([windDirection, windSpped, windGusts]) + setCityData(cityData) + + draw() + }) const arrowImg = new Image() arrowImg.src = arrowUrl diff --git a/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx b/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx index e8c03c6..05f7057 100644 --- a/web/src/pages/lvgmc-forecast/LvgmcForecast.tsx +++ b/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 <> - -
+ const [getEveningLines, setEveningLines] = createSignal([]) + const [getMorningLines, setMorningLines] = createSignal([]) -

Night

+ const urlsAndSignals: [string, Setter][] = [ + ['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 <> +

Vakara ēters

getEveningLines().slice(4, 22)} + getWindLine={() => getEveningLines()[26]} bgImgUrl={nightBgMap} /> - -

Day

getEveningLines().slice(31, 49)} + getWindLine={() => getEveningLines()[57]} bgImgUrl={dayBgMap} /> +
getEveningLines()} /> + +

Rīta ēters

+ getMorningLines().slice(4, 22)} + getWindLine={() => getMorningLines()[23]} + bgImgUrl={dayBgMap} + /> +
getMorningLines()} /> }