added simple activation dropdown in settings

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 (
+            <>
+                <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>
+            </>
+        );
+    }
+}
+
+export default ActivatePlant;
+

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} />
                     </Form.Group>
                     <Form.Group>
                         <Form.Label>Type:</Form.Label>
@@ -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}
                         >
                             <option></option>
                             {this.props.typeArray.map((type, index) =>{

imports/ui/App.jsx

@@ -24,7 +24,9 @@ function App() {
             <Route path="/" exact>
               <Home dummyData={exampleData}></Home>
             </Route>
-            <Route path="/settings" component={Settings}></Route>
+            <Route path="/settings">
+              <Settings></Settings>
+            </Route>
             <Route path="/about" component={About}></Route>
           </Switch>
         </Suspense>

imports/ui/Plants.jsx

@@ -26,7 +26,8 @@ const Plants = ({plants, deletePlant}) => {
                     })
                 }
                 </tbody>
-            </Table> : null
+            </Table> 
+            : null
         }
       </> 
     );

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}
                     ></Plants>
 
+                    <ActivatePlant
+                        plants={this.state.plants}
+                        activatePlant={this.activatePlant}
+                    >
+                    </ActivatePlant>
+
                 </Container>
 
             </>