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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {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;