69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
|
import React, {Component, useState} from 'react';
|
||
|
|
import {Button, Checkbox, Form, Modal} from "semantic-ui-react";
|
||
|
|
|
||
|
|
const SettingsForm = (props) => {
|
||
|
|
|
||
|
|
const handleInputChange = e => {
|
||
|
|
const {name, value} = e.target;
|
||
|
|
setValues({...values, [name]: value})
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCheckboxChange = (e,d) => {
|
||
|
|
const {name, checked} = d;
|
||
|
|
setValues({...values, [name]: checked})
|
||
|
|
};
|
||
|
|
|
||
|
|
const [values, setValues] = useState({name: ''});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Form>
|
||
|
|
<Form.Field>
|
||
|
|
<label>New Name: </label>
|
||
|
|
<input autoComplete="off" name="name" onChange={handleInputChange} value={values.name} placeholder='Device name'/>
|
||
|
|
</Form.Field>
|
||
|
|
{props.type === "smart-plug" ? (
|
||
|
|
<Form.Field>
|
||
|
|
<Checkbox slider name={"reset"} onClick={handleCheckboxChange} label='Reset Energy Consumption'/>
|
||
|
|
</Form.Field>
|
||
|
|
) : ""}
|
||
|
|
<Button onClick={() => props.saveFunction(values)} color="green" type='submit'>Save</Button>
|
||
|
|
</Form>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default class SettingsModal extends Component {
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
open: true,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
handleClose = () => {
|
||
|
|
this.setState({open: false});
|
||
|
|
};
|
||
|
|
|
||
|
|
saveSettings = (device) => {
|
||
|
|
// TODO Here there should be all the connections to save the data in the backend
|
||
|
|
console.log("SAVED: ", device);
|
||
|
|
|
||
|
|
this.props.openModal();
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const SettingsModal = () => (
|
||
|
|
<Modal open={true} onOpen={this.props.openModal} onClose={this.props.openModal}>
|
||
|
|
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
|
||
|
|
<Modal.Content>
|
||
|
|
<SettingsForm type={this.props.device.type} saveFunction={this.saveSettings}/>
|
||
|
|
</Modal.Content>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<SettingsModal/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|