112 lines
2.7 KiB
JavaScript
112 lines
2.7 KiB
JavaScript
import React, { Component, useState } from "react";
|
|
import { Button, Checkbox, Form, Icon, Header, Modal } from "semantic-ui-react";
|
|
|
|
const DeleteModal = (props) => (
|
|
<Modal trigger={<Button color="red">Remove</Button>} closeIcon>
|
|
<Header icon="archive" content="Are you sure ?" />
|
|
<Modal.Actions>
|
|
<Button color="red">
|
|
<Icon name="remove" /> No
|
|
</Button>
|
|
<Button onClick={() => props.removeDevice()} color="green">
|
|
<Icon name="checkmark" /> Yes
|
|
</Button>
|
|
</Modal.Actions>
|
|
</Modal>
|
|
);
|
|
|
|
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>
|
|
) : (
|
|
""
|
|
)}
|
|
<Form.Field>
|
|
<DeleteModal removeDevice={() => props.removeDevice(values)} />
|
|
</Form.Field>
|
|
<Button
|
|
onClick={() => props.saveFunction(values)}
|
|
color="blue"
|
|
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);
|
|
if (device.name.length > 0) {
|
|
this.props.updateDevice(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}
|
|
removeDevice={this.props.removeDevice}
|
|
saveFunction={this.saveSettings}
|
|
/>
|
|
</Modal.Content>
|
|
</Modal>
|
|
);
|
|
return <SettingsModal />;
|
|
}
|
|
}
|