Add dropdown to set active device and update charts accordingly.

.meteor/packages

@@ -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

client/main.jsx

@@ -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() {

imports/ui/Home.jsx

@@ -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() {
+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];
     });
 
+    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}>
+                    <ResponsiveContainer width='100%' height={350}>
-                        <LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
+                        <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}>
+                    <ResponsiveContainer width='100%' height={350}>
-                        <LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
+                        <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}>
+                    <ResponsiveContainer width='100%' height={350}>
-                        <LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
+                        <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}>
+                    <ResponsiveContainer width='100%' height={350}>
-                        <LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
+                        <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 />

imports/ui/SensorCardDeck.jsx

@@ -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 (

mongo-mqtt.js

@@ -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));

server/main.js

@@ -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');
     }
 });