diff --git a/client/package.json b/client/package.json
index 4b69488..6796c13 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,6 +11,7 @@
"react": "^17.0.2",
"react-datetime": "^3.1.1",
"react-dom": "^17.0.2",
+ "react-is": "^17.0.2",
"react-scripts": "4.0.3",
"recharts": "^2.0.9",
"web-vitals": "^1.0.1"
diff --git a/client/public/index.html b/client/public/index.html
index 9632993..991eaed 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -17,7 +17,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
-
-
Outside Temperature {loading ? 'Loading...' : ''}
-
- {data.Outside ?
-
-
- moment(timeStr).format('HH:mm')}
- />
-
-
- v.toFixed(1) + ' °C'}
- labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
- separator=': '
- />
-
-
-
-
-
-
-
-
-
-
-
-
- :
-
Loading...
- }
+function useSensor(measurement, name, end, duration) {
+ if (!data) {
+ return (
+ <>
+
Water Usage
-
Bedroom Temperature {loading ? 'Loading...' : ''}
-
- {data.Bedroom ?
-
-
- moment(timeStr).format('HH:mm')}
- />
-
-
- v.toFixed(1) + ' °C'}
- labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
- separator=': '
- />
-
-
-
-
-
-
-
-
-
-
- :
Loading...
- }
-
-
Thermostat {loading ? 'Loading...' : ''}
-
- {data.Venstar ?
-
-
- moment(timeStr).format('HH:mm')}
- />
-
-
- v.toFixed(1) + ' °C'}
- labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
- separator=': '
- />
-
-
-
-
-
-
-
-
- :
-
Loading...
- }
-
-
Gas Usage {loading ? 'Loading...' : ''}
-
- {data.Gas ?
-
-
- moment(timeStr).format('HH:mm')}
- />
-
-
-
-
-
- v.toFixed(1) + ' MJ'}
- labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
- separator=': '
- />
-
-
-
-
-
-
-
-
- :
-
Loading...
- }
+ >
+ );
+ }
+ return (
+ <>
Water Usage {loading ? 'Loading...' : ''}
- {data.Water ?
-
-
- moment(timeStr).format('HH:mm')}
- />
-
-
-
-
-
- v + ' L'}
- labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
- separator=': '
- />
-
-
+
+
+ moment(timeStr).format('HH:mm')}
+ />
+
+
+
+
+
+ v + ' L'}
+ labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+ separator=': '
+ />
+
+
+
+
+
+
+
+
+ >
+ );
+}
-
-
-
-
- :
-
Loading...
- }
+function Graphs({end, duration}) {
+ return (
+
+
+
+
+
+
);
}
-function Menu({duration, setDuration, end, setEnd, setLoading}) {
+function Menu({duration, setDuration, end, setEnd}) {
const [submenu, setSubmenu] = useState(false);
const chooseDuration = (x) => {
- setLoading(true);
setSubmenu(false);
setDuration(x);
};
+ const chooseEnd = (x) => {
+ setSubmenu(false);
+ const newEnd = x.add(...duration.delta);
+ setEnd(newEnd);
+ };
+
+ const next = () => {
+ setSubmenu(false);
+ setEnd(prevEnd => moment(prevEnd).add(...duration.delta));
+ }
+
+ const prev = () => {
+ setSubmenu(false);
+ setEnd(prevEnd => moment(prevEnd).subtract(duration.delta[0], duration.delta[1]));
+ }
+
return (
{!!submenu &&
-
-
-
-
{submenu === 'end' &&
<>
-
Choose end date:
-
epic date picker
+
+
Choose start date:
+
+
+
+
+ chooseEnd(x)}
+ />
+
>
}
{submenu === 'duration' &&
- durations.map(x =>
-
- )
+ <>
+
+
Choose duration:
+
+
+
+ {durations.map(x =>
+
+ )}
+ >
}
}
-
+
);
@@ -317,49 +180,7 @@ function Menu({duration, setDuration, end, setEnd, setLoading}) {
function App() {
const [duration, setDuration] = useState(durations[0]);
- const [loading, setLoading] = useState(false);
const [end, setEnd] = useState(moment());
- const [data, setData] = useState(false);
-
- const setupGetter = (measurement, name) => {
- const get = async() => {
- try {
- const params = { end: end.unix(), duration: duration.len.toLowerCase(), window: duration.win };
- const res = await axios.get(
- 'https://sensors-api.dns.t0.vc/history/'+measurement+'/'+name,
- { params: params },
- );
- setData((d) => ({ ...d, [name]: res.data }));
- setLoading(false);
- } catch (error) {
- console.log(error);
- }
- };
-
- get();
- const interval = setInterval(get, 30000);
- return () => clearInterval(interval);
- };
-
- useEffect(() => {
- return setupGetter('temperature', 'Outside');
- }, [duration]);
-
- useEffect(() => {
- return setupGetter('temperature', 'Bedroom');
- }, [duration]);
-
- useEffect(() => {
- return setupGetter('thermostat', 'Venstar');
- }, [duration]);
-
- useEffect(() => {
- return setupGetter('ertscm', 'Gas');
- }, [duration]);
-
- useEffect(() => {
- return setupGetter('ertscm', 'Water');
- }, [duration]);
return (
@@ -368,12 +189,11 @@ function App() {
setDuration={setDuration}
end={end}
setEnd={setEnd}
- setLoading={setLoading}
/>
);
diff --git a/client/yarn.lock b/client/yarn.lock
index cc512e0..ebd726a 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -9146,6 +9146,11 @@ react-is@^17.0.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+react-is@^17.0.2:
+ version "17.0.2"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+ integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"