Basic Tabs system

smart-hut/src/components/dashboard/AutomationsPanel.js

@@ -0,0 +1,23 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { RemoteService } from "../../remote";
+
+class AutomationsPanel extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <h1 color="black">AUTOMATIONS</h1>;
+  }
+}
+
+const mapStateToProps = (state, _) => ({
+  activeRoom: state.active.activeRoom,
+  activeTab: state.active.activeTab,
+});
+const AutomationsPanelContainer = connect(
+  mapStateToProps,
+  RemoteService
+)(AutomationsPanel);
+export default AutomationsPanelContainer;

smart-hut/src/components/dashboard/DevicePanel.js

@@ -2,7 +2,6 @@
 
 import React, { Component } from "react";
 import { Grid } from "semantic-ui-react";
-import { panelStyle } from "./devices/styleComponents";
 import Device from "./devices/Device";
 import NewDevice from "./devices/NewDevice";
 import { connect } from "react-redux";
@@ -23,22 +22,20 @@ class DevicePanel extends Component {
 
   render() {
     return (
-      <div style={panelStyle}>
-        <Grid doubling columns={2} divided="vertically">
-          {this.props.devices.map((e, i) => {
-            return (
-              <Grid.Column key={i}>
-                <Device id={e.id} />
-              </Grid.Column>
-            );
-          })}
-          {!this.props.isActiveRoomHome ? (
-            <Grid.Column>
-              <NewDevice />
+      <Grid doubling columns={2} divided="vertically">
+        {this.props.devices.map((e, i) => {
+          return (
+            <Grid.Column key={i}>
+              <Device id={e.id} />
             </Grid.Column>
-          ) : null}
-        </Grid>
-      </div>
+          );
+        })}
+        {!this.props.isActiveRoomHome ? (
+          <Grid.Column>
+            <NewDevice />
+          </Grid.Column>
+        ) : null}
+      </Grid>
     );
   }
 }

smart-hut/src/components/dashboard/ScenesPanel.js

@@ -0,0 +1,23 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { RemoteService } from "../../remote";
+
+class ScenesPanel extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <h1 color="black">SCENES</h1>;
+  }
+}
+
+const mapStateToProps = (state, _) => ({
+  activeRoom: state.active.activeRoom,
+  activeTab: state.active.activeTab,
+});
+const ScenesPanelContainer = connect(
+  mapStateToProps,
+  RemoteService
+)(ScenesPanel);
+export default ScenesPanelContainer;

smart-hut/src/components/dashboard/devices/styleComponents.js

@@ -23,6 +23,7 @@ export const panelStyle = {
   height: "100vh",
   width: "auto",
   padding: "0rem 3rem",
+  color: "#000000",
 };
 
 export const editModeStyle = {

smart-hut/src/store.js

@@ -231,6 +231,15 @@ function reducer(previousState, action) {
         },
       });
       break;
+    case "SET_ACTIVE_TAB":
+      newState = update(previousState, {
+        active: {
+          activeTab: {
+            $set: action.activeTab,
+          },
+        },
+      });
+      break;
     case "REDUX_WEBSOCKET::MESSAGE":
       const devices = JSON.parse(action.payload.message);
       console.log(devices);
@@ -255,6 +264,7 @@ const initState = {
   },
   active: {
     activeRoom: -1,
+    activeTab: "Devices",
   },
   login: {
     loggedIn: false,

smart-hut/src/storeActions.js

@@ -52,6 +52,10 @@ export const appActions = {
     type: "SET_ACTIVE_ROOM",
     activeRoom,
   }),
+  setActiveTab: (activeTab) => ({
+    type: "SET_ACTIVE_TAB",
+    activeTab,
+  }),
 };
 
 export default actions;

smart-hut/src/views/Dashboard.js

@@ -1,10 +1,48 @@
 import React, { Component } from "react";
 import DevicePanel from "../components/dashboard/DevicePanel";
+import ScenesPanel from "../components/dashboard/ScenesPanel";
+import AutomationsPanel from "../components/dashboard/AutomationsPanel";
 import Navbar from "./Navbar";
 import MyHeader from "../components/HeaderController";
-import { Grid, Responsive } from "semantic-ui-react";
+import { Grid, Responsive, Button } from "semantic-ui-react";
+import { panelStyle } from "../components/dashboard/devices/styleComponents";
+
+import { RemoteService } from "../remote";
+import { connect } from "react-redux";
+import { appActions } from "../storeActions";
+
+class Dashboard extends Component {
+  constructor(props) {
+    super(props);
+
+    this.selectTab = this.selectTab.bind(this);
+  }
+
+  get activeTab() {
+    return this.props.activeTab;
+  }
+
+  set activeTab(tab) {
+    this.props.setActiveTab(tab);
+  }
+
+  selectTab(e, { name }) {
+    this.activeTab = name;
+  }
+
+  renderTab(tab) {
+    switch (tab) {
+      case "Devices":
+        return <DevicePanel />;
+      case "Scenes":
+        return <ScenesPanel />;
+      case "Automations":
+        return <AutomationsPanel />;
+      default:
+        return <h1>ERROR</h1>;
+    }
+  }
 
-export default class Dashboard extends Component {
   render() {
     return (
       <div style={{ height: "110vh", background: "#1b1c1d" }}>
@@ -15,13 +53,38 @@ export default class Dashboard extends Component {
                 <MyHeader />
               </Grid.Column>
             </Grid.Row>
+            <Grid.Row color="black" centered>
+              <Grid.Column>
+                <Button
+                  name="Devices"
+                  content="Devices"
+                  active={this.activeTab === "Devices"}
+                  color={this.activeTab === "Devices" ? "green" : "olive"}
+                  onClick={this.selectTab}
+                />
+                <Button
+                  name="Scenes"
+                  content="Scenes"
+                  active={this.activeTab === "Scenes"}
+                  color={this.activeTab === "Scenes" ? "green" : "olive"}
+                  onClick={this.selectTab}
+                />
+                <Button
+                  name="Automations"
+                  content="Automations"
+                  active={this.activeTab === "Automations"}
+                  color={this.activeTab === "Automations" ? "green" : "olive"}
+                  onClick={this.selectTab}
+                />
+              </Grid.Column>
+            </Grid.Row>
             <Grid.Row color="black">
               <Grid.Column width={3}>
                 <Navbar />
               </Grid.Column>
 
               <Grid.Column width={13}>
-                <DevicePanel />
+                <div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
               </Grid.Column>
             </Grid.Row>
           </Grid>
@@ -49,3 +112,17 @@ export default class Dashboard extends Component {
     );
   }
 }
+
+const mapStateToProps = (state, _) => ({
+  activeTab: state.active.activeTab,
+});
+
+const setActiveTab = (activeTab) => {
+  return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
+};
+
+const DashboardContainer = connect(mapStateToProps, {
+  ...RemoteService,
+  setActiveTab,
+})(Dashboard);
+export default DashboardContainer;