feat: add 'Search area' button to query time in drawn zones

mapper/src/App.js

@@ -446,6 +446,43 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 		setSubmenu(false);
 	};
 
+	const searchArea = async () => {
+		const drawnRectangles = drawnItems.map(item => item.bounds);
+		if (!drawnRectangles.length) {
+			alert("Please draw one or more rectangles on the map first.");
+			setSubmenu(false);
+			return;
+		}
+
+		const areas = drawnRectangles.map(bounds => ({
+			northEast: bounds.getNorthEast(),
+			southWest: bounds.getSouthWest(),
+		}));
+
+		try {
+			const api_key = localStorage.getItem('api_key');
+			const params = {
+				end: end.unix(),
+				duration: duration.len.toLowerCase(),
+				api_key: api_key,
+			};
+
+			const res = await axios.post(
+				'https://sensors-api.dns.t0.vc/search/owntracks/OwnTracks',
+				{ areas: areas },
+				{ params: params }
+			);
+
+			console.log('Search results:', res.data);
+			alert('Search complete. Check the browser console for results.');
+		} catch (error) {
+			console.error('Error during area search:', error);
+			alert('An error occurred during the search.');
+		}
+
+		setSubmenu(false);
+	};
+
 	const range = parseSlider(end, duration, slider);
 	const startDate = moment(end).subtract(...duration.delta);
 
@@ -616,6 +653,7 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 							</label>
 							<button onClick={recentreView}>Recentre view</button>
 							<button onClick={excludeArea}>Exclude area</button>
+							<button onClick={searchArea}>Search area</button>
 							<button onClick={shareRange}>Share range</button>
 							<button onClick={resetToDefaults}>Reset page</button>
 						</>