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 && -