diff options
| author | Yuval Adam <_@yuv.al> | 2024-09-23 10:10:19 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2024-09-23 10:10:19 +0200 |
| commit | af060f85a7bc13a5bb05e453c411f5807589e6c6 (patch) | |
| tree | 8527870ee8daaf3fa30bde7dd7090c647b706144 /src/Geshem.tsx | |
| parent | befc9ba3e4a9b24cdd0397663c04c98688d98d9b (diff) | |
Move most components into new path
Diffstat (limited to 'src/Geshem.tsx')
| -rw-r--r-- | src/Geshem.tsx | 80 |
1 files changed, 0 insertions, 80 deletions
diff --git a/src/Geshem.tsx b/src/Geshem.tsx deleted file mode 100644 index 6e88f19..0000000 --- a/src/Geshem.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { BrowserRouter, Route, Routes } from "react-router-dom"; - -import { Map } from "./Map"; -import { Slider } from "./Slider"; -import { DateTime } from "./Datetime"; - -import { IMAGES_BASE_URL, PLAYBACK_HOURS, PLAYBACK_SLOTS } from "./config"; - -import "./Geshem.css"; -import "rc-slider/assets/index.css"; - -export function App() { - return ( - <BrowserRouter> - <Routes> - <Route path="/" element={<Geshem />} /> - <Route path="/history/:date" element={<Geshem />} /> - </Routes> - </BrowserRouter> - ); -} - -interface GeshemProps { - date?: string -} - - -export function Geshem({ date }: GeshemProps) { - const [images, setImages] = useState<string[]>([]); - const [playback] = useState( - date || - new URL(window.location.toString()).searchParams.get("history") || - undefined - ); - const [slider, setSlider] = useState(playback ? PLAYBACK_SLOTS : 9); - - useEffect(() => { - const fetchImages = async () => - fetch(`${IMAGES_BASE_URL}/imgs.json`) - .then(res => res.json()) - .then(imgs => imgs["280"]) - .then(setImages); - - const buildPlayback = async () => { - const date = playback; - const hours = Array.from(Array(PLAYBACK_HOURS).keys()).map( - h => `${String(h).padStart(2, "0")}` - ); - const minutes = Array.from(Array(6).keys()).map( - m => `${String(m * 10).padStart(2, "0")}` - ); - const paths = hours.reduce<string[]>( - (acc, h) => - acc.concat(minutes.map(m => `imgs/${date}/${h}${m}/280.png`)), - [] - ); - setImages(paths); - }; - - let timer: number; - if (playback) buildPlayback(); - else { - fetchImages(); - timer = window.setInterval(fetchImages, 60 * 1000); - } - - return () => { - if (timer !== undefined) clearInterval(timer); - }; - }, [playback]); - - return ( - <> - <Map images={images} slider={slider} /> - <DateTime images={images} slider={slider} /> - <Slider slider={slider} playback={playback} setSlider={setSlider} /> - </> - ); -} |
