Select weather fields for country view

web/src/App.tsx

@@ -11,7 +11,7 @@ console.log("api host:", import.meta.env.VITE_API_HOST);
 type Section = "cities" | "country" | "database";
 
 const App: Component = () => {
-    const [getSection, setSection] = createSignal<Section>("country");
+    const [getSection, setSection] = createSignal<Section>("cities");
 
     const section = () => {
         switch(getSection()) {

web/src/cities/SelectCity.tsx

@@ -33,8 +33,8 @@ export const SelectCity: Component<{
                 onClick={selectAll}
             />
             <ul>{cityList.map(city =>
-                <label>
                 <li>
+                    <label>
                     <input
                         type="checkbox"
                         name="city"
@@ -43,8 +43,8 @@ export const SelectCity: Component<{
                         onClick={handleSelect}
                     />
                     {city}
+                    </label>
                 </li>
-                </label>
                 )}
             </ul>
         </div>

web/src/consts.ts

@@ -4,6 +4,8 @@ export const cityList = ["Ainaži", "Alūksne", "Bauska", "Dagda", "Daugavgrīva
 
 export const weatherField = ["tempMax", "tempMin", "tempAvg", "precipitation", "windAvg", "windMax", "visibilityMin", "visibilityAvg", "snowAvg", "atmPressire", "dewPoint", "humidity", "sunDuration", "phenomena"];
 
+export const weatherFieldNumeric = weatherField.filter(f => f !== "phenomena");
+
 export const aggregateKey = ["min", "max", "avg", "sum", "list", "distinct"];
 
 export const aggregateGranularity = ["hour", "day", "month", "year"];

web/src/country/Country.tsx

@@ -1,15 +1,15 @@
+import moment from "moment";
 import { createSignal } from "solid-js";
 
 import { QueryResult } from "./result/QueryResult";
 import { SelectTimeRange } from "../components/SelectTimeRange";
-import moment from "moment";
+import { weatherFieldNumeric } from "../consts";
-import { weatherField } from "../consts";
+import { MultiSelectField } from "./MultiSelectField";
 
 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);
@@ -19,7 +19,10 @@ export function Country() {
             <h2>Latvia</h2>
             <div class="container">
                 <div class="column">
-                    column1
+                    <MultiSelectField
+                        getFields={getFields}
+                        setFields={setFields}
+                    />
                 </div>
                 <div class="column">
                     <SelectTimeRange

web/src/country/MultiSelectField.tsx

@@ -0,0 +1,54 @@
+import { Accessor, Component, Setter } from "solid-js";
+import { weatherFieldNumeric } from "../consts";
+
+export const MultiSelectField: Component<{
+    getFields: Accessor<string[]>,
+    setFields: Setter<string[]>,
+}> = ({ getFields, setFields }) => {
+
+    function handleSelect(fieldName: string) {
+        const fields = [...getFields()];
+        if (fields.includes(fieldName)) {
+            const removeIndex = fields.indexOf(fieldName);
+            fields.splice(removeIndex, 1);
+        }
+        else fields.push(fieldName);
+
+        setFields(fields);
+    }
+
+    function selectAll(e: MouseEvent) {
+        if (!e.target) return;
+        const target = e.target as HTMLInputElement;
+        const selectedFields = target.checked
+            ? [...weatherFieldNumeric]
+            : [];
+
+        setFields(selectedFields);
+    }
+
+    return (
+        <>
+        Select all <input
+                type="checkbox"
+                checked={true}
+                onClick={selectAll}
+            />
+        <ul>
+            {weatherFieldNumeric.map(fieldName =>
+                <li>
+                <label> 
+                <input
+                    type="checkbox"
+                    name={fieldName}
+                    checked={getFields().includes(fieldName)}
+                    onClick={() => handleSelect(fieldName)}
+                />
+                {fieldName}
+                </label>
+                </li>
+            )}
+        </ul>
+        </>
+    );
+}

web/src/css/index.css

@@ -14,6 +14,15 @@ code {
     monospace;
 }
 
+ul {
+  list-style-type: none;
+  padding-inline-start: 15px;
+}
+
+thead {
+  font-weight: bold;
+}
+
 @font-face {
   font-family: 'Rubik';
   src: url('../assets/Rubik-Medium.ttf') format('truetype');