frontend/smart-hut/src/views/Dashboard.js

194 lines
5.6 KiB
JavaScript
Raw Normal View History

2020-03-23 20:24:17 +00:00
import React, { Component } from "react";
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-03-23 20:24:17 +00:00
import Navbar from "./Navbar";
import ScenesNavbar from "./ScenesNavbar";
import AutomationsNavbar from "./AutomationsNavbar";
2020-03-23 20:24:17 +00:00
import MyHeader from "../components/HeaderController";
2020-04-14 12:58:03 +00:00
import { Grid, Responsive, Button } from "semantic-ui-react";
2020-04-14 20:56:00 +00:00
import {
panelStyle,
mobilePanelStyle,
} 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 {
constructor(props) {
super(props);
2020-04-18 14:26:12 +00:00
this.state = this.initialState;
this.setInitialState();
2020-04-14 12:58:03 +00:00
this.selectTab = this.selectTab.bind(this);
}
2020-04-18 14:26:12 +00:00
get initialState() {
return {
activeTab: this.activeTab,
};
}
setInitialState() {
this.setState(this.initialState);
}
2020-04-14 12:58:03 +00:00
get activeTab() {
return this.props.activeTab;
}
set activeTab(tab) {
this.props.setActiveTab(tab);
}
selectTab(e, { name }) {
2020-04-18 14:26:12 +00:00
this.setState({ activeTab: name });
2020-04-14 12:58:03 +00:00
this.activeTab = name;
}
renderTab(tab) {
switch (tab) {
case "Devices":
2020-04-18 14:26:12 +00:00
return <DevicePanel tab={this.state.activeTab} />;
2020-04-14 12:58:03 +00:00
case "Scenes":
return <ScenesPanel />;
case "Automations":
return <AutomationsPanel />;
default:
return <h1>ERROR</h1>;
}
}
2020-03-17 15:20:43 +00:00
renderNavbar(tab) {
switch (tab) {
case "Devices":
return <Navbar />;
case "Scenes":
return <ScenesNavbar />;
case "Automations":
return <AutomationsNavbar />;
default:
return <h1>ERROR</h1>;
}
}
2020-03-23 20:24:17 +00:00
render() {
return (
2020-04-14 20:56:00 +00:00
<div style={{ background: "#1b1c1d" }}>
2020-03-23 20:24:17 +00:00
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
2020-03-22 16:58:27 +00:00
<Grid.Column>
2020-04-09 15:24:30 +00:00
<MyHeader />
2020-03-22 16:58:27 +00:00
</Grid.Column>
</Grid.Row>
2020-04-14 20:56:00 +00:00
<Grid.Row color="black">
<Grid.Column width={3}></Grid.Column>
<Grid.Column textAlign="center" width={13}>
2020-04-14 12:58:03 +00:00
<Button
2020-04-14 20:56:00 +00:00
basic
2020-04-14 12:58:03 +00:00
name="Devices"
content="Devices"
active={this.activeTab === "Devices"}
2020-04-14 20:56:00 +00:00
color={this.activeTab === "Devices" ? "yellow" : "grey"}
2020-04-14 12:58:03 +00:00
onClick={this.selectTab}
/>
<Button
2020-04-14 20:56:00 +00:00
basic
2020-04-14 12:58:03 +00:00
name="Scenes"
content="Scenes"
active={this.activeTab === "Scenes"}
2020-04-14 20:56:00 +00:00
color={this.activeTab === "Scenes" ? "yellow" : "grey"}
2020-04-14 12:58:03 +00:00
onClick={this.selectTab}
/>
<Button
2020-04-14 20:56:00 +00:00
basic
2020-04-14 12:58:03 +00:00
name="Automations"
content="Automations"
active={this.activeTab === "Automations"}
2020-04-14 20:56:00 +00:00
color={this.activeTab === "Automations" ? "yellow" : "grey"}
2020-04-14 12:58:03 +00:00
onClick={this.selectTab}
/>
</Grid.Column>
</Grid.Row>
2020-03-23 20:24:17 +00:00
<Grid.Row color="black">
<Grid.Column width={3}>
{this.renderNavbar(this.activeTab)}
2020-03-23 20:24:17 +00:00
</Grid.Column>
2020-03-22 16:58:27 +00:00
2020-03-23 20:24:17 +00:00
<Grid.Column width={13}>
2020-04-14 12:58:03 +00:00
<div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
2020-03-23 20:24:17 +00:00
</Grid.Column>
</Grid.Row>
2020-03-22 16:58:27 +00:00
</Grid>
</Responsive>
2020-03-23 20:24:17 +00:00
<Responsive maxWidth={768}>
2020-03-22 16:58:27 +00:00
<Grid inverted>
2020-03-23 20:24:17 +00:00
<Grid.Row color="black">
<Grid.Column>
2020-04-09 15:24:30 +00:00
<MyHeader />
2020-03-23 20:24:17 +00:00
</Grid.Column>
</Grid.Row>
2020-04-14 20:56:00 +00:00
<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}
/>
</Grid.Column>
</Grid.Row>
2020-03-23 20:24:17 +00:00
<Grid.Row color="black">
<Grid.Column color="black">
2020-04-18 14:26:12 +00:00
{this.renderNavbar(this.activeTab)}
2020-03-23 20:24:17 +00:00
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
2020-04-14 20:56:00 +00:00
<div style={mobilePanelStyle}>
{this.renderTab(this.activeTab)}
</div>
2020-03-23 20:24:17 +00:00
</Grid.Column>
</Grid.Row>
</Grid>
2020-03-22 16:58:27 +00:00
</Responsive>
2020-03-11 16:38:04 +00:00
</div>
2020-03-23 20:24:17 +00:00
);
2020-03-11 16:38:04 +00:00
}
}
2020-04-14 12:58:03 +00:00
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;