159 lines
4.0 KiB
JavaScript
159 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Header, Button, Icon, Card,
|
|
} from 'semantic-ui-react';
|
|
import { connect } from 'react-redux';
|
|
import Light from './Light';
|
|
import SmartPlug from './SmartPlug';
|
|
import Sensor from './Sensor';
|
|
import { ButtonDimmer, KnobDimmer } from './Dimmer';
|
|
import Switcher from './Switch';
|
|
import Videocam from './Videocam';
|
|
import Curtains from './Curtain';
|
|
import Thermostat from './Thermostats';
|
|
import { RemoteService } from '../../../remote';
|
|
import DeviceSettingsModal from './DeviceSettingsModal';
|
|
import mapStateToProps from '../../../deviceProps';
|
|
|
|
const centerComponent = {
|
|
marginLeft: '50%',
|
|
transform: 'translateX(-50%)',
|
|
marginTop: '10%',
|
|
marginBottom: '10%',
|
|
};
|
|
|
|
class Device extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.modalRef = React.createRef();
|
|
this.edit = this.edit.bind(this);
|
|
this.resetSmartPlug = this.resetSmartPlug.bind(this);
|
|
this.deleteState = this.deleteState.bind(this);
|
|
}
|
|
|
|
edit() {
|
|
console.log(`editing device with id=${this.props.id}`);
|
|
this.modalRef.current.openModal();
|
|
}
|
|
|
|
resetSmartPlug() {
|
|
this.props
|
|
.smartPlugReset(this.props.id)
|
|
.catch((err) => console.error('Smart plug reset error', err));
|
|
}
|
|
|
|
deleteState() {
|
|
this.props.deleteState(this.props.id, this.props.stateOrDevice.kind);
|
|
}
|
|
|
|
renderDeviceComponent() {
|
|
const mapKindToComponent = {
|
|
curtains: Curtains,
|
|
thermostat: Thermostat,
|
|
regularLight: Light,
|
|
sensor: Sensor,
|
|
motionSensor: Sensor,
|
|
buttonDimmer: ButtonDimmer,
|
|
knobDimmer: KnobDimmer,
|
|
smartPlug: SmartPlug,
|
|
switch: Switcher,
|
|
dimmableLight: Light,
|
|
securityCamera: Videocam,
|
|
};
|
|
|
|
if (!(this.props.type in mapKindToComponent)) {
|
|
throw new Error(`device kind ${this.props.type} not known`);
|
|
}
|
|
|
|
return React.createElement(
|
|
mapKindToComponent[this.props.type],
|
|
{
|
|
tab: this.props.tab,
|
|
id: this.props.id,
|
|
hostId: this.props.hostId,
|
|
},
|
|
'',
|
|
);
|
|
}
|
|
|
|
deviceDescription() {
|
|
return (
|
|
<div className="ui two buttons">
|
|
<Button color="blue" icon onClick={this.edit} labelPosition="left">
|
|
<Icon name="pencil" />
|
|
Edit
|
|
</Button>
|
|
{this.props.stateOrDevice.kind === 'smartPlug' ? (
|
|
<Button
|
|
color="orange"
|
|
icon
|
|
onClick={this.resetSmartPlug}
|
|
labelPosition="left"
|
|
>
|
|
<Icon name="undo" />
|
|
Reset
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
stateDescription() {
|
|
return (
|
|
<div className="ui two buttons">
|
|
<Button
|
|
color="red"
|
|
icon
|
|
onClick={this.deleteState}
|
|
labelPosition="left"
|
|
>
|
|
<Icon name="trash alternate" />
|
|
Delete
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
get deviceName() {
|
|
return this.props.device.name;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Card style={{ height: '27em' }}>
|
|
<Card.Content>
|
|
<Card.Header textAlign="center">
|
|
<Header as="h3">{this.deviceName}</Header>
|
|
<Header as="h4" style={{ marginTop: '.5rem' }}>
|
|
{this.props.roomName}
|
|
</Header>
|
|
</Card.Header>
|
|
|
|
<Card.Description
|
|
style={
|
|
this.props.device.kind !== 'curtains' ? centerComponent : null
|
|
}
|
|
>
|
|
{this.renderDeviceComponent()}
|
|
</Card.Description>
|
|
</Card.Content>
|
|
<Card.Content extra>
|
|
{this.props.tab === 'Devices'
|
|
? this.deviceDescription()
|
|
: this.props.tab === 'Scenes' && this.stateDescription()}
|
|
</Card.Content>
|
|
{this.props.tab === 'Devices' ? (
|
|
<DeviceSettingsModal
|
|
ref={this.modalRef}
|
|
id={this.props.stateOrDevice.id}
|
|
/>
|
|
) : null}
|
|
</Card>
|
|
);
|
|
}
|
|
}
|
|
|
|
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
|
|
export default DeviceContainer;
|