fixed simulation panel

This commit is contained in:
britea 2020-05-26 17:20:56 +02:00
parent 3ca4abaf62
commit 22366cb7a2
3 changed files with 79 additions and 56 deletions

View file

@ -265,22 +265,6 @@ class SimulationPanel extends Component {
value: null,
error: null,
};
this.updateSliderValues = this.updateSliderValues.bind(this);
}
updateSliderValues(type, data) {
let content;
if (type === 'value') {
content = {
value: data,
};
} else {
content = {
error: data,
};
}
this.setState(content);
}
renderImage(device) {
@ -355,17 +339,25 @@ class SimulationPanel extends Component {
marginLeft: '30%',
}}
>
<SimulationPanelSlider update={this.updateSliderValues} error={false} device={e} id={e.id} />
</div>
<Divider />
<div
style={{
display: 'block',
marginLeft: '30%',
}}
>
<SimulationPanelSlider update={this.updateSliderValues} error device={e} id={e.id} />
<SimulationPanelSlider error={false} device={e} id={e.id} />
</div>
{
e.kind === 'motionSensor'
? null
: (
<>
<Divider />
<div
style={{
display: 'block',
marginLeft: '30%',
}}
>
<SimulationPanelSlider error device={e} id={e.id} />
</div>
</>
)
}
</Grid.Column>
</Grid.Row>
))

View file

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import {
Form, Grid, Header,
Form, Grid, Header, Checkbox,
} from 'semantic-ui-react';
import { connect } from 'react-redux';
import { RemoteService } from '../remote';
@ -9,6 +9,41 @@ class SimulationPanelSlider extends Component {
constructor(props) {
super(props);
console.log(this.props.device);
this.state = {
value: this.internalValue,
error: null,
};
this.updateSliderValues = this.updateSliderValues.bind(this);
}
updateSliderValues(data) {
console.log(data);
this.setState({
[this.props.error ? 'error' : 'value']: data,
});
}
settings() {
let max;
let step;
switch (this.props.device.kind) {
case 'sensor':
if (this.props.device.sensorType === 'LIGHT') {
max = this.props.error ? 1000 : 15000;
step = 10;
} else {
max = 100;
step = 1;
}
break;
case 'thermostat':
max = 100;
step = 1;
break;
default:
break;
}
return { max, step };
}
get internalValue() {
@ -18,12 +53,12 @@ class SimulationPanelSlider extends Component {
case 'thermostat':
return this.props.device.internalSensorTemperature;
case 'motionSensor':
return this.props.device.detected ? 'on' : 'off';
return this.props.device.detected;
default:
return '';
}
}
handleChange = (e, { name, value }) => this.setState({ [name]: value })
render() {
return (
<Grid columns={2}>
@ -41,16 +76,28 @@ class SimulationPanelSlider extends Component {
,
{this.internalValue}
</p>
<Form.Input
min={0}
max={15000}
name="value"
onChange={this.handleChange}
step={5}
type="range"
value={this.props.device.value}
/>
{
this.props.device.kind === 'motionSensor'
? (
<Checkbox
toggle
name="value"
onChange={(e, { checked }) => this.updateSliderValues(checked)}
checked={this.state.value}
/>
)
: (
<Form.Input
min={0}
max={this.settings().max}
name="value"
onChange={(e, { value }) => this.updateSliderValues(value)}
step={this.settings().step}
type="range"
value={this.state.value}
/>
)
}
</Grid.Column>
</Grid>
);

View file

@ -1,21 +1,5 @@
import React from 'react';
import Modal from 'react-modal';
import { Button } from 'semantic-ui-react';
const modal = {
opacity: 0,
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
transition: 'opacity 200ms ease-in-out',
background: 'grey',
color: 'white',
maxWidth: '2rem',
outline: 'none',
padding: '2rem',
textAlign: 'center',
maxHeight: '50vh',
};
const VideocamModal = (props) => (
<Modal