429 lines
11 KiB
JavaScript
429 lines
11 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {
|
|
Grid,
|
|
Divider,
|
|
Image,
|
|
Modal,
|
|
Button,
|
|
} from 'semantic-ui-react';
|
|
import { connect } from 'react-redux';
|
|
import { RemoteService } from '../remote';
|
|
import SimulationPanelSlider from './SimulationPanelSlider.js';
|
|
|
|
/*
|
|
const SimulationPanel = (props) => (
|
|
<Modal
|
|
isOpen={!!props.simulationPanel}
|
|
contentLabel="Simulation Panel"
|
|
onRequestClose={props.closeSimulationPanel}
|
|
// style={ReactModalPortal,ReactModal__Overlay, modal}
|
|
style={{
|
|
overlay: {
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
},
|
|
content: {
|
|
position: 'absolute',
|
|
top: '40px',
|
|
left: '40px',
|
|
right: '40px',
|
|
bottom: '40px',
|
|
border: '1px solid #ccc',
|
|
background: '#fff',
|
|
overflow: 'auto',
|
|
WebkitOverflowScrolling: 'touch',
|
|
borderRadius: '4px',
|
|
outline: 'none',
|
|
padding: '20px',
|
|
backgroundColor: 'rgb(65, 67, 69)',
|
|
},
|
|
}}
|
|
>
|
|
{props.simulationPanel}
|
|
<Grid celled>
|
|
|
|
{/* TITLE }
|
|
<Grid.Row textAlign="center">
|
|
<h1 style={{ color: 'white', padding: '1rem', fontFamily: 'Arial' }}>
|
|
Welcome in the Simulation Panel
|
|
</h1>
|
|
</Grid.Row>
|
|
|
|
{/* TEMPERATURE SENSOR }
|
|
<Grid.Row>
|
|
<Grid.Column width={6} textAlign="center">
|
|
<Divider
|
|
style={{
|
|
marginTop: '3rem',
|
|
marginBottom: 'auto',
|
|
}}
|
|
/>
|
|
<Image
|
|
src="./../img/thermo-simulation.png"
|
|
style={{
|
|
width: '60px',
|
|
height: 'auto',
|
|
display: 'block',
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
marginTop: '1rem',
|
|
marginBottom: '1rem',
|
|
}}
|
|
/>
|
|
<p style={{ color: 'white', padding: '0.5rem' }}>
|
|
Temperature Sensor
|
|
</p>
|
|
<Divider />
|
|
</Grid.Column>
|
|
|
|
|
|
<Grid.Column width={10} textAlign="center">
|
|
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider />
|
|
</div>
|
|
<Divider />
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider />
|
|
</div>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
|
|
{/* HUMIDTY SENSOR }
|
|
<Grid.Row>
|
|
<Grid.Column width={6} textAlign="center">
|
|
<Divider
|
|
style={{
|
|
marginTop: '3rem',
|
|
marginBottom: 'auto',
|
|
}}
|
|
/>
|
|
<Image
|
|
src="./../img/humidity-simulation.png"
|
|
style={{
|
|
width: '60px',
|
|
height: 'auto',
|
|
display: 'block',
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
marginTop: '1rem',
|
|
marginBottom: '1rem',
|
|
}}
|
|
/>
|
|
<p style={{ color: 'white', padding: '0.5rem' }}>
|
|
Humidity Sensor
|
|
</p>
|
|
<Divider />
|
|
</Grid.Column>
|
|
|
|
|
|
<Grid.Column width={10} textAlign="center">
|
|
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider />
|
|
</div>
|
|
<Divider />
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider />
|
|
</div>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
|
|
{/* LIGHT SENSOR }
|
|
<Grid.Row>
|
|
<Grid.Column width={6} textAlign="center">
|
|
<Divider
|
|
style={{
|
|
marginTop: '3rem',
|
|
marginBottom: 'auto',
|
|
}}
|
|
/>
|
|
<Image
|
|
src="./../img/light-simulation.png"
|
|
style={{
|
|
width: '60px',
|
|
height: 'auto',
|
|
display: 'block',
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
marginTop: '1rem',
|
|
marginBottom: '1rem',
|
|
}}
|
|
/>
|
|
<p style={{ color: 'white', padding: '0.5rem' }}>
|
|
Light Sensor
|
|
</p>
|
|
<Divider />
|
|
</Grid.Column>
|
|
|
|
|
|
<Grid.Column width={10} textAlign="center">
|
|
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider />
|
|
</div>
|
|
<Divider />
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider />
|
|
</div>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
|
|
{/* MOTION SENSOR }
|
|
<Grid.Row>
|
|
<Grid.Column width={6} textAlign="center">
|
|
<Divider
|
|
style={{
|
|
marginTop: '3rem',
|
|
marginBottom: 'auto',
|
|
}}
|
|
/>
|
|
<Image
|
|
src="./../img/motion-simulation.png"
|
|
style={{
|
|
width: '60px',
|
|
height: 'auto',
|
|
display: 'block',
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
marginTop: '1rem',
|
|
marginBottom: '1rem',
|
|
}}
|
|
/>
|
|
<p style={{ color: 'white', padding: '0.5rem' }}>
|
|
Motion Sensor
|
|
</p>
|
|
<Divider />
|
|
</Grid.Column>
|
|
|
|
|
|
<Grid.Column width={10} textAlign="center">
|
|
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider />
|
|
</div>
|
|
<Divider />
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider />
|
|
</div>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
|
|
|
|
</Grid>
|
|
</Modal>
|
|
);
|
|
*/
|
|
class SimulationPanel extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
console.log(this.props.devices);
|
|
this.state = {
|
|
value: null,
|
|
error: null,
|
|
};
|
|
this.updateSliderValues = this.updateSliderValues.bind(this);
|
|
this.saveChanges = this.saveChanges.bind(this);
|
|
}
|
|
|
|
updateSliderValues(type, data, motion) {
|
|
console.log(data, motion);
|
|
this.setState({
|
|
[type ? 'error' : 'value']: parseInt(data),
|
|
});
|
|
}
|
|
|
|
saveChanges(device) {
|
|
console.log(this.state);
|
|
const { value } = this.state;
|
|
const { error } = this.state;
|
|
if (device.kind === 'sensor') {
|
|
this.props
|
|
.updateSimulation(
|
|
{ ...device, typical: value, err: error },
|
|
)
|
|
.catch((err) => console.error('Simulation panel update error', err));
|
|
} else {
|
|
const val = device.kind === 'motionSensor' ? 'detected' : 'typical';
|
|
this.props
|
|
.saveDevice(
|
|
{ ...device, [val]: value, err: error },
|
|
null,
|
|
)
|
|
.catch((err) => console.error('Simulation panel update error', err));
|
|
}
|
|
}
|
|
|
|
renderImage(device) {
|
|
let image = './../img/';
|
|
switch (device.kind) {
|
|
case 'thermostat':
|
|
image += 'thermo-simulation.png';
|
|
break;
|
|
case 'motionSensor':
|
|
image += 'motion-simulation.png';
|
|
break;
|
|
case 'sensor':
|
|
if (device.sensorType === 'TEMPERATURE') {
|
|
image += 'thermo-simulation.png';
|
|
} else if (device.sensorType === 'HUMIDITY') {
|
|
image += 'humidity-simulation.png';
|
|
} else {
|
|
image += 'light-simulation.png';
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<Image
|
|
src={image}
|
|
style={{
|
|
width: '60px',
|
|
height: 'auto',
|
|
display: 'block',
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
marginTop: '1rem',
|
|
marginBottom: '1rem',
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Modal
|
|
closeIcon
|
|
open={!!this.props.simulationPanel}
|
|
onClose={this.props.closeSimulationPanel}
|
|
>
|
|
<Grid celled>
|
|
<Grid.Row textAlign="center">
|
|
<h1 style={{ padding: '1rem', fontFamily: 'Arial' }}>
|
|
Welcome in the Simulation Panel
|
|
</h1>
|
|
</Grid.Row>
|
|
{
|
|
this.props.devices
|
|
? this.props.devices.map((d, i) => (
|
|
<Grid.Row key={i}>
|
|
<Grid.Column width={6} textAlign="center">
|
|
{this.renderImage(d)}
|
|
<p style={{ padding: '0.5rem' }}>
|
|
{d.name}
|
|
</p>
|
|
<Divider />
|
|
<Button
|
|
color="green"
|
|
id={d.id}
|
|
onClick={(e, { id }) => this.saveChanges(d, id)}
|
|
>
|
|
Save
|
|
</Button>
|
|
</Grid.Column>
|
|
|
|
|
|
<Grid.Column width={10} textAlign="center">
|
|
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider update={this.updateSliderValues} error={false} device={d} id={d.id} />
|
|
</div>
|
|
{
|
|
d.kind === 'motionSensor'
|
|
? null
|
|
: (
|
|
<>
|
|
<Divider />
|
|
<div
|
|
style={{
|
|
display: 'block',
|
|
marginLeft: '30%',
|
|
}}
|
|
>
|
|
<SimulationPanelSlider update={this.updateSliderValues} error device={d} id={d.id} />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
))
|
|
: null
|
|
}
|
|
</Grid>
|
|
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, _) => ({
|
|
get devices() {
|
|
const deviceInternalSensor = {
|
|
thermostat: 'Thermostat',
|
|
sensor: 'Sensor',
|
|
motionSensor: 'Sensor',
|
|
};
|
|
const deviceArray = [
|
|
...Object.values(state.devices),
|
|
].filter((e) => e.kind in deviceInternalSensor);
|
|
return deviceArray;
|
|
},
|
|
});
|
|
const SimulationPanelContainer = connect(
|
|
mapStateToProps,
|
|
RemoteService,
|
|
)(SimulationPanel);
|
|
export default SimulationPanelContainer;
|