Query and display weather data for all country

2023-12-24 23:54:16 +02:00
parent 7305718c34
commit a48b9df91f
35 changed files with 193 additions and 63 deletions
@@ -0,0 +1,52 @@
+import moment from "moment";
+import { Accessor, Component, createResource, createSignal } from "solid-js";
+
+import { apiHost } from "../../consts";
+import { Result } from "./Result";
+
+
+export const QueryResult: Component<{
+    getStart: Accessor<Date>,
+    getEnd: Accessor<Date>,
+    getFields: Accessor<string[]>,
+}> = (props) => {
+    const queryStart = () => moment(props.getStart()).format("YYYYMMDD_HHmm");
+    const queryEnd = () => moment(props.getEnd()).format("YYYYMMDD_HHmm"); 
+    const [getTimestamp, setTimestamp] = createSignal<number>(0);
+    
+    const fetchQuery = async (timestamp: number) => {
+        if (props.getFields().length === 0) return new Error("ERROR: Select weather parameters!");
+        await new Promise(resolve => setTimeout(resolve, 500))
+        const response = await fetch(`${apiHost}/api/query/country/${queryStart()}-${queryEnd()}/${props.getFields().join(",")}`);
+        const json = await response.json();
+        return json;
+    }
+
+    const [queryResource] = createResource(getTimestamp, fetchQuery);
+
+    return (
+        <div>
+            <input
+                type="button"
+                class="primary"
+                value="Query Data"
+                onClick={() => setTimestamp(Date.now())}
+            />
+            { queryResource.loading && (
+                <div>
+                    <span class="spinner"></span>
+                    <span style={{ "padding-left": "16px" }}>Loading query</span>
+                </div>
+            )}
+            { queryResource.error && (
+                <div>Error while querying: ${queryResource.error}</div>
+            )}
+            { queryResource() && queryResource() instanceof Error &&
+                <div>{ queryResource().message }</div>
+            }
+            { queryResource() &&
+                <Result result={queryResource} />
+            }
+        </div>
+    );
+}
@@ -0,0 +1,34 @@
+import { Component, Resource } from "solid-js";
+
+export interface ResultData {
+    [field: string]: [number, number, number, number];
+}
+
+export const Result: Component<{
+    result: Resource<ResultData>
+}> = ({ result: resultResource }) => {
+    const countryData = () => Object.entries(resultResource()!)
+        .sort((a, b) => a[0] > b[0] ? 1 : -1)
+        .map(([field, values]) => <tr>
+            <td>{field}</td>
+            <td>{values[0]}</td>
+            <td>{values[1]}</td>
+            <td>{values[2]}</td>
+            <td>{values[3]}</td>
+            </tr>)
+
+    return (
+        <div>
+            <table>
+                <thead><tr>
+                    <td>Param</td>
+                    <td>min</td>
+                    <td>max</td>
+                    <td>avg</td>
+                    <td>sum</td>
+                </tr></thead>
+                { countryData() }
+            </table>
+        </div>
+    );
+}