Take API key, add basement sensor

This commit is contained in:
Tanner Collin 2024-07-15 19:40:44 +00:00
parent 88dbba168c
commit 61fd657952
2 changed files with 4235 additions and 3355 deletions

View File

@ -41,7 +41,8 @@ function useSensor(measurement, name, end, duration) {
const get = async() => { const get = async() => {
setLoading(true); setLoading(true);
try { 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( const res = await axios.get(
'https://sensors-api.dns.t0.vc/history/'+measurement+'/'+name, 'https://sensors-api.dns.t0.vc/history/'+measurement+'/'+name,
{ params: params }, { 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}) { function MiscTemperature({end, duration}) {
const [data, loading, tickFormatter] = useSensor('temperature', 'Misc', end, duration); const [data, loading, tickFormatter] = useSensor('temperature', 'Misc', end, duration);
@ -893,6 +955,14 @@ function LivingRoomLux({end, duration}) {
function Graphs({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 ( return (
<div className='container'> <div className='container'>
<SolarPower end={end} duration={duration} /> <SolarPower end={end} duration={duration} />
@ -903,11 +973,22 @@ function Graphs({end, duration}) {
<NookTemperature end={end} duration={duration} /> <NookTemperature end={end} duration={duration} />
<SeedsTemperature end={end} duration={duration} /> <SeedsTemperature end={end} duration={duration} />
<MiscTemperature end={end} duration={duration} /> <MiscTemperature end={end} duration={duration} />
<BasementTemperature end={end} duration={duration} />
<Thermostat end={end} duration={duration} /> <Thermostat end={end} duration={duration} />
<Gas end={end} duration={duration} /> <Gas end={end} duration={duration} />
<Water end={end} duration={duration} /> <Water end={end} duration={duration} />
<BedroomSleep end={end} duration={duration} /> <BedroomSleep end={end} duration={duration} />
<LivingRoomLux end={end} duration={duration} /> <LivingRoomLux end={end} duration={duration} />
{!!api_key ||
<div>
<form onSubmit={handleSubmit}>
<p>
<input placeholder='API key' />
</p>
</form>
</div>
}
</div> </div>
); );
} }

File diff suppressed because it is too large Load Diff