Add an Overview table of all configured ESPs.

imports/ui/App.jsx

@@ -1,8 +1,9 @@
 import React, { Suspense } from 'react'
 import NavBar from './NavigationBar'
 import Home from './Home'
-import About from './About'
+import Overview from './Overview'
 import Settings from './Settings'
+import About from './About'
 import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
 
 function App() {
@@ -16,6 +17,9 @@ function App() {
             <Route path="/" exact>
               <Home></Home>
             </Route>
+            <Route path="/overview">
+              <Overview></Overview>
+            </Route>
             <Route path="/settings">
               <Settings></Settings>
             </Route>

imports/ui/Home.jsx

@@ -46,6 +46,7 @@ export default function Home() {
     } else {
         return (
             <>
+                <br></br>
                 <Row>
                     <Col xs lg="2">
                         <h4>Devices:</h4>
@@ -70,10 +71,11 @@ export default function Home() {
                 </Row>
 
                 <SensorCardDeck/>
+
                 <Row>
                     <Col>
-                        <ResponsiveContainer width='100%' height={350}>
+                        <ResponsiveContainer width='100%' height={325}>
-                            <LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
+                            <LineChart data={sensorData} 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"/>
@@ -84,8 +86,8 @@ export default function Home() {
                         </ResponsiveContainer>
                     </Col>
                     <Col>
-                        <ResponsiveContainer width='100%' height={350}>
+                        <ResponsiveContainer width='100%' height={325}>
-                            <LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
+                            <LineChart data={sensorData} 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"/>
@@ -98,8 +100,8 @@ export default function Home() {
                 </Row>
                 <Row>
                     <Col>
-                        <ResponsiveContainer width='100%' height={350}>
+                        <ResponsiveContainer width='100%' height={325}>
-                            <LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
+                            <LineChart data={sensorData} 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"/>
@@ -110,8 +112,8 @@ export default function Home() {
                         </ResponsiveContainer>
                     </Col>
                     <Col>
-                        <ResponsiveContainer width='100%' height={350}>
+                        <ResponsiveContainer width='100%' height={325}>
-                            <LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
+                            <LineChart data={sensorData} 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"/>

imports/ui/NavigationBar.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
+import { Navbar, Nav } from 'react-bootstrap';
 
 //import logo from '../../client/public/SmartGarden.svg';
 
@@ -23,6 +23,7 @@ export default function NavigationBar() {
             <Navbar.Toggle aria-controls="responsive-navbar-nav" />
             <Navbar.Collapse id="responsive-navbar-nav">
                 <Nav className="mr-auto">
+                <Nav.Link href="/overview">Overview</Nav.Link>
                 <Nav.Link href="/settings">Settings</Nav.Link>
                 <Nav.Link href="/about">About</Nav.Link>
                 {

imports/ui/Overview.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import {
+    SensorDataCollection,
+    ActiveDeviceCollection,
+    ConfiguredDevicesCollection,
+    PlantTypesCollection
+} from "../../client/main";
+import {useTracker} from 'meteor/react-meteor-data';
+import { Card, CardDeck, Table } from "react-bootstrap";
+
+export default function Overview() {
+    const deviceName = useTracker(() => {
+        return ActiveDeviceCollection.find().fetch()[0];
+    });
+
+    const sensorData = useTracker(() => {
+        if (deviceName === null || deviceName === undefined) {
+            return [];
+        } else {
+            return SensorDataCollection.find({device_id: deviceName.deviceName}, {
+                sort: {timestamp: -1},
+                limit: 61
+            }).fetch().reverse();
+        }
+    });
+
+    const configuredDevices = useTracker(() => {
+        return ConfiguredDevicesCollection.find().fetch();
+    });
+
+    function getDirt(type) {
+        const plantType = PlantTypesCollection.findOne({plantType: type});
+        return plantType.dirtType
+    }
+
+
+    if ((sensorData.length <= 0)) {
+        return (
+            <CardDeck>
+                <Card>
+                    <Card.Body>
+                        <Card.Title>Loading!</Card.Title>
+                        <Card.Text>Please wait...</Card.Text>
+                    </Card.Body>
+                </Card>
+            </CardDeck>
+        )
+    } else {
+        return (
+            <>
+                <Table striped bordered hover responsive>
+                    <thead>
+                        <tr key={'head'}>
+                            <th key={'#'}>#</th>
+                            <th key={'name'}>Device Name</th>
+                            <th key={'type'}>Plant Type</th>
+                            <th key={'dirt'}>Dirt Type</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {configuredDevices.map((device, index) => {
+                            return <tr key={'body' + index}>
+                                <td key={'#-' + index}>{index}</td>
+                                <td key={'name-' + index}>{device.deviceName}</td>
+                                <td key={'type-' + index}>{device.type}</td>
+                                <td key={'dirt-' + index}>{getDirt(device.type)}</td>
+                            </tr>
+                        })}
+                    </tbody>
+                </Table>
+                <br></br>
+                <h4>If your device is not visible, go to Settings to configure it first.</h4>
+            </>
+        )
+    }
+}

imports/ui/Settings.jsx

@@ -55,7 +55,7 @@ export default function Settings() {
         if (selectedType === "Vegetables") {payload = JSON.stringify(payloadVegi);}
         if (selectedType === "Cacti") {payload = JSON.stringify(payloadCacti);}
         if (selectedType === "Flowers") {payload = JSON.stringify(payloadFlower);}
-        console.log(payload);
+
         if ((payload === "") || (selectedEspName === undefined) || (selectedType === undefined)) {alert("No device or type selected!");} else {
             Meteor.call('mqttPublish', {
                 topic: 'smartgarden/commands/' + selectedEspName,