Take API key, add basement sensor

client/src/App.js

@@ -41,7 +41,8 @@ function useSensor(measurement, name, end, duration) {
 		const get = async() => {
 			setLoading(true);
 			try {
-				const params = { end: end.unix(), duration: duration.len.toLowerCase(), window: duration.win };
+				const api_key = localStorage.getItem('api_key', 'null');
+				const params = { end: end.unix(), duration: duration.len.toLowerCase(), window: duration.win, api_key: api_key };
 				const res = await axios.get(
 					'https://sensors-api.dns.t0.vc/history/'+measurement+'/'+name,
 					{ params: params },
@@ -368,6 +369,67 @@ function BedroomTemperature({end, duration}) {
 	);
 }
 
+function BasementTemperature({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('temperature', 'Basement', end, duration);
+
+	return (
+		<ChartContainer
+			name='Basement Temperature'
+			data={data}
+			lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={tickFormatter}
+			/>
+
+			<YAxis
+				yAxisId='right'
+				domain={[0, 100]}
+				orientation='right'
+				hide={true}
+			/>
+			<YAxis
+				yAxisId='left'
+				domain={[-40, 40]}
+			/>
+
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={(v, name) => v.toFixed(1) + units[name]}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				type='monotone'
+				dataKey='temperature_C'
+				yAxisId='left'
+				name='Temperature'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+
+			<Line
+				type='monotone'
+				dataKey='humidity'
+				yAxisId='right'
+				name='Humidity'
+				stroke='blue'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
 function MiscTemperature({end, duration}) {
 	const [data, loading, tickFormatter] = useSensor('temperature', 'Misc', end, duration);
 
@@ -893,6 +955,14 @@ function LivingRoomLux({end, duration}) {
 
 
 function Graphs({end, duration}) {
+	const api_key = localStorage.getItem('api_key', false);
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		const api_key = e.target[0].value;
+		localStorage.setItem('api_key', api_key);
+	}
+
 	return (
 		<div className='container'>
 			<SolarPower end={end} duration={duration} />
@@ -903,11 +973,22 @@ function Graphs({end, duration}) {
 			<NookTemperature end={end} duration={duration} />
 			<SeedsTemperature end={end} duration={duration} />
 			<MiscTemperature end={end} duration={duration} />
+			<BasementTemperature end={end} duration={duration} />
 			<Thermostat end={end} duration={duration} />
 			<Gas end={end} duration={duration} />
 			<Water end={end} duration={duration} />
 			<BedroomSleep end={end} duration={duration} />
 			<LivingRoomLux end={end} duration={duration} />
+
+			{!!api_key ||
+				<div>
+					<form onSubmit={handleSubmit}>
+						<p>
+							<input placeholder='API key' />
+						</p>
+					</form>
+				</div>
+			}
 		</div>
 	);
 }