small fixes
This commit is contained in:
parent
1d4945a6a2
commit
e0dd8f1273
5 changed files with 279 additions and 6 deletions
102
smart-hut/src/components/dashboard/devices/Curtain.js
Normal file
102
smart-hut/src/components/dashboard/devices/Curtain.js
Normal file
|
@ -0,0 +1,102 @@
|
||||||
|
import React, {Component} from "react";
|
||||||
|
|
||||||
|
import { RemoteService } from "../../../remote";
|
||||||
|
import { connect } from "react-redux";
|
||||||
|
import {Slider} from "@material-ui/core";
|
||||||
|
|
||||||
|
class Curtain extends Component {
|
||||||
|
constructor (props){
|
||||||
|
super(props);
|
||||||
|
this.state = { intensity: this.props.device.intensity, timeout: null };
|
||||||
|
|
||||||
|
this.setIntensity = this.setIntensity.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
//getters
|
||||||
|
get turnedOn() {
|
||||||
|
return this.props.device.on;
|
||||||
|
}
|
||||||
|
|
||||||
|
get intensity() {
|
||||||
|
return this.props.device.intensity || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickDevice = () => {
|
||||||
|
const on = !this.turnedOn;
|
||||||
|
this.props
|
||||||
|
.saveDevice({ ...this.props.device, on })
|
||||||
|
.catch((err) => console.error("curtains update error", err));
|
||||||
|
};
|
||||||
|
|
||||||
|
setIntensity(intensity) {
|
||||||
|
intensity *= 100;
|
||||||
|
|
||||||
|
if (this.state.timeout) {
|
||||||
|
clearTimeout(this.state.timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
intensity,
|
||||||
|
timeout: setTimeout(() => {
|
||||||
|
this.saveIntensity();
|
||||||
|
this.setState({
|
||||||
|
intensity: this.state.intensity,
|
||||||
|
timeout: null,
|
||||||
|
});
|
||||||
|
}, 100),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
saveIntensity = () => {
|
||||||
|
const intensity = Math.round(this.state.intensity);
|
||||||
|
this.props
|
||||||
|
.saveDevice({ ...this.props.device, intensity })
|
||||||
|
.catch((err) => console.error("curtains update error", err));
|
||||||
|
};
|
||||||
|
|
||||||
|
helper=()=>{
|
||||||
|
if(this.props.device.intensity>=90){
|
||||||
|
this.setIntensity(1);
|
||||||
|
this.saveIntensity();
|
||||||
|
}else {
|
||||||
|
this.setIntensity(this.props.device.intensity / 100 + 0.10);
|
||||||
|
this.saveIntensity();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
helper2=()=>{
|
||||||
|
if(this.props.device.intensity<=10){
|
||||||
|
this.setIntensity(0);
|
||||||
|
this.saveIntensity();
|
||||||
|
}else {
|
||||||
|
this.setIntensity(this.props.device.intensity / 100 - 0.10);
|
||||||
|
this.saveIntensity();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
helper3=(a)=>{
|
||||||
|
//console.log(a);
|
||||||
|
this.setIntensity(a/100);
|
||||||
|
this.saveIntensity();
|
||||||
|
};
|
||||||
|
///*this took me way too much more time than it should have*/
|
||||||
|
render(){
|
||||||
|
return <div><p>{this.props.device.intensity}</p>
|
||||||
|
|
||||||
|
<Slider
|
||||||
|
|
||||||
|
min={0} value={this.props.device.intensity} max={100} onChange={ (e, val) => {this.helper3(val)}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<input type="submit" value="increase" onClick={this.helper}/>
|
||||||
|
<input type="submit" value="decrease" onClick={this.helper2}/>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
|
device: state.devices[ownProps.id],
|
||||||
|
});
|
||||||
|
const CurtainContainer = connect(mapStateToProps, RemoteService)(Curtain);
|
||||||
|
export default CurtainContainer;
|
|
@ -5,6 +5,8 @@ import Sensor from "./Sensor";
|
||||||
import { ButtonDimmer, KnobDimmer } from "./Dimmer";
|
import { ButtonDimmer, KnobDimmer } from "./Dimmer";
|
||||||
import Switcher from "./Switch";
|
import Switcher from "./Switch";
|
||||||
import Videocam from "./Videocam";
|
import Videocam from "./Videocam";
|
||||||
|
import Curtains from "./Curtain";
|
||||||
|
import Thermostat from "./Thermostats";
|
||||||
import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
|
import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
|
||||||
import { RemoteService } from "../../../remote";
|
import { RemoteService } from "../../../remote";
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux";
|
||||||
|
@ -32,6 +34,10 @@ class Device extends React.Component {
|
||||||
|
|
||||||
renderDeviceComponent() {
|
renderDeviceComponent() {
|
||||||
switch (this.props.stateOrDevice.kind) {
|
switch (this.props.stateOrDevice.kind) {
|
||||||
|
case "curtains":
|
||||||
|
return <Curtains tab={this.props.tab} id={this.props.id}/>
|
||||||
|
case "thermostat":
|
||||||
|
return <Thermostat tab={this.props.tab} id={this.props.id}/>
|
||||||
case "regularLight":
|
case "regularLight":
|
||||||
return <Light tab={this.props.tab} id={this.props.id} />;
|
return <Light tab={this.props.tab} id={this.props.id} />;
|
||||||
case "sensor":
|
case "sensor":
|
||||||
|
|
|
@ -117,10 +117,10 @@ class NewDevice extends Component {
|
||||||
|
|
||||||
switch (this.state.typeOfDevice) {
|
switch (this.state.typeOfDevice) {
|
||||||
//trying to make securityCamera work
|
//trying to make securityCamera work
|
||||||
case "securityCamera":
|
//case "securityCamera":
|
||||||
// data.path="/security_camera_videos/security_camera_1.mp4";
|
// data.path="/security_camera_videos/security_camera_1.mp4";
|
||||||
// data.on=false;
|
// data.on=false;
|
||||||
break;
|
//break;
|
||||||
//trying to make thermostat work
|
//trying to make thermostat work
|
||||||
case "thermostat":
|
case "thermostat":
|
||||||
data.targetTemperature=0;
|
data.targetTemperature=0;
|
||||||
|
@ -158,10 +158,6 @@ class NewDevice extends Component {
|
||||||
render() {
|
render() {
|
||||||
const deviceOptions = [
|
const deviceOptions = [
|
||||||
//stuff
|
//stuff
|
||||||
{key:"securityCamera",
|
|
||||||
text:"SecurityCamera",
|
|
||||||
value:"securityCamera",
|
|
||||||
image:{}},
|
|
||||||
{key:"thermostat",
|
{key:"thermostat",
|
||||||
text:"Thermostat",
|
text:"Thermostat",
|
||||||
value:"thermostat",
|
value:"thermostat",
|
||||||
|
|
36
smart-hut/src/components/dashboard/devices/SecurityCamera
Normal file
36
smart-hut/src/components/dashboard/devices/SecurityCamera
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import React, {Component} from "react";
|
||||||
|
|
||||||
|
import { RemoteService } from "../../../remote";
|
||||||
|
import { connect } from "react-redux";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
class SecurityCamera extends Component{
|
||||||
|
constructor (props){
|
||||||
|
super(props);
|
||||||
|
this.state = { path: this.props.device.path, on:this.props.device.on, timeout: null };
|
||||||
|
|
||||||
|
// this.setIntensity = this.setIntensity.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
render(){
|
||||||
|
return <div><p>"mode is: "{this.props.device.mode}</p>
|
||||||
|
<p>"internalsensortemperature is: "{this.props.device.internalSensorTemperature}</p>
|
||||||
|
<p>"targetTemperature is: "{this.props.device.targetTemperature}</p>
|
||||||
|
<p>"measuredtemperature is: "{this.props.device.measuredTemperature}</p>
|
||||||
|
<p>{this.props.device.on}</p>
|
||||||
|
<input type="submit" value="change targetTemperature" onClick={this.helperMode}/>
|
||||||
|
<input type="submit" value="robe" onClick={this.onClickDevice}/></div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
|
device: state.devices[ownProps.id],
|
||||||
|
});
|
||||||
|
|
||||||
|
const SecurityCameraContainer = connect(mapStateToProps, RemoteService)(SecurityCamera);
|
||||||
|
export default SecurityCameraContainer;
|
133
smart-hut/src/components/dashboard/devices/Thermostats.js
Normal file
133
smart-hut/src/components/dashboard/devices/Thermostats.js
Normal file
|
@ -0,0 +1,133 @@
|
||||||
|
import React, {Component} from "react";
|
||||||
|
|
||||||
|
import { RemoteService } from "../../../remote";
|
||||||
|
import { connect } from "react-redux";
|
||||||
|
|
||||||
|
|
||||||
|
//not quite working yet
|
||||||
|
class Thermostats extends Component{
|
||||||
|
constructor (props){
|
||||||
|
super(props);
|
||||||
|
this.state = {targetTemperature: this.props.device.targetTemperature,
|
||||||
|
internalSensorTemperature: this.props.device.internalSensorTemperature,
|
||||||
|
mode: this.props.device.mode,
|
||||||
|
measuredTemperature: this.props.device.measuredTemperature,
|
||||||
|
useExternalSensors: this.props.device.useExternalSensors,
|
||||||
|
timeout: null };
|
||||||
|
this.setMode=this.setMode.bind(this);
|
||||||
|
this.setTargetTemperature=this.setTargetTemperature.bind(this);
|
||||||
|
this.setInternalSensorTemperature=this.setInternalSensorTemperature.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
//getters
|
||||||
|
get getMode(){
|
||||||
|
return this.props.device.mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
get getTargetTemperature(){
|
||||||
|
return this.props.device.targetTemperature;
|
||||||
|
}
|
||||||
|
|
||||||
|
get getInternalSensorTemperature(){
|
||||||
|
return this.props.device.internalSensorTemperature;
|
||||||
|
}
|
||||||
|
|
||||||
|
get getMeasuredTemperature(){
|
||||||
|
return this.props.device.measuredTemperature;
|
||||||
|
}
|
||||||
|
|
||||||
|
get getUseExternalSensors(){
|
||||||
|
return this.props.device.useExternalSensors;
|
||||||
|
}
|
||||||
|
|
||||||
|
setMode(mode){
|
||||||
|
if (this.state.timeout) {
|
||||||
|
clearTimeout(this.state.timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
//i came to the conclusion that is not possible to set mode.
|
||||||
|
this.mode="HEATING";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onClickDevice = () => {
|
||||||
|
const on = !this.turnedOn;
|
||||||
|
this.props
|
||||||
|
.saveDevice({ ...this.props.device, on })
|
||||||
|
.catch((err) => console.error("regular light update error", err));
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
//It seems to work
|
||||||
|
saveTargetTemperature(targetTemperature){
|
||||||
|
this.props
|
||||||
|
.saveDevice({ ...this.props.device, targetTemperature })
|
||||||
|
.catch((err) => console.error(" update error", err));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
setTargetTemperature(newTemp){
|
||||||
|
if (this.state.timeout) {
|
||||||
|
clearTimeout(this.state.timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
newTemp,
|
||||||
|
timeout: setTimeout(() => {
|
||||||
|
this.saveTargetTemperature(newTemp);
|
||||||
|
this.setState({
|
||||||
|
targetTemperature: this.state.targetTemperature,
|
||||||
|
timeout: null,
|
||||||
|
});
|
||||||
|
}, 100),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//I have no idea why it doesn't want to update the temperature
|
||||||
|
saveInternalSensorTemperature(internalSensorTemperature){
|
||||||
|
this.props
|
||||||
|
.saveDevice({ ...this.props.device, internalSensorTemperature })
|
||||||
|
.catch((err) => console.error(" update error", err));
|
||||||
|
}
|
||||||
|
|
||||||
|
setInternalSensorTemperature(newTemp){
|
||||||
|
if (this.state.timeout) {
|
||||||
|
clearTimeout(this.state.timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
newTemp,
|
||||||
|
timeout: setTimeout(() => {
|
||||||
|
this.saveInternalSensorTemperature(newTemp);
|
||||||
|
this.setState({
|
||||||
|
internalSensorTemperature: this.state.internalSensorTemperature,
|
||||||
|
timeout: null,
|
||||||
|
});
|
||||||
|
}, 100),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
helperMode=()=>{
|
||||||
|
//this.setMode("HEATING");
|
||||||
|
this.setTargetTemperature(20);
|
||||||
|
//this.setInternalSensorTemperature(42);
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
return <div><p>"mode is: "{this.props.device.mode}</p>
|
||||||
|
<p>"internalsensortemperature is: "{this.props.device.internalSensorTemperature}</p>
|
||||||
|
<p>"targetTemperature is: "{this.props.device.targetTemperature}</p>
|
||||||
|
<p>"measuredtemperature is: "{this.props.device.measuredTemperature}</p>
|
||||||
|
<p>{this.props.device.on}</p>
|
||||||
|
<input type="submit" value="change targetTemperature" onClick={this.helperMode}/>
|
||||||
|
<input type="submit" value="robe" onClick={this.onClickDevice}/></div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapStateToProps = (state, ownProps) => ({
|
||||||
|
device: state.devices[ownProps.id],
|
||||||
|
});
|
||||||
|
|
||||||
|
const ThermostatContainer = connect(mapStateToProps, RemoteService)(Thermostats);
|
||||||
|
export default ThermostatContainer;
|
Loading…
Reference in a new issue