166 lines
3.9 KiB
JavaScript
166 lines
3.9 KiB
JavaScript
import React, { Component, useState } from "react";
|
|
import {
|
|
Button,
|
|
Form,
|
|
Icon,
|
|
Header,
|
|
Modal,
|
|
Input,
|
|
Checkbox,
|
|
} from "semantic-ui-react";
|
|
import { connect } from "react-redux";
|
|
import { RemoteService } from "../../../remote";
|
|
|
|
const DeleteModal = (props) => (
|
|
<Modal
|
|
trigger={
|
|
<Button icon labelPosition="left" inverted color="red">
|
|
<Icon name="trash alternate" />
|
|
Delete device
|
|
</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 [values, setValues] = useState({ name: "" });
|
|
|
|
return (
|
|
<Form>
|
|
<Form.Field>
|
|
<label>Edit Name: </label>
|
|
<Input
|
|
autoComplete="off"
|
|
name="name"
|
|
onChange={handleInputChange}
|
|
placeholder={props.name}
|
|
/>
|
|
</Form.Field>
|
|
<Form.Field>
|
|
<DeleteModal removeDevice={() => props.removeDevice(values)} />
|
|
</Form.Field>
|
|
<Button
|
|
onClick={() => props.saveFunction(values)}
|
|
color="green"
|
|
type="submit"
|
|
>
|
|
<Icon name="checkmark" />
|
|
Save changes
|
|
</Button>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
class DeviceSettingsModal extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
open: false,
|
|
name: this.props.device.name,
|
|
};
|
|
|
|
this.updateDevice = this.updateDevice.bind(this);
|
|
this.deleteDevice = this.deleteDevice.bind(this);
|
|
//this.useExternalTempSensor = this.useExternalTempSensor.bind(this);
|
|
}
|
|
|
|
closeModal = (e) => {
|
|
this.setState({ openModal: false });
|
|
};
|
|
|
|
openModal = (e) => {
|
|
this.setState({ openModal: true });
|
|
};
|
|
|
|
updateDevice(values) {
|
|
console.log(values, this.external);
|
|
let name = values.name;
|
|
if (values.name.length === 0) {
|
|
name = this.props.device.name;
|
|
}
|
|
|
|
let data = {
|
|
...this.props.device,
|
|
name: name,
|
|
};
|
|
|
|
if (this.props.device.kind === "thermostat") {
|
|
let external = values.external
|
|
? values.external
|
|
: this.props.device.useExternalSensors;
|
|
console.log(external);
|
|
data.useExternalSensors = external;
|
|
}
|
|
console.log(data.useExternalSensors);
|
|
this.props
|
|
.saveDevice(data)
|
|
.then(() => this.setState({ openModal: false }))
|
|
.catch((err) =>
|
|
console.error(
|
|
`settings modal for device ${this.props.id} deletion error`,
|
|
err
|
|
)
|
|
);
|
|
}
|
|
|
|
deleteDevice() {
|
|
this.props
|
|
.deleteDevice(this.props.device)
|
|
.then(() => this.setState({ openModal: false }))
|
|
.catch((err) =>
|
|
console.error(
|
|
`settings modal for device ${this.props.id} deletion error`,
|
|
err
|
|
)
|
|
);
|
|
}
|
|
|
|
_editForm = null;
|
|
get editForm() {
|
|
this._editForm = this._editForm || (
|
|
<SettingsForm
|
|
name={this.state.name}
|
|
removeDevice={this.deleteDevice}
|
|
saveFunction={this.updateDevice}
|
|
tempSensor={this.useExternalTempSensor}
|
|
/>
|
|
);
|
|
return this._editForm;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
|
|
<Modal.Header>Settings of {this.props.device.name}</Modal.Header>
|
|
<Modal.Content>{this.editForm}</Modal.Content>
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, ownProps) => ({
|
|
device: state.devices[ownProps.id],
|
|
});
|
|
const DeviceSettingsModalContainer = connect(
|
|
mapStateToProps,
|
|
RemoteService,
|
|
null,
|
|
{ forwardRef: true }
|
|
)(DeviceSettingsModal);
|
|
export default DeviceSettingsModalContainer;
|