Less redraw of station map, fix end date, some styling

web/src/components/Spacer.tsx

@@ -0,0 +1,7 @@
+import { Component } from "solid-js";
+
+export const Spacer: Component<{ padding?: string; }> = ({ padding }) => {
+    return (
+        <div style={{ display: "inline-block", padding: padding ?? "5px" }}></div>
+    );
+}

web/src/css/station.css

@@ -35,3 +35,15 @@
     padding: 5px 10px;
     background-color: #f2f2f2;
 }
+
+.stationResult {
+    padding-inline-start: 5px;
+}
+
+.stationResult li {
+    padding: 3px;
+}
+
+.stationResult li:nth-child(odd) {
+    background-color: #d6d6d6;
+}

web/src/station/MapResult.tsx

@@ -4,7 +4,7 @@ import { coordToCity } from "./coordToCity";
 import { cityCoords } from "./cityCoords";
 import mapUrl from "../assets/map_1000x570.webp";
 import moment from "moment";
-import { FETCH_DELAY_MS, apiHost } from "../consts";
+import { FETCH_DELAY_MS, apiHost, cityList } from "../consts";
 import { LoadingSpinner } from "../components/LoadingSpinner";
 
 export const MapResult: Component<{
@@ -41,15 +41,13 @@ export const MapResult: Component<{
         img.src = mapUrl;
     });
 
-    const citiesFieldDate = (): [Set<string>, string, Date, Date] => [
-        props.getCities(),
+    const fieldDate = (): [string, Date, Date] => [
         props.getField(),
         props.getStart(),
         props.getEnd(),
     ];
 
-    const [meteoValues] = createResource(citiesFieldDate, async ([cities, field, start, end]: [Set<string>, string, Date, Date]) => {
-        if (cities.size === 0) return;
+    const [meteoValues] = createResource(fieldDate, async ([field, start, end]: [string, Date, Date]) => {
         await new Promise(resolve => setTimeout(resolve, FETCH_DELAY_MS));
 
         const queryStart = moment(start).format("YYYYMMDD_HHmm");
@@ -58,7 +56,7 @@ export const MapResult: Component<{
         if (["tempMax", "windMax"].includes(field)) aggregate = "max";
         if (["tempMin", "visibilityMin"].includes(field)) aggregate = "min";
         if (["precipitation", "sunDuration"].includes(field)) aggregate = "sum";
-        const response = await fetch(`${apiHost}/api/query/city/${[...cities].join(",")}/${queryStart}-${queryEnd}/hour/${field}/${aggregate}`);
+        const response = await fetch(`${apiHost}/api/query/city/${[...cityList].join(",")}/${queryStart}-${queryEnd}/hour/${field}/${aggregate}`);
         const json = await response.json();
         return json.result;
     });

web/src/station/Result.tsx

@@ -86,7 +86,7 @@ export const Result: Component<{
                 <div>{ meteoResource().message }</div>
             }
             { meteoResource() && props.getCity() && !meteoResource.loading &&
-                <ul>
+                <ul class="stationResult">
                     { Object.entries(meteoResource())
                     .sort((a, b) => a[0] > b[0] ? 1 : -1)
                     .map(([key, value]: any) =>

web/src/station/Station.tsx

@@ -6,6 +6,7 @@ import { SelectField } from "../components/SelectField";
 import { Result } from "./Result";
 import { MapResult } from "./MapResult";
 import "../css/station.css"
+import { Spacer } from "../components/Spacer";
 
 export const Station: Component<{}> = () => {
     const [getShowCities, setShowCities] = createSignal(false);
@@ -15,14 +16,12 @@ export const Station: Component<{}> = () => {
     const [getStart, setStart] = createSignal(moment().subtract(1, "days").toDate());
     const [getEnd, setEnd] = createSignal(moment().toDate());
 
-    
-
     function handleDateChange(value: string) {
         const today = moment();
         const inputDate = moment(value, 'YYYY-MM-DD');
         if (today.isSame(inputDate, "date")) {
             batch(() => {
-                setStart(today.subtract(1, "days").toDate());
+                setStart(today.clone().subtract(1, "days").toDate());
                 setEnd(today.toDate());
             });
         } else {
@@ -43,11 +42,13 @@ export const Station: Component<{}> = () => {
                             value="Select stations"
                             onClick={() => setShowCities(!getShowCities())}
                         />
+                        <Spacer />
                         <input
                             type="date"
                             value={moment(getEnd()).format("YYYY-MM-DD")}
                             onChange={e => handleDateChange(e.target.value)}
                         />
+                        <Spacer />
                         <SelectField getField={getField} setField={setField} />
                     </div>
                     <div class={"cities " + (getShowCities() ? "visible" : "hidden")}>