import React from 'react'
import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
import SensorCardDeck from './SensorCardDeck'
import {SensorDataCollection, ActiveDeviceCollection, ConfiguredDevicesCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data';
import { Col, Form, Row, Card, CardDeck } from "react-bootstrap";
import moment from 'moment'
export default function Overview() {
// Return the document of the currently active device in the activeDevice collection.
const activeDevice = useTracker(() => {
return ActiveDeviceCollection.find().fetch()[0];
});
// Return all documents of the configuredDevices collection.
const configuredDevices = useTracker(() => {
return ConfiguredDevicesCollection.find().fetch();
});
// If the activeDevice is not null or undefined, return and filter the documents of the last two days (48 Hrs) of the currently active device in the sensorData collection
// and reverse the array so that the oldest documents come first.
const sensorData = useTracker(() => {
if (activeDevice === null || activeDevice === undefined) {
return [];
} else {
return SensorDataCollection.find(
{
device_id: activeDevice.deviceId,
timestamp: { $gt: moment(Date.now()).subtract(2, 'days').toDate() }
},
{
sort: { timestamp: -1 }
}
).fetch().reverse();
}
});
// Set the selected device from the configured devices dropdown-menu, to the new currently active device.
const handleChange = (e) => {
if (e.target.value === "") {
console.log("No device selected!");
} else {
var doc = ActiveDeviceCollection.findOne({deviceId: activeDevice.deviceId});
ActiveDeviceCollection.update({_id: doc._id}, {$set: {deviceId: e.target.value}});
}
}
// Get the current date as string.
const getLabelFromStamp = (x) => {
return moment(x.timestamp).format("LLLL");
}
// Workaround for log(0).
const brightnessMapper = (x) => {
if (x.brightness < 1) {
x.brightness = 0.1
}
return x;
}
//If the data that is loaded from the database has not been fetched yet, show a loading screen. Else load the application.
if ((sensorData.length <= 0)) {
return (
<>
Devices:
active device: {!activeDevice === undefined && !ConfiguredDevicesCollection.findOne({ deviceId: activeDevice.deviceId }) === undefined ?
ConfiguredDevicesCollection.findOne({ deviceId: activeDevice.deviceId }).alias : "No device selected"}
Loading!
Please wait...
)
} else {
return (
<>
Devices:
active device: {ConfiguredDevicesCollection.findOne({deviceId: activeDevice.deviceId}) === undefined ?
"No device selected" : ConfiguredDevicesCollection.findOne({deviceId: activeDevice.deviceId}).alias}
el.temperature !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
el.humidity !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
el.brightness !== null).map(brightnessMapper)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
Math.round(val)} />
Math.round(val)}/>
el.moisture !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
)
}
}