Merge branch 'develop' into sherzog_dev

This commit is contained in:
Sebastian 2020-07-16 16:09:35 +02:00
commit 8a7aac6625
8 changed files with 203 additions and 99 deletions

View File

@ -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) insecure@1.0.7 # Allow all DB writes from clients (for prototyping)
static-html static-html
react-meteor-data react-meteor-data
underscore

View File

@ -6,6 +6,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
export const PlantTypesCollection = new Meteor.Collection('plantTypes'); export const PlantTypesCollection = new Meteor.Collection('plantTypes');
export const SensorDataCollection = new Meteor.Collection('sensorData'); export const SensorDataCollection = new Meteor.Collection('sensorData');
export const ActiveDeviceCollection = new Meteor.Collection('activeDevice');
Meteor.startup(() => { Meteor.startup(() => {
if(Meteor.isServer) { if(Meteor.isServer) {
@ -16,14 +17,17 @@ Meteor.startup(() => {
Meteor.publish('sensorDataCollection', function() { Meteor.publish('sensorDataCollection', function() {
return SensorDataCollection.find(); return SensorDataCollection.find();
}) })
Meteor.publish('activeDeviceCollection', function() {
return ActiveDeviceCollection.find();
})
} }
if (Meteor.isClient) { if (Meteor.isClient) {
Meteor.subscribe('plantTypesCollection'); Meteor.subscribe('plantTypesCollection');
Meteor.subscribe('sensorDataCollection'); Meteor.subscribe('sensorDataCollection');
Meteor.subscribe('activeDeviceCollection');
} }
Meteor.setTimeout(function() { ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<App />, document.getElementById('root'));
}, 1000);
}); });

View File

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap'; import { Button, Form } from 'react-bootstrap';
class AddPlant extends React.Component{ class AddPlant extends React.Component{
@ -69,5 +69,4 @@ class AddPlant extends React.Component{
} }
} }
export default AddPlant; export default AddPlant;

View File

@ -1,71 +1,134 @@
import React from 'react' import React from 'react'
import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts'; import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
import SensorCardDeck from './SensorCardDeck' import SensorCardDeck from './SensorCardDeck'
import {SensorDataCollection} from "../../client/main"; import {SensorDataCollection, ActiveDeviceCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data'; import {useTracker} from 'meteor/react-meteor-data';
import {Col, Row} from "react-bootstrap"; import {Col, Form, Row, Card, CardDeck} from "react-bootstrap";
export default function Home() { export default function Home() {
const sensorData = useTracker(() => {
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch().reverse(); 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];
}); });
return ( const sensorData = useTracker(() => {
<> if (deviceName === null || deviceName === undefined) {
<SensorCardDeck/> return [];
} else {
return SensorDataCollection.find({device_id: deviceName.deviceName}, {
sort: {timestamp: -1},
limit: 61
}).fetch().reverse();
}
});
<Row> const handleChange = (e) => {
<Col> if (e.target.value === "") {
<ResponsiveContainer width='100%' height={375}> console.log("No device selected!");
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}> } else {
<Line type="monotone" dataKey="temperature" stroke="#10b5de" /> var doc = ActiveDeviceCollection.findOne({deviceName: deviceName.deviceName});
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> ActiveDeviceCollection.update({_id: doc._id}, {$set: {deviceName: e.target.value}});
<XAxis dataKey="timestamp" /> }
<YAxis /> }
<Tooltip />
<Legend />
</LineChart> if ((sensorData.length <= 0) || (deviceName.length <= 0)) {
</ResponsiveContainer> return (
</Col> <CardDeck>
<Col> <Card>
<ResponsiveContainer width='100%' height={375}> <Card.Body>
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}> <Card.Title>Loading!</Card.Title>
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" /> <Card.Text>Please wait...</Card.Text>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> </Card.Body>
<XAxis dataKey="timestamp" /> </Card>
<YAxis /> </CardDeck>
<Tooltip /> )
<Legend /> } else {
</LineChart> return (
</ResponsiveContainer> <>
</Col> <Row>
</Row> <Col xs lg="2">
<Row> <h4>Devices:</h4>
<Col> </Col>
<ResponsiveContainer width='100%' height={375}> </Row>
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}> <Row>
<Line type="monotone" dataKey="brightness" stroke="#ffd500" /> <Col xs lg="2">
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <Form>
<XAxis dataKey="timestamp" /> <Form.Group>
<YAxis /> <Form.Control as="select" type="text" onChange={handleChange}>
<Tooltip /> <option></option>
<Legend /> {uniqueEspNames.map((espName, index) => {
</LineChart> return <option key={index} value={espName}>{espName}</option>
</ResponsiveContainer> })}
</Col> </Form.Control>
<Col> </Form.Group>
<ResponsiveContainer width='100%' height={375}> </Form>
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}> </Col>
<Line type="monotone" dataKey="moisture" stroke="#1c4399" /> <Col>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <h6>active device: {deviceName.deviceName}</h6>
<XAxis dataKey="timestamp" /> </Col>
<YAxis /> </Row>
<Tooltip />
<Legend /> <SensorCardDeck/>
</LineChart> <Row>
</ResponsiveContainer> <Col>
</Col> <ResponsiveContainer width='100%' height={350}>
</Row> <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="timeAsString"/>
<YAxis/>
<Tooltip/>
<Legend/>
</LineChart>
</ResponsiveContainer>
</Col>
<Col>
<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="timeAsString"/>
<YAxis/>
<Tooltip/>
<Legend/>
</LineChart>
</ResponsiveContainer>
</Col>
</Row>
<Row>
<Col>
<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="timeAsString"/>
<YAxis/>
<Tooltip/>
<Legend/>
</LineChart>
</ResponsiveContainer>
</Col>
<Col>
<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="timeAsString"/>
<YAxis/>
<Tooltip/>
<Legend/>
</LineChart>
</ResponsiveContainer>
</Col>
</Row>
</>
)
}
} }

View File

@ -1,39 +1,55 @@
import React from 'react' import React from 'react'
import { Card, CardDeck } from 'react-bootstrap'; import { Card, CardDeck } from 'react-bootstrap';
import {SensorDataCollection} from "../../client/main"; import {ActiveDeviceCollection, SensorDataCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data'; import {useTracker} from 'meteor/react-meteor-data';
export default function SensorCardDeck() { export default function SensorCardDeck() {
const sensorData = useTracker(() => { const deviceName = useTracker(() => {
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 1 }).fetch(); return ActiveDeviceCollection.find().fetch()[0];
}); });
return ( const sensorData = useTracker(() => {
<CardDeck> return SensorDataCollection.find({ device_id: deviceName.deviceName }, { sort: { timestamp: -1 }, limit: 1 }).fetch();
<Card> });
<Card.Body> if (sensorData.length <= 0) {
<Card.Title>Temperature</Card.Title> return (
<Card.Text>{sensorData[0].temperature} °C</Card.Text> <CardDeck>
</Card.Body> <Card>
</Card> <Card.Body>
<Card> <Card.Title>Loading!</Card.Title>
<Card.Body> <Card.Text>Please wait...</Card.Text>
<Card.Title>Humidity</Card.Title> </Card.Body>
<Card.Text>{sensorData[0].humidity} %</Card.Text> </Card>
</Card.Body> </CardDeck>
</Card> )
<Card> } else {
<Card.Body> return (
<Card.Title>Brightness</Card.Title> <CardDeck>
<Card.Text>{sensorData[0].brightness} lux</Card.Text> <Card>
</Card.Body> <Card.Body>
</Card> <Card.Title>Temperature</Card.Title>
<Card> <Card.Text>{sensorData[0].temperature} °C</Card.Text>
<Card.Body> </Card.Body>
<Card.Title>Moisture</Card.Title> </Card>
<Card.Text>{sensorData[0].moisture} %</Card.Text> <Card>
</Card.Body> <Card.Body>
</Card> <Card.Title>Humidity</Card.Title>
</CardDeck> <Card.Text>{sensorData[0].humidity} %</Card.Text>
) </Card.Body>
</Card>
<Card>
<Card.Body>
<Card.Title>Brightness</Card.Title>
<Card.Text>{sensorData[0].brightness} lux</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Body>
<Card.Title>Moisture</Card.Title>
<Card.Text>{sensorData[0].moisture} %</Card.Text>
</Card.Body>
</Card>
</CardDeck>
)
}
} }

View File

@ -28,10 +28,24 @@ function messageCallback(collection) {
const id = topicElements.pop(); const id = topicElements.pop();
var date = new Date; var date = new Date;
var time;
if (date.getHours() <= 9) {time = "0" + date.getHours();} else {
time = date.getHours();
}
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 = { let doc = {
device_id: id, device_id: id,
timestamp: date, timestamp: date,
timeAsString: time,
} }
try { try {
doc = _.merge(doc, JSON.parse(message)); doc = _.merge(doc, JSON.parse(message));

View File

@ -2,7 +2,8 @@
"name": "smart_garden_server", "name": "smart_garden_server",
"private": true, "private": true,
"scripts": { "scripts": {
"start": "meteor run", "start": "MONGO_URL=mongodb://garden:99009911@cloud.timovolkmann.de:27017/Smart_Garden meteor run",
"plainstart": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha", "test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha", "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer" "visualize": "meteor --production --extra-packages bundle-visualizer"

View File

@ -2,6 +2,7 @@ import { Meteor } from 'meteor/meteor';
var PlantTypesCollection = new Meteor.Collection('plantTypes'); var PlantTypesCollection = new Meteor.Collection('plantTypes');
var SensorDataCollection = new Meteor.Collection('sensorData'); var SensorDataCollection = new Meteor.Collection('sensorData');
var ActiveDeviceCollection = new Meteor.Collection('activeDevice');
Meteor.startup(() => { Meteor.startup(() => {
if(Meteor.isServer) { if(Meteor.isServer) {
@ -12,10 +13,15 @@ Meteor.startup(() => {
Meteor.publish('sensorDataCollection', function() { Meteor.publish('sensorDataCollection', function() {
return SensorDataCollection.find(); return SensorDataCollection.find();
}) })
Meteor.publish('activeDeviceCollection', function() {
return ActiveDeviceCollection.find();
})
} }
if (Meteor.isClient) { if (Meteor.isClient) {
Meteor.subscribe('plantTypesCollection'); Meteor.subscribe('plantTypesCollection');
Meteor.subscribe('sensorDataCollection'); Meteor.subscribe('sensorDataCollection');
Meteor.subscribe('activeDeviceCollection');
} }
}); });