Merge branch 'auribest_dev' into develop
This commit is contained in:
Andrés Uribe Stengel
commit
7f903b9b73
@ -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;
|
||||
|
||||
@ -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;
|
||||
@ -1,30 +1,10 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
SensorDataCollection,
|
||||
ActiveDeviceCollection,
|
||||
ConfiguredDevicesCollection,
|
||||
PlantTypesCollection
|
||||
} from "../../client/main";
|
||||
import {ConfiguredDevicesCollection, PlantTypesCollection} from "../../client/main";
|
||||
import {useTracker} from 'meteor/react-meteor-data';
|
||||
import { Card, CardDeck, Table } from "react-bootstrap";
|
||||
import Settings from "./Settings";
|
||||
|
||||
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(() => {
|
||||
return ConfiguredDevicesCollection.find().fetch();
|
||||
});
|
||||
@ -55,56 +35,44 @@ 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 (
|
||||
<>
|
||||
<Table striped bordered hover responsive>
|
||||
<thead>
|
||||
<tr key={'head'}>
|
||||
<th key={'#'}>#</th>
|
||||
<th key={'nickname'}>Device Nickname</th>
|
||||
<th key={'id'}>Device ID</th>
|
||||
<th key={'type'}>Plant Type</th>
|
||||
<th key={'soil'}>Soil Type</th>
|
||||
<th key={'pwp'}>Permanent Wilting Point</th>
|
||||
<th key={'fc'}>Field Capacity</th>
|
||||
<th key={'temp'}>Min Temperature</th>
|
||||
<th key={'brightness'}>Min Brightness</th>
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table striped bordered hover responsive>
|
||||
<thead>
|
||||
<tr key={'head'}>
|
||||
<th key={'#'}>#</th>
|
||||
<th key={'nickname'}>Device Nickname</th>
|
||||
<th key={'id'}>Device ID</th>
|
||||
<th key={'type'}>Plant Type</th>
|
||||
<th key={'soil'}>Soil Type</th>
|
||||
<th key={'pwp'}>Permanent Wilting Point</th>
|
||||
<th key={'fc'}>Field Capacity</th>
|
||||
<th key={'temp'}>Min Temperature</th>
|
||||
<th key={'brightness'}>Min Brightness</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{configuredDevices.map((device, index) => {
|
||||
return <tr key={'body' + index}>
|
||||
<td key={'#-' + index}>{index}</td>
|
||||
<td key={'nickname-' + index}>{device.alias}</td>
|
||||
<td key={'id-' + index}>{device.deviceId}</td>
|
||||
<td key={'type-' + index}>{device.type}</td>
|
||||
<td key={'soil-' + index}>{getSoil(device.type)}</td>
|
||||
<td key={'pwp-' + index}>{getPermWilPoint(device.type) + " %"}</td>
|
||||
<td key={'fc-' + index}>{getFieldCap(device.type) + " %"}</td>
|
||||
<td key={'temp-' + index}>{getMinTemp(device.type) + " °C"}</td>
|
||||
<td key={'brightness-' + index}>{getMinLux(device.type) + " lux"}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{configuredDevices.map((device, index) => {
|
||||
return <tr key={'body' + index}>
|
||||
<td key={'#-' + index}>{index}</td>
|
||||
<td key={'nickname-' + index}>{device.alias}</td>
|
||||
<td key={'id-' + index}>{device.deviceId}</td>
|
||||
<td key={'type-' + index}>{device.type}</td>
|
||||
<td key={'soil-' + index}>{getSoil(device.type)}</td>
|
||||
<td key={'pwp-' + index}>{getPermWilPoint(device.type) + " %"}</td>
|
||||
<td key={'fc-' + index}>{getFieldCap(device.type) + " %"}</td>
|
||||
<td key={'temp-' + index}>{getMinTemp(device.type) + " °C"}</td>
|
||||
<td key={'brightness-' + index}>{getMinLux(device.type) + " lux"}</td>
|
||||
</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
<br></br>
|
||||
<h4>If your device is not visible in the table above, configure it here below.</h4>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<Settings></Settings>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
<br></br>
|
||||
<h4>If your device is not visible in the table above, configure it here below.</h4>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<Settings></Settings>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -11,21 +11,21 @@ export default function Overview() {
|
||||
return ActiveDeviceCollection.find().fetch()[0];
|
||||
});
|
||||
|
||||
const configuredDevices = useTracker(() => {
|
||||
return ConfiguredDevicesCollection.find().fetch();
|
||||
});
|
||||
|
||||
const sensorData = useTracker(() => {
|
||||
if (activeDevice === null || activeDevice === undefined) {
|
||||
return [];
|
||||
} else {
|
||||
return SensorDataCollection.find({device_id: activeDevice.deviceId}, {
|
||||
sort: {timestamp: -1},
|
||||
limit: 61
|
||||
limit: 1441
|
||||
}).fetch().reverse();
|
||||
}
|
||||
});
|
||||
|
||||
const configuredDevices = useTracker(() => {
|
||||
return ConfiguredDevicesCollection.find().fetch();
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
if (e.target.value === "") {
|
||||
console.log("No device selected!");
|
||||
|
||||
@ -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
|
||||
@ -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) {
|
||||
return (
|
||||
<CardDeck>
|
||||
|
||||
@ -3,30 +3,16 @@ import {Col, Form, Row, Card, CardDeck, Button, Container} from "react-bootstrap
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import {getAllEspIds} from "../api/espIds";
|
||||
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';
|
||||
|
||||
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(() => {
|
||||
return PlantTypesCollection.find();
|
||||
});
|
||||
|
||||
const espIds = useTracker(getAllEspIds);
|
||||
|
||||
var selectedEspId;
|
||||
var selectedAlias = "";
|
||||
var selectedType;
|
||||
@ -65,12 +51,17 @@ export default function Settings() {
|
||||
if (selectedType === "Cacti") {payload = JSON.stringify(payloadCacti.data.soilMoisture);}
|
||||
if (selectedType === "Flowers") {payload = JSON.stringify(payloadFlower.data.soilMoisture);}
|
||||
|
||||
var doc = ConfiguredDevicesCollection.findOne({deviceId: selectedEspId});
|
||||
if (doc === undefined) {ConfiguredDevicesCollection.insert({deviceId: selectedEspId, alias: selectedEspId, type: selectedType});} else {
|
||||
ConfiguredDevicesCollection.update({_id: doc._id}, {$set: {alias: selectedAlias, type: selectedType}});
|
||||
}
|
||||
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});
|
||||
if (doc === undefined) {ConfiguredDevicesCollection.insert({deviceId: selectedEspId, alias: selectedAlias, type: selectedType});} else {
|
||||
ConfiguredDevicesCollection.update({_id: doc._id}, {$set: {alias: selectedAlias, type: selectedType}});
|
||||
}
|
||||
|
||||
Meteor.call('mqttPublish', {
|
||||
topic: 'smartgarden/commands/' + selectedEspId + '/soil',
|
||||
payload: payload
|
||||
@ -99,7 +90,7 @@ export default function Settings() {
|
||||
}
|
||||
|
||||
|
||||
if ((sensorData.length <= 0)) {
|
||||
if ((plantTypes.length <= 0) || (espIds.length <= 0)) {
|
||||
return (
|
||||
<CardDeck>
|
||||
<Card>
|
||||
@ -125,12 +116,13 @@ export default function Settings() {
|
||||
|
||||
<br></br>
|
||||
|
||||
<Form>
|
||||
<Form autoComplete='off'>
|
||||
<Form.Group>
|
||||
<Form.Label>Name:</Form.Label>
|
||||
<Form.Control
|
||||
type="text"
|
||||
id="alias"
|
||||
autoFocus ref={(input) => {this.nameInput=(input)}}
|
||||
placeholder="Enter a device nickname..."
|
||||
onChange={handleChangeAlias}/>
|
||||
</Form.Group>
|
||||
@ -138,7 +130,7 @@ export default function Settings() {
|
||||
<Form.Label>Device:</Form.Label>
|
||||
<Form.Control as="select" type="text" onChange={handleChangeDevice}>
|
||||
<option></option>
|
||||
{getAllEspIds().map((espName, index) => {
|
||||
{espIds.map((espName, index) => {
|
||||
return <option key={index} value={espName}>{espName}</option>
|
||||
})}
|
||||
</Form.Control>
|
||||
|
||||
@ -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;
|
||||
Loading…
Reference in New Issue
Block a user