From 88dbba168c4f4d3dd2217bdafbaba69f95d20ae0 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Mon, 15 Jul 2024 19:39:22 +0000
Subject: [PATCH] Take API key, adjust ranges

---
 mapper/src/App.css |  5 ++---
 mapper/src/App.js  | 30 +++++++++++++++++++++---------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/mapper/src/App.css b/mapper/src/App.css
index 8d95f01..65f533d 100644
--- a/mapper/src/App.css
+++ b/mapper/src/App.css
@@ -8,9 +8,8 @@ body {
 
 .container {
 	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	margin-bottom: 3rem;
+	flex-direction: column;
+	align-items: center;
 }
 
 .chart {
diff --git a/mapper/src/App.js b/mapper/src/App.js
index 3d540d0..58cc4cf 100644
--- a/mapper/src/App.js
+++ b/mapper/src/App.js
@@ -11,14 +11,13 @@ import 'leaflet/dist/leaflet.css';
 let tzcache = {};
 
 const durations = [
-	{id: 0, len: 'Day', win: '10m', full: '10 min', delta: [1, 'days'], format: 'HH'},
-	{id: 1, len: 'Day', win: '1h', full: '1 hour', delta: [1, 'days'], format: 'HH'},
-	{id: 2, len: 'Week', win: '1h', full: '1 hour', delta: [7, 'days'], format: 'HH'},
-	{id: 3, len: 'Week', win: '1d', full: '1 day', delta: [7, 'days'], format: 'D'},
-	{id: 4, len: 'Month', win: '1d', full: '1 day', delta: [1, 'months'], format: 'D'},
-	{id: 5, len: 'Month', win: '7d', full: '7 day', delta: [1, 'months'], format: 'D'},
+	{id: 0, len: 'Day', win: '1m', full: '1 min', delta: [1, 'days'], format: 'HH'},
+	{id: 1, len: 'Week', win: '3m', full: '3 min', delta: [7, 'days'], format: 'HH'},
+	{id: 2, len: 'Week', win: '10m', full: '10 min', delta: [7, 'days'], format: 'HH'},
+	{id: 3, len: 'Month', win: '10m', full: '10 min', delta: [1, 'months'], format: 'D'},
+	{id: 4, len: 'Month', win: '1h', full: '1 hour', delta: [1, 'months'], format: 'D'},
+	{id: 5, len: 'Year', win: '2h', full: '2 hours', delta: [1, 'years'], format: 'M/D'},
 	{id: 6, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years'], format: 'M/D'},
-	{id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years'], format: 'M'},
 ];
 
 const units = {
@@ -69,6 +68,12 @@ function Owntracks({end, duration}) {
 
 	const coords = data.length ? data.map(({ lat, lon }) => [lat, lon]).filter(([lat, lon]) => lat !== null || lon !== null) : [];
 
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		const api_key = e.target[0].value;
+		localStorage.setItem('api_key', api_key);
+	}
+
 	return (
 		<>
 		{loading ?
@@ -78,12 +83,19 @@ function Owntracks({end, duration}) {
 				<MapContainer center={coords[coords.length-1]} zoom={13} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}>
 					<TileLayer
 						attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-						url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+						url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
 					/>
 					<Polyline pathOptions={{color: 'blue'}} positions={coords} />
 				</MapContainer>
 			:
-				<p>No coords</p>
+				<>
+					<p>No data</p>
+					<form onSubmit={handleSubmit}>
+						<p>
+							<input placeholder='API key' />
+						</p>
+					</form>
+				</>
 		}
 		</>
 	);