182 lines
7.0 KiB
JavaScript
182 lines
7.0 KiB
JavaScript
import React from 'react'
|
|
|
|
import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap';
|
|
|
|
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
|
|
|
|
}
|
|
|
|
render(){
|
|
return (
|
|
<>
|
|
<Container>
|
|
<Row className="justify-content-md-center">
|
|
<Col md="auto">
|
|
<h1>Settings</h1>
|
|
</Col>
|
|
</Row>
|
|
<Row className="justify-content-md-center">
|
|
<a>Configurate your plant here. Based on your settings the smart garden will automate your plant environment.</a>
|
|
</Row>
|
|
|
|
<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
|
|
}
|
|
|
|
|
|
<Row className="justify-content-md-center">
|
|
<Col md={{ span: 4, offset: 4 }}></Col>
|
|
</Row>
|
|
|
|
<br></br>
|
|
|
|
{
|
|
this.state.plants.length !== 0?
|
|
<Table striped bordered hover>
|
|
<thead>
|
|
<tr>
|
|
<th>Plant name</th>
|
|
<th>Plant type</th>
|
|
<th>Dirt type</th>
|
|
<th></th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{
|
|
this.state.plants.map((plant, index) => {
|
|
return <tr key={index}>
|
|
<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>
|
|
})
|
|
}
|
|
</tbody>
|
|
</Table>
|
|
: null
|
|
}
|
|
|
|
</Container>
|
|
|
|
</>
|
|
);
|
|
}
|
|
|
|
// 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;
|