Merge branch 'dev' of https://lab.si.usi.ch/sa4-2020/the-sanmarinoes/frontend into dev
This commit is contained in:
commit
3670d16e4d
6 changed files with 85 additions and 55 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
*/
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -518,7 +518,7 @@ function reducer(previousState, action) {
|
|||
}
|
||||
return a;
|
||||
}, {});
|
||||
|
||||
console.log(devices);
|
||||
newState = reducer(previousState, {
|
||||
type: "DEVICES_UPDATE",
|
||||
partial: true,
|
||||
|
|
Loading…
Reference in a new issue