From b03e6b1850f9487093dd379c812fe80d238e9c52 Mon Sep 17 00:00:00 2001 From: britea Date: Wed, 15 Apr 2020 15:54:30 +0200 Subject: [PATCH] Added and Fixed Scenes and Automations Modal and Navbars --- smart-hut/src/components/AutomationModal.js | 190 ++++++++++++++++++ smart-hut/src/components/SceneModal.js | 187 +++++++++++++++++ .../src/components/dashboard/ScenesPanel.js | 1 + smart-hut/src/store.js | 26 +++ smart-hut/src/storeActions.js | 8 + smart-hut/src/views/AutomationsNavbar.js | 165 +++++++++++++++ smart-hut/src/views/Dashboard.js | 17 +- smart-hut/src/views/ScenesNavbar.js | 162 +++++++++++++++ 8 files changed, 755 insertions(+), 1 deletion(-) create mode 100644 smart-hut/src/components/AutomationModal.js create mode 100644 smart-hut/src/components/SceneModal.js create mode 100644 smart-hut/src/views/AutomationsNavbar.js create mode 100644 smart-hut/src/views/ScenesNavbar.js diff --git a/smart-hut/src/components/AutomationModal.js b/smart-hut/src/components/AutomationModal.js new file mode 100644 index 0000000..626a6c5 --- /dev/null +++ b/smart-hut/src/components/AutomationModal.js @@ -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 ( +
+ {!this.props.nicolaStop ? ( +
+ + {this.type === "new" ? ( + + ) : ( + + )} + + + {this.type === "new" ? ( + + ) : ( + + )} + +
+ ) : null} + + +
+ {this.type === "new" ? "Add new automation" : "Modify automation"} +
+ + { + //TODO FORM TO ADD OR MODIFY SCENE + } + + {this.type === "modify" ? ( + + ) : null} + + + + + + + +
+ ); + } +} + +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; diff --git a/smart-hut/src/components/SceneModal.js b/smart-hut/src/components/SceneModal.js new file mode 100644 index 0000000..af97d89 --- /dev/null +++ b/smart-hut/src/components/SceneModal.js @@ -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 ( +
+ {!this.props.nicolaStop ? ( +
+ + {this.type === "new" ? ( + + ) : ( + + )} + + + {this.type === "new" ? ( + + ) : ( + + )} + +
+ ) : null} + + +
+ {this.type === "new" ? "Add new scene" : "Modify scene"} +
+ + { + //TODO FORM TO ADD OR MODIFY SCENE + } + + {this.type === "modify" ? ( + + ) : null} + + + + + + + +
+ ); + } +} + +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; diff --git a/smart-hut/src/components/dashboard/ScenesPanel.js b/smart-hut/src/components/dashboard/ScenesPanel.js index e33da64..1a6db3e 100644 --- a/smart-hut/src/components/dashboard/ScenesPanel.js +++ b/smart-hut/src/components/dashboard/ScenesPanel.js @@ -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() { diff --git a/smart-hut/src/store.js b/smart-hut/src/store.js index bc93159..a2b031a 100644 --- a/smart-hut/src/store.js +++ b/smart-hut/src/store.js @@ -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: {}, }; diff --git a/smart-hut/src/storeActions.js b/smart-hut/src/storeActions.js index 349983c..e224b99 100644 --- a/smart-hut/src/storeActions.js +++ b/smart-hut/src/storeActions.js @@ -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; diff --git a/smart-hut/src/views/AutomationsNavbar.js b/smart-hut/src/views/AutomationsNavbar.js new file mode 100644 index 0000000..3378a90 --- /dev/null +++ b/smart-hut/src/views/AutomationsNavbar.js @@ -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 ( +
+ + + + + + + + + + + + + + AUTOMATIONS + + + + { + //INSERT LIST OF AUTOMATIONS HERE + } + + + + + + + + + + + + + + + + + + + + + + + Automations + + + + + { + //INSERT LIST OF AUTOMATIONS HERE + } + + + + + + + + + {this.activeItemAutomation !== -1 ? ( + + + + ) : null} + + + +
+ ); + } +} + +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; diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js index 17a1367..f3c204f 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -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 ; + case "Scenes": + return ; + case "Automations": + return ; + default: + return

ERROR

; + } + } + render() { return (
@@ -87,7 +102,7 @@ class Dashboard extends Component { - + {this.renderNavbar(this.activeTab)} diff --git a/smart-hut/src/views/ScenesNavbar.js b/smart-hut/src/views/ScenesNavbar.js new file mode 100644 index 0000000..27862a6 --- /dev/null +++ b/smart-hut/src/views/ScenesNavbar.js @@ -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 ( +
+ + + + + + + + + + + + + + SCENES + + + + { + //INSERT LIST OF SCENES HERE + } + + + + + + + + + + + + + + + + + + + + + + + Scene + + + + + { + //INSERT LIST OF SCENES HERE + } + + + + + + + + + {this.activeItemScene !== -1 ? ( + + + + ) : null} + + + +
+ ); + } +} + +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;