From 5b429e97693531d9a478c92ee42f3ad63aff6378 Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 10:16:22 +0200 Subject: [PATCH 01/10] add new component addPlant removed functionality before --- imports/ui/AddPlant.jsx | 68 +++++++++++++++++++++++ imports/ui/Settings.jsx | 118 ++++------------------------------------ 2 files changed, 79 insertions(+), 107 deletions(-) create mode 100644 imports/ui/AddPlant.jsx diff --git a/imports/ui/AddPlant.jsx b/imports/ui/AddPlant.jsx new file mode 100644 index 0000000..a1961ce --- /dev/null +++ b/imports/ui/AddPlant.jsx @@ -0,0 +1,68 @@ +import React from 'react' + +import { Button, Form, Container, Row, Col, Table } 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); + 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 + } + + + + render (){ + return ( + <> +
+ + Name: + {this.nameInput=(input)}} + placeholder="plant" + onChange={(e)=>this.setState({name:e.target.value})} /> + + + Type: + this.setState({type:e.target.value})} + > + + {this.props.typeArray.map((type, index) =>{ + return + })} + + + +
+ + ); + } +} + +export default AddPlant; + diff --git a/imports/ui/Settings.jsx b/imports/ui/Settings.jsx index e1cad0c..6f298e9 100644 --- a/imports/ui/Settings.jsx +++ b/imports/ui/Settings.jsx @@ -1,5 +1,5 @@ import React from 'react' - +import AddPlant from './AddPlant' import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap'; class Settings extends React.Component{ @@ -7,20 +7,20 @@ class Settings extends React.Component{ constructor(props){ super(props); this.state = { - name: '', - type: '', - dirt: '', plants: [], types: ['Chile', 'Mint'], // hardcoded for now - dirts: ['Vegetable Soil', 'Potting Soil'], // hardcoded for now - updateId: -1, - btnName: 'submit' } } - componentDidMount(){ - // fetch data from db here - + // pass this function to the addplant comp as a prop + addPlant = (plant) => { + plant.id = Math.random(); // rework + + let plants = [...this.state.plants, plant]; // create a copy of the array and add the new plant to it + + this.setState({ + plants: plants + }) } render(){ @@ -38,50 +38,7 @@ class Settings extends React.Component{

- { - this.state.updateId >= 0 | this.state.plants.length === 0? // show the form only if we edit the plant or there is no plant set yet -
- - Name - {this.nameInput=(input)}} - placeholder="plant" - onChange={(e)=>this.setState({name:e.target.value})} /> - - - Type - this.setState({type:e.target.value})} - > - - {this.state.types.map((type, index) => { - return - })} - - - - Dirt - this.setState({dirt:e.target.value})} - > - - {this.state.dirts.map((dirt, index) => { - return - })} - - - -
- :null - } + @@ -109,8 +66,6 @@ class Settings extends React.Component{ {plant[0]} {plant[1]} {plant[2]} - - }) } @@ -125,57 +80,6 @@ class Settings extends React.Component{ ); } - // search for arrow function for further syntax knowledge - handleSubmit = (e) => { - e.preventDefault(); - if (this.state.updateId >= 0) { // check if it is in edit mode - this.state.plants[this.state.updateId][0] = this.state.name; - this.state.plants[this.state.updateId][1] = this.state.type; - this.state.plants[this.state.updateId][2] = this.state.dirt; // updates the name of the plant - this.setState({ - updateId:-1, // Todo check docu - name:'', // reset inputtext again - btnName:'submit' // reset button to submit again - }) - } else { - let newDataElement = [ - this.state.name, - this.state.type, - this.state.dirt - ] - console.log("name " + newDataElement[0]) - console.log("type " + newDataElement[1]) - console.log("dirt " + newDataElement[2]) - this.setState(prevState =>({ - plants:[...prevState.plants, newDataElement], // adds a new plant array - name:'' //to reset the inputfield - })) - return this.state.plants; - } - - } - - - removeItem = (value) => { - this.setState({ - plants:this.state.plants.filter((plant) => { // filter function add docu - return plant !== value; - }), - name:'' - }) - } - - editItem = (editedName, editedType, editedDirt, index) => { - this.setState({ - name:editedName, - type:editedType, - dirt:editedDirt, - btnName:'update', - updateId:index // should be edited to a boolean - }) - } - - } export default Settings; From f765ba3f631fb2e63b6c1324bfe737c468968b02 Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 10:54:41 +0200 Subject: [PATCH 02/10] restored submit functionality --- imports/ui/AddPlant.jsx | 4 ++-- imports/ui/Plants.jsx | 34 ++++++++++++++++++++++++++++++++++ imports/ui/Settings.jsx | 30 +++--------------------------- 3 files changed, 39 insertions(+), 29 deletions(-) create mode 100644 imports/ui/Plants.jsx diff --git a/imports/ui/AddPlant.jsx b/imports/ui/AddPlant.jsx index a1961ce..4f5dae4 100644 --- a/imports/ui/AddPlant.jsx +++ b/imports/ui/AddPlant.jsx @@ -22,8 +22,8 @@ class AddPlant extends React.Component{ // search for arrow function for further syntax knowledge handleSubmit = (e) => { e.preventDefault(); - console.log(this.state) - //this.props.addPlant + //console.log(this.state) + this.props.addPlant(this.state) } diff --git a/imports/ui/Plants.jsx b/imports/ui/Plants.jsx new file mode 100644 index 0000000..7d289d9 --- /dev/null +++ b/imports/ui/Plants.jsx @@ -0,0 +1,34 @@ +import React from 'react' +import { Table } from 'react-bootstrap'; + +const Plants = ({plants}) => { + + return ( + <> + { + plants.length !== 0 ? + + + + + + + + + { + plants.map((plant, index) => { + return + + + + }) + } + +
Plant namePlant type
{plant.name}{plant.type}
: null + } + + ); + +} + +export default Plants \ No newline at end of file diff --git a/imports/ui/Settings.jsx b/imports/ui/Settings.jsx index 6f298e9..ab0a3ae 100644 --- a/imports/ui/Settings.jsx +++ b/imports/ui/Settings.jsx @@ -1,5 +1,6 @@ import React from 'react' import AddPlant from './AddPlant' +import Plants from './Plants' import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap'; class Settings extends React.Component{ @@ -14,7 +15,7 @@ class Settings extends React.Component{ // pass this function to the addplant comp as a prop addPlant = (plant) => { - plant.id = Math.random(); // rework + plant.id = Math.random(); // TODO rework let plants = [...this.state.plants, plant]; // create a copy of the array and add the new plant to it @@ -47,32 +48,7 @@ class Settings extends React.Component{

- { - this.state.plants.length !== 0? - - - - - - - - - - - - { - this.state.plants.map((plant, index) => { - return - - - - - }) - } - -
Plant namePlant typeDirt type
{plant[0]}{plant[1]}{plant[2]}
- : null - } + From 310418be7b86c115e36caff7c9390d6745390481 Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 11:10:17 +0200 Subject: [PATCH 03/10] restored delete functionality --- imports/ui/Plants.jsx | 6 ++++-- imports/ui/Settings.jsx | 19 +++++++++++++++++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/imports/ui/Plants.jsx b/imports/ui/Plants.jsx index 7d289d9..51f8870 100644 --- a/imports/ui/Plants.jsx +++ b/imports/ui/Plants.jsx @@ -1,7 +1,7 @@ import React from 'react' -import { Table } from 'react-bootstrap'; +import { Table, Button } from 'react-bootstrap'; -const Plants = ({plants}) => { +const Plants = ({plants, deletePlant}) => { return ( <> @@ -12,6 +12,7 @@ const Plants = ({plants}) => { Plant name Plant type + @@ -20,6 +21,7 @@ const Plants = ({plants}) => { return {plant.name} {plant.type} + }) } diff --git a/imports/ui/Settings.jsx b/imports/ui/Settings.jsx index ab0a3ae..b9b130f 100644 --- a/imports/ui/Settings.jsx +++ b/imports/ui/Settings.jsx @@ -24,6 +24,15 @@ class Settings extends React.Component{ }) } + 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 + }) + } + render(){ return ( <> @@ -39,7 +48,10 @@ class Settings extends React.Component{

- + @@ -48,7 +60,10 @@ class Settings extends React.Component{

- + From f6454ab5997599947ed8ac3a36265b1256d9f74c Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 11:17:59 +0200 Subject: [PATCH 04/10] added simple ids to plants --- imports/ui/Settings.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/imports/ui/Settings.jsx b/imports/ui/Settings.jsx index b9b130f..7722784 100644 --- a/imports/ui/Settings.jsx +++ b/imports/ui/Settings.jsx @@ -1,7 +1,7 @@ import React from 'react' import AddPlant from './AddPlant' import Plants from './Plants' -import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap'; +import { Container, Row, Col} from 'react-bootstrap'; class Settings extends React.Component{ @@ -15,8 +15,8 @@ class Settings extends React.Component{ // pass this function to the addplant comp as a prop addPlant = (plant) => { - plant.id = Math.random(); // TODO rework - + plant.id = this.state.plants.length + 1 // TODO rework + console.log(plant.id) let plants = [...this.state.plants, plant]; // create a copy of the array and add the new plant to it this.setState({ From 0fd900acb69bc02f8847e7abfc87c8f7bceb3cb8 Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 11:21:57 +0200 Subject: [PATCH 05/10] reset state after submit --- imports/ui/AddPlant.jsx | 4 ++++ imports/ui/Settings.jsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/imports/ui/AddPlant.jsx b/imports/ui/AddPlant.jsx index 4f5dae4..cd74f9a 100644 --- a/imports/ui/AddPlant.jsx +++ b/imports/ui/AddPlant.jsx @@ -23,6 +23,10 @@ class AddPlant extends React.Component{ handleSubmit = (e) => { e.preventDefault(); //console.log(this.state) + this.setState({ // reset state + name: '', + type: '' + }) this.props.addPlant(this.state) } diff --git a/imports/ui/Settings.jsx b/imports/ui/Settings.jsx index 7722784..e10c94e 100644 --- a/imports/ui/Settings.jsx +++ b/imports/ui/Settings.jsx @@ -16,7 +16,7 @@ class Settings extends React.Component{ // pass this function to the addplant comp as a prop addPlant = (plant) => { plant.id = this.state.plants.length + 1 // TODO rework - console.log(plant.id) + let plants = [...this.state.plants, plant]; // create a copy of the array and add the new plant to it this.setState({ From 3c9b5973e8306fca5402ac44ca458162cad1208a Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 13:11:22 +0200 Subject: [PATCH 06/10] added simple activation dropdown in settings --- imports/ui/ActivatePlant.jsx | 81 ++++++++++++++++++++++++++++++++++++ imports/ui/AddPlant.jsx | 9 ++-- imports/ui/App.jsx | 4 +- imports/ui/Plants.jsx | 3 +- imports/ui/Settings.jsx | 15 ++++++- 5 files changed, 105 insertions(+), 7 deletions(-) create mode 100644 imports/ui/ActivatePlant.jsx diff --git a/imports/ui/ActivatePlant.jsx b/imports/ui/ActivatePlant.jsx new file mode 100644 index 0000000..7c30f87 --- /dev/null +++ b/imports/ui/ActivatePlant.jsx @@ -0,0 +1,81 @@ +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 ( + <> +
+ + Active plant: + + + {this.props.plants.map((plant, index) =>{ + return + })} + + + +
+ + ); + } +} + +export default ActivatePlant; + diff --git a/imports/ui/AddPlant.jsx b/imports/ui/AddPlant.jsx index cd74f9a..d64d1d5 100644 --- a/imports/ui/AddPlant.jsx +++ b/imports/ui/AddPlant.jsx @@ -1,5 +1,4 @@ import React from 'react' - import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap'; class AddPlant extends React.Component{ @@ -23,11 +22,13 @@ class AddPlant extends React.Component{ handleSubmit = (e) => { e.preventDefault(); //console.log(this.state) + + this.props.addPlant(this.state) + this.setState({ // reset state name: '', type: '' }) - this.props.addPlant(this.state) } @@ -44,7 +45,7 @@ class AddPlant extends React.Component{ value={this.state.name} autoFocus ref={(input) => {this.nameInput=(input)}} placeholder="plant" - onChange={(e)=>this.setState({name:e.target.value})} /> + onChange={this.handleChange} /> Type: @@ -53,7 +54,7 @@ class AddPlant extends React.Component{ type="text" id="type" value={this.state.type} - onChange={(e)=>this.setState({type:e.target.value})} + onChange={this.handleChange} > {this.props.typeArray.map((type, index) =>{ diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx index 5bb61bd..7069c24 100644 --- a/imports/ui/App.jsx +++ b/imports/ui/App.jsx @@ -24,7 +24,9 @@ function App() { - + + + diff --git a/imports/ui/Plants.jsx b/imports/ui/Plants.jsx index 51f8870..17fce26 100644 --- a/imports/ui/Plants.jsx +++ b/imports/ui/Plants.jsx @@ -26,7 +26,8 @@ const Plants = ({plants, deletePlant}) => { }) } - : null + + : null } ); diff --git a/imports/ui/Settings.jsx b/imports/ui/Settings.jsx index e10c94e..a06b24f 100644 --- a/imports/ui/Settings.jsx +++ b/imports/ui/Settings.jsx @@ -1,7 +1,9 @@ import React from 'react' +import { Container, Row, Col} from 'react-bootstrap'; + import AddPlant from './AddPlant' import Plants from './Plants' -import { Container, Row, Col} from 'react-bootstrap'; +import ActivatePlant from './ActivatePlant' class Settings extends React.Component{ @@ -33,6 +35,11 @@ class Settings extends React.Component{ }) } + activatePlant = (plant) => { + console.log('The plant ' + plant.name + ' will be monitored') + // TODO head for activate logic + } + render(){ return ( <> @@ -65,6 +72,12 @@ class Settings extends React.Component{ deletePlant={this.deletePlant} > + + + From 627ffd68dcb3fb086879b7c8017e308b22b43e47 Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 13:14:06 +0200 Subject: [PATCH 07/10] activation form only appears when a plant is added --- imports/ui/ActivatePlant.jsx | 40 ++++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/imports/ui/ActivatePlant.jsx b/imports/ui/ActivatePlant.jsx index 7c30f87..f953b03 100644 --- a/imports/ui/ActivatePlant.jsx +++ b/imports/ui/ActivatePlant.jsx @@ -54,24 +54,28 @@ class ActivatePlant extends React.Component{ render (){ return ( <> -
- - Active plant: - - - {this.props.plants.map((plant, index) =>{ - return - })} - - - -
+ { + this.props.plants.length !== 0 ? +
+ + Active plant: + + + {this.props.plants.map((plant, index) =>{ + return + })} + + + +
+ :null + } ); } From e82882a7841620fcdf00e7dad4e4fd4c0cc8a175 Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 18:40:44 +0200 Subject: [PATCH 08/10] fixing logo not possible in react, only through db --- imports/ui/NavigationBar.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/imports/ui/NavigationBar.jsx b/imports/ui/NavigationBar.jsx index b6ae2f0..3a95fb6 100644 --- a/imports/ui/NavigationBar.jsx +++ b/imports/ui/NavigationBar.jsx @@ -1,18 +1,23 @@ import React from 'react' import { Navbar, Nav, NavDropdown } from 'react-bootstrap'; +//import logo from '../../client/public/SmartGarden.svg'; + export default function NavigationBar() { return ( - https://forums.meteor.com/t/importing-assets-image/30266/2 + + SmartGarden{' '} + />{' '} + */} SmartGarden From b551dbd678022de90c1e697c866a9501b5436979 Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 18:51:29 +0200 Subject: [PATCH 09/10] added sample text for about --- imports/ui/About.jsx | 33 ++++++++++++++++++++++++++++++--- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/imports/ui/About.jsx b/imports/ui/About.jsx index 100ac31..10557eb 100644 --- a/imports/ui/About.jsx +++ b/imports/ui/About.jsx @@ -1,9 +1,36 @@ import React from 'react' +import { Container, Row, Col} from 'react-bootstrap'; + export default function About() { return ( -
- About -
+ <> + + + +

About

+ + + + This is the frontend for the SmartGarden project in Embedded Systems. + + +
+ + + Created by + + + Timo Volkmann, Andrés Uribe Stengel, Sebastian Herzog and Maximilian Seyfried + + + + + ) } From fcd68147f44c05c323b53d5d0089e7cbe200e6ad Mon Sep 17 00:00:00 2001 From: Max <ḿax.seyfried@gmx.de> Date: Mon, 6 Jul 2020 19:12:03 +0200 Subject: [PATCH 10/10] fixed typos, add comments --- imports/ui/AddPlant.jsx | 2 +- imports/ui/NavigationBar.jsx | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/imports/ui/AddPlant.jsx b/imports/ui/AddPlant.jsx index d64d1d5..0121cc4 100644 --- a/imports/ui/AddPlant.jsx +++ b/imports/ui/AddPlant.jsx @@ -12,7 +12,7 @@ class AddPlant extends React.Component{ } handleChange = (e) => { - // console.log(e.target.id, e.target.value); + // 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 }); diff --git a/imports/ui/NavigationBar.jsx b/imports/ui/NavigationBar.jsx index 3a95fb6..4bd216c 100644 --- a/imports/ui/NavigationBar.jsx +++ b/imports/ui/NavigationBar.jsx @@ -25,13 +25,16 @@ export default function NavigationBar() {