Refactor, move all pages to separate folder

web/src/App.tsx

@@ -2,14 +2,14 @@ import { Component } from 'solid-js'
 import { Route, Router } from '@solidjs/router'
 
 import styles from './css/menu.module.css';
-import { Country } from './country/Country';
-import { Cities } from './cities/Cities';
-import { Database } from './database/Database';
-import { Station } from './station/Station';
+import { Country } from './pages/country/Country';
+import { Cities } from './pages/cities/Cities';
+import { Database } from './pages/database/Database';
+import { Station } from './pages/station/Station';
 import { apiHost } from './consts';
 import { WeatherIconStub } from './components/weatherIcons/WeatherIconStub';
-import { Harmonie } from './harmonie/Harmonie'
-import { LvgmcForecast } from './lvgmc-forecast/LvgmcForecast'
+import { Harmonie } from './pages/harmonie/Harmonie'
+import { LvgmcForecast } from './pages/lvgmc-forecast/LvgmcForecast'
 
 console.log("env:", import.meta.env.MODE)
 console.log("api host:", apiHost)

web/src/components/chart/CityChart.tsx

@@ -3,7 +3,7 @@ import { Chart } from "chart.js";
 
 import { CityLargeChart } from "./CityLargeChart";
 import { createCustomChart } from "./CustomChart";
-import { DataQuery, formatDateString } from "../../cities/helpers";
+import { DataQuery, formatDateString } from "../../pages/cities/helpers";
 
 export const CityChart: Component<{
     city: () => string;

web/src/components/chart/CityLargeChart.tsx

@@ -3,7 +3,7 @@ import { Chart } from "chart.js";
 
 import "../../css/overlay.css"
 import { createCustomChart } from "./CustomChart";
-import { DataQuery, formatDateString } from "../../cities/helpers";
+import { DataQuery, formatDateString } from "../../pages/cities/helpers";
 
 export const CityLargeChart: Component<{
     city: () => string;

web/src/components/map/MapView.tsx

@@ -4,10 +4,10 @@ import { ResultKeyVal } from "../../consts";
 import { WindInputs, WindSignals } from "./WindInputs";
 
 import arrowUrl from "../../assets/arrow.webp";
-import { cityCoords } from "../../components/cityCoords";
+import { cityCoords } from "../cityCoords";
 import { MapResolution, resolutionProps, windProps, WindProps } from "./mapConsts";
 import { CityData, drawOnMap } from "./canvasDraw";
-import { IconInputs } from "../../components/weatherIcons/IconInputs";
+import { IconInputs } from "../weatherIcons/IconInputs";
 
 export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[] }> = ({ type, data }) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();

web/src/components/spinner/LoadingSpinner.tsx

@@ -1,10 +1,12 @@
-import { Component } from "solid-js";
+import { Component } from 'solid-js'
+
+import styles from './spinner.module.css'
 
 export const LoadingSpinner: Component<{ text: string; }> = ({ text }) => {
     return (
         <div>
-            <span class="spinner"></span>
+            <span class={styles.spinner}></span>
             <span style={{ "padding-left": "16px" }}>{ text }</span>
         </div>
-    );
+    )
 }

web/src/components/spinner/spinner.module.css

@@ -2,8 +2,9 @@
     display: inline-block;
     width: 16px;
     height: 16px;
-  }
-  .spinner:after {
+}
+
+.spinner:after {
     content: " ";
     display: block;
     width: 14px;
@@ -13,12 +14,13 @@
     border: 6px solid #333;
     border-color: #333 transparent #333 transparent;
     animation: spinner 1.2s linear infinite;
-  }
-  @keyframes spinner {
+}
+
+@keyframes spinner {
     0% {
-      transform: rotate(0deg);
+        transform: rotate(0deg);
     }
     100% {
-      transform: rotate(360deg);
+        transform: rotate(360deg);
     }
-  }
+}

web/src/helpers/interpolateColors.ts

@@ -1,4 +1,4 @@
-import { ColorEntry } from '../harmonie/draw/constants'
+import { ColorEntry } from '../pages/harmonie/draw/constants'
 
 type RGBu8 = [number, number, number]
 type RGBAu8 = [number, number, number, number]

web/src/pages/cities/Cities.tsx

@@ -1,9 +1,9 @@
 import moment from "moment";
 import { createSignal } from "solid-js";
 
-import { SelectCity } from "../components/SelectCity";
-import { SelectTimeRange } from "../components/SelectTimeRange";
-import { SelectField } from "../components/SelectField";
+import { SelectCity } from "../../components/SelectCity";
+import { SelectTimeRange } from "../../components/SelectTimeRange";
+import { SelectField } from "../../components/SelectField";
 
 import { SelectGranularity } from "./SelectGranularity";
 import { SelectKey } from "./SelectKey";

web/src/pages/cities/SelectGranularity.tsx

@@ -1,6 +1,6 @@
 import { Accessor, Component, Setter } from "solid-js";
 
-import { aggregateGranularity } from "../consts";
+import { aggregateGranularity } from "../../consts";
 
 export const SelectGranularity: Component<{
     getGranularity: Accessor<string>,

web/src/pages/cities/SelectKey.tsx

@@ -1,6 +1,6 @@
 import { Accessor, Component, Setter } from "solid-js";
 
-import { aggregateKey } from "../consts";
+import { aggregateKey } from "../../consts";
 
 export const SelectKey: Component<{
     getKey: Accessor<string>,

web/src/pages/cities/SelectOrder.tsx

@@ -1,5 +1,5 @@
 import { Accessor, Component, Setter } from "solid-js";
-import { resultOrder, ResultOrderKeys } from "../consts";
+import { resultOrder, ResultOrderKeys } from "../../consts";
 
 export const SelectOrder: Component<{
     getter: Accessor<ResultOrderKeys>,

web/src/pages/cities/result/GridResult.tsx

@@ -1,6 +1,6 @@
 import { Component, Match, Switch } from "solid-js";
 
-import { CityChart } from "../../components/chart/CityChart";
+import { CityChart } from "../../../components/chart/CityChart";
 import { DataQuery } from "../helpers";
 
 export const GridResult: Component<{ city: string, query: DataQuery, result: any }> = ({ city, query, result }) => {

web/src/pages/cities/result/QueryView.tsx

@@ -1,10 +1,10 @@
-import moment from "moment";
+import moment from 'moment'
 import { Accessor, Component, createResource, createSignal } from "solid-js";
 
-import "../../css/Result.css"
-import { FETCH_DELAY_MS, apiHost } from "../../consts";
+import "../../../css/Result.css"
+import { FETCH_DELAY_MS, apiHost } from "../../../consts";
 import { isQueryResult } from "../helpers";
-import { LoadingSpinner } from "../../components/LoadingSpinner";
+import { LoadingSpinner } from "../../../components/spinner/LoadingSpinner";
 import { ResultView } from "./ResultView";
 
 export const QueryView: Component<{

web/src/pages/cities/result/ResultView.tsx

@@ -1,10 +1,10 @@
 import { Component, createSignal, JSXElement, Resource, Show } from "solid-js";
 
-import "../../css/Result.css"
-import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../consts";
+import "../../../css/Result.css"
+import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../../consts";
 import { SelectOrder } from "../SelectOrder";
 import { QueryResult } from "../helpers";
-import { MapView } from "../map/MapView";
+import { MapView } from "../../../components/map/MapView";
 import { GridResult } from "./GridResult";
 
 type ResultView = "grid" | "list" | "map_1920x1080" | "map_1920x1080_wind" | "map_3840x1440" | "map_3840x1440_wind";

web/src/pages/country/Country.tsx

@@ -2,8 +2,8 @@ import moment from "moment";
 import { createSignal } from "solid-js";
 
 import { QueryResult } from "./result/QueryResult";
-import { SelectTimeRange } from "../components/SelectTimeRange";
-import { weatherFieldNumeric } from "../consts";
+import { SelectTimeRange } from "../../components/SelectTimeRange";
+import { weatherFieldNumeric } from "../../consts";
 import { MultiSelectField } from "./MultiSelectField";
 
 const nowRounded = new Date(new Date().setMinutes(30));

web/src/pages/country/MultiSelectField.tsx

@@ -1,5 +1,5 @@
 import { Accessor, Component, Setter } from "solid-js";
-import { weatherFieldNumeric } from "../consts";
+import { weatherFieldNumeric } from "../../consts";
 
 export const MultiSelectField: Component<{
     getFields: Accessor<string[]>,

web/src/pages/country/result/QueryResult.tsx

@@ -1,9 +1,9 @@
 import moment from "moment";
 import { Accessor, Component, createResource, createSignal } from "solid-js";
 
-import { FETCH_DELAY_MS, apiHost } from "../../consts";
+import { FETCH_DELAY_MS, apiHost } from "../../../consts";
 import { Result } from "./Result";
-import { LoadingSpinner } from "../../components/LoadingSpinner";
+import { LoadingSpinner } from "../../../components/spinner/LoadingSpinner";
 
 
 export const QueryResult: Component<{

web/src/pages/database/Calendar.tsx

@@ -1,7 +1,7 @@
 import moment from "moment";
 import { Accessor, Component, Setter } from "solid-js";
 
-import "../css/calendar.css";
+import "../../css/calendar.css";
 
 export const Calendar: Component<{
     getSelectedDate: Accessor<Date>,

web/src/pages/database/Database.tsx

@@ -1,7 +1,7 @@
 import moment from "moment";
 import { createSignal } from "solid-js";
 
-import "../css/FileManager.css"
+import "../../css/FileManager.css"
 import { DateList } from "./DateList";
 import { FetchFiles } from "./FetchFiles";
 import { FileContent } from "./FileContent";

web/src/pages/database/DateList.tsx

@@ -1,11 +1,9 @@
-import moment from "moment";
-import { Accessor, Component, createResource, createSignal, Setter } from "solid-js";
+import moment from "moment"
+import { Accessor, Component, createResource, createSignal, Setter } from "solid-js"
 
-import { apiHost, FETCH_DELAY_MS } from "../consts";
-
-import "../css/spinner.css";
-import { Calendar } from "./Calendar";
-import { LoadingSpinner } from "../components/LoadingSpinner";
+import { apiHost, FETCH_DELAY_MS } from "../../consts"
+import { Calendar } from "./Calendar"
+import { LoadingSpinner } from "../../components/spinner/LoadingSpinner"
 
 export const DateList: Component<{getDate: Accessor<Date>, setDate: Setter<Date>;}> = (props) => {
     const [getCurrentMonth, setCurrentMonth] = createSignal(new Date());

web/src/pages/database/FetchFiles.tsx

@@ -1,6 +1,6 @@
 import moment from "moment";
 import { createSignal } from "solid-js";
-import { apiHost } from "../consts";
+import { apiHost } from "../../consts";
 
 export function FetchFiles() {
     const [getStart, setStart] = createSignal(new Date());

web/src/pages/database/FileContent.tsx

@@ -1,7 +1,7 @@
 import { Accessor, Component, createResource, JSXElement } from "solid-js";
-import { apiHost, FETCH_DELAY_MS } from "../consts";
+import { apiHost, FETCH_DELAY_MS } from "../../consts";
 import { PrettifyCSV } from "./PrettifyCSV";
-import { LoadingSpinner } from "../components/LoadingSpinner";
+import { LoadingSpinner } from "../../components/spinner/LoadingSpinner";
 
 export const FileContent: Component<{getFileName: Accessor<string>}> = (props) => {
     const fetchFileContent = async (fileName: string) => {

web/src/pages/database/FileNameList.tsx

@@ -1,9 +1,7 @@
-import moment from "moment";
-import { Accessor, Component, createResource, Setter } from "solid-js";
-import { apiHost, FETCH_DELAY_MS } from "../consts";
-
-import "../css/spinner.css";
-import { LoadingSpinner } from "../components/LoadingSpinner";
+import moment from "moment"
+import { Accessor, Component, createResource, Setter } from "solid-js"
+import { apiHost, FETCH_DELAY_MS } from "../../consts"
+import { LoadingSpinner } from "../../components/spinner/LoadingSpinner"
 
 export const FileNameList: Component<{
     getDate: Accessor<Date>,

web/src/pages/harmonie/DrawView.tsx

@@ -1,6 +1,6 @@
 import { Component, createEffect, Signal } from 'solid-js'
 
-import { LoadingSpinner } from '../components/LoadingSpinner'
+import { LoadingSpinner } from '../../components/spinner/LoadingSpinner'
 import { CROP_BOUNDS, DrawOptions, GribMessage } from './interfaces'
 import { drawGrib } from './draw/drawGrib'
 

web/src/pages/harmonie/ReferenceTimes.tsx

@@ -5,7 +5,7 @@ import { fetchGribBinaries } from './fetchGrib'
 import { drawGrib } from './draw/drawGrib'
 
 import styles from './harmonie.module.css'
-import { processPromisesInBatches } from '../helpers/progressivePromises'
+import { processPromisesInBatches } from '../../helpers/progressivePromises'
 
 const METEO_PARAMS: [string, MeteoParam][] = [
     ['temperature', { discipline: 0, category: 0, product: 0, levelType: -1, levelValue: -1, subType: 'now' }],

web/src/pages/harmonie/SlideShow.tsx

@@ -1,7 +1,7 @@
 import { Accessor, Component, createEffect, createSignal, onMount } from 'solid-js'
 
 import styles from './harmonie.module.css'
-import { downloadImagesAsZip } from '../helpers/download'
+import { downloadImagesAsZip } from '../../helpers/download'
 
 export const SlideShow: Component<{
     getIsLoading: Accessor<boolean>,

web/src/pages/harmonie/draw/bitmask.ts

@@ -1,4 +1,4 @@
-import { u8ToBits } from '../../helpers/u8ToBits.js'
+import { u8ToBits } from '../../../helpers/u8ToBits.js'
 import { MeteoGrid } from '../interfaces.js'
 
 export function applyBitmask(

web/src/pages/harmonie/draw/drawGrib.ts

@@ -1,4 +1,4 @@
-import { interpolateColors } from '../../helpers/interpolateColors'
+import { interpolateColors } from '../../../helpers/interpolateColors'
 import { CropBounds, GribMessage, MeteoParam } from '../interfaces'
 import { applyBitmask } from './bitmask'
 import { extractFromBounds } from './bounds'
@@ -7,7 +7,7 @@ import { hourPrecipitationColors, precipitationColors } from './precipitation'
 import { temperatureColors } from './temperature'
 import { isCalculatedWindDirection, windDirectionArrows, windDirectionColors, windSpeedColors } from './windDirection'
 
-import latvia_border from '../../assets/latvia_contour.webp'
+import latvia_border from '../../../assets/latvia_contour.webp'
 const latviaBoderImg = new Image()
 latviaBoderImg.onload = () => console.log('latvia_contour loaded...')
 latviaBoderImg.src = latvia_border

web/src/pages/harmonie/draw/precipitation.ts

@@ -1,9 +1,9 @@
 import moment from 'moment'
-import { valueToColorInterpolated, valueToColorThreshold } from '../../helpers/interpolateColors'
+import { valueToColorInterpolated, valueToColorThreshold } from '../../../helpers/interpolateColors'
 import { GribMessage, MeteoConversion } from '../interfaces'
 import { PRECIPITATION } from './constants'
-import { fetchBuffer } from '../../helpers/fetch'
-import { apiHost } from '../../consts'
+import { fetchBuffer } from '../../../helpers/fetch'
+import { apiHost } from '../../../consts'
 
 
 export function precipitationColors(

web/src/pages/harmonie/draw/temperature.ts

@@ -1,4 +1,4 @@
-import { valueToColorInterpolated, valueToColorThreshold } from '../../helpers/interpolateColors'
+import { valueToColorInterpolated, valueToColorThreshold } from '../../../helpers/interpolateColors'
 import { MeteoConversion } from '../interfaces'
 import { TEMPERATURES } from './constants'
 

web/src/pages/harmonie/draw/windDirection.ts

@@ -1,6 +1,6 @@
-import { apiHost } from '../../consts'
-import { fetchBuffer } from '../../helpers/fetch'
-import { valueToColorInterpolated, valueToColorThreshold } from '../../helpers/interpolateColors'
+import { apiHost } from '../../../consts'
+import { fetchBuffer } from '../../../helpers/fetch'
+import { valueToColorInterpolated, valueToColorThreshold } from '../../../helpers/interpolateColors'
 import { CropBounds, GribMessage, MeteoConversion } from '../interfaces'
 import { WIND_SPEED } from './constants'
 import { drawRotate, flipCanvasV } from './drawGrib'

web/src/pages/harmonie/fetchGrib.ts

@@ -1,5 +1,5 @@
-import { apiHost } from '../consts'
-import { fetchBuffer, fetchJson } from '../helpers/fetch'
+import { apiHost } from '../../consts'
+import { fetchBuffer, fetchJson } from '../../helpers/fetch'
 import { getFakeHourPrecipitation, isPrecipitation } from './draw/precipitation'
 import { getFakeWindDirection, isWindSpeed } from './draw/windDirection'
 import { GribMessage } from './interfaces'

web/src/pages/lvgmc-forecast/CsvMapData.tsx

@@ -1,13 +1,13 @@
 import { Component, createSignal, onMount } from 'solid-js'
-import { apiHost } from '../consts'
-import { fetchText } from '../helpers/fetch'
-import { codeToIcon } from '../components/weatherIcons/iconConsts'
-import { cityCoords } from '../components/cityCoords'
-import { CityData, drawOnMap } from '../cities/map/canvasDraw'
+import { apiHost } from '../../consts'
+import { fetchText } from '../../helpers/fetch'
+import { codeToIcon } from '../../components/weatherIcons/iconConsts'
+import { cityCoords } from '../../components/cityCoords'
+import { CityData, drawOnMap } from '../../components/map/canvasDraw'
 import { citiesToShow, csvCityListInOrder } from './consts'
 
-import arrowUrl from '../assets/arrow.webp'
-import { resolutionProps, windProps, WindProps } from '../cities/map/mapConsts'
+import arrowUrl from '../../assets/arrow.webp'
+import { resolutionProps, windProps, WindProps } from '../../components/map/mapConsts'
 
 export const CsvMapData: Component<{
     csvUrl: string,

web/src/pages/lvgmc-forecast/LvgmcForecast.tsx

@@ -1,7 +1,7 @@
 import { Component } from 'solid-js'
 
-import dayBgMap from '../assets/map_3840x1440_wind.webp'
-import nightBgMap from '../assets/map_night_3840x1440_wind.webp'
+import dayBgMap from '../../assets/map_3840x1440_wind.webp'
+import nightBgMap from '../../assets/map_night_3840x1440_wind.webp'
 import { CsvMapData } from './CsvMapData'
 
 //  Eiropa_LTV_pilsetas_nakama_dn.csv

web/src/pages/station/MapResult.tsx

@@ -1,11 +1,11 @@
 import { Accessor, Component, Setter, createEffect, createResource, createSignal, onMount } from "solid-js";
 
 import { coordToCity } from "./coordToCity";
-import mapUrl from "../assets/map_1000x570.webp";
+import mapUrl from "../../assets/map_1000x570.webp";
 import moment from "moment";
-import { FETCH_DELAY_MS, apiHost, cityList } from "../consts";
-import { LoadingSpinner } from "../components/LoadingSpinner";
-import { cityCoords } from "../components/cityCoords";
+import { FETCH_DELAY_MS, apiHost, cityList } from "../../consts";
+import { LoadingSpinner } from "../../components/spinner/LoadingSpinner";
+import { cityCoords } from "../../components/cityCoords";
 
 export const MapResult: Component<{
     setCity: Setter<string | undefined>,

web/src/pages/station/Result.tsx

@@ -1,7 +1,8 @@
 import { Accessor, Component, createResource } from "solid-js";
-import { FETCH_DELAY_MS, apiHost } from "../consts";
+import { FETCH_DELAY_MS, apiHost } from "../../consts";
 import moment from "moment";
-import { CityChart } from "../components/chart/CityChart";
+import { CityChart } from "../../components/chart/CityChart";
+import { LoadingSpinner } from '../../components/spinner/LoadingSpinner'
 
 export const Result: Component<{
     getCity: Accessor<string | undefined>,
@@ -49,12 +50,7 @@ export const Result: Component<{
             }
 
             { /* City weather field as chart  */}
-            { listResource.loading && (
-                <div>
-                    <span class="spinner"></span>
-                    <span style={{ "padding-left": "16px" }}>Loading chart</span>
-                </div>
-            )}
+            { listResource.loading && <LoadingSpinner text="Loading chart" /> }
             { listResource.error && (
                 <div>Error while querying: ${listResource.error}</div>
             )}
@@ -73,12 +69,7 @@ export const Result: Component<{
             }
 
             { /* City all weather fields with double values */}
-            { meteoResource.loading && (
-                <div>
-                    <span class="spinner"></span>
-                    <span style={{ "padding-left": "16px" }}>Loading meteo data</span>
-                </div>
-            )}
+            { meteoResource.loading && <LoadingSpinner text="Loading meteo data" /> }
             { meteoResource.error && (
                 <div>Error while querying: ${meteoResource.error}</div>
             )}

web/src/pages/station/Station.tsx

@@ -1,12 +1,12 @@
 import { Component, batch, createSignal } from "solid-js";
 import moment from "moment";
 
-import { SelectCity } from "../components/SelectCity";
-import { SelectField } from "../components/SelectField";
+import { SelectCity } from "../../components/SelectCity";
+import { SelectField } from "../../components/SelectField";
 import { Result } from "./Result";
 import { MapResult } from "./MapResult";
-import "../css/station.css"
-import { Spacer } from "../components/Spacer";
+import "../../css/station.css"
+import { Spacer } from "../../components/Spacer";
 
 export const Station: Component<{}> = () => {
     const [getShowCities, setShowCities] = createSignal(false);