152 lines
4.2 KiB
JavaScript
152 lines
4.2 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Grid,
|
|
Divider,
|
|
Button,
|
|
Label,
|
|
Responsive,
|
|
Checkbox,
|
|
Segment, Image,
|
|
} from 'semantic-ui-react';
|
|
|
|
import { withRouter } from 'react-router-dom';
|
|
import { connect } from 'react-redux';
|
|
import { RemoteService } from '../remote';
|
|
|
|
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) {
|
|
const 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;
|