Setting up harmonie page in frontend

web/src/App.tsx

@@ -1,4 +1,5 @@
-import { Component, JSXElement, createSignal } from 'solid-js';
+import { Component, JSXElement, createSignal } from 'solid-js'
+import { Route, Router } from '@solidjs/router'
 
 import styles from './css/menu.module.css';
 import { Country } from './country/Country';
@@ -7,46 +8,35 @@ import { Database } from './database/Database';
 import { Station } from './station/Station';
 import { apiHost } from './consts';
 import { WeatherIconStub } from './components/weatherIcons/WeatherIconStub';
+import { Harmonie } from './harmonie/Harmonie'
 
 console.log("env:", import.meta.env.MODE);
 console.log("api host:", apiHost);
 
 const App: Component = () => {
-    const pages: [string, () => JSXElement][] = [
-        ["station", () => <Station />],
-        ["cities", () => <Cities />],
-        ["latvia", () => <Country />],
-        ["database", () => <Database />],
-    ];
-    const [getPageTitle, setPageTitle] = createSignal("station");
-
-    const getPageContent = () => {
-        const page = pages.find(p => p[0] === getPageTitle());
-        return page ? page[1]() : <div>Page not found!</div>;
-    }
-
-    const getActiveCSS = (pageTitle: string) => {
-        return getPageTitle() === pageTitle ? styles.active : "";
-    }
-
+    const pages = ['station', 'cities', 'latvia', 'database', 'harmonie']
     return (
         <div>
             <div class="grid-1-1">
                 <div><WeatherIconStub /></div>
                 <div>
                     <ul class={styles.menu}>
-                        { pages.map(([pageTitle]) =>
-                            <li
-                                class={getActiveCSS(pageTitle)}
-                                onClick={() => setPageTitle(pageTitle)}
-                            >
-                                {pageTitle}
+                        { pages.map(page =>
+                            <li>
+                                <a href={page}>{page}</a>
                             </li>
                         )}
                     </ul>
                 </div>
             </div>
-            { getPageContent() }
+            <Router>
+                <Route path="/" component={Harmonie} />
+                <Route path="/harmonie" component={Harmonie} />
+                <Route path="/station" component={Station} />
+                <Route path="/cities" component={Cities} />
+                <Route path="/latvia" component={Country} />
+                <Route path="/database" component={Database} />
+            </Router>
         </div>
     );
 };

web/src/harmonie/GribFile.tsx

@@ -0,0 +1,35 @@
+import { Accessor, Component, createSignal } from 'solid-js'
+
+import styles from './harmonie.module.css'
+import { apiHost } from '../consts'
+
+export const GribFile: Component<{
+    name: string,
+    isActive: Accessor<boolean>,
+    onClick: (name: string) => void,
+}> = ({ name, isActive, onClick }) => {
+    const [getStructure, setStructure] = createSignal<any[]>([])
+
+    function onFileClick() {
+        onClick(name)
+
+        if (getStructure().length === 0) {
+            fetch(`${apiHost}/api/show/grib/${name}`)
+                .then(re => re.json())
+                .then(setStructure)
+        }
+    }
+
+    return <li
+        class={isActive() ? styles.active : ''}
+        onClick={onFileClick}
+    >
+        <div class={styles.name}>{ name }</div>
+        <ul class={styles.meteoParams}>
+            { getStructure().map(grib => 
+                <li>{ grib.title }</li>
+            )}
+        </ul>
+    </li>
+
+}

web/src/harmonie/Harmonie.tsx

@@ -0,0 +1,30 @@
+import { Component, createSignal } from 'solid-js'
+import { apiHost } from '../consts'
+
+import styles from './harmonie.module.css'
+import { GribFile } from './GribFile'
+
+export const Harmonie: Component<{}> = () => {
+    const [getFileList, setFileList] = createSignal<string[]>([])
+    const [getActiveGrib, setActiveGrib] = createSignal('')
+
+    fetch(`${apiHost}/api/show/grib-list`)
+        .then(re => re.json())
+        .then(fileList => {
+            fileList.sort((a: string, b: string) => a < b ? 1 : -1)
+            setFileList(fileList)
+        })
+
+    return <div>
+        Harmonie
+        <ul class={styles.fileList}>
+            {getFileList().map(fileName =>
+                <GribFile 
+                    name={fileName}
+                    isActive={() => getActiveGrib() === fileName}
+                    onClick={() => setActiveGrib(fileName)}
+                />
+            )}
+        </ul>
+    </div>
+}

web/src/harmonie/harmonie.module.css

@@ -0,0 +1,18 @@
+.fileList li {
+    padding: 5px 0;
+}
+.fileList > li:nth-child(odd) {
+    background-color: #ddd;
+}
+
+.fileList .active .name {
+    font-weight: bold;
+}
+
+.fileList .meteoParams {
+    display: none;
+}
+
+.fileList li.active .meteoParams {
+    display: block;
+}