Forecast table for two days

web/src/components/table/TableFour.tsx

@@ -12,7 +12,7 @@ type TableWeather = {
     icon: string,
 }
 
-export const Table: Component<{
+export const TableFour: Component<{
     getCsvLines: Accessor<string[]>,
 }> = ({
     getCsvLines,

web/src/components/table/TableTwo.tsx

@@ -0,0 +1,115 @@
+import { Accessor, Component, createEffect } from 'solid-js'
+import { codeToIcon } from '../weatherIcons/iconConsts'
+import table2BgUrl from '../../assets/bg-table2-left.webp'
+import arrowUrl from '../../assets/arrow.webp'
+import { drawRotatedImage, getAngleFromString } from '../map/windAngles'
+
+type TableWeather = {
+    temperature: string,
+    windDirection: string,
+    windSpeed: string,
+    icon: string,
+}
+
+export const TableTwo: Component<{
+    getCsvLines: Accessor<string[]>,
+}> = ({
+    getCsvLines,
+}) => {
+    let canvas: HTMLCanvasElement | undefined
+    const table2Bg = new Image()
+    table2Bg.src = table2BgUrl
+    const arrowImg = new Image()
+    arrowImg.src = arrowUrl
+
+    createEffect(() => {
+        const csvLines = getCsvLines()
+        if (csvLines.length <= 0) return;
+        const dateStr = csvLines[0].split(';')[0].split('.').reverse().join('.')
+        const weekDay = new Date(dateStr).getDay()
+        const weekDayLV = weekDaysLV.get(weekDay)?.toUpperCase() ?? ''
+
+        const tempParts = csvLines[2].split(';')
+        const iconParts = csvLines[3].split(';')
+        const windDirParts = csvLines[4].split(';')
+        const windSpeedParts = csvLines[5].split(';')
+
+        const data: TableWeather[] = [
+            {
+                temperature: tempParts[2],
+                windDirection: windDirParts[2],
+                windSpeed: windSpeedParts[2],
+                icon: codeToIcon(Number(iconParts[2])),
+            },
+            {
+                temperature: tempParts[5],
+                windDirection: windDirParts[5],
+                windSpeed: windSpeedParts[5],
+                icon: codeToIcon(Number(iconParts[5])),
+            },
+        ]
+
+        drawTable(canvas!, table2Bg, arrowImg, data, weekDayLV)
+    })
+
+    return <>
+        <canvas ref={canvas} width='1040px' height='530px' />
+    </>
+}
+
+
+function drawTable(
+    canvas: HTMLCanvasElement,
+    rigaBg: HTMLImageElement,
+    arrowImg: HTMLImageElement,
+    data: TableWeather[],
+    title: string,
+) {
+    if (!data.length) throw new Error('Empty data for drawing table!')
+    canvas.width = rigaBg.width
+    canvas.height = rigaBg.height
+    const ctx = canvas.getContext('2d')!
+    ctx.drawImage(rigaBg, 0, 0)
+
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.font = 'bold 30px Rubik'
+    ctx.fillStyle = '#000000'
+    ctx.letterSpacing = '10px'
+    ctx.fillText(title, rigaBg.width/2, rigaBg.height*0.065)
+
+    ctx.letterSpacing = '0px'
+    const colWidth = rigaBg.width / data.length
+    data.forEach((weather, i) => {
+        const midX = colWidth * (i + 0.5)
+        ctx.textAlign = 'center'
+        ctx.fillStyle = '#FFFFFF'
+
+        ctx.font = `normal 240px Daira by LTV grafika`
+        ctx.fillText(weather.icon, midX, rigaBg.height * 0.4)
+
+        ctx.font = 'normal 50px Rubik'
+        ctx.fillText(weather.temperature, midX, rigaBg.height * 0.7)
+
+        const bottomLineY = rigaBg.height * 0.85
+        ctx.font = 'bold 30px Rubik'
+        ctx.textAlign = 'center'
+        ctx.fillText(weather.windDirection, midX, bottomLineY)
+        const dirWidth = ctx.measureText(weather.windDirection).width
+        const windAngle = getAngleFromString(weather.windDirection)
+        ctx.textAlign = 'right'
+        drawRotatedImage(ctx, arrowImg, midX-dirWidth/2-arrowImg.width-10, bottomLineY-arrowImg.height/2, windAngle)
+        ctx.textAlign = 'left'
+        ctx.fillText(weather.windSpeed, midX+dirWidth/2+10, bottomLineY)
+    })
+}
+
+const weekDaysLV = new Map([
+    [0, 'svētdiena'],
+    [1, 'pirmdiena'],
+    [2, 'otrdiena'],
+    [3, 'trešdiena'],
+    [4, 'ceturtdiena'],
+    [5, 'piektdiena'],
+    [6, 'sestdiena'],
+])

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

@@ -1,11 +1,13 @@
-import { Component, createEffect, createSignal, Setter } from 'solid-js'
+import { Component, 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 { TableFour } from '../../components/table/TableFour'
 import { apiHost } from '../../consts'
 import { fetchText } from '../../helpers/fetch'
+import { TableTwo } from '../../components/table/TableTwo'
+import styles from './lvgmc.module.css'
 
 //  Eiropa_LTV_pilsetas_nakama_dn.csv
 //  Eiropa_LTV_pilsetas_tekosa_dn.csv
@@ -27,13 +29,13 @@ export const LvgmcForecast: Component<{}> = () => {
             .catch(console.warn)
     )
 
-    createEffect(() => {
-        console.log(getMorningLines())
-    })
-    
-
     return <>
         <p>Vakara ēters</p>
+
+        <div class={styles.twoCanvas}>
+            <TableTwo getCsvLines={() => getEveningLines().slice(60, 67)} />
+            <TableTwo getCsvLines={() => getEveningLines().slice(69, 76)} />
+        </div>
         <CsvMapData
             getCityLines={() => getEveningLines().slice(4, 22)}
             getWindLine={() => getEveningLines()[26]}
@@ -44,7 +46,7 @@ export const LvgmcForecast: Component<{}> = () => {
             getWindLine={() => getEveningLines()[57]}
             bgImgUrl={dayBgMap}
         />
-        <Table getCsvLines={() => getEveningLines()} />
+        <TableFour getCsvLines={() => getEveningLines()} />
 
         <p>Rīta ēters</p>
         <CsvMapData
@@ -52,6 +54,10 @@ export const LvgmcForecast: Component<{}> = () => {
             getWindLine={() => getMorningLines()[23]}
             bgImgUrl={dayBgMap}
         />
-        <Table getCsvLines={() => getMorningLines()} />
+        <TableFour getCsvLines={() => getMorningLines()} />
+        <div class={styles.twoCanvas}>
+            <TableTwo getCsvLines={() => getMorningLines().slice(33, 40)} />
+            <TableTwo getCsvLines={() => getMorningLines().slice(42, 49)} />
+        </div>
     </>
 }

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

@@ -0,0 +1,6 @@
+.twoCanvas {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    width: 1040px;
+}