almost complete simulation panel
This commit is contained in:
parent
22366cb7a2
commit
77070242c6
4 changed files with 112 additions and 41 deletions
|
@ -4,6 +4,7 @@ import {
|
|||
Divider,
|
||||
Image,
|
||||
Modal,
|
||||
Button,
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../remote';
|
||||
|
@ -265,6 +266,36 @@ class SimulationPanel extends Component {
|
|||
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) {
|
||||
|
@ -320,14 +351,21 @@ class SimulationPanel extends Component {
|
|||
</Grid.Row>
|
||||
{
|
||||
this.props.devices
|
||||
? this.props.devices.map((e, i) => (
|
||||
<Grid.Row>
|
||||
? this.props.devices.map((d, i) => (
|
||||
<Grid.Row key={i}>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
{this.renderImage(e)}
|
||||
{this.renderImage(d)}
|
||||
<p style={{ padding: '0.5rem' }}>
|
||||
{e.name}
|
||||
{d.name}
|
||||
</p>
|
||||
<Divider />
|
||||
<Button
|
||||
color="green"
|
||||
id={d.id}
|
||||
onClick={(e, { id }) => this.saveChanges(d, id)}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
|
||||
|
||||
|
@ -339,10 +377,10 @@ class SimulationPanel extends Component {
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SimulationPanelSlider error={false} device={e} id={e.id} />
|
||||
<SimulationPanelSlider update={this.updateSliderValues} error={false} device={d} id={d.id} />
|
||||
</div>
|
||||
{
|
||||
e.kind === 'motionSensor'
|
||||
d.kind === 'motionSensor'
|
||||
? null
|
||||
: (
|
||||
<>
|
||||
|
@ -353,7 +391,7 @@ class SimulationPanel extends Component {
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SimulationPanelSlider error device={e} id={e.id} />
|
||||
<SimulationPanelSlider update={this.updateSliderValues} error device={d} id={d.id} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import {
|
||||
Form, Grid, Header, Checkbox,
|
||||
Form, Grid, Checkbox, Message, Label,
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../remote';
|
||||
|
@ -11,16 +11,17 @@ class SimulationPanelSlider extends Component {
|
|||
console.log(this.props.device);
|
||||
this.state = {
|
||||
value: this.internalValue,
|
||||
error: null,
|
||||
error: this.internalValue,
|
||||
};
|
||||
this.updateSliderValues = this.updateSliderValues.bind(this);
|
||||
}
|
||||
|
||||
updateSliderValues(data) {
|
||||
console.log(data);
|
||||
this.setState({
|
||||
[this.props.error ? 'error' : 'value']: data,
|
||||
});
|
||||
console.log(this.state);
|
||||
this.props.update(this.props.error, data, this.props.device.kind === 'motionSensor');
|
||||
}
|
||||
|
||||
settings() {
|
||||
|
@ -47,13 +48,20 @@ class SimulationPanelSlider extends Component {
|
|||
}
|
||||
|
||||
get internalValue() {
|
||||
switch (this.props.device.kind) {
|
||||
case 'sensor':
|
||||
return this.props.device.value.toFixed(2);
|
||||
case 'thermostat':
|
||||
return this.props.device.internalSensorTemperature;
|
||||
case 'motionSensor':
|
||||
if (this.props.device.kind === 'motionSensor') {
|
||||
return this.props.device.detected;
|
||||
}
|
||||
return this.props.error ? this.props.device.err : this.props.device.typical.toFixed(2);
|
||||
}
|
||||
|
||||
get getValue() {
|
||||
switch (this.props.device.kind) {
|
||||
case 'motionSensor':
|
||||
return this.props.device.detected;
|
||||
case 'thermostat':
|
||||
return this.props.device.internalSensorTemperature;
|
||||
case 'sensor':
|
||||
return this.props.device.value.toFixed(2);
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
@ -63,40 +71,51 @@ class SimulationPanelSlider extends Component {
|
|||
return (
|
||||
<Grid columns={2}>
|
||||
<Grid.Column as={Form} textAlign="center">
|
||||
<Header as="h2">{this.props.error ? 'Edit error' : 'Edit value'}</Header>
|
||||
<p
|
||||
style={{
|
||||
padding: '0.5rem',
|
||||
display: 'block',
|
||||
marinLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
}}
|
||||
>
|
||||
{this.props.device.name}
|
||||
,
|
||||
{this.internalValue}
|
||||
</p>
|
||||
<Message>
|
||||
<Message.Header>{this.props.error ? 'Edit error' : 'Edit value'}</Message.Header>
|
||||
<p>
|
||||
Actual value of
|
||||
{' '}
|
||||
{this.props.device.name}
|
||||
:
|
||||
{this.props.device.kind === 'motionSensor'
|
||||
? this.getValue ? 'on' : 'off' : this.getValue}
|
||||
</p>
|
||||
<p>
|
||||
{this.props.error ? 'error' : 'typical value'}
|
||||
{' '}
|
||||
:
|
||||
{this.props.device.kind === 'motionSensor'
|
||||
? this.internalValue ? 'on' : 'off' : this.internalValue}
|
||||
</p>
|
||||
</Message>
|
||||
{
|
||||
this.props.device.kind === 'motionSensor'
|
||||
? (
|
||||
<Checkbox
|
||||
toggle
|
||||
name="value"
|
||||
onChange={(e, { checked }) => this.updateSliderValues(checked)}
|
||||
checked={this.state.value}
|
||||
onChange={(e, { checked }) => this.updateSliderValues(checked)}
|
||||
/>
|
||||
)
|
||||
)
|
||||
: (
|
||||
<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}
|
||||
/>
|
||||
)
|
||||
<>
|
||||
<Label>
|
||||
Value :
|
||||
<Label.Detail>{this.props.error ? this.state.error : this.state.value}</Label.Detail>
|
||||
</Label>
|
||||
<Form.Input
|
||||
min={0}
|
||||
max={this.settings().max}
|
||||
name="value"
|
||||
onChange={(e, { value }) => this.updateSliderValues(value)}
|
||||
step={this.settings().step}
|
||||
type="range"
|
||||
value={this.props.error ? this.state.error : this.state.value}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
|
|
|
@ -653,6 +653,7 @@ class AutomationSaveModal extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log(this.state.conditionsList);
|
||||
return (
|
||||
<Modal
|
||||
closeIcon
|
||||
|
|
|
@ -540,6 +540,19 @@ export const RemoteService = {
|
|||
});
|
||||
},
|
||||
|
||||
updateSimulation: (data) => (dispatch) => {
|
||||
const url = `/sensor/${data.id}/simulation`;
|
||||
return Endpoint.put(url, {}, data)
|
||||
.then((res) => {
|
||||
dispatch(actions.deviceSave(res.data));
|
||||
return res.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.warn('Update device: ', data, 'error: ', err);
|
||||
throw new RemoteError(['Network error']);
|
||||
});
|
||||
},
|
||||
|
||||
fastUpdateAutomation: (automation) => (dispatch) => Endpoint.put('/automation/fast', {}, automation)
|
||||
.then((res) => dispatch(actions.automationSave(res.data)))
|
||||
.catch((err) => {
|
||||
|
|
Loading…
Reference in a new issue