Merge branch 'thermostat-fix' into 'dev'

Thermostats fixed (for scenes)

See merge request sa4-2020/the-sanmarinoes/frontend!111
This commit is contained in:
Claudio Maggioni 2020-05-02 14:00:26 +02:00
commit f058ca8502
11 changed files with 82 additions and 67 deletions

View file

@ -17,8 +17,6 @@ class SceneModal extends Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.addSceneModal = this.addSceneModal.bind(this);
this.modifySceneModal = this.modifySceneModal.bind(this);
this.deleteScene = this.deleteScene.bind(this);

View file

@ -26,7 +26,7 @@ class DevicePanel extends Component {
return (
<Card.Group centered style={{ paddingTop: "3rem" }}>
{this.props.devices.map((e, i) => {
return <Device tab={this.props.tab} id={e.id} />;
return <Device key={i} tab={this.props.tab} id={e.id} />;
})}
{!this.props.isActiveRoomHome ? (
<Card style={{ height: "23em" }}>

View file

@ -98,7 +98,14 @@ class NewSceneDevice extends Component {
open={this.state.openModal}
onClose={this.resetState}
trigger={
<StyledDiv onClick={this.handleOpen}>
<StyledDiv
onClick={this.handleOpen}
style={{
position: "relative",
top: "calc(50% - 5rem)",
left: "calc(50% - 5rem)",
}}
>
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
</StyledDiv>
}

View file

@ -3,7 +3,7 @@ import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import Device from "./devices/Device";
import NewSceneDevice from "./NewSceneDevice";
import { Grid, Button } from "semantic-ui-react";
import { Grid, Button, Card, Segment, Header } from "semantic-ui-react";
class ScenesPanel extends Component {
constructor(props) {
@ -13,38 +13,44 @@ class ScenesPanel extends Component {
applyScene() {
console.log(this.props.activeScene);
this.props.sceneApply(this.props.activeScene).then(() => {
alert("Scene applied.");
});
this.props
.sceneApply(this.props.activeScene)
.then(() => {
alert("Scene applied.");
})
.catch(console.error);
}
render() {
return (
<Grid doubling columns={2} divided="vertically">
<Card.Group centered style={{ paddingTop: "3rem" }}>
{!this.props.isActiveDefaultScene ? (
<Grid.Row centered>
<Button color="blue" onClick={this.applyScene}>
Apply Scene
</Button>
</Grid.Row>
) : null}
{!this.props.isActiveDefaultScene
? this.props.sceneStates.map((e, i) => {
return (
<Grid.Column key={i}>
<Device tab={this.props.tab} id={e.id} />
</Grid.Column>
);
})
: null}
{!this.props.isActiveDefaultScene ? (
<Grid.Column>
<NewSceneDevice />
</Grid.Column>
<Card style={{ height: "27em" }}>
<Card.Content>
<Card.Header textAlign="center">
<Header as="h3">Add devices - Apply Scene</Header>
</Card.Header>
<Segment basic style={{ width: "100%", height: "100%" }}>
<NewSceneDevice />
</Segment>
</Card.Content>
<Card.Content extra>
<div className="ui two buttons">
<Button color="blue" onClick={this.applyScene}>
Apply Scene
</Button>
</div>
</Card.Content>
</Card>
) : (
<Grid.Column>Welcome to the Scene View, you add a Scene</Grid.Column>
)}
</Grid>
{!this.props.isActiveDefaultScene
? this.props.sceneStates.map((e, i) => {
return <Device key={i} tab={this.props.tab} id={e.id} />;
})
: null}
</Card.Group>
);
}
}

View file

@ -41,8 +41,8 @@ class Device extends React.Component {
}
deleteState() {
//console.log("alpaca "+this.props);
this.props.deleteState(this.props.id, this.props.type);
console.log("alpaca ", this.props);
this.props.deleteState(this.props.id, this.props.stateOrDevice.kind);
}
renderDeviceComponent() {
@ -136,7 +136,7 @@ class Device extends React.Component {
stateDescription() {
return (
<div class="ui one button">
<div className="ui two buttons">
<Button
color="red"
icon
@ -159,7 +159,9 @@ class Device extends React.Component {
render() {
{
return (
<Card style={{ height: "23em" }}>
<Card
style={{ height: this.props.tab === "Devices" ? "23em" : "27em" }}
>
<Card.Content>
<Card.Header textAlign="center">
<Header as="h3">{this.deviceName}</Header>

View file

@ -46,7 +46,7 @@ class Light extends Component {
this.setIntensity = this.setIntensity.bind(this);
}
componentDidUpdate(prevProps, prevState) {
componentDidUpdate(prevProps) {
if (
this.props.stateOrDevice.intensity !== prevProps.stateOrDevice.intensity
) {

View file

@ -28,7 +28,7 @@ class SmartPlug extends Component {
}
get energyConsumed() {
return (this.props.stateOrDevice.totalConsumption / 1000).toFixed(3);
return (this.props.device.totalConsumption / 1000).toFixed(3);
}
onClickDevice = () => {
@ -78,6 +78,13 @@ const mapStateToProps = (state, ownProps) => ({
return state.sceneStates[ownProps.id];
}
},
get device() {
if (state.active.activeTab === "Devices") {
return state.devices[ownProps.id];
} else {
return state.devices[state.sceneStates[ownProps.id].deviceId];
}
},
});
const SmartPlugContainer = connect(mapStateToProps, RemoteService)(SmartPlug);
export default SmartPlugContainer;

View file

@ -15,39 +15,21 @@ import {
stateTagContainer,
} from "./ThermostatStyle";
//not quite working yet
class Thermostats extends Component {
constructor(props) {
super(props);
this.state = {
targetTemperature: this.props.stateOrDevice.targetTemperature,
mode: this.props.stateOrDevice.mode,
measuredTemperature: this.props.stateOrDevice.measuredTemperature,
useExternalSensors: this.props.stateOrDevice.useExternalSensors,
timeout: null,
targetTemperature: this.props.device.targetTemperature,
mode: this.props.device.mode,
measuredTemperature: this.props.device.measuredTemperature,
useExternalSensors: this.props.device.useExternalSensors,
};
console.log(this.state);
this.setMode = this.setMode.bind(this);
this.setTargetTemperature = this.setTargetTemperature.bind(this);
this.setTargetTemperature = this.setTargetTemperature.bind(this);
}
//getters
get getMode() {
return this.props.stateOrDevice.mode;
}
get getTargetTemperature() {
return this.props.stateOrDevice.targetTemperature;
}
get getMeasuredTemperature() {
return this.props.stateOrDevice.measuredTemperature;
}
get getUseExternalSensors() {
return this.props.stateOrDevice.useExternalSensors;
}
setMode(mode) {
if (this.state.timeout) {
clearTimeout(this.state.timeout);
@ -85,7 +67,6 @@ class Thermostats extends Component {
}
};
//It seems to work
saveTargetTemperature(targetTemperature) {
const turn = this.props.stateOrDevice.mode !== "OFF";
if (this.props.tab === "Devices") {
@ -124,8 +105,6 @@ class Thermostats extends Component {
});
}
//I have no idea why it doesn't want to update the temperature
// Maybe ask yourself some questions
saveTargetTemperature(targetTemperature) {
if (this.props.tab === "Devices") {
this.props
@ -160,7 +139,11 @@ class Thermostats extends Component {
<h3 style={deviceName}>
Thermostat
<Checkbox
checked={this.props.stateOrDevice.mode !== "OFF" ? true : false}
checked={
this.props.tab === "Devices"
? this.props.device.mode !== "OFF"
: this.props.stateOrDevice.on
}
slider
style={toggle}
onChange={(e, val) => this.setMode(val.checked)}
@ -185,7 +168,13 @@ class Thermostats extends Component {
/>
) : null}
<div style={stateTagContainer}>
<span style={stateTag}>{this.props.stateOrDevice.mode}</span>
<span style={stateTag}>
{this.props.tab === "Devices"
? this.props.device.mode
: this.props.stateOrDevice.on
? "WILL TURN ON"
: "WILL TURN OFF"}
</span>
</div>
</div>
);

View file

@ -59,7 +59,11 @@ class Videocam extends Component {
}
const mapStateToProps = (state, ownProps) => ({
device: state.devices[ownProps.id],
device:
ownProps.tab === "Devices"
? state.devices[ownProps.id]
: state.devices[state.sceneStates[ownProps.id].deviceId],
state: state.sceneStates[ownProps.id],
});
const VideocamContainer = connect(mapStateToProps, RemoteService)(Videocam);
export default VideocamContainer;

View file

@ -13,7 +13,11 @@ class RemoteError extends Error {
messages;
constructor(messages) {
super(messages.join(" - "));
super(
messages && Array.isArray(messages)
? messages.join(" - ")
: JSON.stringify(messages, null, 2)
);
this.messages = messages;
}
}

View file

@ -89,14 +89,12 @@ class Dashboard extends Component {
<Grid.Column textAlign="center" width={16}>
<Menu fluid widths={3} inverted color="grey">
<Menu.Item
basic
name="Devices"
content="Devices"
active={this.activeTab === "Devices"}
onClick={this.selectTab}
/>
<Menu.Item
basic
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}