This commit is contained in:
britea 2020-05-05 15:06:28 +02:00
commit 3670d16e4d
6 changed files with 85 additions and 55 deletions

View file

@ -123,13 +123,16 @@ class Device extends React.Component {
<Card.Content>
<Card.Header textAlign="center">
<Header as="h3">{this.deviceName}</Header>
<Header as="h4">{this.props.roomName}</Header>
<Header as="h4" style={{ marginTop: ".5rem" }}>
{this.props.roomName}
</Header>
</Card.Header>
<Card.Description
style={
this.props.device.kind !== "curtains" ? centerComponent : null
}>
}
>
{this.renderDeviceComponent()}
</Card.Description>
</Card.Content>

View file

@ -1,5 +1,13 @@
import React, { Component, useState } from "react";
import { Button, Form, Icon, Header, Modal, Input } from "semantic-ui-react";
import {
Button,
Form,
Icon,
Header,
Modal,
Input,
Checkbox,
} from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../../../remote";
@ -33,8 +41,6 @@ const SettingsForm = (props) => {
const [values, setValues] = useState({ name: "" });
console.log(props);
return (
<Form>
<Form.Field>
@ -46,7 +52,6 @@ const SettingsForm = (props) => {
placeholder={props.name}
/>
</Form.Field>
<Form.Field>
<DeleteModal removeDevice={() => props.removeDevice(values)} />
</Form.Field>
@ -72,6 +77,7 @@ class DeviceSettingsModal extends Component {
this.updateDevice = this.updateDevice.bind(this);
this.deleteDevice = this.deleteDevice.bind(this);
//this.useExternalTempSensor = this.useExternalTempSensor.bind(this);
}
closeModal = (e) => {
@ -83,9 +89,27 @@ class DeviceSettingsModal extends Component {
};
updateDevice(values) {
if (values.name.length === 0) return;
console.log(values, this.external);
let name = values.name;
if (values.name.length === 0) {
name = this.props.device.name;
}
let data = {
...this.props.device,
name: name,
};
if (this.props.device.kind === "thermostat") {
let external = values.external
? values.external
: this.props.device.useExternalSensors;
console.log(external);
data.useExternalSensors = external;
}
console.log(data.useExternalSensors);
this.props
.saveDevice({ ...this.props.device, name: values.name })
.saveDevice(data)
.then(() => this.setState({ openModal: false }))
.catch((err) =>
console.error(
@ -114,6 +138,7 @@ class DeviceSettingsModal extends Component {
name={this.state.name}
removeDevice={this.deleteDevice}
saveFunction={this.updateDevice}
tempSensor={this.useExternalTempSensor}
/>
);
return this._editForm;

View file

@ -2,30 +2,3 @@
margin-left: 1rem;
margin-right: 1rem;
}
/*
.slider-css::-webkit-slider-thumb {
border: 5px solid #ffffff;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: rgba(94, 246, 152, 1);
cursor: pointer;
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
margin-top: -7px;
}
.slider-css:focus {
outline: none;
}
.slider-css::-webkit-slider-runnable-track {
outline: none;
width: 100%;
height: 7px;
cursor: pointer;
box-shadow: 4.5px 4.5px 20px 1px rgba(0, 0, 0, 0.3);
background: white;
border-radius: 5px;
}
*/

View file

@ -1,7 +1,7 @@
export const container = {
margin: "-1em 0",
width: "15em",
height: "14em",
height: "15.5em",
boxShadow: "5px 5px 5px 5px #DDD",
borderRadius: "1em",
backgroundColor: "white",
@ -40,7 +40,7 @@ export const stateTagContainer = {
position: "absolute",
width: "10rem",
height: "2rem",
bottom: 0,
bottom: "-.25rem",
left: "50%",
transform: "translate(-50%,-50%)",
backgroundColor: "#2b2",

View file

@ -23,17 +23,12 @@ class Thermostats extends Component {
targetTemperature: this.props.device.targetTemperature,
mode: this.props.device.mode,
measuredTemperature: this.props.device.measuredTemperature,
useExternalSensors: this.props.device.useExternalSensors,
};
this.setMode = this.setMode.bind(this);
this.setTargetTemperature = this.setTargetTemperature.bind(this);
}
setMode(mode) {
if (this.state.timeout) {
clearTimeout(this.state.timeout);
}
//i came to the conclusion that is not possible to set mode.
// Good job Jacob (Claudio)
//this.mode = "HEATING";
@ -93,6 +88,16 @@ class Thermostats extends Component {
this.setState({ ...this.state, targetTemperature: value });
};
handleCheckbox = (val) => {
const useExternalSensors = val;
const turnOn = this.props.stateOrDevice.mode !== "OFF";
if (this.props.tab === "Devices") {
this.props
.saveDevice({ ...this.props.stateOrDevice, useExternalSensors, turnOn })
.catch((err) => console.error("thermostat update error", err));
}
};
render() {
return (
<div style={container}>
@ -118,18 +123,30 @@ class Thermostats extends Component {
{this.props.device.targetTemperature.toFixed(1)} ºC
</div>
{this.props.tab === "Devices" ? (
<Slider
disabled={this.props.disabled}
min={10}
max={30}
step={0.1}
tooltip={false}
className="slider-css"
value={this.state.targetTemperature}
onChange={(event) => this.handleChange(event)}
onChangeComplete={() => this.setTargetTemperature()}
/>
<React.Fragment>
<Slider
disabled={this.props.disabled}
min={10}
max={30}
step={0.1}
tooltip={false}
className="slider-css"
value={this.state.targetTemperature}
onChange={(event) => this.handleChange(event)}
onChangeComplete={() => this.setTargetTemperature()}
/>
<Checkbox
style={{ padding: "0 .7rem" }}
label="Use external sensors"
name="external"
toggle
checked={this.props.stateOrDevice.useExternalSensors}
disabled={!this.props.tempSensorsInRoom}
onChange={(e, val) => this.handleCheckbox(val.checked)}
/>
</React.Fragment>
) : null}
<div style={stateTagContainer}>
<span style={stateTag}>
{this.props.tab !== "Scenes"
@ -144,8 +161,20 @@ class Thermostats extends Component {
}
}
const mapStateToProps2 = (state, ownProps) => ({
...mapStateToProps(state, ownProps),
get tempSensorsInRoom() {
const deviceIds = state.rooms[state.devices[ownProps.id].roomId].devices;
const devices = [...deviceIds].map((id) => state.devices[id]);
const sensors = devices.filter(
(d) => d.kind === "sensor" && d.sensor === "TEMPERATURE"
);
return sensors.length > 0;
},
});
const ThermostatContainer = connect(
mapStateToProps,
mapStateToProps2,
RemoteService
)(Thermostats);
export default ThermostatContainer;

View file

@ -518,7 +518,7 @@ function reducer(previousState, action) {
}
return a;
}, {});
console.log(devices);
newState = reducer(previousState, {
type: "DEVICES_UPDATE",
partial: true,