Query and display weather data for all country

web/src/App.tsx

@@ -1,31 +1,34 @@
 import { Component, createSignal } from 'solid-js';
-import { Aggregator } from './aggregator/Aggregator';
 
 import styles from './css/App.module.css';
-import { FileManager } from './fileManager/FileManager';
+import { Country } from './country/Country';
+import { Cities } from './cities/Cities';
+import { Database } from './database/Database';
 
 console.log("env:", import.meta.env.MODE);
 console.log("api host:", import.meta.env.VITE_API_HOST);
 
-type Section = "aggregator" | "mapView" | "fileManager";
+type Section = "cities" | "country" | "database";
 
 const App: Component = () => {
-    const [getSection, setSection] = createSignal<Section>("aggregator");
+    const [getSection, setSection] = createSignal<Section>("country");
 
     const section = () => {
         switch(getSection()) {
-            case "fileManager": return <FileManager />;
-            case "aggregator":
+            case "database": return <Database />;
+            case "country": return <Country />;
+            case "cities": return <Cities />
             default: 
-                return <Aggregator />;
+                return <Cities />;
         }
     }
 
     return (
         <div class={styles.App}>
             <div class={styles.sections}>
-                <span onClick={() => setSection("aggregator")}>aggregator</span> | 
-                <span onClick={() => setSection("fileManager")}>file manager</span>
+                <span onClick={() => setSection("cities")}>cities</span> | 
+                <span onClick={() => setSection("country")}>latvia</span> | 
+                <span onClick={() => setSection("database")}>database</span>
             </div>
             { section() }
         </div>

web/src/cities/Cities.tsx

@@ -6,12 +6,12 @@ import { SelectCity } from "./SelectCity";
 import { SelectField } from "./SelectField";
 import { SelectGranularity } from "./SelectGranularity";
 import { SelectKey } from "./SelectKey";
-import { SelectTimeRange } from "./SelectTimeRange";
+import { SelectTimeRange } from "../components/SelectTimeRange";
 
 const nowRounded = new Date(new Date().setMinutes(30));
 const dayAgo = moment(nowRounded).subtract(1, "days").subtract(30, "minutes").toDate();
 
-export function Aggregator() {
+export function Cities() {
     const [getCities, setCities] = createSignal<Set<string>>(new Set([]));
     const [getStart, setStart] = createSignal(dayAgo);
     const [getEnd, setEnd] = createSignal(nowRounded);
@@ -21,7 +21,7 @@ export function Aggregator() {
 
     return (
         <div class="aggregator">
-            <h2>Aggregator</h2>
+            <h2>Cities</h2>
             <div class="container">
                 <div class="column">
                     <SelectCity getCities={getCities} setCities={setCities} />

web/src/cities/result/QueryResult.tsx

@@ -22,7 +22,7 @@ export const QueryResult: Component<{
     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 response = await fetch(`${apiHost}/api/query/city/${cities()}/${queryStart()}-${queryEnd()}/${props.getGranularity()}/${props.getField()}/${props.getKey()}`);
         const json = await response.json();
         return json;
     }

web/src/country/Country.tsx

@@ -0,0 +1,42 @@
+import { createSignal } from "solid-js";
+
+import { QueryResult } from "./result/QueryResult";
+import { SelectTimeRange } from "../components/SelectTimeRange";
+import moment from "moment";
+import { weatherField } from "../consts";
+
+const nowRounded = new Date(new Date().setMinutes(30));
+const dayAgo = moment(nowRounded).subtract(1, "days").subtract(30, "minutes").toDate();
+
+export function Country() {
+    const weatherFieldNumeric = weatherField.filter(f => f !== "phenomena");
+    const [getStart, setStart] = createSignal(dayAgo);
+    const [getEnd, setEnd] = createSignal(nowRounded);
+    const [getFields, setFields] = createSignal(weatherFieldNumeric);
+
+    return (
+        <div class="fileManager">
+            <h2>Latvia</h2>
+            <div class="container">
+                <div class="column">
+                    column1
+                </div>
+                <div class="column">
+                    <SelectTimeRange
+                        getStart={getStart}
+                        setStart={setStart}
+                        getEnd={getEnd}
+                        setEnd={setEnd}
+                    />
+                </div>
+                <div class="column">
+                    <QueryResult
+                        getFields={getFields}
+                        getStart={getStart}
+                        getEnd={getEnd}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

web/src/country/result/QueryResult.tsx

@@ -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>
+    );
+}

web/src/country/result/Result.tsx

@@ -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>
+    );
+}

web/src/database/Database.tsx

@@ -7,7 +7,7 @@ import { FetchFiles } from "./FetchFiles";
 import { FileContent } from "./FileContent";
 import { FileNameList } from "./FileNameList";
 
-export function FileManager() {
+export function Database() {
     const [getDate, setDate] = createSignal(new Date());
     const [getFileName, setFileName] = createSignal("");
 
@@ -15,7 +15,7 @@ export function FileManager() {
 
     return (
         <div class="fileManager">
-            <h2>File manager</h2>
+            <h2>Database</h2>
             <div class="container">
                 <div class="column">
                     <DateList getDate={getDate} setDate={setDate} />