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) => (
{props.simulationPanel}
{/* TITLE }
Welcome in the Simulation Panel
{/* TEMPERATURE SENSOR }
Temperature Sensor
{/* HUMIDTY SENSOR }
Humidity Sensor
{/* LIGHT SENSOR }
Light Sensor
{/* MOTION SENSOR }
Motion Sensor
);
*/
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']: 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 (
);
}
render() {
return (
Welcome in the Simulation Panel
{
this.props.devices
? this.props.devices.map((d, i) => (
{this.renderImage(d)}
{d.name}
{
d.kind === 'motionSensor'
? null
: (
<>
>
)
}
))
: null
}
);
}
}
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;