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 (
+
+ );
+}
\ 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, 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, 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<{
{ meteoResource().message }
}
{ meteoResource() && props.getCity() && !meteoResource.loading &&
-
+
{ 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())}
/>
+
handleDateChange(e.target.value)}
/>
+