frontend/smart-hut/src/components/dashboard/ScenesPanel.js

86 lines
2.4 KiB
JavaScript
Raw Normal View History

2020-04-14 12:58:03 +00:00
import React, { Component } from "react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import Device from "./devices/Device";
2020-04-16 13:15:33 +00:00
import NewSceneDevice from "./NewSceneDevice";
2020-05-02 14:40:29 +00:00
import { Button, Card, Segment, Header, Icon } from "semantic-ui-react";
2020-04-14 12:58:03 +00:00
class ScenesPanel extends Component {
constructor(props) {
super(props);
2020-04-26 11:38:54 +00:00
this.applyScene = this.applyScene.bind(this);
}
applyScene() {
2020-05-02 11:58:02 +00:00
this.props
.sceneApply(this.props.activeScene)
.then(() => {
alert("Scene applied.");
})
.catch(console.error);
2020-04-14 12:58:03 +00:00
}
render() {
2020-04-16 13:15:33 +00:00
return (
2020-05-02 11:58:02 +00:00
<Card.Group centered style={{ paddingTop: "3rem" }}>
2020-04-26 11:38:54 +00:00
{!this.props.isActiveDefaultScene ? (
2020-05-02 11:58:02 +00:00
<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>
) : (
2020-05-02 14:40:29 +00:00
<Segment placeholder>
<Header icon>
<Icon
name="exclamation triangle"
style={{ paddingBottom: "1rem" }}
/>
2020-05-02 14:40:29 +00:00
Please select a scene on the left or add a new one.
</Header>
</Segment>
2020-05-02 11:58:02 +00:00
)}
{!this.props.isActiveDefaultScene
? this.props.sceneStates.map((e, i) => {
2020-05-02 11:58:02 +00:00
return <Device key={i} tab={this.props.tab} id={e.id} />;
})
: null}
2020-05-02 11:58:02 +00:00
</Card.Group>
2020-04-16 13:15:33 +00:00
);
2020-04-14 12:58:03 +00:00
}
}
const mapStateToProps = (state, _) => ({
get sceneStates() {
if (state.active.activeScene !== -1) {
const stateArray = [
...state.scenes[state.active.activeScene].sceneStates,
].sort();
2020-04-27 13:20:48 +00:00
return stateArray.map((id) => state.sceneStates[id]);
} else {
return [];
}
},
2020-04-16 13:15:33 +00:00
get isActiveDefaultScene() {
return state.active.activeScene === -1;
},
activeScene: state.active.activeScene,
2020-04-14 12:58:03 +00:00
});
const ScenesPanelContainer = connect(
mapStateToProps,
RemoteService
)(ScenesPanel);
export default ScenesPanelContainer;