tvolkmann/smart_garden_server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add an Overview table of all configured ESPs.

Browse Source
This commit is contained in:
Andrés Uribe Stengel 2020-07-17 15:08:51 +02:00
parent 50e7fc2f50
commit 8d8461f471
5 changed files with 94 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
imports/ui/App.jsx
View File

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

18
imports/ui/Home.jsx
View File

@ -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}>
<LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
<ResponsiveContainer width='100%' height={325}>
<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}>
<LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
<ResponsiveContainer width='100%' height={325}>
<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}>
<LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
<ResponsiveContainer width='100%' height={325}>
<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}>
<LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
<ResponsiveContainer width='100%' height={325}>
<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"/>

3
imports/ui/NavigationBar.jsx
View File

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

76
imports/ui/Overview.jsx Normal file
View File

@ -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>
</>
)
}
}

2
imports/ui/Settings.jsx
View File

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