From 44a1c5b7e62e83af4d670e011f5998b9b8aedfef Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 29 Aug 2022 10:24:51 +0300 Subject: Update all .tsx files and remove unused --- src/Geshem.tsx | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 src/Geshem.tsx (limited to 'src/Geshem.tsx') diff --git a/src/Geshem.tsx b/src/Geshem.tsx new file mode 100644 index 0000000..1eecdd0 --- /dev/null +++ b/src/Geshem.tsx @@ -0,0 +1,94 @@ +import React, { useState, useEffect } from "react"; +import { BrowserRouter as Router, Route } from "react-router-dom"; + +import Map from "./Map"; +import Slider from "./Slider"; +import DateTime from "./Datetime"; + +import { IMAGES_BASE_URL } from "./config"; + +import "./Geshem.css"; +import "rc-slider/assets/index.css"; + +function App() { + return ( + + + + + ); +} + +function Geshem(props) { + const [images, setImages] = useState([]); + const [playback] = useState( + props.match.params.date || + new URL(window.location).searchParams.get("history") || + false + ); + const [slider, setSlider] = useState(playback ? 143 : 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(24).keys()].map( + h => `${String(h).padStart(2, "0")}` + ); + const minutes = [...Array(6).keys()].map( + m => `${String(m * 10).padStart(2, "0")}` + ); + const paths = hours.reduce( + (acc, h) => + acc.concat(minutes.map(m => `imgs/${date}/${h}${m}/280.png`)), + [] + ); + setImages(paths); + }; + + let timer; + if (playback) buildPlayback(); + else { + fetchImages(); + timer = setInterval(fetchImages, 60 * 1000); + } + + return () => { + if (timer !== undefined) clearInterval(timer); + }; + }, [playback]); + + return ( + <> + + + + + ); +} + +function getGeolocation() { + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(pos => { + const { longitude, latitude } = pos.coords; + this.setState({ + lng: longitude, + lat: latitude, + zoom: 11 + }); + if (this.state.mapLoaded) { + this.map.jumpTo({ + center: [longitude, latitude], + zoom: 11 + }); + } + }); + } +} + +export default App; -- cgit v1.3.1