166 lines
4.8 KiB
JavaScript
166 lines
4.8 KiB
JavaScript
import React, { Component } from "react";
|
|
import {
|
|
Menu,
|
|
Button,
|
|
Grid,
|
|
Icon,
|
|
Responsive,
|
|
Dropdown,
|
|
} from "semantic-ui-react";
|
|
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
|
|
import AutomationModal from "../components/AutomationModal";
|
|
import { RemoteService } from "../remote";
|
|
import { connect } from "react-redux";
|
|
import { appActions } from "../storeActions";
|
|
|
|
class AutomationsNavbar extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
editMode: false,
|
|
};
|
|
|
|
this.toggleEditMode = this.toggleEditMode.bind(this);
|
|
this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this);
|
|
}
|
|
|
|
get activeItemAutomation() {
|
|
return this.props.activeAutomation;
|
|
}
|
|
|
|
set activeItemAutomation(item) {
|
|
this.props.setActiveAutomation(item);
|
|
}
|
|
|
|
get activeItemAutomationsName() {
|
|
if (this.props.activeAutomation === -1) return "Home";
|
|
return this.props.automations[this.props.activeAutomation].name;
|
|
}
|
|
|
|
openCurrentModalMobile() {
|
|
console.log(this.activeItemAutomation, this.props.automationsModalRefs);
|
|
const currentModal = this.props.automationsModalRefs[
|
|
this.activeItemAutomation
|
|
].current;
|
|
currentModal.openModal();
|
|
}
|
|
|
|
toggleEditMode(e) {
|
|
this.setState((prevState) => ({ editMode: !prevState.editMode }));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
|
|
<Responsive minWidth={768}>
|
|
<Grid>
|
|
<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="automations"
|
|
active={this.activeItemAutomation === -1}
|
|
onClick={this.selectAutomations}
|
|
>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<Icon name="home" size="small" />
|
|
</Grid.Column>
|
|
<Grid.Column>AUTOMATIONS</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Menu.Item>
|
|
{
|
|
//INSERT LIST OF AUTOMATIONS HERE
|
|
}
|
|
<Menu.Item name="newM">
|
|
<Grid>
|
|
<Grid.Row centered name="new">
|
|
<AutomationModal id={null} />
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
|
|
<Responsive maxWidth={768}>
|
|
<Menu>
|
|
<Dropdown item fluid text={this.activeItemAutomationName}>
|
|
<Dropdown.Menu>
|
|
<Dropdown.Item
|
|
key={-1}
|
|
id={null}
|
|
name="scene"
|
|
active={this.activeItemAutomation === -1}
|
|
onClick={this.selectAutomations}
|
|
>
|
|
<Grid>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<Icon name="home" size="small" />
|
|
</Grid.Column>
|
|
<Grid.Column>Automations</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Dropdown.Item>
|
|
|
|
{
|
|
//INSERT LIST OF AUTOMATIONS HERE
|
|
}
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</Menu>
|
|
<Grid inverted>
|
|
<Grid.Row>
|
|
<Grid.Column width={8}>
|
|
<AutomationModal id={null} />
|
|
</Grid.Column>
|
|
{this.activeItemAutomation !== -1 ? (
|
|
<Grid.Column width={8}>
|
|
<Button
|
|
icon
|
|
fluid
|
|
labelPosition="left"
|
|
onClick={this.openCurrentModalMobile}
|
|
>
|
|
<Icon name="pencil" size="small" />
|
|
EDIT AUTOMATION
|
|
</Button>
|
|
</Grid.Column>
|
|
) : null}
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const setActiveAutomation = (activeAutomation) => {
|
|
return (dispatch) =>
|
|
dispatch(appActions.setActiveAutomation(activeAutomation));
|
|
};
|
|
|
|
const mapStateToProps = (state, _) => ({
|
|
automations: state.automations,
|
|
activeAutomation: state.active.activeAutomation,
|
|
automationModalRefs: Object.keys(state.automations).reduce(
|
|
(acc, key) => ({ ...acc, [key]: React.createRef() }),
|
|
{}
|
|
),
|
|
});
|
|
const AutomationsNavbarContainer = connect(mapStateToProps, {
|
|
...RemoteService,
|
|
setActiveAutomation,
|
|
})(AutomationsNavbar);
|
|
export default AutomationsNavbarContainer;
|