diff --git a/.meteor/packages b/.meteor/packages index ef30b57..34e9bc5 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -20,3 +20,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 diff --git a/.meteor/versions b/.meteor/versions index e0de6c4..44ddd98 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -53,6 +53,7 @@ npm-mongo@3.7.1 ordered-dict@1.1.0 promise@0.11.2 random@1.2.0 +react-meteor-data@2.1.1 reactive-var@1.0.11 reload@1.3.0 retry@1.1.0 diff --git a/client/main.jsx b/client/main.jsx index e6385f7..d0a31b8 100644 --- a/client/main.jsx +++ b/client/main.jsx @@ -23,11 +23,7 @@ Meteor.startup(() => { Meteor.subscribe('sensorDataCollection'); } - Meteor.setTimeout(function() { - console.log(SensorDataCollection.find().fetch()); - }, 500); - Meteor.setTimeout(function() { ReactDOM.render(, document.getElementById('root')); - }, 500); + }, 1000); }); \ No newline at end of file diff --git a/imports/api/sensorData.js b/imports/api/sensorData.js deleted file mode 100644 index 09a1202..0000000 --- a/imports/api/sensorData.js +++ /dev/null @@ -1,14 +0,0 @@ -import {SensorDataCollection} from '../../client/main' - -export function getAllSensorData() { - const sensorDataDocuments = SensorDataCollection.find(); - - var sensorDatas = []; - - sensorDataDocuments.forEach((sensorData) => { - var brightnessInPercent = (sensorData.brightness/54000*100).toFixed(0); - sensorDatas.push({ name: sensorData.timestamp, temperature: sensorData.temperature, humidity: sensorData.humidity, light: brightnessInPercent, moisture: sensorData.moisture }); - }); - - return sensorDatas; -} \ No newline at end of file diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx index ff03696..6427bfc 100644 --- a/imports/ui/App.jsx +++ b/imports/ui/App.jsx @@ -4,12 +4,9 @@ import Home from './Home' import About from './About' import Settings from './Settings' import {BrowserRouter as Router, Switch, Route} from 'react-router-dom' -import {getAllSensorData} from "../api/sensorData"; function App() { - const exampleData = getAllSensorData(); - return ( <> @@ -17,7 +14,7 @@ function App() { Loading...}> - + diff --git a/imports/ui/Home.jsx b/imports/ui/Home.jsx index 10540ed..94709d2 100644 --- a/imports/ui/Home.jsx +++ b/imports/ui/Home.jsx @@ -1,46 +1,26 @@ import React, {useEffect, useState} from 'react' // useState to rerender the view each time something changed -import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts'; +import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts'; import SensorCardDeck from './SensorCardDeck' +import {SensorDataCollection} from "../../client/main"; +import {useTracker} from 'meteor/react-meteor-data'; -export default function Home(props) { +export default function Home() { + const sensorData = useTracker(() => { + return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch(); + }); - var updateCardValues = () => { - var updatedValues = [ - props.dummyData[props.dummyData.length - 1].temperature, - props.dummyData[props.dummyData.length - 1].humidity, - props.dummyData[props.dummyData.length - 1].light, - props.dummyData[props.dummyData.length - 1].moisture - ]; - return updatedValues; - } - - // this data represents the sensor values, they should be initialized empty.. this is just for the simulation when it first renders - const [sensorCardValues, setSensorCardValues] = useState(updateCardValues); - const [dataHistory, setDataHistory] = useState(props.dummyData); // for init data - - // runs when the app mounts, similiar to componentDidMount and componentDidUpdate - // if you give a prop to useEffect, it also runs each time this prop changes.. - useEffect(() => { - // const data = await fetch('api-address') // fetch data from db here and destructure it - console.log("data is changing, start rerender..") - setDataHistory(props.dummyData); - setSensorCardValues(updateCardValues); - }, []) - - // render the data - // make sensorCarddeck responsive return ( <> - + - + - + - + @@ -49,4 +29,4 @@ export default function Home(props) { ) -} +} \ No newline at end of file diff --git a/imports/ui/SensorCardDeck.jsx b/imports/ui/SensorCardDeck.jsx index e679ecc..46709ef 100644 --- a/imports/ui/SensorCardDeck.jsx +++ b/imports/ui/SensorCardDeck.jsx @@ -1,33 +1,39 @@ import React from 'react' import { Card, CardDeck } from 'react-bootstrap'; +import {SensorDataCollection} from "../../client/main"; +import {useTracker} from 'meteor/react-meteor-data'; + +export default function SensorCardDeck() { + const sensorData = useTracker(() => { + return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 1 }).fetch(); + }); -export default function SensorCardDeck( {sensorCardValues} ) { return ( Temperature - {sensorCardValues[0]} °C + {sensorData[0].temperature} °C Humidity - {sensorCardValues[1]} % + {sensorData[0].humidity} % - Light - {sensorCardValues[2]} % + Brightness + {sensorData[0].brightness} lux Moisture - {sensorCardValues[3]} % + {sensorData[0].moisture} % ) -} +} \ No newline at end of file diff --git a/mongo-mqtt.js b/mongo-mqtt.js index c69f45c..1896e8f 100644 --- a/mongo-mqtt.js +++ b/mongo-mqtt.js @@ -23,19 +23,29 @@ async function startMqttObserver() { function messageCallback(collection) { return function (topic, message) { - // console.log('topic:', topic.toString(), 'message:', message.toString()) let topicElements = topic.split('/'); const type = topicElements.pop(); const id = topicElements.pop(); - //console.log(id, type); + + 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 = { device_id: id, - timestamp: new Date, + timestamp: time, } try { doc = _.merge(doc, JSON.parse(message)); - //doc.sensordata = JSON.parse(message); } catch { }