Setting up harmonie page in frontend

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