improved home view

This commit is contained in:
Timo Volkmann 2020-07-17 18:26:04 +02:00
parent 83c94a9755
commit 75aa745a12
7 changed files with 33 additions and 29 deletions

View File

@ -22,3 +22,4 @@ insecure@1.0.7 # Allow all DB writes from clients (for prototypin
static-html
react-meteor-data
underscore
momentjs:moment

View File

@ -45,6 +45,7 @@ mobile-status-bar@1.1.0
modern-browsers@0.1.5
modules@0.15.0
modules-runtime@0.12.0
momentjs:moment@2.27.0
mongo@1.10.0
mongo-decimal@0.1.1
mongo-dev-server@1.1.0

View File

@ -4,7 +4,8 @@ import SensorCardDeck from './SensorCardDeck'
import {SensorDataCollection, ActiveDeviceCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data';
import { Col, Form, Row, Card, CardDeck } from "react-bootstrap";
import {getAllEspNames} from "../api/espNames";
import { getAllEspNames } from "../api/espNames";
import moment from 'moment'
export default function Home() {
const deviceName = useTracker(() => {
@ -31,6 +32,9 @@ export default function Home() {
}
}
const getLabelFromStamp = (x) => {
return moment(x.timestamp).format("HH:mm");
}
if ((sensorData.length <= 0)) {
return (
@ -75,10 +79,10 @@ export default function Home() {
<Row>
<Col>
<ResponsiveContainer width='100%' height={325}>
<LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<LineChart data={sensorData.filter(el => el.temperature !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<Line type="monotone" dataKey="temperature" stroke="#10b5de"/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey="timeAsString"/>
<XAxis dataKey={getLabelFromStamp}/>
<YAxis/>
<Tooltip/>
<Legend/>
@ -87,10 +91,10 @@ export default function Home() {
</Col>
<Col>
<ResponsiveContainer width='100%' height={325}>
<LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<LineChart data={sensorData.filter(el => el.humidity !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<Line type="monotone" dataKey="humidity" stroke="#ff6f00"/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey="timeAsString"/>
<XAxis dataKey={getLabelFromStamp}/>
<YAxis/>
<Tooltip/>
<Legend/>
@ -101,10 +105,10 @@ export default function Home() {
<Row>
<Col>
<ResponsiveContainer width='100%' height={325}>
<LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<LineChart data={sensorData.filter(el => el.brightness !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<Line type="monotone" dataKey="brightness" stroke="#ffd500"/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey="timeAsString"/>
<XAxis dataKey={getLabelFromStamp}/>
<YAxis/>
<Tooltip/>
<Legend/>
@ -113,10 +117,10 @@ export default function Home() {
</Col>
<Col>
<ResponsiveContainer width='100%' height={325}>
<LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<LineChart data={sensorData.filter(el => el.moisture !== null)} margin={{top: 50, right: 50, bottom: 20, left: 5}}>
<Line type="monotone" dataKey="moisture" stroke="#1c4399"/>
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
<XAxis dataKey="timeAsString"/>
<XAxis dataKey={getLabelFromStamp}/>
<YAxis/>
<Tooltip/>
<Legend/>

View File

@ -6,7 +6,7 @@ const dbClient = new MongoClient("mongodb://garden:99009911@cloud.timovolkmann.d
startMqttObserver()
async function startMqttObserver() {
export default async function startMqttObserver() {
console.log("setup connections...")
// setup mongodb
dbClient.connect(err => {

23
package-lock.json generated
View File

@ -97,8 +97,7 @@
"bson": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/bson/-/bson-1.1.4.tgz",
"integrity": "sha512-S/yKGU1syOMzO86+dGpg2qGoDL0zvzcb262G+gqEy6TgP6rt6z6qxSFX/8X6vLC91P7G7C3nLs0+bvDzmvBA3Q==",
"dev": true
"integrity": "sha512-S/yKGU1syOMzO86+dGpg2qGoDL0zvzcb262G+gqEy6TgP6rt6z6qxSFX/8X6vLC91P7G7C3nLs0+bvDzmvBA3Q=="
},
"buffer-from": {
"version": "1.1.1",
@ -259,8 +258,7 @@
"denque": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
"integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ==",
"dev": true
"integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
},
"dom-helpers": {
"version": "3.4.0",
@ -591,7 +589,6 @@
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
"integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
"dev": true,
"optional": true
},
"meteor-node-stubs": {
@ -1177,11 +1174,15 @@
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
},
"moment": {
"version": "2.27.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
"integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
},
"mongodb": {
"version": "3.5.9",
"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.5.9.tgz",
"integrity": "sha512-vXHBY1CsGYcEPoVWhwgxIBeWqP3dSu9RuRDsoLRPTITrcrgm1f0Ubu1xqF9ozMwv53agmEiZm0YGo+7WL3Nbug==",
"dev": true,
"requires": {
"bl": "^2.2.0",
"bson": "^1.1.4",
@ -1195,7 +1196,6 @@
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/bl/-/bl-2.2.0.tgz",
"integrity": "sha512-wbgvOpqopSr7uq6fJrLH8EsvYMJf9gzfo2jCsL2eTy75qXPukA4pCgHamOQkZtY5vmfVtjB+P3LNlMHW5CEZXA==",
"dev": true,
"requires": {
"readable-stream": "^2.3.5",
"safe-buffer": "^5.1.1"
@ -1613,7 +1613,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
"integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
"dev": true,
"requires": {
"resolve-from": "^2.0.0",
"semver": "^5.1.0"
@ -1627,8 +1626,7 @@
"resolve-from": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-2.0.0.tgz",
"integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c=",
"dev": true
"integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
},
"resolve-pathname": {
"version": "3.0.0",
@ -1644,7 +1642,6 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/saslprep/-/saslprep-1.0.3.tgz",
"integrity": "sha512-/MY/PEMbk2SuY5sScONwhUDsV2p77Znkb/q3nSVstq/yQzYJOH/Azh29p9oJLsl3LnQwSvZDKagDGBsBwSooag==",
"dev": true,
"optional": true,
"requires": {
"sparse-bitfield": "^3.0.3"
@ -1662,14 +1659,12 @@
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
"dev": true
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
},
"sparse-bitfield": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
"integrity": "sha1-/0rm5oZWBWuks+eSqzM004JzyhE=",
"dev": true,
"optional": true,
"requires": {
"memory-pager": "^1.0.2"

View File

@ -15,13 +15,15 @@
"jquery": "^3.4.1",
"lodash": "^4.17.19",
"meteor-node-stubs": "^1.0.0",
"moment": "^2.27.0",
"mongodb": "^3.5.9",
"mqtt": "^4.1.0",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"recharts": "^1.8.5",
"utf-8-validate": "^5.0.2",
"mqtt": "^4.1.0"
"utf-8-validate": "^5.0.2"
},
"meteor": {
"mainModule": {
@ -30,7 +32,5 @@
},
"testModule": "tests/main.js"
},
"devDependencies": {
"mongodb": "^3.5.9"
}
"devDependencies": {}
}

View File

@ -1,5 +1,6 @@
import { Meteor } from 'meteor/meteor';
import { publish } from '../imports/api/mqttApi.js'
import startMqttObserver from '../mongo-mqtt.js'
var PlantTypesCollection = new Meteor.Collection('plantTypes');
var SensorDataCollection = new Meteor.Collection('sensorData');
@ -24,6 +25,8 @@ Meteor.startup(() => {
return ConfiguredDevicesCollection.find();
})
//startMqttObserver()
Meteor.methods({
'mqttPublish'({ topic, payload }) {
publish(topic, payload)