86 lines
2.4 KiB
JavaScript
86 lines
2.4 KiB
JavaScript
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 (
|
|
<>
|
|
{
|
|
this.props.plants.length !== 0 ?
|
|
<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>
|
|
:null
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ActivatePlant;
|
|
|