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

add new component addPlant removed functionality before

Browse Source
This commit is contained in:
Max 2020-07-06 10:16:22 +02:00
parent 7109a48130
commit 5b429e9769
2 changed files with 79 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
imports/ui/AddPlant.jsx Normal file
View File

@ -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 (
<>
<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={(e)=>this.setState({name:e.target.value})} />
</Form.Group>
<Form.Group>
<Form.Label>Type:</Form.Label>
<Form.Control
as="select"
type="text"
id="type"
value={this.state.type}
onChange={(e)=>this.setState({type:e.target.value})}
>
<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;

118
imports/ui/Settings.jsx
View File

@ -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{
<br></br>
{
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
<Form onSubmit={this.handleSubmit}>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>Name</Form.Label>
<Form.Control
type="text"
value={this.state.name}
autoFocus ref={(input) => {this.nameInput=(input)}}
placeholder="plant"
onChange={(e)=>this.setState({name:e.target.value})} />
</Form.Group>
<Form.Group controlId="exampleForm.ControlSelect1">
<Form.Label>Type</Form.Label>
<Form.Control
as="select"
type="text"
value={this.state.type}
onChange={(e)=>this.setState({type:e.target.value})}
>
<option></option>
{this.state.types.map((type, index) => {
return <option key={index} value={type}>{type}</option>
})}
</Form.Control>
</Form.Group>
<Form.Group controlId="exampleForm.ControlSelect1">
<Form.Label>Dirt</Form.Label>
<Form.Control
as="select"
type="text"
value={this.state.dirt}
onChange={(e)=>this.setState({dirt:e.target.value})}
>
<option></option>
{this.state.dirts.map((dirt, index) => {
return <option key={index}>{dirt}</option>
})}
</Form.Control>
</Form.Group>
<Button type={"submit"}>{this.state.btnName}</Button>
</Form>
:null
}
<AddPlant addPlant={this.addPlant} typeArray={this.state.types}></AddPlant>
<Row className="justify-content-md-center">
@ -109,8 +66,6 @@ class Settings extends React.Component{
<td>{plant[0]}</td>
<td>{plant[1]}</td>
<td>{plant[2]}</td>
<td><Button type={"button"} onClick={() => this.editItem(plant[0], plant[1], plant[2], index)}>Edit</Button></td>
<td><Button type={"button"} onClick={() => this.removeItem(plant)}>Delete</Button></td>
</tr>
})
}
@ -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;