almost complete simulation panel

This commit is contained in:
britea 2020-05-27 12:04:16 +02:00
parent 22366cb7a2
commit 77070242c6
4 changed files with 112 additions and 41 deletions

View file

@ -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>
</>
)

View file

@ -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>

View file

@ -653,6 +653,7 @@ class AutomationSaveModal extends Component {
}
render() {
console.log(this.state.conditionsList);
return (
<Modal
closeIcon

View file

@ -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) => {