frontend/smart-hut/src/views/ScenesNavbar.js

216 lines
6.2 KiB
JavaScript
Raw Normal View History

import React, { Component } from "react";
import {
Menu,
Button,
Icon,
2020-04-18 14:26:12 +00:00
Grid,
Responsive,
Dropdown,
} from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import SceneModal from "../components/SceneModal";
import { RemoteService } from "../remote";
import { connect } from "react-redux";
import { appActions } from "../storeActions";
class ScenesNavbar extends Component {
constructor(props) {
super(props);
this.state = {
editMode: false,
};
this.toggleEditMode = this.toggleEditMode.bind(this);
this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this);
2020-04-18 14:26:12 +00:00
this.selectScene = this.selectScene.bind(this);
this.getScenes();
}
get activeItemScene() {
return this.props.activeScene;
}
set activeItemScene(item) {
this.props.setActiveScene(item);
}
get activeItemSceneName() {
2020-04-18 14:26:12 +00:00
if (this.props.activeScene === -1) return "Scene";
return this.props.scenes[this.props.activeScene].name;
}
2020-04-18 14:26:12 +00:00
getScenes() {
this.props.fetchAllScenes().catch(console.error);
2020-04-18 14:26:12 +00:00
}
openCurrentModalMobile() {
//console.log(this.activeItemScene, this.props.sceneModalRefs);
2020-04-18 14:26:12 +00:00
const currentModal = this.props.sceneModalRefs[this.activeItemScene]
.current;
currentModal.openModal();
}
toggleEditMode(e) {
this.setState((prevState) => ({ editMode: !prevState.editMode }));
}
2020-04-18 14:26:12 +00:00
selectScene(e, { id }) {
this.activeItemScene = id || -1;
this.getStates(id);
}
getStates(sceneId) {
if (sceneId) {
this.props
.fetchStates(sceneId)
.catch((err) => console.error(`error fetching states:`, err));
}
2020-04-18 14:26:12 +00:00
}
render() {
return (
2020-05-01 14:42:42 +00:00
<div>
<Responsive minWidth={768}>
2020-05-01 14:42:42 +00:00
<Grid style={{ margin: "1em -1em 0 1em" }}>
<Grid.Row color="black">
<button style={editButtonStyle} onClick={this.toggleEditMode}>
Edit
</button>
</Grid.Row>
<Grid.Row>
<Menu inverted fluid vertical>
<Menu.Item
key={-1}
id={null}
name="scene"
active={this.activeItemScene === -1}
onClick={this.selectScene}
>
2020-05-02 14:40:29 +00:00
<strong>Scenes</strong>
</Menu.Item>
2020-04-18 14:26:12 +00:00
{Object.values(this.props.scenes).map((e, i) => {
return (
<Menu.Item
id={e.id}
key={i}
name={e.name}
active={this.activeItemScene === e.id}
onClick={this.selectScene}
>
<Grid>
<Grid.Row>
<Grid.Column width={12}>{e.name}</Grid.Column>
<Grid.Column floated="right">
{this.state.editMode ? (
<SceneModal id={e.id} />
) : null}
</Grid.Column>
</Grid.Row>
</Grid>
</Menu.Item>
);
})}
<Menu.Item name="newM">
<Grid>
<Grid.Row centered name="new">
<SceneModal id={null} />
</Grid.Row>
</Grid>
</Menu.Item>
</Menu>
</Grid.Row>
</Grid>
</Responsive>
<Responsive maxWidth={768}>
<Menu>
<Dropdown item fluid text={this.activeItemSceneName}>
<Dropdown.Menu>
<Dropdown.Item
key={-1}
id={null}
name="scene"
active={this.activeItemScene === -1}
onClick={this.selectScene}
>
<Grid>
<Grid.Row>
2020-05-02 14:40:29 +00:00
<Grid.Column>Scenes</Grid.Column>
</Grid.Row>
</Grid>
</Dropdown.Item>
2020-04-18 14:26:12 +00:00
{Object.values(this.props.scenes).map((e, i) => {
return (
<Dropdown.Item
id={e.id}
key={i}
name={e.name}
active={this.activeItemScene === e.id}
onClick={this.selectScene}
>
<Grid>
<Grid.Row>
<Grid.Column>{e.name}</Grid.Column>
</Grid.Row>
</Grid>
<SceneModal
ref={this.props.sceneModalRefs[e.id]}
nicolaStop={true}
id={e.id}
/>
</Dropdown.Item>
);
})}
</Dropdown.Menu>
</Dropdown>
</Menu>
<Grid inverted>
<Grid.Row>
<Grid.Column width={8}>
<SceneModal id={null} />
</Grid.Column>
{this.activeItemScene !== -1 ? (
<Grid.Column width={8}>
<Button
icon
fluid
labelPosition="left"
onClick={this.openCurrentModalMobile}
>
<Icon name="pencil" size="small" />
2020-04-18 14:26:12 +00:00
EDIT SCENE
</Button>
</Grid.Column>
) : null}
</Grid.Row>
</Grid>
</Responsive>
</div>
);
}
}
const setActiveScene = (activeScene) => {
return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
};
const mapStateToProps = (state, _) => ({
scenes: state.scenes,
sceneModalRefs: Object.keys(state.scenes).reduce(
(acc, key) => ({ ...acc, [key]: React.createRef() }),
{}
),
get isActiveDefaultScene() {
return state.active.activeScene === -1;
},
activeScene: state.active.activeScene,
});
const ScenesNavbarContainer = connect(mapStateToProps, {
...RemoteService,
setActiveScene,
})(ScenesNavbar);
export default ScenesNavbarContainer;