smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

runned beautifier

Browse source
This commit is contained in:
Claudio Maggioni (maggicl) 2020-04-28 12:04:01 +02:00
parent b9be38d467
commit 5b2bd7cc48
6 changed files with 981 additions and 1029 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
smart-hut/src/App.js
View file

@ -69,7 +69,7 @@ class App extends Component {
</Route>
<Route path="/videocam">
<Videocam />
</Route>
</Route>
<Route component={FourOhFour} />
</Switch>
</BrowserRouter>

14
smart-hut/src/components/dashboard/Automations.css
View file

@ -1,18 +1,18 @@
.segment-automations {
top: 10%;
top: 10%;
}
.list-index {
font-size: 1.5rem;
font-size: 1.5rem;
}
.remove-icon {
display: inline !important;
margin-left: 1rem !important;
display: inline !important;
margin-left: 1rem !important;
}
.trigger-item {
display: flex !important;
justify-content: center !important;
align-items: center !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}

88
smart-hut/src/components/dashboard/DevicePanel.js
View file

@ -8,58 +8,58 @@ import { connect } from "react-redux";
import { RemoteService } from "../../remote";
class DevicePanel extends Component {
constructor(props) {
super(props);
constructor(props) {
super(props);
this.getDevices();
}
this.getDevices();
}
getDevices() {
if (this.props.tab === "Devices") {
this.props
.fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err));
}
getDevices() {
if (this.props.tab === "Devices") {
this.props
.fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err));
}
}
render() {
return (
<Grid doubling columns={2} divided="vertically">
{this.props.devices.map((e, i) => {
return (
<Grid.Column key={i}>
<Device tab={this.props.tab} id={e.id} />
</Grid.Column>
);
})}
{!this.props.isActiveRoomHome ? (
<Grid.Column>
<NewDevice />
</Grid.Column>
) : null}
</Grid>
);
}
render() {
return (
<Grid doubling columns={2} divided="vertically">
{this.props.devices.map((e, i) => {
return (
<Grid.Column key={i}>
<Device tab={this.props.tab} id={e.id} />
</Grid.Column>
);
})}
{!this.props.isActiveRoomHome ? (
<Grid.Column>
<NewDevice />
</Grid.Column>
) : null}
</Grid>
);
}
}
const mapStateToProps = (state, _) => ({
get devices() {
if (state.active.activeRoom === -1) {
return Object.values(state.devices);
} else {
const deviceArray = [
...state.rooms[state.active.activeRoom].devices,
].sort();
return deviceArray.map((id) => state.devices[id]);
}
},
get isActiveRoomHome() {
return state.active.activeRoom === -1;
},
activeRoom: state.active.activeRoom,
get devices() {
if (state.active.activeRoom === -1) {
return Object.values(state.devices);
} else {
const deviceArray = [
...state.rooms[state.active.activeRoom].devices,
].sort();
return deviceArray.map((id) => state.devices[id]);
}
},
get isActiveRoomHome() {
return state.active.activeRoom === -1;
},
activeRoom: state.active.activeRoom,
});
const DevicePanelContainer = connect(
mapStateToProps,
RemoteService
mapStateToProps,
RemoteService
)(DevicePanel);
export default DevicePanelContainer;

12
smart-hut/src/components/dashboard/devices/NewDevice.js
View file

@ -106,7 +106,7 @@ class NewDevice extends Component {
switch: "New switch",
buttonDimmer: "New button dimmer",
knobDimmer: "New knob dimmer",
securityCamera: "New security camera"
securityCamera: "New security camera",
};
if (this.state.deviceName === "") {
@ -188,11 +188,11 @@ class NewDevice extends Component {
image: { avatar: true, src: "/img/plusMinus.svg" },
},
{
key: "securityCamera",
text: "Security Camera",
value: "securityCamera",
image: { avatar: true, src: "/img/plusMinus.svg" },
}
key: "securityCamera",
text: "Security Camera",
value: "securityCamera",
image: { avatar: true, src: "/img/plusMinus.svg" },
},
];
const sensorOptions = [
{

1560
smart-hut/src/remote.js
View file

File diff suppressed because it is too large Load diff

334
smart-hut/src/views/Dashboard.js
View file

@ -8,8 +8,8 @@ import AutomationsNavbar from "./AutomationsNavbar";
import MyHeader from "../components/HeaderController";
import { Grid, Responsive, Button } from "semantic-ui-react";
import {
panelStyle,
mobilePanelStyle,
panelStyle,
mobilePanelStyle,
} from "../components/dashboard/devices/styleComponents";
import { RemoteService } from "../remote";
@ -17,203 +17,177 @@ import { connect } from "react-redux";
import { appActions } from "../storeActions";
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.activeTab = "Automations"; //TODO Remove this to not put automations first
this.selectTab = this.selectTab.bind(this);
}
constructor(props) {
super(props);
this.state = this.initialState;
this.setInitialState();
this.activeTab = "Automations"; //TODO Remove this to not put automations first
this.selectTab = this.selectTab.bind(this);
}
get initialState() {
return {
activeTab: this.activeTab,
};
}
get initialState() {
return {
activeTab: this.activeTab,
};
}
setInitialState() {
this.setState(this.initialState);
}
setInitialState() {
this.setState(this.initialState);
}
get activeTab() {
return this.props.activeTab;
}
get activeTab() {
return this.props.activeTab;
}
set activeTab(tab) {
this.props.setActiveTab(tab);
}
set activeTab(tab) {
this.props.setActiveTab(tab);
}
selectTab(e, { name }) {
this.setState({ activeTab: name });
this.activeTab = name;
}
selectTab(e, { name }) {
this.setState({ activeTab: name });
this.activeTab = name;
}
renderTab(tab) {
switch (tab) {
case "Devices":
return <DevicePanel tab={this.state.activeTab} />;
case "Scenes":
return <ScenesPanel tab={this.state.activeTab} />;
case "Automations":
return <AutomationsPanel />;
default:
return <h1>ERROR</h1>;
}
renderTab(tab) {
switch (tab) {
case "Devices":
return <DevicePanel tab={this.state.activeTab} />;
case "Scenes":
return <ScenesPanel tab={this.state.activeTab} />;
case "Automations":
return <AutomationsPanel />;
default:
return <h1>ERROR</h1>;
}
}
renderNavbar(tab) {
switch (tab) {
case "Devices":
return <Navbar />;
case "Scenes":
return <ScenesNavbar />;
case "Automations":
return <AutomationsNavbar />;
default:
return <h1>ERROR</h1>;
}
renderNavbar(tab) {
switch (tab) {
case "Devices":
return <Navbar />;
case "Scenes":
return <ScenesNavbar />;
case "Automations":
return <AutomationsNavbar />;
default:
return <h1>ERROR</h1>;
}
}
render() {
return (
<div style={{ background: "#1b1c1d" }}>
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={3}></Grid.Column>
<Grid.Column textAlign="center" width={13}>
<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>
<Grid.Row color="black">
<Grid.Column width={3}>
{this.renderNavbar(this.activeTab)}
</Grid.Column>
render() {
return (
<div style={{ background: "#1b1c1d" }}>
<Responsive minWidth={768}>
<Grid>
<Grid.Row color="black">
<Grid.Column>
<MyHeader />
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column width={3}></Grid.Column>
<Grid.Column textAlign="center" width={13}>
<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>
<Grid.Row color="black">
<Grid.Column width={3}>
{this.renderNavbar(this.activeTab)}
</Grid.Column>
<Grid.Column width={13}>
<div style={panelStyle}>
{this.renderTab(this.activeTab)}
</div>
</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}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column color="black">
{this.renderNavbar(this.activeTab)}
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<div style={mobilePanelStyle}>
{this.renderTab(this.activeTab)}
</div>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
</div>
);
}
<Grid.Column width={13}>
<div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
</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}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row color="black">
<Grid.Column color="black">
{this.renderNavbar(this.activeTab)}
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
<div style={mobilePanelStyle}>
{this.renderTab(this.activeTab)}
</div>
</Grid.Column>
</Grid.Row>
</Grid>
</Responsive>
</div>
);
}
}
const mapStateToProps = (state, _) => ({
activeTab: state.active.activeTab,
activeTab: state.active.activeTab,
});
const setActiveTab = (activeTab) => {
return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
};
const DashboardContainer = connect(mapStateToProps, {
...RemoteService,
setActiveTab,
...RemoteService,
setActiveTab,
})(Dashboard);
export default DashboardContainer;