Query and display city field chart and all city weather data

web/src/cities/chart/CityChart.tsx

@@ -6,15 +6,15 @@ import { CityLargeChart } from "./CityLargeChart";
 import { createCustomChart } from "./CustomChart";
 
 export const CityChart: Component<{
-    city: string;
-    data: [string, number | null][];
-    query: DataQuery;
+    city: () => string;
+    data: () => [string, number | null][];
+    query: () => DataQuery;
 }> = (props) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
     const [getIsLarge, setIsLarge] = createSignal(false);
 
     let chart: Chart | undefined;
-    const data: [string, number | null][] = props.data.map(([dateStr, value]) => [
+    const data: [string, number | null][] = props.data().map(([dateStr, value]) => [
         formatDateString(dateStr),
         value,
     ]);
@@ -30,9 +30,9 @@ export const CityChart: Component<{
             false,
             timestamps,
             values,
-            props.city,
-            props.query.field,
-            props.query.granularity,
+            props.city(),
+            props.query().field,
+            props.query().granularity,
         );
     });
 

web/src/cities/chart/CityLargeChart.tsx

@@ -6,14 +6,14 @@ import "../../css/overlay.css"
 import { createCustomChart } from "./CustomChart";
 
 export const CityLargeChart: Component<{
-    city: string;
-    data: [string, number | null][];
-    query: DataQuery;
+    city: () => string;
+    data: () => [string, number | null][];
+    query: () => DataQuery;
     close: () => void
 }> = (props) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
     let chart: Chart;
-    const data: [string, number | null][] = props.data.map(([dateStr, value]) => [
+    const data: [string, number | null][] = props.data().map(([dateStr, value]) => [
         formatDateString(dateStr),
         value,
     ]);
@@ -30,9 +30,9 @@ export const CityLargeChart: Component<{
             true,
             timestamps,
             values,
-            props.city,
-            props.query.field,
-            props.query.granularity,
+            props.city(),
+            props.query().field,
+            props.query().granularity,
         );
     });
 

web/src/station/Result.tsx

@@ -1,9 +1,88 @@
-import { Accessor, Component } from "solid-js";
+import { Accessor, Component, createResource } from "solid-js";
+import { apiHost } from "../consts";
+import moment from "moment";
+import { CityChart } from "../cities/chart/CityChart";
+
+export const Result: Component<{
+    getCity: Accessor<string|undefined>,
+    getField: Accessor<string>,
+    getStart: Accessor<Date>,
+    getEnd: Accessor<Date>,
+}> = (props) => {
+    const queryStart = () => moment(props.getStart()).format("YYYYMMDD_HHmm");
+    const queryEnd = () => moment(props.getEnd()).format("YYYYMMDD_HHmm");
+
+    const fetchList = async (city: string | undefined) => {
+        if (city === undefined) return undefined;
+        await new Promise(resolve => setTimeout(resolve, 500));
+        const response = await fetch(`${apiHost}/api/query/city/${props.getCity()}/${queryStart()}-${queryEnd()}/hour/${props.getField()}/list`);
+        const json = await response.json();
+        return json;
+    }
+
+    const fetchMeteo = async (city: string | undefined) => {
+        if (city === undefined) return undefined;
+        await new Promise(resolve => setTimeout(resolve, 500));
+        const response = await fetch(`${apiHost}/api/query/city/${props.getCity()}/${queryStart()}-${queryEnd()}/allFields`);
+        const json = await response.json();
+        return json;
+    }
+
+    const [listResource] = createResource(props.getCity, fetchList);
+    const [meteoResource] = createResource(props.getCity, fetchMeteo);
 
-export const Result: Component<{ getCity: Accessor<string|undefined>}> = ({ getCity }) => {
     return (
         <div>
-            { getCity() }
+            {
+                props.getCity() === undefined && <div>Select city!</div>
+            }
+
+            { /* City weather field as chart  */}
+            { listResource.loading && (
+                <div>
+                    <span class="spinner"></span>
+                    <span style={{ "padding-left": "16px" }}>Loading chart</span>
+                </div>
+            )}
+            { listResource.error && (
+                <div>Error while querying: ${listResource.error}</div>
+            )}
+            { listResource() && listResource() instanceof Error &&
+                <div>{ listResource().message }</div>
+            }
+            { listResource() && props.getCity() &&
+                <div>
+                    <h3>{ props.getCity() }</h3>
+                    <CityChart
+                        city={() => listResource().query.cities[0]}
+                        data={() => listResource().result[listResource().query.cities[0]]}
+                        query={() => listResource().query}
+                    />
+                </div>
+            }
+
+            { /* City all weather fields with double values */}
+            { meteoResource.loading && (
+                <div>
+                    <span class="spinner"></span>
+                    <span style={{ "padding-left": "16px" }}>Loading meteo data</span>
+                </div>
+            )}
+            { meteoResource.error && (
+                <div>Error while querying: ${meteoResource.error}</div>
+            )}
+            { meteoResource() && meteoResource() instanceof Error &&
+                <div>{ meteoResource().message }</div>
+            }
+            { meteoResource() && props.getCity() &&
+                <ul>
+                    { Object.entries(meteoResource())
+                    .sort((a, b) => a[0] > b[0] ? 1 : -1)
+                    .map(([key, value]: any) =>
+                        <li>{key}: {value}</li>
+                    )}
+                </ul>
+            }
         </div>
     );
 }

web/src/station/Station.tsx

@@ -17,7 +17,9 @@ export const Station: Component<{}> = () => {
     const [getCities, setCities] = createSignal<Set<string>>(new Set(["Ainaži", "Rīga", "Rēzekne", "Liepāja", "Daugavpils", "Ventspils", "Madona"]));
     const [getDate, setDate] = createSignal(moment());
     const [getField, setField] = createSignal("tempMax");
-    const [getCity, setCity] = createSignal<string | undefined>(undefined);
+    const [getCity, setCity] = createSignal<string | undefined>("Rīga");
+    const [getStart, setStart] = createSignal(moment().subtract(1, "days").toDate());
+    const [getEnd, setEnd] = createSignal(moment().toDate());
 
     let ctx: CanvasRenderingContext2D | undefined;
 
@@ -71,7 +73,12 @@ export const Station: Component<{}> = () => {
                     <canvas ref={setCanvas} width={1000} height={570} />
                 </div>
                 <div class="column">
-                    <Result getCity={getCity} />
+                    <Result
+                        getCity={getCity}
+                        getField={getField}
+                        getStart={getStart}
+                        getEnd={getEnd}
+                    />
                 </div>
             </div>
         </div>