Map view for results

2023-08-07 23:25:35 +03:00
parent 4c9af88859
commit 5ce297e96a
10 changed files with 198 additions and 42 deletions
@@ -0,0 +1,57 @@
+import moment from "moment";
+import { Accessor, Component, createResource, createSignal } from "solid-js";
+
+import "../../css/Result.css"
+import { apiHost } from "../../consts";
+import { isQueryResult } from "../helpers";
+import { Result } from "./Result";
+
+export const QueryResult: Component<{
+    getCities: Accessor<Set<string>>,
+    getStart: Accessor<Date>,
+    getEnd: Accessor<Date>,
+    getField: Accessor<string>,
+    getKey: Accessor<string>,
+    getGranularity: Accessor<string>,
+}> = (props) => {
+    const cities = () => [...props.getCities()].join(",");
+    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 (cities() === "") return new Error("ERROR: Select cities!");
+        await new Promise(resolve => setTimeout(resolve, 500))
+        const response = await fetch(`${apiHost}/api/query/${queryStart()}-${queryEnd()}/${props.getGranularity()}/${cities()}/${props.getField()}/${props.getKey()}`);
+        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() && isQueryResult( queryResource() ) &&
+                <Result result={queryResource} />
+            }
+        </div>
+    );
+}
@@ -0,0 +1,58 @@
+import { Component, createSignal, Resource } from "solid-js";
+
+import "../../css/Result.css"
+import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../consts";
+import { SelectOrder } from "../SelectOrder";
+import { CityResult } from "../chart/CityResult";
+import { QueryResult } from "../helpers";
+import { MapView } from "../map/MapView";
+
+export const Result: Component<{
+    result: Resource<QueryResult>
+}> = ({ result: resultResource }) => {
+    const [getOrderKey, setOrderKey] = createSignal<ResultOrderKeys>("A -> Z");
+    type ResultView = "text" | "map";
+    const [getResultView, setResultView] = createSignal<ResultView>("text");
+
+    const cityData = () =>
+        Object.entries(resultResource()!.result)
+        .map(keyVal => [...keyVal] as ResultKeyVal)
+        .sort((a, b) => resultOrder[getOrderKey()](a, b));
+
+    return (
+        <div>
+            <div class="resultTitle">
+                <h3>Result:</h3>
+                <span>
+                    <input
+                        type="button"
+                        class="secondary"
+                        value="text"
+                        onClick={() => setResultView("text")}
+                    /> 
+                    &nbsp; | &nbsp;
+                    <input
+                        type="button"
+                        class="secondary"
+                        value="map"
+                        onClick={() => setResultView("map")}
+                    />
+                </span>
+                <span style={{ visibility: getResultView() === "text" ? "visible" : "hidden" }}>
+                    <SelectOrder getter={getOrderKey} setter={setOrderKey} />
+                </span>
+            </div>
+            <div class="result-container">
+                { getResultView() === "text"
+                    ? cityData().map(([city, data]) =>
+                        <CityResult
+                            city={city}
+                            query={resultResource()!.query}
+                            result={data}
+                        />)
+                    : <MapView data={cityData} />
+                }
+            </div>
+        </div>
+    );
+}