From af060f85a7bc13a5bb05e453c411f5807589e6c6 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Mon, 23 Sep 2024 10:10:19 +0200
Subject: Move most components into new path
---
geshem/app/components/Datetime.tsx | 28 ++
geshem/app/components/Geshem.tsx | 80 ++++++
geshem/app/components/Map.tsx | 99 +++++++
geshem/app/components/Slider.tsx | 45 ++++
geshem/app/components/config.tsx | 19 ++
geshem/app/globals.css | 31 +++
geshem/app/page.tsx | 99 +------
geshem/package-lock.json | 528 ++++++++++++++++++++++++++++++++++++-
geshem/package.json | 16 +-
src/Datetime.tsx | 28 --
src/Geshem.tsx | 80 ------
src/Map.tsx | 99 -------
src/Slider.tsx | 45 ----
src/config.tsx | 19 --
14 files changed, 841 insertions(+), 375 deletions(-)
create mode 100644 geshem/app/components/Datetime.tsx
create mode 100644 geshem/app/components/Geshem.tsx
create mode 100644 geshem/app/components/Map.tsx
create mode 100644 geshem/app/components/Slider.tsx
create mode 100644 geshem/app/components/config.tsx
delete mode 100644 src/Datetime.tsx
delete mode 100644 src/Geshem.tsx
delete mode 100644 src/Map.tsx
delete mode 100644 src/Slider.tsx
delete mode 100644 src/config.tsx
diff --git a/geshem/app/components/Datetime.tsx b/geshem/app/components/Datetime.tsx
new file mode 100644
index 0000000..0a8fbcf
--- /dev/null
+++ b/geshem/app/components/Datetime.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { DateTime as LuxonDateTime } from "luxon";
+
+interface DateTimeProps {
+ images: string[],
+ slider: number
+}
+
+export function DateTime({ images, slider }: DateTimeProps) {
+ let datetime = null;
+
+ if (images.length > 0) {
+ const ds = images[slider].substring(5, 18);
+ datetime = LuxonDateTime.fromFormat(ds, "yyyyMMdd/HHmm", {
+ zone: "utc",
+ }).setZone("Asia/Jerusalem");
+ }
+
+ const date = datetime ? datetime.toFormat("dd/MM/y") : "";
+ const time = datetime ? datetime.toFormat("HH:mm") : "";
+
+ return (
+
+ );
+}
diff --git a/geshem/app/components/Geshem.tsx b/geshem/app/components/Geshem.tsx
new file mode 100644
index 0000000..50659be
--- /dev/null
+++ b/geshem/app/components/Geshem.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+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 (
+//
+//
+// } />
+// } />
+//
+//
+// );
+// }
+
+interface GeshemProps {
+ date?: string
+}
+
+export function Geshem({ date }: GeshemProps) {
+ const [images, setImages] = useState([]);
+ 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(
+ (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 (
+ <>
+
+
+
+
+ );
+}
diff --git a/geshem/app/components/Map.tsx b/geshem/app/components/Map.tsx
new file mode 100644
index 0000000..39f28fa
--- /dev/null
+++ b/geshem/app/components/Map.tsx
@@ -0,0 +1,99 @@
+import React, { useState, useEffect, useRef } from "react";
+// @ts-ignore
+import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
+
+import {
+ MAPBOX_ACCESS_TOKEN,
+ IMAGE_COORDINATES,
+ IMAGES_BASE_URL
+} from "./config";
+
+import "mapbox-gl/dist/mapbox-gl.css";
+
+interface MapProps {
+ slider: number,
+ images: string[],
+}
+
+export function Map({ slider, images }: MapProps) {
+ const mapContainer = useRef(null);
+ const map = useRef(null);
+
+ const [lng] = useState(35);
+ const [lat] = useState(31.9);
+ const [zoom] = useState(6.3);
+ const [loaded, setLoaded] = useState(false);
+
+ const prevImages = useRef(images).current;
+
+ useEffect(() => {
+ if (map.current) return;
+
+ map.current = new mapboxgl.Map({
+ accessToken: MAPBOX_ACCESS_TOKEN,
+ container: mapContainer.current,
+ style: "mapbox://styles/mapbox/dark-v9",
+ center: [lng, lat],
+ zoom: zoom,
+ minZoom: 5,
+ maxZoom: 10,
+ hash: false,
+ });
+
+ map.current.on("style.load", () => {
+ setLoaded(true);
+ });
+ });
+
+ useEffect(() => {
+ if (!loaded) return;
+
+ // remove old layers
+ prevImages.forEach((img) => {
+ if (!images.includes(img)) {
+ map.current.removeLayer(`layer-${img}`);
+ map.current.removeSource(`source-${img}`);
+ }
+ });
+
+ // add new layers
+ images.forEach((img, i) => {
+ if (!prevImages.includes(img) && !map.current.getSource(`source-${img}`)) {
+ map.current.addSource(`source-${img}`, {
+ type: "image",
+ url: `${IMAGES_BASE_URL}/${img}`,
+ coordinates: IMAGE_COORDINATES
+ });
+ map.current.addLayer({
+ id: `layer-${img}`,
+ source: `source-${img}`,
+ type: "raster",
+ paint: {
+ "raster-opacity": 0,
+ "raster-opacity-transition": {
+ duration: 0
+ }
+ }
+ });
+ }
+ });
+ }, [loaded, prevImages, images]);
+
+ useEffect(() => {
+ if (!loaded || !images.length) return;
+ images[slider] && map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0.85);
+ return () => {
+ // callback will hide the previous layer with the previous slider value
+ map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0);
+ }
+ }, [loaded, slider, images]);
+
+ return (
+
+ );
+}
diff --git a/geshem/app/components/Slider.tsx b/geshem/app/components/Slider.tsx
new file mode 100644
index 0000000..50223fc
--- /dev/null
+++ b/geshem/app/components/Slider.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import RcSlider, { SliderProps, SliderRef } from 'rc-slider/lib/Slider';
+import { PLAYBACK_SLOTS } from "./config";
+
+// use workaround from: https://github.com/react-component/slider/issues/835#issuecomment-1201805736
+const CustomSlider = RcSlider as React.ForwardRefExoticComponent & React.RefAttributes>;
+
+interface GeshemSliderProps {
+ playback?: string,
+ slider: number,
+ setSlider: React.Dispatch>
+}
+
+export function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
+ const handleStyle = {
+ height: 40,
+ width: 40,
+ border: 0,
+ marginTop: -10,
+ boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)"
+ };
+
+ const railStyle = {
+ height: 20,
+ backgroundColor: "#3498db"
+ };
+
+ const trackStyle = {
+ display: "none"
+ };
+
+ return (
+
+ setSlider(val)}
+ />
+
+ );
+}
diff --git a/geshem/app/components/config.tsx b/geshem/app/components/config.tsx
new file mode 100644
index 0000000..4dc3d6a
--- /dev/null
+++ b/geshem/app/components/config.tsx
@@ -0,0 +1,19 @@
+const hostname = window !== undefined && window.location && window.location.hostname;
+
+const PRODUCTION = hostname && hostname.includes("geshem");
+
+export const IMAGES_BASE_URL = PRODUCTION ? "https://imgs.geshem.space" : "";
+
+export const MAPBOX_ACCESS_TOKEN =
+ "pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw";
+
+export const IMAGE_COORDINATES = [
+ [31.7503896894, 34.4878044232],
+ [37.8574239563, 34.5078463729],
+ [37.7157066403, 29.4538271687],
+ [31.9347389087, 29.4373462909]
+];
+
+export const PLAYBACK_HOURS = 2;
+
+export const PLAYBACK_SLOTS = (PLAYBACK_HOURS * 6) - 1;
\ No newline at end of file
diff --git a/geshem/app/globals.css b/geshem/app/globals.css
index 13d40b8..62b9a76 100644
--- a/geshem/app/globals.css
+++ b/geshem/app/globals.css
@@ -25,3 +25,34 @@ body {
text-wrap: balance;
}
}
+
+#datetime {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ color: white;
+ font-family: monospace;
+}
+
+#date {
+ font-size: 1.4em;
+}
+
+#time {
+ font-size: 2.8em;
+}
+
+#slider {
+ position: fixed;
+ bottom: 8vh;
+ width: 30vw;
+ margin-left: 35vw;
+}
+
+@media only screen and (max-device-width: 812px) {
+ #slider {
+ width: 80vw;
+ margin-left: 8vw;
+ z-index: 10;
+ }
+}
\ No newline at end of file
diff --git a/geshem/app/page.tsx b/geshem/app/page.tsx
index 433c8aa..a44da7b 100644
--- a/geshem/app/page.tsx
+++ b/geshem/app/page.tsx
@@ -1,101 +1,6 @@
-import Image from "next/image";
-
+import { Geshem } from "@/app/components/Geshem";
export default function Home() {
return (
-
-
-
-
- -
- Get started by editing{" "}
-
- app/page.tsx
-
- .
-
- - Save and see your changes instantly.
-
-
-
-
-
-
- setSlider(val)}
- />
-
- );
-}
diff --git a/src/config.tsx b/src/config.tsx
deleted file mode 100644
index 4ca4578..0000000
--- a/src/config.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-const hostname = window && window.location && window.location.hostname;
-
-const PRODUCTION = hostname.includes("geshem");
-
-export const IMAGES_BASE_URL = PRODUCTION ? "https://imgs.geshem.space" : "";
-
-export const MAPBOX_ACCESS_TOKEN =
- "pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw";
-
-export const IMAGE_COORDINATES = [
- [31.7503896894, 34.4878044232],
- [37.8574239563, 34.5078463729],
- [37.7157066403, 29.4538271687],
- [31.9347389087, 29.4373462909]
-];
-
-export const PLAYBACK_HOURS = 2;
-
-export const PLAYBACK_SLOTS = (PLAYBACK_HOURS * 6) - 1;
\ No newline at end of file
--
cgit v1.3.1