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>
<Route path="/videocam"> <Route path="/videocam">
<Videocam /> <Videocam />
</Route> </Route>
<Route component={FourOhFour} /> <Route component={FourOhFour} />
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>

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

@ -1,18 +1,18 @@
.segment-automations { .segment-automations {
top: 10%; top: 10%;
} }
.list-index { .list-index {
font-size: 1.5rem; font-size: 1.5rem;
} }
.remove-icon { .remove-icon {
display: inline !important; display: inline !important;
margin-left: 1rem !important; margin-left: 1rem !important;
} }
.trigger-item { .trigger-item {
display: flex !important; display: flex !important;
justify-content: center !important; justify-content: center !important;
align-items: 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"; import { RemoteService } from "../../remote";
class DevicePanel extends Component { class DevicePanel extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.getDevices(); this.getDevices();
} }
getDevices() { getDevices() {
if (this.props.tab === "Devices") { if (this.props.tab === "Devices") {
this.props this.props
.fetchDevices() .fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err)); .catch((err) => console.error(`error fetching devices:`, err));
}
} }
}
render() { render() {
return ( return (
<Grid doubling columns={2} divided="vertically"> <Grid doubling columns={2} divided="vertically">
{this.props.devices.map((e, i) => { {this.props.devices.map((e, i) => {
return ( return (
<Grid.Column key={i}> <Grid.Column key={i}>
<Device tab={this.props.tab} id={e.id} /> <Device tab={this.props.tab} id={e.id} />
</Grid.Column> </Grid.Column>
); );
})} })}
{!this.props.isActiveRoomHome ? ( {!this.props.isActiveRoomHome ? (
<Grid.Column> <Grid.Column>
<NewDevice /> <NewDevice />
</Grid.Column> </Grid.Column>
) : null} ) : null}
</Grid> </Grid>
); );
} }
} }
const mapStateToProps = (state, _) => ({ const mapStateToProps = (state, _) => ({
get devices() { get devices() {
if (state.active.activeRoom === -1) { if (state.active.activeRoom === -1) {
return Object.values(state.devices); return Object.values(state.devices);
} else { } else {
const deviceArray = [ const deviceArray = [
...state.rooms[state.active.activeRoom].devices, ...state.rooms[state.active.activeRoom].devices,
].sort(); ].sort();
return deviceArray.map((id) => state.devices[id]); return deviceArray.map((id) => state.devices[id]);
} }
}, },
get isActiveRoomHome() { get isActiveRoomHome() {
return state.active.activeRoom === -1; return state.active.activeRoom === -1;
}, },
activeRoom: state.active.activeRoom, activeRoom: state.active.activeRoom,
}); });
const DevicePanelContainer = connect( const DevicePanelContainer = connect(
mapStateToProps, mapStateToProps,
RemoteService RemoteService
)(DevicePanel); )(DevicePanel);
export default DevicePanelContainer; 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", switch: "New switch",
buttonDimmer: "New button dimmer", buttonDimmer: "New button dimmer",
knobDimmer: "New knob dimmer", knobDimmer: "New knob dimmer",
securityCamera: "New security camera" securityCamera: "New security camera",
}; };
if (this.state.deviceName === "") { if (this.state.deviceName === "") {
@ -188,11 +188,11 @@ class NewDevice extends Component {
image: { avatar: true, src: "/img/plusMinus.svg" }, image: { avatar: true, src: "/img/plusMinus.svg" },
}, },
{ {
key: "securityCamera", key: "securityCamera",
text: "Security Camera", text: "Security Camera",
value: "securityCamera", value: "securityCamera",
image: { avatar: true, src: "/img/plusMinus.svg" }, image: { avatar: true, src: "/img/plusMinus.svg" },
} },
]; ];
const sensorOptions = [ 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 MyHeader from "../components/HeaderController";
import { Grid, Responsive, Button } from "semantic-ui-react"; import { Grid, Responsive, Button } from "semantic-ui-react";
import { import {
panelStyle, panelStyle,
mobilePanelStyle, mobilePanelStyle,
} from "../components/dashboard/devices/styleComponents"; } from "../components/dashboard/devices/styleComponents";
import { RemoteService } from "../remote"; import { RemoteService } from "../remote";
@ -17,203 +17,177 @@ import { connect } from "react-redux";
import { appActions } from "../storeActions"; import { appActions } from "../storeActions";
class Dashboard extends Component { class Dashboard extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = this.initialState; this.state = this.initialState;
this.setInitialState(); this.setInitialState();
this.activeTab = "Automations"; //TODO Remove this to not put automations first this.activeTab = "Automations"; //TODO Remove this to not put automations first
this.selectTab = this.selectTab.bind(this); this.selectTab = this.selectTab.bind(this);
} }
get initialState() { get initialState() {
return { return {
activeTab: this.activeTab, activeTab: this.activeTab,
}; };
} }
setInitialState() { setInitialState() {
this.setState(this.initialState); this.setState(this.initialState);
} }
get activeTab() { get activeTab() {
return this.props.activeTab; return this.props.activeTab;
} }
set activeTab(tab) { set activeTab(tab) {
this.props.setActiveTab(tab); this.props.setActiveTab(tab);
} }
selectTab(e, { name }) { selectTab(e, { name }) {
this.setState({ activeTab: name }); this.setState({ activeTab: name });
this.activeTab = name; this.activeTab = name;
} }
renderTab(tab) { renderTab(tab) {
switch (tab) { switch (tab) {
case "Devices": case "Devices":
return <DevicePanel tab={this.state.activeTab} />; return <DevicePanel tab={this.state.activeTab} />;
case "Scenes": case "Scenes":
return <ScenesPanel tab={this.state.activeTab} />; return <ScenesPanel tab={this.state.activeTab} />;
case "Automations": case "Automations":
return <AutomationsPanel />; return <AutomationsPanel />;
default: default:
return <h1>ERROR</h1>; return <h1>ERROR</h1>;
}
} }
}
renderNavbar(tab) { renderNavbar(tab) {
switch (tab) { switch (tab) {
case "Devices": case "Devices":
return <Navbar />; return <Navbar />;
case "Scenes": case "Scenes":
return <ScenesNavbar />; return <ScenesNavbar />;
case "Automations": case "Automations":
return <AutomationsNavbar />; return <AutomationsNavbar />;
default: default:
return <h1>ERROR</h1>; return <h1>ERROR</h1>;
}
} }
}
render() { render() {
return ( return (
<div style={{ background: "#1b1c1d" }}> <div style={{ background: "#1b1c1d" }}>
<Responsive minWidth={768}> <Responsive minWidth={768}>
<Grid> <Grid>
<Grid.Row color="black"> <Grid.Row color="black">
<Grid.Column> <Grid.Column>
<MyHeader /> <MyHeader />
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
<Grid.Row color="black"> <Grid.Row color="black">
<Grid.Column width={3}></Grid.Column> <Grid.Column width={3}></Grid.Column>
<Grid.Column textAlign="center" width={13}> <Grid.Column textAlign="center" width={13}>
<Button <Button
basic basic
name="Devices" name="Devices"
content="Devices" content="Devices"
active={this.activeTab === "Devices"} active={this.activeTab === "Devices"}
color={ color={this.activeTab === "Devices" ? "yellow" : "grey"}
this.activeTab === "Devices" onClick={this.selectTab}
? "yellow" />
: "grey" <Button
} basic
onClick={this.selectTab} name="Scenes"
/> content="Scenes"
<Button active={this.activeTab === "Scenes"}
basic color={this.activeTab === "Scenes" ? "yellow" : "grey"}
name="Scenes" onClick={this.selectTab}
content="Scenes" />
active={this.activeTab === "Scenes"} <Button
color={ basic
this.activeTab === "Scenes" name="Automations"
? "yellow" content="Automations"
: "grey" active={this.activeTab === "Automations"}
} color={this.activeTab === "Automations" ? "yellow" : "grey"}
onClick={this.selectTab} onClick={this.selectTab}
/> />
<Button </Grid.Column>
basic </Grid.Row>
name="Automations" <Grid.Row color="black">
content="Automations" <Grid.Column width={3}>
active={this.activeTab === "Automations"} {this.renderNavbar(this.activeTab)}
color={ </Grid.Column>
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}> <Grid.Column width={13}>
<div style={panelStyle}> <div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
{this.renderTab(this.activeTab)} </Grid.Column>
</div> </Grid.Row>
</Grid.Column> </Grid>
</Grid.Row> </Responsive>
</Grid> <Responsive maxWidth={768}>
</Responsive> <Grid inverted>
<Responsive maxWidth={768}> <Grid.Row color="black">
<Grid inverted> <Grid.Column>
<Grid.Row color="black"> <MyHeader />
<Grid.Column> </Grid.Column>
<MyHeader /> </Grid.Row>
</Grid.Column> <Grid.Row color="black">
</Grid.Row> <Grid.Column textAlign="center">
<Grid.Row color="black"> <Button
<Grid.Column textAlign="center"> basic
<Button name="Devices"
basic content="Devices"
name="Devices" active={this.activeTab === "Devices"}
content="Devices" color={this.activeTab === "Devices" ? "yellow" : "grey"}
active={this.activeTab === "Devices"} onClick={this.selectTab}
color={ />
this.activeTab === "Devices" <Button
? "yellow" basic
: "grey" name="Scenes"
} content="Scenes"
onClick={this.selectTab} active={this.activeTab === "Scenes"}
/> color={this.activeTab === "Scenes" ? "yellow" : "grey"}
<Button onClick={this.selectTab}
basic />
name="Scenes" <Button
content="Scenes" basic
active={this.activeTab === "Scenes"} name="Automations"
color={ content="Automations"
this.activeTab === "Scenes" active={this.activeTab === "Automations"}
? "yellow" color={this.activeTab === "Automations" ? "yellow" : "grey"}
: "grey" onClick={this.selectTab}
} />
onClick={this.selectTab} </Grid.Column>
/> </Grid.Row>
<Button <Grid.Row color="black">
basic <Grid.Column color="black">
name="Automations" {this.renderNavbar(this.activeTab)}
content="Automations" </Grid.Column>
active={this.activeTab === "Automations"} </Grid.Row>
color={ <Grid.Row>
this.activeTab === "Automations" <Grid.Column>
? "yellow" <div style={mobilePanelStyle}>
: "grey" {this.renderTab(this.activeTab)}
} </div>
onClick={this.selectTab} </Grid.Column>
/> </Grid.Row>
</Grid.Column> </Grid>
</Grid.Row> </Responsive>
<Grid.Row color="black"> </div>
<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, _) => ({ const mapStateToProps = (state, _) => ({
activeTab: state.active.activeTab, activeTab: state.active.activeTab,
}); });
const setActiveTab = (activeTab) => { const setActiveTab = (activeTab) => {
return (dispatch) => dispatch(appActions.setActiveTab(activeTab)); return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
}; };
const DashboardContainer = connect(mapStateToProps, { const DashboardContainer = connect(mapStateToProps, {
...RemoteService, ...RemoteService,
setActiveTab, setActiveTab,
})(Dashboard); })(Dashboard);
export default DashboardContainer; export default DashboardContainer;