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] 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 (
+            <>
+                <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;
+
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} />
                     </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) =>{
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() {
             <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>
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}) => {
                     })
                 }
                 </tbody>
-            </Table> : null
+            </Table> 
+            : 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}
                     ></Plants>
 
+                    <ActivatePlant
+                        plants={this.state.plants}
+                        activatePlant={this.activatePlant}
+                    >
+                    </ActivatePlant>
+
                 </Container>
 
             </>