Added and Fixed Scenes and Automations Modal and Navbars
This commit is contained in:
britea
parent
3bc219c926
commit
b03e6b1850
190
smart-hut/src/components/AutomationModal.js
Normal file
190
smart-hut/src/components/AutomationModal.js
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
import React, { Component } from "react";
|
||||
import { Button, Header, Modal, Icon, Responsive } from "semantic-ui-react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../remote";
|
||||
import { appActions } from "../storeActions";
|
||||
//import { update } from "immutability-helper";
|
||||
|
||||
class AutomationModal extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = this.initialState;
|
||||
this.setInitialState();
|
||||
|
||||
this.addAutomationModal = this.addAutomationModal.bind(this);
|
||||
this.modifyAutomationModal = this.modifyAutomationModal.bind(this);
|
||||
this.deleteAutomation = this.deleteAutomation.bind(this);
|
||||
}
|
||||
|
||||
get initialState() {
|
||||
return {
|
||||
//INITIAL STATE HERE
|
||||
};
|
||||
}
|
||||
|
||||
setInitialState() {
|
||||
this.setState(this.initialState);
|
||||
}
|
||||
|
||||
get type() {
|
||||
return !this.props.id ? "new" : "modify";
|
||||
}
|
||||
|
||||
addAutomationModal = (e) => {
|
||||
/*let data = {
|
||||
// DATA HERE
|
||||
};*/
|
||||
// TODO CALL TO REMOTE SERVER TO ADD SCENE
|
||||
/*this.props
|
||||
.saveRoom(data, null)
|
||||
.then(() => {
|
||||
this.setInitialState();
|
||||
this.closeModal();
|
||||
})
|
||||
.catch((err) => console.error("error in creating room", err));*/
|
||||
};
|
||||
|
||||
modifyAutomationModal = (e) => {
|
||||
/* let data = {
|
||||
// DATA HERE
|
||||
};*/
|
||||
// TODO CALL TO REMOTE SERVER TO MODIFY SCENE
|
||||
/*this.props
|
||||
.saveRoom(data, this.props.id)
|
||||
.then(() => {
|
||||
this.setInitialState();
|
||||
this.closeModal();
|
||||
})
|
||||
.catch((err) => console.error("error in updating room", err));*/
|
||||
};
|
||||
|
||||
deleteAutomation = (e) => {
|
||||
// TODO CALL TO REMOTE SERVER TO DELETE SCENE
|
||||
/*
|
||||
this.props
|
||||
.deleteRoom(this.props.id)
|
||||
.then(() => this.closeModal())
|
||||
.catch((err) => console.error("error in deleting room", err));*/
|
||||
};
|
||||
|
||||
changeSomething = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
closeModal = (e) => {
|
||||
this.setState({ openModal: false });
|
||||
};
|
||||
|
||||
openModal = (e) => {
|
||||
this.setState({ openModal: true });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{!this.props.nicolaStop ? (
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
{this.type === "new" ? (
|
||||
<Button
|
||||
icon
|
||||
labelPosition="left"
|
||||
inverted
|
||||
onClick={this.openModal}
|
||||
>
|
||||
<Icon name="plus" size="small" />
|
||||
ADD AUTOMATION
|
||||
</Button>
|
||||
) : (
|
||||
<Icon name="pencil" size="small" onClick={this.openModal} />
|
||||
)}
|
||||
</Responsive>
|
||||
<Responsive maxWidth={768}>
|
||||
{this.type === "new" ? (
|
||||
<Button
|
||||
icon
|
||||
fluid
|
||||
labelPosition="left"
|
||||
onClick={this.openModal}
|
||||
>
|
||||
<Icon name="plus" size="small" />
|
||||
ADD AUTOMATION
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
icon
|
||||
fluid
|
||||
labelPosition="left"
|
||||
onClick={this.openModal}
|
||||
>
|
||||
<Icon name="pencil" size="small" />
|
||||
EDIT AUTOMATION
|
||||
</Button>
|
||||
)}
|
||||
</Responsive>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
|
||||
<Header>
|
||||
{this.type === "new" ? "Add new automation" : "Modify automation"}
|
||||
</Header>
|
||||
<Modal.Content>
|
||||
{
|
||||
//TODO FORM TO ADD OR MODIFY SCENE
|
||||
}
|
||||
|
||||
{this.type === "modify" ? (
|
||||
<Button
|
||||
icon
|
||||
labelPosition="left"
|
||||
inverted
|
||||
color="red"
|
||||
onClick={this.deleteAutomation}
|
||||
>
|
||||
<Icon name="trash alternate" />
|
||||
Delete Automation
|
||||
</Button>
|
||||
) : null}
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button color="red" onClick={this.closeModal}>
|
||||
<Icon name="remove" />{" "}
|
||||
{this.type === "new" ? "Cancel" : "Discard changes"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
color="green"
|
||||
onClick={
|
||||
this.type === "new"
|
||||
? this.addAutomationModal
|
||||
: this.modifyAutomationModal
|
||||
}
|
||||
>
|
||||
<Icon name="checkmark" />{" "}
|
||||
{this.type === "new" ? "Add automation" : "Save changes"}
|
||||
</Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const setActiveAutomation = (activeAutomation) => {
|
||||
return (dispatch) =>
|
||||
dispatch(appActions.setActiveAutomation(activeAutomation));
|
||||
};
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
automations: ownProps.id ? state.automations[ownProps.id] : null,
|
||||
});
|
||||
const AutomationModalContainer = connect(
|
||||
mapStateToProps,
|
||||
{ ...RemoteService, setActiveAutomation },
|
||||
null,
|
||||
{ forwardRef: true }
|
||||
)(AutomationModal);
|
||||
export default AutomationModalContainer;
|
||||
187
smart-hut/src/components/SceneModal.js
Normal file
187
smart-hut/src/components/SceneModal.js
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
import React, { Component } from "react";
|
||||
import { Button, Header, Modal, Icon, Responsive } from "semantic-ui-react";
|
||||
import { connect } from "react-redux";
|
||||
import { RemoteService } from "../remote";
|
||||
import { appActions } from "../storeActions";
|
||||
//import { update } from "immutability-helper";
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
get initialState() {
|
||||
return {
|
||||
//INITIAL STATE HERE
|
||||
};
|
||||
}
|
||||
|
||||
setInitialState() {
|
||||
this.setState(this.initialState);
|
||||
}
|
||||
|
||||
get type() {
|
||||
return !this.props.id ? "new" : "modify";
|
||||
}
|
||||
|
||||
addSceneModal = (e) => {
|
||||
/*let data = {
|
||||
// DATA HERE
|
||||
};*/
|
||||
// TODO CALL TO REMOTE SERVER TO ADD SCENE
|
||||
/*this.props
|
||||
.saveRoom(data, null)
|
||||
.then(() => {
|
||||
this.setInitialState();
|
||||
this.closeModal();
|
||||
})
|
||||
.catch((err) => console.error("error in creating room", err));*/
|
||||
};
|
||||
|
||||
modifySceneModal = (e) => {
|
||||
/*let data = {
|
||||
// DATA HERE
|
||||
};*/
|
||||
// TODO CALL TO REMOTE SERVER TO MODIFY SCENE
|
||||
/*this.props
|
||||
.saveRoom(data, this.props.id)
|
||||
.then(() => {
|
||||
this.setInitialState();
|
||||
this.closeModal();
|
||||
})
|
||||
.catch((err) => console.error("error in updating room", err));*/
|
||||
};
|
||||
|
||||
deleteScene = (e) => {
|
||||
// TODO CALL TO REMOTE SERVER TO DELETE SCENE
|
||||
/*
|
||||
this.props
|
||||
.deleteRoom(this.props.id)
|
||||
.then(() => this.closeModal())
|
||||
.catch((err) => console.error("error in deleting room", err));*/
|
||||
};
|
||||
|
||||
changeSomething = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
closeModal = (e) => {
|
||||
this.setState({ openModal: false });
|
||||
};
|
||||
|
||||
openModal = (e) => {
|
||||
this.setState({ openModal: true });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{!this.props.nicolaStop ? (
|
||||
<div>
|
||||
<Responsive minWidth={768}>
|
||||
{this.type === "new" ? (
|
||||
<Button
|
||||
icon
|
||||
labelPosition="left"
|
||||
inverted
|
||||
onClick={this.openModal}
|
||||
>
|
||||
<Icon name="plus" size="small" />
|
||||
ADD SCENE
|
||||
</Button>
|
||||
) : (
|
||||
<Icon name="pencil" size="small" onClick={this.openModal} />
|
||||
)}
|
||||
</Responsive>
|
||||
<Responsive maxWidth={768}>
|
||||
{this.type === "new" ? (
|
||||
<Button
|
||||
icon
|
||||
fluid
|
||||
labelPosition="left"
|
||||
onClick={this.openModal}
|
||||
>
|
||||
<Icon name="plus" size="small" />
|
||||
ADD SCENE
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
icon
|
||||
fluid
|
||||
labelPosition="left"
|
||||
onClick={this.openModal}
|
||||
>
|
||||
<Icon name="pencil" size="small" />
|
||||
EDIT SCENE
|
||||
</Button>
|
||||
)}
|
||||
</Responsive>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
|
||||
<Header>
|
||||
{this.type === "new" ? "Add new scene" : "Modify scene"}
|
||||
</Header>
|
||||
<Modal.Content>
|
||||
{
|
||||
//TODO FORM TO ADD OR MODIFY SCENE
|
||||
}
|
||||
|
||||
{this.type === "modify" ? (
|
||||
<Button
|
||||
icon
|
||||
labelPosition="left"
|
||||
inverted
|
||||
color="red"
|
||||
onClick={this.deleteScene}
|
||||
>
|
||||
<Icon name="trash alternate" />
|
||||
Delete Scene
|
||||
</Button>
|
||||
) : null}
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button color="red" onClick={this.closeModal}>
|
||||
<Icon name="remove" />{" "}
|
||||
{this.type === "new" ? "Cancel" : "Discard changes"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
color="green"
|
||||
onClick={
|
||||
this.type === "new" ? this.addSceneModal : this.modifySceneModal
|
||||
}
|
||||
>
|
||||
<Icon name="checkmark" />{" "}
|
||||
{this.type === "new" ? "Add scene" : "Save changes"}
|
||||
</Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const setActiveScene = (activeScene) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
|
||||
};
|
||||
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
scene: ownProps.id ? state.scenes[ownProps.id] : null,
|
||||
});
|
||||
const SceneModalContainer = connect(
|
||||
mapStateToProps,
|
||||
{ ...RemoteService, setActiveScene },
|
||||
null,
|
||||
{ forwardRef: true }
|
||||
)(SceneModal);
|
||||
export default SceneModalContainer;
|
||||
|
|
@ -5,6 +5,7 @@ import { RemoteService } from "../../remote";
|
|||
class ScenesPanel extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
console.log(this.props.activeRoom, this.props.activeTab);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -240,6 +240,24 @@ function reducer(previousState, action) {
|
|||
},
|
||||
});
|
||||
break;
|
||||
case "SET_ACTIVE_SCENE":
|
||||
newState = update(previousState, {
|
||||
active: {
|
||||
activeScene: {
|
||||
$set: action.activeScene,
|
||||
},
|
||||
},
|
||||
});
|
||||
break;
|
||||
case "SET_ACTIVE_AUTOMATION":
|
||||
newState = update(previousState, {
|
||||
active: {
|
||||
activeAutomation: {
|
||||
$set: action.activeAutomation,
|
||||
},
|
||||
},
|
||||
});
|
||||
break;
|
||||
case "REDUX_WEBSOCKET::MESSAGE":
|
||||
const devices = JSON.parse(action.payload.message);
|
||||
console.log(devices);
|
||||
|
|
@ -261,10 +279,14 @@ const initState = {
|
|||
errors: {},
|
||||
pendingJoins: {
|
||||
rooms: {},
|
||||
scenes: {},
|
||||
automations: {},
|
||||
},
|
||||
active: {
|
||||
activeRoom: -1,
|
||||
activeTab: "Devices",
|
||||
activeScene: -1,
|
||||
activeAutomation: -1,
|
||||
},
|
||||
login: {
|
||||
loggedIn: false,
|
||||
|
|
@ -273,6 +295,10 @@ const initState = {
|
|||
userInfo: null,
|
||||
/** @type {[integer]Room} */
|
||||
rooms: {},
|
||||
/** @type {[integer]Scenes} */
|
||||
scenes: {},
|
||||
/** @type {[integer]Automations} */
|
||||
automations: {},
|
||||
/** @type {[integer]Device} */
|
||||
devices: {},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -56,6 +56,14 @@ export const appActions = {
|
|||
type: "SET_ACTIVE_TAB",
|
||||
activeTab,
|
||||
}),
|
||||
setActiveScene: (activeScene = -1) => ({
|
||||
type: "SET_ACTIVE_SCENE",
|
||||
activeScene,
|
||||
}),
|
||||
setActiveAutomations: (activeAutomation = -1) => ({
|
||||
type: "SET_ACTIVE_AUTOMATION",
|
||||
activeAutomation,
|
||||
}),
|
||||
};
|
||||
|
||||
export default actions;
|
||||
|
|
|
|||
165
smart-hut/src/views/AutomationsNavbar.js
Normal file
165
smart-hut/src/views/AutomationsNavbar.js
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
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;
|
||||
|
|
@ -3,6 +3,8 @@ import DevicePanel from "../components/dashboard/DevicePanel";
|
|||
import ScenesPanel from "../components/dashboard/ScenesPanel";
|
||||
import AutomationsPanel from "../components/dashboard/AutomationsPanel";
|
||||
import Navbar from "./Navbar";
|
||||
import ScenesNavbar from "./ScenesNavbar";
|
||||
import AutomationsNavbar from "./AutomationsNavbar";
|
||||
import MyHeader from "../components/HeaderController";
|
||||
import { Grid, Responsive, Button } from "semantic-ui-react";
|
||||
import {
|
||||
|
|
@ -46,6 +48,19 @@ class Dashboard extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
renderNavbar(tab) {
|
||||
switch (tab) {
|
||||
case "Devices":
|
||||
return <Navbar />;
|
||||
case "Scenes":
|
||||
return <ScenesNavbar />;
|
||||
case "Automations":
|
||||
return <AutomationsNavbar />;
|
||||
default:
|
||||
return <h1>ERROR</h1>;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{ background: "#1b1c1d" }}>
|
||||
|
|
@ -87,7 +102,7 @@ class Dashboard extends Component {
|
|||
</Grid.Row>
|
||||
<Grid.Row color="black">
|
||||
<Grid.Column width={3}>
|
||||
<Navbar />
|
||||
{this.renderNavbar(this.activeTab)}
|
||||
</Grid.Column>
|
||||
|
||||
<Grid.Column width={13}>
|
||||
|
|
|
|||
162
smart-hut/src/views/ScenesNavbar.js
Normal file
162
smart-hut/src/views/ScenesNavbar.js
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Menu,
|
||||
Button,
|
||||
Grid,
|
||||
Icon,
|
||||
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);
|
||||
}
|
||||
|
||||
get activeItemScene() {
|
||||
return this.props.activeScene;
|
||||
}
|
||||
|
||||
set activeItemScene(item) {
|
||||
this.props.setActiveScene(item);
|
||||
}
|
||||
|
||||
get activeItemSceneName() {
|
||||
if (this.props.activeScene === -1) return "Home";
|
||||
return this.props.scenes[this.props.activeScene].name;
|
||||
}
|
||||
|
||||
openCurrentModalMobile() {
|
||||
console.log(this.activeItem, this.props.roomModalRefs);
|
||||
const currentModal = this.props.roomModalRefs[this.activeItem].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="scene"
|
||||
active={this.activeItemScene === -1}
|
||||
onClick={this.selectScene}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Icon name="home" size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>SCENES</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Menu.Item>
|
||||
{
|
||||
//INSERT LIST OF SCENES HERE
|
||||
}
|
||||
<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>
|
||||
<Grid.Column>
|
||||
<Icon name="home" size="small" />
|
||||
</Grid.Column>
|
||||
<Grid.Column>Scene</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Dropdown.Item>
|
||||
|
||||
{
|
||||
//INSERT LIST OF SCENES HERE
|
||||
}
|
||||
</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" />
|
||||
EDIT ROOM
|
||||
</Button>
|
||||
</Grid.Column>
|
||||
) : null}
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Responsive>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const setActiveScene = (activeScene) => {
|
||||
return (dispatch) => dispatch(appActions.setActiveScene(activeScene));
|
||||
};
|
||||
|
||||
const mapStateToProps = (state, _) => ({
|
||||
scenes: state.scenes,
|
||||
activeScene: state.active.activeScene,
|
||||
sceneModalRefs: Object.keys(state.scenes).reduce(
|
||||
(acc, key) => ({ ...acc, [key]: React.createRef() }),
|
||||
{}
|
||||
),
|
||||
});
|
||||
const ScenesNavbarContainer = connect(mapStateToProps, {
|
||||
...RemoteService,
|
||||
setActiveScene,
|
||||
})(ScenesNavbar);
|
||||
export default ScenesNavbarContainer;
|
||||
Loading…
Reference in New Issue
Block a user