2 weather data visualization

.github/dependabot.yml

@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "daily"
+      interval: 'daily'

src/renderer/src/App.css

@@ -3,6 +3,14 @@
   width: 100vw;
 }
 
+.left-sidebar {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 10px;
+  left: 10px;
+}
+
 .dialog-container {
   position: fixed;
   top: 50%;

src/renderer/src/App.tsx

@@ -1,56 +1,65 @@
-import { Color, GpxDataSource, Ion, Terrain, Viewer } from 'cesium'
 import { useEffect, useRef, useState } from 'react'
-import 'cesium/Build/Cesium/Widgets/widgets.css'
-import './App.css'
+import { Color, GpxDataSource, GregorianDate, Ion, Terrain, Viewer } from 'cesium'
 import { ApiForm } from './components/ApiForm'
 import { GpxForm } from './components/GpxForm'
+import { WeatherData } from './types/weatherData'
+import { WeatherForm } from './components/WeatherForm'
+import './App.css'
+import 'cesium/Build/Cesium/Widgets/widgets.css'
 
-function App(): JSX.Element {
-  const [apiKey, setApiKey] = useState('')
-  const [GPXFiles, setGPXFiles] = useState<{ file: File; color: string }[]>([]) // Store multiple GPX files
-  const viewerRef = useRef<Viewer | null>(null)
+const hexToRgb = (hex): Color => {
+  const red = parseInt(hex.substring(1, 3), 16)
+  const green = parseInt(hex.substring(3, 5), 16)
+  const blue = parseInt(hex.substring(5, 7), 16)
+  return Color.fromBytes(red, green, blue, 255)
+}
 
-  function hexToRgb(hex): Color {
-    const red = parseInt(hex.substring(1, 3), 16)
-    const green = parseInt(hex.substring(3, 5), 16)
-    const blue = parseInt(hex.substring(5, 7), 16)
-    return Color.fromBytes(red, green, blue, 255)
-  }
+const initializeViewer = async (
+  apiKey: string,
+  GPXFiles: { file: File; color: string }[],
+  viewerRef
+): Promise<void> => {
+  Ion.defaultAccessToken = apiKey
 
-  useEffect(() => {
-    const initializeViewer = async (): Promise<void> => {
-      Ion.defaultAccessToken = apiKey
+  viewerRef.current = new Viewer('cesiumContainer', {
+    terrain: Terrain.fromWorldTerrain({
+      requestVertexNormals: false
+    })
+  })
 
-      viewerRef.current = new Viewer('cesiumContainer', {
-        terrain: Terrain.fromWorldTerrain({
-          requestVertexNormals: false
-        })
+  viewerRef.current.scene.globe.enableLighting = true
+
+  if (viewerRef.current && GPXFiles.length > 0) {
+    GPXFiles.forEach((file) => {
+      const dataSource = new GpxDataSource()
+      dataSource.load(file.file, {
+        clampToGround: true,
+        trackColor: hexToRgb(file.color) as unknown as string
       })
 
-      viewerRef.current.scene.globe.enableLighting = true
-
-      if (viewerRef.current && GPXFiles.length > 0) {
-        GPXFiles.forEach((file) => {
-          const dataSource = new GpxDataSource()
-          dataSource.load(file.file, {
-            clampToGround: true,
-            trackColor: hexToRgb(file.color) as unknown as string
-          })
-
-          // Make sure viewerRef.current is not null before adding the data source
-          if (viewerRef.current) {
-            viewerRef.current.dataSources.add(dataSource)
-          }
-        })
+      // Make sure viewerRef.current is not null before adding the data source
+      if (viewerRef.current) {
+        viewerRef.current.dataSources.add(dataSource)
       }
-    }
+    })
+  }
+}
+
+function App(): JSX.Element {
+  const [apiKey, setApiKey] = useState<string>('')
+  const [GPXFiles, setGPXFiles] = useState<{ file: File; color: string }[]>([]) // Store multiple GPX files
+  const [weatherFormVisible, setWeatherFormVisible] = useState<boolean>(false)
+  const [weatherData, setWeatherData] = useState<WeatherData | null>(null)
+  const [currentClock, setCurrentClock] = useState<GregorianDate | null>(null)
+  const viewerRef = useRef<Viewer | null>(null)
 
+  useEffect(() => {
     const destroyViewer = (): void => {
       viewerRef.current?.destroy()
     }
 
     if (apiKey) {
-      initializeViewer()
+      initializeViewer(apiKey, GPXFiles, viewerRef)
     }
 
     return destroyViewer
@@ -64,10 +73,37 @@ function App(): JSX.Element {
     setGPXFiles(files)
   }
 
+  const toggleWeatherForm = (visible?: boolean): void => {
+    setWeatherFormVisible(visible !== undefined ? visible : !weatherFormVisible)
+  }
+
+  const getWeather = (data): void => {
+    setWeatherData(data)
+  }
+
+  const handleClockUpdate = (clock: GregorianDate): void => {
+    setCurrentClock(clock)
+  }
+
   return (
     <>
       <div id="cesiumContainer"></div>
-      <GpxForm onFileUpload={handleGpxFileUpload} />
+      {apiKey && (
+        <div className="left-sidebar">
+          <GpxForm
+            onFileUpload={handleGpxFileUpload}
+            toggleWeatherForm={toggleWeatherForm}
+            getWeather={getWeather}
+            handleClockUpdate={handleClockUpdate}
+            viewerRef={viewerRef}
+            status={weatherFormVisible}
+            weatherStatus={!!weatherData}
+          />
+          {weatherFormVisible && (
+            <WeatherForm weatherData={weatherData} currentClock={currentClock} />
+          )}
+        </div>
+      )}
       {!apiKey && <ApiForm onSubmit={handleApiKeySubmit} />}
     </>
   )