Add weather icon inputs to cities on map

2024-02-11 21:44:29 +02:00
parent 46b16e462e
commit 19c3e45122
10 changed files with 152 additions and 23 deletions
@@ -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);
+}
@@ -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>
+    )
+}
@@ -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'];