small fixes

This commit is contained in:
Jacob Salvi 2020-04-23 16:02:02 +02:00
parent 1d4945a6a2
commit e0dd8f1273
5 changed files with 279 additions and 6 deletions

View 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;

View file

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

View file

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

View 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;

View 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;