X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fmap%2FOpenSeadragon.js;h=b6158a5aea79ca3a03f964deb4f5dc413cfa52c0;hb=f17b9f3b6f7f9e678c681c719eea6fb5c41a387f;hp=f8543189e18c3b71ea4344be4e3ba0634d58fbc1;hpb=18424fc6de2fc902ee2b2d3143955081263adff4;p=alttp.git

diff --git a/resources/js/components/map/OpenSeadragon.js b/resources/js/components/map/OpenSeadragon.js
index f854318..b6158a5 100644
--- a/resources/js/components/map/OpenSeadragon.js
+++ b/resources/js/components/map/OpenSeadragon.js
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import OpenSeadragon from 'openseadragon';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -7,6 +8,8 @@ export const Context = React.createContext({});
 export const useOpenSeadragon = () => React.useContext(Context);
 
 export const Provider = React.forwardRef(({ children }, ref) => {
+	const [activeMap, setActiveMap] = React.useState('lw');
+	const [pins, setPins] = React.useState([]);
 	const [viewer, setViewer] = React.useState(null);
 
 	React.useEffect(() => {
@@ -65,7 +68,38 @@ export const Provider = React.forwardRef(({ children }, ref) => {
 		};
 	}, [ref.current]);
 
-	return <Context.Provider value={{ viewer }}>
+	React.useEffect(() => {
+		if (!viewer) return;
+		switch (activeMap) {
+			case 'lw':
+				viewer.goToPage(0);
+				break;
+			case 'dw':
+				viewer.goToPage(1);
+				break;
+			case 'sp':
+				viewer.goToPage(2);
+				break;
+			case 'uw':
+				viewer.goToPage(3);
+				break;
+		}
+		const controller = new AbortController();
+		axios.get(`/api/markers/${activeMap}`, {
+			signal: controller.signal,
+		}).then(response => {
+			setPins(response.data || []);
+		}).catch(e => {
+			if (!axios.isCancel(e)) {
+				console.error(e);
+			}
+		});
+		return () => {
+			controller.abort();
+		};
+	}, [activeMap, viewer]);
+
+	return <Context.Provider value={{ activeMap, setActiveMap, pins, viewer }}>
 		{children}
 	</Context.Provider>;
 });