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

Fix minor bug when configuring new device.

Browse Source
This commit is contained in:
Andrés Uribe Stengel 2020-07-24 11:51:22 +02:00
parent 4e8d270eba
commit ada9cb0aa2
8 changed files with 61 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
imports/ui/ActivatePlant.jsx
View File

@ -1,85 +0,0 @@
import React from 'react'
import { Button, Form} from 'react-bootstrap';
class ActivatePlant extends React.Component{
constructor(props){
super(props);
this.state = {
name: '',
isActivationButtonDisabled: false,
}
}
handleChange = (e) => {
// console.log(e.target.id, e.target.value);
/*
if (activePlant !== 'undefined'){
if (activePlant !== this.state.name) {
this.setState({
isActivationButtonDisabled: false
})
}
}*/
this.setState({
[e.target.id]: e.target.value
});
}
// search for arrow function for further syntax knowledge
handleActivation = (e) => {
e.preventDefault();
let activatedPlant
this.props.plants.map(plant =>{
if (plant.name === this.state.name){
activatedPlant = plant
}
})
// activePlant = activatedPlant.name
this.props.activatePlant(activatedPlant)
/*
this.setState({
isActivationButtonDisabled: true
})*/
}
render (){
return (
<>
{
this.props.plants.length !== 0 ?
<Form onSubmit={this.handleActivation}>
<Form.Group>
<Form.Label>Active plant:</Form.Label>
<Form.Control
as="select"
type="text"
id="name"
value={this.state.name}
onChange={this.handleChange}
>
<option></option>
{this.props.plants.map((plant, index) =>{
return <option key={index} value={plant.name}>{plant.name}</option>
})}
</Form.Control>
</Form.Group>
<Button type={"submit"} disabled={this.state.isActivationButtonDisabled}>Activate</Button>
</Form>
:null
}
</>
);
}
}
export default ActivatePlant;

72
imports/ui/AddPlant.jsx
View File

@ -1,72 +0,0 @@
import React from 'react'
import { Button, Form } from 'react-bootstrap';
class AddPlant extends React.Component{
constructor(props){
super(props);
this.state = {
name: '',
type: ''
}
}
handleChange = (e) => {
// console.log(e.target.id, e.target.value); // e.target.id reference to the state which is changed
this.setState({
[e.target.id]: e.target.value
});
}
// search for arrow function for further syntax knowledge
handleSubmit = (e) => {
e.preventDefault();
//console.log(this.state)
this.props.addPlant(this.state)
this.setState({ // reset state
name: '',
type: ''
})
}
render (){
return (
<>
<Form onSubmit={this.handleSubmit}>
<Form.Group>
<Form.Label>Name:</Form.Label>
<Form.Control
type="text"
id="name"
value={this.state.name}
autoFocus ref={(input) => {this.nameInput=(input)}}
placeholder="plant"
onChange={this.handleChange} />
</Form.Group>
<Form.Group>
<Form.Label>Type:</Form.Label>
<Form.Control
as="select"
type="text"
id="type"
value={this.state.type}
onChange={this.handleChange}
>
<option></option>
{this.props.typeArray.map((type, index) =>{
return <option key={index} value={type}>{type}</option>
})}
</Form.Control>
</Form.Group>
<Button type={"submit"}>Submit</Button>
</Form>
</>
);
}
}
export default AddPlant;

36
imports/ui/Home.jsx
View File

@ -1,30 +1,10 @@
import React from 'react' import React from 'react'
import { import {ConfiguredDevicesCollection, PlantTypesCollection} from "../../client/main";
SensorDataCollection,
ActiveDeviceCollection,
ConfiguredDevicesCollection,
PlantTypesCollection
} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data'; import {useTracker} from 'meteor/react-meteor-data';
import { Card, CardDeck, Table } from "react-bootstrap"; import { Card, CardDeck, Table } from "react-bootstrap";
import Settings from "./Settings"; import Settings from "./Settings";
export default function Home() { export default function Home() {
const deviceId = useTracker(() => {
return ActiveDeviceCollection.find().fetch()[0];
});
const sensorData = useTracker(() => {
if (deviceId === null || deviceId === undefined) {
return [];
} else {
return SensorDataCollection.find({device_id: deviceId.deviceId}, {
sort: {timestamp: -1},
limit: 61
}).fetch().reverse();
}
});
const configuredDevices = useTracker(() => { const configuredDevices = useTracker(() => {
return ConfiguredDevicesCollection.find().fetch(); return ConfiguredDevicesCollection.find().fetch();
}); });
@ -55,18 +35,7 @@ export default function Home() {
} }
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 ( return (
<> <>
<Table striped bordered hover responsive> <Table striped bordered hover responsive>
@ -106,5 +75,4 @@ export default function Home() {
<Settings></Settings> <Settings></Settings>
</> </>
) )
}
} }

10
imports/ui/Overview.jsx
View File

@ -11,21 +11,21 @@ export default function Overview() {
return ActiveDeviceCollection.find().fetch()[0]; return ActiveDeviceCollection.find().fetch()[0];
}); });
const configuredDevices = useTracker(() => {
return ConfiguredDevicesCollection.find().fetch();
});
const sensorData = useTracker(() => { const sensorData = useTracker(() => {
if (activeDevice === null || activeDevice === undefined) { if (activeDevice === null || activeDevice === undefined) {
return []; return [];
} else { } else {
return SensorDataCollection.find({device_id: activeDevice.deviceId}, { return SensorDataCollection.find({device_id: activeDevice.deviceId}, {
sort: {timestamp: -1}, sort: {timestamp: -1},
limit: 61 limit: 1441
}).fetch().reverse(); }).fetch().reverse();
} }
}); });
const configuredDevices = useTracker(() => {
return ConfiguredDevicesCollection.find().fetch();
});
const handleChange = (e) => { const handleChange = (e) => {
if (e.target.value === "") { if (e.target.value === "") {
console.log("No device selected!"); console.log("No device selected!");

37
imports/ui/Plants.jsx
View File

@ -1,37 +0,0 @@
import React from 'react'
import { Table, Button } from 'react-bootstrap';
const Plants = ({plants, deletePlant}) => {
return (
<>
{
plants.length !== 0 ?
<Table striped bordered hover>
<thead>
<tr>
<th>Plant name</th>
<th>Plant type</th>
<th></th>
</tr>
</thead>
<tbody>
{
plants.map((plant, index) => {
return <tr key={index}>
<td>{plant.name}</td>
<td>{plant.type}</td>
<td><Button onClick={()=>{deletePlant(plant.id)}}>Delete</Button></td>
</tr>
})
}
</tbody>
</Table>
: null
}
</>
);
}
export default Plants

2
imports/ui/SensorCardDeck.jsx
View File

@ -37,8 +37,6 @@ export default function SensorCardDeck() {
} }
}); });
console.log("Sens" + sensorData, plantType, plantTypeData, deviceId);
if (sensorData.length <= 0 || plantType === undefined || deviceId === undefined || plantTypeData === undefined) { if (sensorData.length <= 0 || plantType === undefined || deviceId === undefined || plantTypeData === undefined) {
return ( return (
<CardDeck> <CardDeck>

36
imports/ui/Settings.jsx
View File

@ -3,30 +3,16 @@ import {Col, Form, Row, Card, CardDeck, Button, Container} from "react-bootstrap
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';
import {getAllEspIds} from "../api/espIds"; import {getAllEspIds} from "../api/espIds";
import {getAllPlantTypes} from "../api/plantTypes"; import {getAllPlantTypes} from "../api/plantTypes";
import {ConfiguredDevicesCollection, PlantTypesCollection, ActiveDeviceCollection, SensorDataCollection} from "../../client/main"; import {ConfiguredDevicesCollection, PlantTypesCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data'; import {useTracker} from 'meteor/react-meteor-data';
export default function Settings() { export default function Settings() {
const deviceId = useTracker(() => {
return ActiveDeviceCollection.find().fetch()[0];
});
const sensorData = useTracker(() => {
if (deviceId === null || deviceId === undefined) {
return [];
} else {
return SensorDataCollection.find({device_id: deviceId.deviceId}, {
sort: {timestamp: -1},
limit: 61
}).fetch().reverse();
}
});
const plantTypes = useTracker(() => { const plantTypes = useTracker(() => {
return PlantTypesCollection.find(); return PlantTypesCollection.find();
}); });
const espIds = useTracker(getAllEspIds);
var selectedEspId; var selectedEspId;
var selectedAlias = ""; var selectedAlias = "";
var selectedType; var selectedType;
@ -65,12 +51,17 @@ export default function Settings() {
if (selectedType === "Cacti") {payload = JSON.stringify(payloadCacti.data.soilMoisture);} if (selectedType === "Cacti") {payload = JSON.stringify(payloadCacti.data.soilMoisture);}
if (selectedType === "Flowers") {payload = JSON.stringify(payloadFlower.data.soilMoisture);} if (selectedType === "Flowers") {payload = JSON.stringify(payloadFlower.data.soilMoisture);}
console.log("Payload: " + payload);
console.log("Alias: " + selectedAlias);
console.log("ID: " + selectedEspId);
console.log("Type: " + selectedType);
if ((payload === "") || (selectedEspId === undefined) || (selectedAlias === "") || (selectedType === undefined)) {alert("Nickname is empty or no device/type selected!");} else {
var doc = ConfiguredDevicesCollection.findOne({deviceId: selectedEspId}); var doc = ConfiguredDevicesCollection.findOne({deviceId: selectedEspId});
if (doc === undefined) {ConfiguredDevicesCollection.insert({deviceId: selectedEspId, alias: selectedEspId, type: selectedType});} else { if (doc === undefined) {ConfiguredDevicesCollection.insert({deviceId: selectedEspId, alias: selectedAlias, type: selectedType});} else {
ConfiguredDevicesCollection.update({_id: doc._id}, {$set: {alias: selectedAlias, type: selectedType}}); ConfiguredDevicesCollection.update({_id: doc._id}, {$set: {alias: selectedAlias, type: selectedType}});
} }
if ((payload === "") || (selectedEspId === undefined) || (selectedAlias === "") || (selectedType === undefined)) {alert("Nickname is empty or no device/type selected!");} else {
Meteor.call('mqttPublish', { Meteor.call('mqttPublish', {
topic: 'smartgarden/commands/' + selectedEspId + '/soil', topic: 'smartgarden/commands/' + selectedEspId + '/soil',
payload: payload payload: payload
@ -99,7 +90,7 @@ export default function Settings() {
} }
if ((sensorData.length <= 0)) { if ((plantTypes.length <= 0) || (espIds.length <= 0)) {
return ( return (
<CardDeck> <CardDeck>
<Card> <Card>
@ -125,12 +116,13 @@ export default function Settings() {
<br></br> <br></br>
<Form> <Form autoComplete='off'>
<Form.Group> <Form.Group>
<Form.Label>Name:</Form.Label> <Form.Label>Name:</Form.Label>
<Form.Control <Form.Control
type="text" type="text"
id="alias" id="alias"
autoFocus ref={(input) => {this.nameInput=(input)}}
placeholder="Enter a device nickname..." placeholder="Enter a device nickname..."
onChange={handleChangeAlias}/> onChange={handleChangeAlias}/>
</Form.Group> </Form.Group>
@ -138,7 +130,7 @@ export default function Settings() {
<Form.Label>Device:</Form.Label> <Form.Label>Device:</Form.Label>
<Form.Control as="select" type="text" onChange={handleChangeDevice}> <Form.Control as="select" type="text" onChange={handleChangeDevice}>
<option></option> <option></option>
{getAllEspIds().map((espName, index) => { {espIds.map((espName, index) => {
return <option key={index} value={espName}>{espName}</option> return <option key={index} value={espName}>{espName}</option>
})} })}
</Form.Control> </Form.Control>

98
imports/ui/Settings_old.jsx
View File

@ -1,98 +0,0 @@
import React from 'react'
import {Container, Row, Col, CardDeck, Card} from 'react-bootstrap';
import AddPlant from './AddPlant'
import Plants from './Plants'
import ActivatePlant from './ActivatePlant'
import {getAllPlantTypes} from "../api/plantTypes";
class Settings_old extends React.Component{
constructor(props){
super(props);
this.state = {
plants: [],
types: [],
}
}
componentDidMount() {
(async ()=>{
this.setState({
types: getAllPlantTypes(),
})
})();
}
// pass this function to the addplant comp as a prop
addPlant = (plant) => {
plant.id = this.state.plants.length + 1 // TODO rework
let plants = [...this.state.plants, plant]; // create a copy of the array and add the new plant to it
this.setState({
plants: plants
})
}
deletePlant = (id) => {
let plants = this.state.plants.filter(plant =>{ // callback function
return plant.id !== id // when it returns false (the id is the same), it filters this object out of the array
})
this.setState({
plants: plants
})
}
activatePlant = (plant) => {
console.log('The plant ' + plant.name + ' will be monitored')
// TODO head for activate logic
}
render(){
return (
<>
<Container>
<Row className="justify-content-md-center">
<Col md="auto">
<h1>Settings</h1>
</Col>
</Row>
<Row className="justify-content-md-center">
<a>Configure your plant here. Based on your settings the smart garden will automate your plant environment.</a>
</Row>
<br></br>
<AddPlant
addPlant={this.addPlant}
typeArray={this.state.types}
></AddPlant>
<Row className="justify-content-md-center">
<Col md={{ span: 4, offset: 4 }}></Col>
</Row>
<br></br>
<Plants
plants={this.state.plants}
deletePlant={this.deletePlant}
></Plants>
<ActivatePlant
plants={this.state.plants}
activatePlant={this.activatePlant}
>
</ActivatePlant>
</Container>
</>
);
}
}
export default Settings_old;