2020-03-23 20:24:17 +00:00
|
|
|
import React, { Component } from "react";
|
2020-03-09 12:52:27 +00:00
|
|
|
import DevicePanel from "../components/dashboard/DevicePanel";
|
2020-04-14 12:58:03 +00:00
|
|
|
import ScenesPanel from "../components/dashboard/ScenesPanel";
|
|
|
|
import AutomationsPanel from "../components/dashboard/AutomationsPanel";
|
2020-04-24 14:54:50 +00:00
|
|
|
import HostsPanel from "../components/dashboard/HostsPanel";
|
2020-03-23 20:24:17 +00:00
|
|
|
import Navbar from "./Navbar";
|
2020-04-15 13:54:30 +00:00
|
|
|
import ScenesNavbar from "./ScenesNavbar";
|
2020-04-24 14:54:50 +00:00
|
|
|
import HostsNavbar from "./HostsNavbar";
|
2020-03-23 20:24:17 +00:00
|
|
|
import MyHeader from "../components/HeaderController";
|
2020-05-01 14:42:42 +00:00
|
|
|
import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
|
2020-04-14 20:56:00 +00:00
|
|
|
import {
|
2020-04-28 10:04:01 +00:00
|
|
|
panelStyle,
|
|
|
|
mobilePanelStyle,
|
2020-04-14 20:56:00 +00:00
|
|
|
} from "../components/dashboard/devices/styleComponents";
|
2020-04-14 12:58:03 +00:00
|
|
|
|
|
|
|
import { RemoteService } from "../remote";
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
import { appActions } from "../storeActions";
|
|
|
|
|
|
|
|
class Dashboard extends Component {
|
2020-04-28 10:04:01 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = this.initialState;
|
2020-05-01 09:45:19 +00:00
|
|
|
this.activeTab = "Devices";
|
2020-04-28 10:04:01 +00:00
|
|
|
this.selectTab = this.selectTab.bind(this);
|
|
|
|
}
|
2020-04-14 12:58:03 +00:00
|
|
|
|
2020-04-28 10:04:01 +00:00
|
|
|
get initialState() {
|
|
|
|
return {
|
|
|
|
activeTab: this.activeTab,
|
|
|
|
};
|
|
|
|
}
|
2020-04-18 14:26:12 +00:00
|
|
|
|
2020-04-28 10:04:01 +00:00
|
|
|
setInitialState() {
|
|
|
|
this.setState(this.initialState);
|
|
|
|
}
|
2020-04-18 14:26:12 +00:00
|
|
|
|
2020-04-28 10:04:01 +00:00
|
|
|
get activeTab() {
|
|
|
|
return this.props.activeTab;
|
|
|
|
}
|
2020-04-14 12:58:03 +00:00
|
|
|
|
2020-04-28 10:04:01 +00:00
|
|
|
set activeTab(tab) {
|
|
|
|
this.props.setActiveTab(tab);
|
|
|
|
}
|
2020-04-14 12:58:03 +00:00
|
|
|
|
2020-04-28 10:04:01 +00:00
|
|
|
selectTab(e, { name }) {
|
|
|
|
this.setState({ activeTab: name });
|
|
|
|
this.activeTab = name;
|
|
|
|
}
|
2020-04-14 12:58:03 +00:00
|
|
|
|
2020-04-28 10:04:01 +00:00
|
|
|
renderTab(tab) {
|
|
|
|
switch (tab) {
|
|
|
|
case "Devices":
|
|
|
|
return <DevicePanel tab={this.state.activeTab} />;
|
|
|
|
case "Scenes":
|
|
|
|
return <ScenesPanel tab={this.state.activeTab} />;
|
|
|
|
case "Automations":
|
|
|
|
return <AutomationsPanel />;
|
2020-04-24 14:54:50 +00:00
|
|
|
case "Hosts":
|
|
|
|
return <HostsPanel />;
|
2020-04-28 10:04:01 +00:00
|
|
|
default:
|
|
|
|
return <h1>ERROR</h1>;
|
2020-04-14 12:58:03 +00:00
|
|
|
}
|
2020-04-28 10:04:01 +00:00
|
|
|
}
|
2020-03-17 15:20:43 +00:00
|
|
|
|
2020-04-28 10:04:01 +00:00
|
|
|
renderNavbar(tab) {
|
|
|
|
switch (tab) {
|
|
|
|
case "Devices":
|
|
|
|
return <Navbar />;
|
|
|
|
case "Scenes":
|
|
|
|
return <ScenesNavbar />;
|
2020-04-24 14:54:50 +00:00
|
|
|
case "Hosts":
|
|
|
|
return <HostsNavbar />;
|
2020-04-28 10:04:01 +00:00
|
|
|
default:
|
|
|
|
return <h1>ERROR</h1>;
|
2020-04-15 13:54:30 +00:00
|
|
|
}
|
2020-04-28 10:04:01 +00:00
|
|
|
}
|
2020-04-15 13:54:30 +00:00
|
|
|
|
2020-05-01 14:42:42 +00:00
|
|
|
get hasNavbar() {
|
|
|
|
return this.state.activeTab !== "Automations";
|
|
|
|
}
|
|
|
|
|
2020-04-28 10:04:01 +00:00
|
|
|
render() {
|
2020-05-07 07:58:49 +00:00
|
|
|
// needed to correctly assign the background image
|
|
|
|
//in case a room has one.
|
|
|
|
let backgroundImageHelper;
|
|
|
|
if(this.activeTab==="Devices"){
|
|
|
|
backgroundImageHelper=this.props.allRooms;
|
|
|
|
}else{
|
|
|
|
backgroundImageHelper=null;
|
|
|
|
}
|
|
|
|
//console.log("helper is",helper)
|
2020-04-28 10:04:01 +00:00
|
|
|
return (
|
|
|
|
<div style={{ background: "#1b1c1d" }}>
|
|
|
|
<Responsive minWidth={768}>
|
|
|
|
<Grid>
|
2020-05-06 09:13:17 +00:00
|
|
|
<Grid.Row color="black" style={{ paddingBottom: 0 }}>
|
2020-04-28 10:04:01 +00:00
|
|
|
<Grid.Column>
|
|
|
|
<MyHeader />
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
2020-05-06 09:13:17 +00:00
|
|
|
<Grid.Row color="black" style={{ paddingTop: 0 }}>
|
2020-05-01 14:42:42 +00:00
|
|
|
<Grid.Column textAlign="center" width={16}>
|
2020-05-02 14:40:29 +00:00
|
|
|
<Menu fluid widths={4} inverted color="grey">
|
2020-05-01 14:42:42 +00:00
|
|
|
<Menu.Item
|
|
|
|
name="Devices"
|
|
|
|
content="Devices"
|
|
|
|
active={this.activeTab === "Devices"}
|
|
|
|
onClick={this.selectTab}
|
|
|
|
/>
|
|
|
|
<Menu.Item
|
|
|
|
name="Scenes"
|
|
|
|
content="Scenes"
|
|
|
|
active={this.activeTab === "Scenes"}
|
|
|
|
onClick={this.selectTab}
|
|
|
|
/>
|
|
|
|
<Menu.Item
|
|
|
|
name="Automations"
|
|
|
|
content="Automations"
|
|
|
|
active={this.activeTab === "Automations"}
|
|
|
|
onClick={this.selectTab}
|
|
|
|
/>
|
2020-04-24 14:54:50 +00:00
|
|
|
<Menu.Item
|
|
|
|
name="Hosts"
|
2020-05-02 18:50:34 +00:00
|
|
|
content="Hosts and Guests"
|
2020-04-24 14:54:50 +00:00
|
|
|
active={this.activeTab === "Hosts"}
|
|
|
|
onClick={this.selectTab}
|
|
|
|
/>
|
2020-05-01 14:42:42 +00:00
|
|
|
</Menu>
|
2020-04-28 10:04:01 +00:00
|
|
|
</Grid.Column>
|
2020-03-22 16:58:27 +00:00
|
|
|
|
2020-05-01 14:42:42 +00:00
|
|
|
{this.hasNavbar && (
|
|
|
|
<Grid.Column width={3}>
|
|
|
|
{this.renderNavbar(this.activeTab)}
|
|
|
|
</Grid.Column>
|
|
|
|
)}
|
|
|
|
<Grid.Column width={this.hasNavbar ? 13 : 16}>
|
2020-05-07 07:58:49 +00:00
|
|
|
<div style={
|
|
|
|
{backgroundImage:"url("+ backgroundImageHelper+")",
|
|
|
|
backgroundColor: "#fafafa",
|
|
|
|
height: "85vh",
|
|
|
|
padding: "0rem 3rem",
|
|
|
|
color: "#000000",
|
|
|
|
overflow: "auto",
|
|
|
|
maxHeight: "75vh",}
|
|
|
|
}>{this.renderTab(this.activeTab)}</div>
|
2020-04-28 10:04:01 +00:00
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</Responsive>
|
|
|
|
<Responsive maxWidth={768}>
|
|
|
|
<Grid inverted>
|
|
|
|
<Grid.Row color="black">
|
|
|
|
<Grid.Column>
|
|
|
|
<MyHeader />
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
<Grid.Row color="black">
|
|
|
|
<Grid.Column textAlign="center">
|
|
|
|
<Button
|
|
|
|
basic
|
|
|
|
name="Devices"
|
|
|
|
content="Devices"
|
|
|
|
active={this.activeTab === "Devices"}
|
|
|
|
color={this.activeTab === "Devices" ? "yellow" : "grey"}
|
|
|
|
onClick={this.selectTab}
|
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
basic
|
|
|
|
name="Scenes"
|
|
|
|
content="Scenes"
|
|
|
|
active={this.activeTab === "Scenes"}
|
|
|
|
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
|
|
|
|
onClick={this.selectTab}
|
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
basic
|
|
|
|
name="Automations"
|
|
|
|
content="Automations"
|
|
|
|
active={this.activeTab === "Automations"}
|
|
|
|
color={this.activeTab === "Automations" ? "yellow" : "grey"}
|
|
|
|
onClick={this.selectTab}
|
|
|
|
/>
|
2020-04-24 14:54:50 +00:00
|
|
|
<Button
|
|
|
|
basic
|
|
|
|
name="Hosts"
|
|
|
|
content="Hosts"
|
|
|
|
active={this.activeTab === "Hosts"}
|
2020-05-02 18:50:34 +00:00
|
|
|
color={
|
|
|
|
this.activeTab === "Hosts and Guests" ? "yellow" : "grey"
|
|
|
|
}
|
2020-04-24 14:54:50 +00:00
|
|
|
onClick={this.selectTab}
|
|
|
|
/>
|
2020-04-28 10:04:01 +00:00
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
2020-05-01 14:42:42 +00:00
|
|
|
{this.hasNavbar && (
|
|
|
|
<Grid.Row color="black">
|
|
|
|
<Grid.Column color="black">
|
|
|
|
{this.renderNavbar(this.activeTab)}
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
)}
|
2020-04-28 10:04:01 +00:00
|
|
|
<Grid.Row>
|
|
|
|
<Grid.Column>
|
|
|
|
<div style={mobilePanelStyle}>
|
|
|
|
{this.renderTab(this.activeTab)}
|
|
|
|
</div>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid.Row>
|
|
|
|
</Grid>
|
|
|
|
</Responsive>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2020-03-09 12:52:27 +00:00
|
|
|
}
|
2020-04-14 12:58:03 +00:00
|
|
|
|
|
|
|
const mapStateToProps = (state, _) => ({
|
2020-04-28 10:04:01 +00:00
|
|
|
activeTab: state.active.activeTab,
|
2020-05-07 07:58:49 +00:00
|
|
|
get currentRoom(){
|
|
|
|
return state.active.activeRoom;
|
|
|
|
},
|
|
|
|
//this took me way longer to figure out than it should have
|
|
|
|
get allRooms(){
|
|
|
|
if(state.active.activeRoom==-1){
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
for(let i in state.rooms){
|
|
|
|
if(i==state.active.activeRoom){
|
|
|
|
//console.log("check",state.rooms[i].image)
|
|
|
|
if(state.rooms[i].image===undefined){
|
|
|
|
return null;
|
|
|
|
}else{
|
|
|
|
return state.rooms[i].image;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-04-14 12:58:03 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const setActiveTab = (activeTab) => {
|
2020-04-28 10:04:01 +00:00
|
|
|
return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
|
2020-04-14 12:58:03 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const DashboardContainer = connect(mapStateToProps, {
|
2020-04-28 10:04:01 +00:00
|
|
|
...RemoteService,
|
|
|
|
setActiveTab,
|
2020-04-14 12:58:03 +00:00
|
|
|
})(Dashboard);
|
|
|
|
export default DashboardContainer;
|