151 lines
4.3 KiB
JavaScript
151 lines
4.3 KiB
JavaScript
import React from "react";
|
|
import {
|
|
Grid,
|
|
Divider,
|
|
Button,
|
|
Label,
|
|
Responsive,
|
|
Checkbox,
|
|
} from "semantic-ui-react";
|
|
import { Segment, Image } from "semantic-ui-react";
|
|
import { RemoteService } from "../remote";
|
|
import { withRouter } from "react-router-dom";
|
|
import { connect } from "react-redux";
|
|
|
|
const IconHomeImage = () => (
|
|
<Image
|
|
src="smart-home.png"
|
|
style={{ width: "50px", height: "auto" }}
|
|
centered
|
|
as="a"
|
|
href="/"
|
|
/>
|
|
);
|
|
|
|
const TitleImage = () => <Image src="sm_logo.png" size="medium" centered />;
|
|
|
|
export class MyHeader extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.getInfo();
|
|
this.logout = this.logout.bind(this);
|
|
}
|
|
|
|
logout() {
|
|
this.props.logout().then(() => this.props.history.push("/"));
|
|
}
|
|
|
|
getInfo() {
|
|
this.props
|
|
.fetchUserInfo()
|
|
.catch((err) => console.error("MyHeader fetch user info error", err));
|
|
}
|
|
|
|
setCameraEnabled(val) {
|
|
let enabled = {
|
|
cameraEnabled: val,
|
|
};
|
|
this.props
|
|
.userPermissions(enabled)
|
|
.then(() => this.getInfo())
|
|
.catch((err) => console.error("Camera enabled", err));
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<Responsive minWidth={768}>
|
|
<Grid columns="equal" divided inverted padded>
|
|
<Grid.Row color="black" textAlign="center">
|
|
<Grid.Column width={4} height={0.5}>
|
|
<Segment color="black" inverted>
|
|
<IconHomeImage />
|
|
</Segment>
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Segment color="black" inverted>
|
|
<TitleImage />
|
|
</Segment>
|
|
</Grid.Column>
|
|
<Grid.Column width={4} heigth={1}>
|
|
<Label as="a" image color="black">
|
|
<img alt="SmartHut logo" src="smart-home.png" />
|
|
{this.props.username}
|
|
</Label>
|
|
<Divider />
|
|
<Button basic inverted onClick={this.logout}>
|
|
Logout
|
|
</Button>
|
|
<Segment
|
|
compact
|
|
style={{
|
|
margin: "auto",
|
|
marginTop: "1em",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<Checkbox
|
|
label={<label>Share cameras</label>}
|
|
checked={this.props.cameraEnabled}
|
|
toggle
|
|
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
|
/>
|
|
</Segment>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
<Responsive maxWidth={768}>
|
|
<Grid columns="equal" divided inverted padded>
|
|
<Grid.Row color="black" textAlign="center">
|
|
<Segment color="black" inverted>
|
|
<TitleImage />
|
|
</Segment>
|
|
</Grid.Row>
|
|
<Grid.Row color="black" textAlign="center">
|
|
<Grid.Column>
|
|
<IconHomeImage />
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Label as="a" image color="black">
|
|
<img alt="SmartHut logo" src="smart-home.png" />
|
|
{this.props.username}
|
|
</Label>
|
|
<Divider />
|
|
<Button onClick={this.logout}>Logout</Button>
|
|
<Segment
|
|
compact
|
|
style={{
|
|
margin: "auto",
|
|
marginTop: "1em",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<Checkbox
|
|
label={<label>Share cameras</label>}
|
|
checked={this.props.cameraEnabled}
|
|
toggle
|
|
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
|
/>
|
|
</Segment>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Responsive>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state, _) => ({
|
|
username:
|
|
state.userInfo && state.userInfo.username ? state.userInfo.username : "",
|
|
cameraEnabled: state.userInfo ? state.userInfo.cameraEnabled : false,
|
|
});
|
|
const LoginContainer = connect(
|
|
mapStateToProps,
|
|
RemoteService
|
|
)(withRouter(MyHeader));
|
|
export default LoginContainer;
|