Starting on downloading all gribs for reference date

web/src/harmonie/GribFile.tsx

@@ -9,7 +9,6 @@ import { fetchHourPrecipitationData, isCalculatedHourPrecipitation } from './dra
 
 export const GribFile: Component<{
     name: string,
-    getCanvas: Accessor<HTMLCanvasElement | undefined>,
     setIsLoading: Setter<boolean>,
     getFileGribList: Accessor<GribMessage[]>, // specific reference and forecast time (in one file)
     getAllGribLists: Accessor<GribMessage[]>,

web/src/harmonie/Harmonie.tsx

@@ -1,17 +1,18 @@
 import { Component, createSignal } from 'solid-js'
 
 import { apiHost } from '../consts'
-import styles from './harmonie.module.css'
 import { GribFile } from './GribFile'
 import { GribMessage } from './interfaces'
 import { fetchJson } from '../helpers/fetch'
 import { getFakeWindDirection, isWindSpeed } from './draw/windDirection'
 import { getFakeHourPrecipitation, isPrecipitation } from './draw/precipitation'
 import { DrawView } from './DrawView'
+import { ReferenceTimes } from './ReferenceTimes'
+
+import styles from './harmonie.module.css'
 
 export const Harmonie: Component<{}> = () => {
     const [getFileList, setFileList] = createSignal<string[]>([])
-    const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>()
     const [getIsLoading, setIsLoading] = createSignal(true)
     const [getIsCrop, setIsCrop] = createSignal(true)
     const [getIsContour, setIsContour] = createSignal(true)
@@ -32,7 +33,7 @@ export const Harmonie: Component<{}> = () => {
         })
         .finally(() => setIsLoading(false))
 
-    function onGribMessageClick(fileName: string) {
+    function getAllGribStructure() {
         if(!getGribList().length) {
             setIsLoading(true)
             fetchJson(`${apiHost}/api/show/grib-all-structure`)
@@ -75,15 +76,19 @@ export const Harmonie: Component<{}> = () => {
                 Interpolate
                 <input type='checkbox' checked={getIsInterpolated()} onChange={()=>setIsInterpolated(!getIsInterpolated())} />
             </label>
+            <ReferenceTimes
+                getFileList={getFileList}
+                getGribList={getGribList}
+                onClick={getAllGribStructure}
+            />
             <ul class={styles.fileList}>
                 {getFileList().map(fileName =>
                     <GribFile 
                         name={fileName}
-                        getCanvas={getCanvas}
                         setIsLoading={setIsLoading}
                         getFileGribList={() => getCurrentGribList(fileName)}
                         getAllGribLists={getGribList}
-                        onClick={() => onGribMessageClick(fileName)}
+                        onClick={getAllGribStructure}
                         cachedMessagesSignal={cachedMessagesSignal}
                         cachedBuffersSignal={cachedBuffersSignal}
                         cachedBitmasksSignal={cachedBitmasksSignal}

web/src/harmonie/ReferenceTimes.tsx

@@ -0,0 +1,41 @@
+import { Accessor, Component, createSignal } from 'solid-js'
+
+import styles from './harmonie.module.css'
+import { GribMessage } from './interfaces'
+
+export const ReferenceTimes: Component<{
+    getFileList: Accessor<string[]>,
+    getGribList: Accessor<GribMessage[]>,
+    onClick: () => void,
+}> = ({
+    getFileList,
+    getGribList,
+    onClick,
+}) => {
+    const [getActiveDate, setActiveDate] = createSignal('')
+    const dateList = () => {
+        const datesStr = getFileList().map(f => f.replace('harmonie_', '').split('_')[0])
+        return [...new Set(datesStr)]
+    }
+
+    function onActiveDate(date: string) {
+        onClick()
+        const newValue = getActiveDate() === date ? '' : date
+        setActiveDate(newValue)
+    }
+
+    return <ul class={styles.dateList}>
+        { dateList().map(dateStr =>
+            <li>
+                <div onClick={() => onActiveDate(dateStr)}>
+                    { dateStr }
+                </div>
+                <div class={styles.controls} style={{ display: getActiveDate() === dateStr ? 'block' : 'none'}}>
+                    {
+                        getGribList().some(g => g.time.referenceTime === dateStr)
+                        && <>TODO: download all forecasts</>
+                    }
+                </div>
+            </li>)}
+    </ul>
+}

web/src/harmonie/harmonie.module.css

@@ -53,4 +53,19 @@
 /* meteoParam */
 .meteoParams li:hover {
     text-decoration: underline;
+}
+
+
+.dateList {
+    padding-left: 0;
+}
+
+.dateList li {
+    color: #ddd;
+    background-color: #333;
+    padding: 5px 0 5px 10px;
+}
+
+.dateList li .controls {
+    padding: 10px 3px;
 }