fixed simulation panel
This commit is contained in:
parent
3ca4abaf62
commit
22366cb7a2
3 changed files with 79 additions and 56 deletions
|
@ -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>
|
||||
))
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue