Add dropdown to set active device and update charts accordingly.
This commit is contained in:
Andrés Uribe Stengel
parent
16a5521093
commit
984fcfdfd6
@ -21,3 +21,4 @@ shell-server@0.5.0 # Server-side component of the `meteor shell` comm
|
||||
insecure@1.0.7 # Allow all DB writes from clients (for prototyping)
|
||||
static-html
|
||||
react-meteor-data
|
||||
underscore
|
||||
|
||||
@ -6,6 +6,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
export const PlantTypesCollection = new Meteor.Collection('plantTypes');
|
||||
export const SensorDataCollection = new Meteor.Collection('sensorData');
|
||||
export const ActiveDeviceCollection = new Meteor.Collection('activeDevice');
|
||||
|
||||
Meteor.startup(() => {
|
||||
if(Meteor.isServer) {
|
||||
@ -16,11 +17,16 @@ Meteor.startup(() => {
|
||||
Meteor.publish('sensorDataCollection', function() {
|
||||
return SensorDataCollection.find();
|
||||
})
|
||||
|
||||
Meteor.publish('activeDeviceCollection', function() {
|
||||
return ActiveDeviceCollection.find();
|
||||
})
|
||||
}
|
||||
|
||||
if (Meteor.isClient) {
|
||||
Meteor.subscribe('plantTypesCollection');
|
||||
Meteor.subscribe('sensorDataCollection');
|
||||
Meteor.subscribe('activeDeviceCollection');
|
||||
}
|
||||
|
||||
Meteor.setTimeout(function() {
|
||||
|
||||
@ -1,26 +1,68 @@
|
||||
import React from 'react'
|
||||
import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
|
||||
import SensorCardDeck from './SensorCardDeck'
|
||||
import {SensorDataCollection} from "../../client/main";
|
||||
import {SensorDataCollection, ActiveDeviceCollection} from "../../client/main";
|
||||
import {useTracker} from 'meteor/react-meteor-data';
|
||||
import {Col, Row} from "react-bootstrap";
|
||||
import {Col, Form, Row} from "react-bootstrap";
|
||||
|
||||
export default function Home() {
|
||||
const sensorData = useTracker(() => {
|
||||
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch().reverse();
|
||||
export default function Home() {
|
||||
|
||||
const uniqueEspNames = _.uniq(SensorDataCollection.find({}, {
|
||||
sort: {device_id: 1}, fields: {device_id: true}
|
||||
}).fetch().map(function(x) {
|
||||
return x.device_id;
|
||||
}), true);
|
||||
|
||||
const deviceName = useTracker(() => {
|
||||
return ActiveDeviceCollection.find().fetch()[0];
|
||||
});
|
||||
|
||||
const sensorData = useTracker(() => {
|
||||
return SensorDataCollection.find({ device_id: deviceName.deviceName }, { sort: { timestamp: -1 }, limit: 61 }).fetch().reverse();
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (e.target.value === "") {console.log("No device selected!");} else {
|
||||
var doc = ActiveDeviceCollection.findOne({ deviceName: deviceName.deviceName });
|
||||
ActiveDeviceCollection.update({ _id: doc._id }, {$set:{deviceName: e.target.value}});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row>
|
||||
<Col xs lg="2">
|
||||
<h4>Devices:</h4>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs lg="2">
|
||||
<Form>
|
||||
<Form.Group>
|
||||
<Form.Control as="select" type="text" onChange={handleChange}>
|
||||
<option></option>
|
||||
{uniqueEspNames.map((espName, index) =>{
|
||||
return <option key={index} value={espName}>{espName}</option>
|
||||
})}
|
||||
</Form.Control>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Col>
|
||||
<Col>
|
||||
<h6>active device: {deviceName.deviceName}</h6>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<SensorCardDeck/>
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
<ResponsiveContainer width='100%' height={375}>
|
||||
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
||||
<ResponsiveContainer width='100%' height={350}>
|
||||
<LineChart data={sensorData} margin={{ top: 50, right: 50, bottom: 25, left: 5 }}>
|
||||
<Line type="monotone" dataKey="temperature" stroke="#10b5de" />
|
||||
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
||||
<XAxis dataKey="timestampToString" />
|
||||
<XAxis dataKey="timeAsString" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
@ -28,11 +70,11 @@ export default function Home() {
|
||||
</ResponsiveContainer>
|
||||
</Col>
|
||||
<Col>
|
||||
<ResponsiveContainer width='100%' height={375}>
|
||||
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
||||
<ResponsiveContainer width='100%' height={350}>
|
||||
<LineChart data={sensorData} margin={{ top: 50, right: 50, bottom: 25, left: 5 }}>
|
||||
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" />
|
||||
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
||||
<XAxis dataKey="timestampToString" />
|
||||
<XAxis dataKey="timeAsString" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
@ -42,11 +84,11 @@ export default function Home() {
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<ResponsiveContainer width='100%' height={375}>
|
||||
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
||||
<ResponsiveContainer width='100%' height={350}>
|
||||
<LineChart data={sensorData} margin={{ top: 50, right: 50, bottom: 25, left: 5 }}>
|
||||
<Line type="monotone" dataKey="brightness" stroke="#ffd500" />
|
||||
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
||||
<XAxis dataKey="timestampToString" />
|
||||
<XAxis dataKey="timeAsString" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
@ -54,11 +96,11 @@ export default function Home() {
|
||||
</ResponsiveContainer>
|
||||
</Col>
|
||||
<Col>
|
||||
<ResponsiveContainer width='100%' height={375}>
|
||||
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
|
||||
<ResponsiveContainer width='100%' height={350}>
|
||||
<LineChart data={sensorData} margin={{ top: 50, right: 50, bottom: 25, left: 5 }}>
|
||||
<Line type="monotone" dataKey="moisture" stroke="#1c4399" />
|
||||
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
|
||||
<XAxis dataKey="timestampToString" />
|
||||
<XAxis dataKey="timeAsString" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
import React from 'react'
|
||||
import { Card, CardDeck } from 'react-bootstrap';
|
||||
import {SensorDataCollection} from "../../client/main";
|
||||
import {ActiveDeviceCollection, SensorDataCollection} from "../../client/main";
|
||||
import {useTracker} from 'meteor/react-meteor-data';
|
||||
|
||||
export default function SensorCardDeck() {
|
||||
const deviceName = useTracker(() => {
|
||||
return ActiveDeviceCollection.find().fetch()[0];
|
||||
});
|
||||
|
||||
const sensorData = useTracker(() => {
|
||||
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 1 }).fetch();
|
||||
return SensorDataCollection.find({ device_id: deviceName.deviceName }, { sort: { timestamp: -1 }, limit: 1 }).fetch();
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
@ -36,14 +36,16 @@ function messageCallback(collection) {
|
||||
if (date.getMinutes() <= 9) {time = time + ":0" + date.getMinutes();} else {
|
||||
time = time + ":" + date.getMinutes();
|
||||
}
|
||||
/*
|
||||
if (date.getSeconds() <= 9) {time = time + ":0" + date.getSeconds();} else {
|
||||
time = time + ":" + date.getSeconds();
|
||||
}
|
||||
*/
|
||||
|
||||
let doc = {
|
||||
device_id: id,
|
||||
timestamp: date,
|
||||
timestampToString: time,
|
||||
timeAsString: time,
|
||||
}
|
||||
try {
|
||||
doc = _.merge(doc, JSON.parse(message));
|
||||
|
||||
@ -2,6 +2,7 @@ import { Meteor } from 'meteor/meteor';
|
||||
|
||||
var PlantTypesCollection = new Meteor.Collection('plantTypes');
|
||||
var SensorDataCollection = new Meteor.Collection('sensorData');
|
||||
var ActiveDeviceCollection = new Meteor.Collection('activeDevice');
|
||||
|
||||
Meteor.startup(() => {
|
||||
if(Meteor.isServer) {
|
||||
@ -12,10 +13,15 @@ Meteor.startup(() => {
|
||||
Meteor.publish('sensorDataCollection', function() {
|
||||
return SensorDataCollection.find();
|
||||
})
|
||||
|
||||
Meteor.publish('activeDeviceCollection', function() {
|
||||
return ActiveDeviceCollection.find();
|
||||
})
|
||||
}
|
||||
|
||||
if (Meteor.isClient) {
|
||||
Meteor.subscribe('plantTypesCollection');
|
||||
Meteor.subscribe('sensorDataCollection');
|
||||
Meteor.subscribe('activeDeviceCollection');
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user