initial simulation panel
This commit is contained in:
britea
parent
8cdd66f6d4
commit
066eb1535b
|
|
@ -25,7 +25,7 @@ const IconHomeImage = () => (
|
|||
|
||||
const TitleImage = () => <Image src="sm_logo.png" size="medium" centered />;
|
||||
|
||||
export class MyHeader extends React.Component {
|
||||
class MyHeader extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { simulationPanel: undefined };
|
||||
|
|
|
|||
|
|
@ -1,26 +1,15 @@
|
|||
import React from 'react';
|
||||
import Modal from 'react-modal';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Grid,
|
||||
Divider,
|
||||
Button,
|
||||
Label,
|
||||
Responsive,
|
||||
Checkbox,
|
||||
Image,
|
||||
GridColumn,
|
||||
Header,
|
||||
Segment,
|
||||
Modal,
|
||||
} from 'semantic-ui-react';
|
||||
import SliderTemperature from './SliderTemperature.js';
|
||||
import SliderTempRange from './SliderTempRange.js';
|
||||
import SliderHumidty from './SliderHumidity.js';
|
||||
import SliderLight from './SliderLight.js';
|
||||
import SliderLightRange from './SliderLightRange.js';
|
||||
import SliderMotion from './SliderMotion.js';
|
||||
import DropdownSimulation from './DropdownSimulation.js';
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../remote';
|
||||
import SimulationPanelSlider from './SimulationPanelSlider.js';
|
||||
|
||||
/*
|
||||
const SimulationPanel = (props) => (
|
||||
<Modal
|
||||
isOpen={!!props.simulationPanel}
|
||||
|
|
@ -56,14 +45,14 @@ const SimulationPanel = (props) => (
|
|||
{props.simulationPanel}
|
||||
<Grid celled>
|
||||
|
||||
{/* TITLE */}
|
||||
{/* TITLE }
|
||||
<Grid.Row textAlign="center">
|
||||
<h1 style={{ color: 'white', padding: '1rem', fontFamily: 'Arial' }}>
|
||||
Welcome in the Simulation Panel
|
||||
</h1>
|
||||
</Grid.Row>
|
||||
|
||||
{/* TEMPERATURE SENSOR */}
|
||||
{/* TEMPERATURE SENSOR }
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
<Divider
|
||||
|
|
@ -99,7 +88,7 @@ const SimulationPanel = (props) => (
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SliderTemperature />
|
||||
<SimulationPanelSlider />
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
|
|
@ -108,12 +97,12 @@ const SimulationPanel = (props) => (
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SliderTempRange />
|
||||
<SimulationPanelSlider />
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
|
||||
{/* HUMIDTY SENSOR */}
|
||||
{/* HUMIDTY SENSOR }
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
<Divider
|
||||
|
|
@ -149,7 +138,7 @@ const SimulationPanel = (props) => (
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SliderHumidty />
|
||||
<SimulationPanelSlider />
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
|
|
@ -158,12 +147,12 @@ const SimulationPanel = (props) => (
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SliderTempRange />
|
||||
<SimulationPanelSlider />
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
|
||||
{/* LIGHT SENSOR */}
|
||||
{/* LIGHT SENSOR }
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
<Divider
|
||||
|
|
@ -199,7 +188,7 @@ const SimulationPanel = (props) => (
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SliderLight />
|
||||
<SimulationPanelSlider />
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
|
|
@ -208,12 +197,12 @@ const SimulationPanel = (props) => (
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SliderLightRange />
|
||||
<SimulationPanelSlider />
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
|
||||
{/* MOTION SENSOR */}
|
||||
{/* MOTION SENSOR }
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
<Divider
|
||||
|
|
@ -249,7 +238,7 @@ const SimulationPanel = (props) => (
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SliderMotion />
|
||||
<SimulationPanelSlider />
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
|
|
@ -258,7 +247,7 @@ const SimulationPanel = (props) => (
|
|||
marginLeft: '30%',
|
||||
}}
|
||||
>
|
||||
<SliderTempRange />
|
||||
<SimulationPanelSlider />
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
|
|
@ -267,5 +256,143 @@ const SimulationPanel = (props) => (
|
|||
</Grid>
|
||||
</Modal>
|
||||
);
|
||||
*/
|
||||
class SimulationPanel extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
console.log(this.props.devices);
|
||||
this.state = {
|
||||
value: null,
|
||||
error: null,
|
||||
};
|
||||
|
||||
export default SimulationPanel;
|
||||
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) {
|
||||
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 (
|
||||
<Image
|
||||
src={image}
|
||||
style={{
|
||||
width: '60px',
|
||||
height: 'auto',
|
||||
display: 'block',
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto',
|
||||
marginTop: '1rem',
|
||||
marginBottom: '1rem',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Modal
|
||||
closeIcon
|
||||
open={!!this.props.simulationPanel}
|
||||
onClose={this.props.closeSimulationPanel}
|
||||
>
|
||||
<Grid celled>
|
||||
<Grid.Row textAlign="center">
|
||||
<h1 style={{ padding: '1rem', fontFamily: 'Arial' }}>
|
||||
Welcome in the Simulation Panel
|
||||
</h1>
|
||||
</Grid.Row>
|
||||
{
|
||||
this.props.devices
|
||||
? this.props.devices.map((e, i) => (
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
{this.renderImage(e)}
|
||||
<p style={{ padding: '0.5rem' }}>
|
||||
{e.name}
|
||||
</p>
|
||||
<Divider />
|
||||
</Grid.Column>
|
||||
|
||||
|
||||
<Grid.Column width={10} textAlign="center">
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'block',
|
||||
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} />
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
))
|
||||
: null
|
||||
}
|
||||
</Grid>
|
||||
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
64
smart-hut/src/components/SimulationPanelSlider.js
Normal file
64
smart-hut/src/components/SimulationPanelSlider.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import React, { Component } from 'react';
|
||||
import {
|
||||
Form, Grid, Header,
|
||||
} from 'semantic-ui-react';
|
||||
import { connect } from 'react-redux';
|
||||
import { RemoteService } from '../remote';
|
||||
|
||||
class SimulationPanelSlider extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
console.log(this.props.device);
|
||||
}
|
||||
|
||||
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':
|
||||
return this.props.device.detected ? 'on' : 'off';
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = (e, { name, value }) => this.setState({ [name]: value })
|
||||
|
||||
render() {
|
||||
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>
|
||||
|
||||
<Form.Input
|
||||
min={0}
|
||||
max={15000}
|
||||
name="value"
|
||||
onChange={this.handleChange}
|
||||
step={5}
|
||||
type="range"
|
||||
value={this.props.device.value}
|
||||
/>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
device: state.devices[ownProps.id],
|
||||
});
|
||||
const SimulationPanelSliderContainer = connect(mapStateToProps, RemoteService)(SimulationPanelSlider);
|
||||
export default SimulationPanelSliderContainer;
|
||||
Loading…
Reference in New Issue
Block a user