diff options
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} /> - </> - ); -} |
