Add weather icon inputs to cities on map

web/src/App.tsx

@@ -6,6 +6,7 @@ import { Cities } from './cities/Cities';
 import { Database } from './database/Database';
 import { Station } from './station/Station';
 import { apiHost } from './consts';
+import { WeatherIconStub } from './components/weatherIcons/WeatherIconStub';
 
 console.log("env:", import.meta.env.MODE);
 console.log("api host:", apiHost);
@@ -30,16 +31,21 @@ const App: Component = () => {
 
     return (
         <div class={styles.App}>
-            <ul class={styles.menu}>
-                { pages.map(([pageTitle]) =>
-                    <li
-                        class={getActiveCSS(pageTitle)}
-                        onClick={() => setPageTitle(pageTitle)}
-                    >
-                        {pageTitle}
-                    </li>
-                )}
-            </ul>
+            <div class="grid-1-1">
+                <div><WeatherIconStub /></div>
+                <div>
+                    <ul class={styles.menu}>
+                        { pages.map(([pageTitle]) =>
+                            <li
+                                class={getActiveCSS(pageTitle)}
+                                onClick={() => setPageTitle(pageTitle)}
+                            >
+                                {pageTitle}
+                            </li>
+                        )}
+                    </ul>
+                </div>
+            </div>
             { getPageContent() }
         </div>
     );

web/src/cities/map/MapView.tsx

@@ -5,13 +5,17 @@ import { WindInputs, WindSignals } from "./WindInputs";
 
 import arrowUrl from "../../assets/arrow.webp";
 import { cityCoords } from "../../components/cityCoords";
-import { MapResolution, resolutionProps, ResolutionPropsValue, windProps, WindProps } from "./mapConsts";
-import { drawOnMap } from "./canvasDraw";
+import { MapResolution, resolutionProps, windProps, WindProps } from "./mapConsts";
+import { CityData, drawOnMap } from "./canvasDraw";
+import { IconInputs } from "../../components/weatherIcons/IconInputs";
 
 export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[] }> = ({ type, data }) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
     const [getImg, setImg] = createSignal(new Image());
-    let lastCoords: [string, {x: number, y: number }, number][] = [];
+    const weatherIconsSingal = createSignal<{[key: string]: string;}>({});
+    const [getWeatherIcons] = weatherIconsSingal;
+    
+    let lastCoords: CityData = [];
     const props = resolutionProps[type];
 
     const arrowImg = new Image();
@@ -52,16 +56,18 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
 
     createEffect(() => {
         const ctx = getCanvas()!.getContext("2d")!;
-        const coordsAndData: [string, {x: number, y: number }, number][] = data()
+        const weatherIcons = getWeatherIcons();
+        const coordsAndData: CityData = data()
             .map(([city, value]) => [
                 city,
                 cityCoords[city as keyof typeof cityCoords],
                 typeof value === "number" ? value : -99,
+                weatherIcons[city],
             ]);
             lastCoords = coordsAndData;
         drawOnMap(
             ctx,
-            [getImg(),arrowImg],
+            [getImg(), arrowImg],
             coordsAndData,
             getWindData(),
             props,
@@ -76,7 +82,12 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
 
     return (
         <>
-            { props.showWind && <WindInputs signals={windSignals} /> }
+            <div class="grid-1-2">
+                <div>
+                    { props.showWind && <WindInputs signals={windSignals} /> }
+                </div>
+                <div><IconInputs weatherIconsSingal={weatherIconsSingal} /></div>
+            </div>
             <canvas
                 ref={setCanvas}
                 width={props.width+"px"}

web/src/cities/map/canvasDraw.ts

@@ -1,10 +1,13 @@
 import { ResolutionPropsValue, WindProps, windProps } from "./mapConsts";
 import { drawRotatedImage, getAngleFromString } from "./windAngles";
 
+// cityName, {x, y}, weatherValue, icon
+export type CityData = [string, {x: number, y: number }, number, string | undefined][];
+
 export function drawOnMap(
     ctx: CanvasRenderingContext2D,
     imgArr: [HTMLImageElement, HTMLImageElement],
-    coords: [string, {x: number, y: number }, number][],
+    cityData: CityData,
     windData: [string, string, string, boolean, WindProps],
     props: ResolutionPropsValue,
 ): void {
@@ -16,7 +19,7 @@ export function drawOnMap(
 
     // city boxes
     ctx.fillStyle = "#FFFFFF";
-    coords.forEach(([, {x, y}, value]) => {
+    cityData.forEach(([, {x, y}]) => {
         const localX = props.offsetX + x * props.scale;
         const localY = props.offsetY + y * props.scale;
 
@@ -28,17 +31,24 @@ export function drawOnMap(
     ctx.fill();
 
     // weather values
-    ctx.font = `bold ${props.fontSize}px Rubik`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    coords.forEach(([, {x, y}, value]) => {
+    cityData.forEach(([, {x, y}, value, icon]) => {
         const localX = props.offsetX + x * props.scale;
         const localY = props.offsetY + y * props.scale;
 
+        ctx.font = `bold ${props.fontSize}px Rubik`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
         ctx.fillStyle = "#000000";
         const numericValue = roundValues ? Math.round(value) : value;
         const stringValue = numericValue.toString().replace(".", ",");
         ctx.fillText(stringValue, localX, localY);
+
+        if (icon) {
+            ctx.fillStyle = "#FFFFFF";
+            ctx.font = `normal ${props.fontSize * 5}px Daira by LTV grafika`;
+            const iconSize = ctx.measureText(icon);
+            ctx.fillText(icon, localX + props.boxSize/2 + 10 + iconSize.width/2, localY);
+        }
     });
 
     if (!props.showWind) return;

web/src/cities/result/ResultView.tsx

@@ -34,7 +34,6 @@ export const ResultView: Component<{
     return (
         <div>
             <div class="resultTitle">
-                <h3>Result:</h3>
                 <span>
                     {resultViews.map(viewName =>
                         <>

web/src/components/weatherIcons/IconInputs.tsx

@@ -0,0 +1,47 @@
+import { Component, Signal } from "solid-js";
+import { weatherIconCities, weatherIcons } from "./iconConsts";
+
+import "../../css/weatherIcons.css";
+
+export const IconInputs: Component<{ weatherIconsSingal: Signal<{[key: string]: string;}>; }> = ({
+    weatherIconsSingal: [getWeatherIcons, setWeatherIcons]
+}) => {
+
+    function onIconChange(city: string, icon: string) {
+        const weatherIcons = { ...getWeatherIcons() };
+        weatherIcons[city] = icon;
+        if (icon === "") delete weatherIcons[city];
+
+        setWeatherIcons(weatherIcons);
+    }
+
+    return (
+        <>
+            <div>
+                { weatherIcons.map(icon =>
+                    <span class="weatherIconButton" onClick={() => copyToClipboard(icon)}>{ icon }</span>)
+                }
+            </div>
+            <div>
+                { weatherIconCities.map(city =>
+                    <div style="float: left;">
+                        {city}:
+                        &nbsp;
+                        <input
+                            type="text"
+                            class="weatherIconInput"
+                            size="1"
+                            maxlength="1"
+                            onInput={e => onIconChange(city, e.target.value)}
+                        />
+                        &nbsp;
+                    </div>)
+                }
+            </div>
+        </>
+    )
+}
+
+function copyToClipboard(icon: string) {
+    navigator.clipboard.writeText(icon);
+}

web/src/components/weatherIcons/WeatherIconStub.tsx

@@ -0,0 +1,8 @@
+import { Component } from "solid-js";
+
+/* Put this in page so browser actually downloads ltv font */
+export const WeatherIconStub: Component<{}> = () => {
+    return (
+        <div class="weatherIconStub">ABCDEF</div>
+    )
+}

web/src/components/weatherIcons/iconConsts.ts

@@ -0,0 +1,3 @@
+/* font-family: 'Daira by LTV grafika'; */
+export const weatherIcons = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i"];
+export const weatherIconCities = ['Ainaži', 'Alūksne', 'Bauska', 'Daugavpils', 'Liepāja', 'Madona', 'Priekuļi', 'Rēzekne', 'Rīga', 'Saldus', 'Stende', 'Ventspils', 'Zīlāni'];

web/src/css/index.css

@@ -55,6 +55,14 @@ table tr:hover {
   background: #c0c0c0;
 }
 
+@font-face {
+  font-family: 'Daira by LTV grafika';
+  src: url('../assets/ltv_meteo.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 .hidden {
   display: none;
 }
@@ -62,3 +70,15 @@ table tr:hover {
 .visible {
   display: block;
 }
+
+.grid-1-1 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.grid-1-2 {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 10px;
+}

web/src/css/weatherIcons.css

@@ -0,0 +1,25 @@
+.weatherIconButton {
+    font-family: 'Daira by LTV grafika';
+    font-size: 30px;
+    display: inline-block;
+    background-color: #ccc;
+    padding: 3px 4px;
+    margin: 0 3px;
+    cursor: pointer;
+}
+
+.weatherIconButton:hover {
+    background-color: #333;
+    color: white;
+}
+
+.weatherIconInput {
+    font-family: 'Daira by LTV grafika';
+    font-size: 30px;
+}
+
+.weatherIconStub {
+    font-family: 'Daira by LTV grafika';
+    font-size: 20px;
+    color: white;
+}