From 99fb82c3fb5aa7d0ef79afd4ee48c318423f71b1 Mon Sep 17 00:00:00 2001
From: Guntis Smaukstelis <gsmaukstelis@evolution.com>
Date: Sun, 21 Jan 2024 21:06:32 +0200
Subject: [PATCH] Less redraw of station map, fix end date, some styling

---
 web/src/components/Spacer.tsx |  7 +++++++
 web/src/css/Result.css        | 14 +++++++-------
 web/src/css/station.css       | 12 ++++++++++++
 web/src/station/MapResult.tsx | 10 ++++------
 web/src/station/Result.tsx    |  2 +-
 web/src/station/Station.tsx   |  7 ++++---
 6 files changed, 35 insertions(+), 17 deletions(-)
 create mode 100644 web/src/components/Spacer.tsx

diff --git a/web/src/components/Spacer.tsx b/web/src/components/Spacer.tsx
new file mode 100644
index 0000000..bc2bd0a
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/web/src/css/Result.css b/web/src/css/Result.css
index b0aad4c..da1e468 100644
--- a/web/src/css/Result.css
+++ b/web/src/css/Result.css
@@ -1,13 +1,13 @@
 .result-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 10px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
 }
 
-  .result-item {
-    background-color: #f2f2f2;
-    padding: 10px;
-    text-align: center;
+.result-item {
+  background-color: #f2f2f2;
+  padding: 10px;
+  text-align: center;
 }
 
 .resultTitle {
diff --git a/web/src/css/station.css b/web/src/css/station.css
index 4749ae7..d9a9853 100644
--- a/web/src/css/station.css
+++ b/web/src/css/station.css
@@ -34,4 +34,16 @@
 .stationWrapper .submenu {
     padding: 5px 10px;
     background-color: #f2f2f2;
+}
+
+.stationResult {
+    padding-inline-start: 5px;
+}
+
+.stationResult li {
+    padding: 3px;
+}
+
+.stationResult li:nth-child(odd) {
+    background-color: #d6d6d6;
 }
\ No newline at end of file
diff --git a/web/src/station/MapResult.tsx b/web/src/station/MapResult.tsx
index 76ff81a..ff14b08 100644
--- a/web/src/station/MapResult.tsx
+++ b/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;
     });
diff --git a/web/src/station/Result.tsx b/web/src/station/Result.tsx
index 602aa12..1033b8d 100644
--- a/web/src/station/Result.tsx
+++ b/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) =>
diff --git a/web/src/station/Station.tsx b/web/src/station/Station.tsx
index 437c008..10bcee6 100644
--- a/web/src/station/Station.tsx
+++ b/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")}>