Add Navigation/Header Component
This commit is contained in:
Jannis Mattheis
Jannis Mattheis
parent
f820ba863a
commit
632f59d049
|
|
@ -0,0 +1,93 @@
|
|||
import React, {Component} from 'react';
|
||||
import AppBar from 'material-ui/AppBar';
|
||||
import Button from 'material-ui/Button';
|
||||
import Toolbar from 'material-ui/Toolbar';
|
||||
import Typography from 'material-ui/Typography';
|
||||
import {withStyles} from 'material-ui/styles';
|
||||
import PropTypes from 'prop-types';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import * as UserAction from '../actions/UserAction';
|
||||
import {Link} from 'react-router-dom';
|
||||
import Chat from 'material-ui-icons/Chat';
|
||||
import SupervisorAccount from 'material-ui-icons/SupervisorAccount';
|
||||
import DevicesOther from 'material-ui-icons/DevicesOther';
|
||||
import ExitToApp from 'material-ui-icons/ExitToApp';
|
||||
import AccountCircle from 'material-ui-icons/AccountCircle';
|
||||
import LightbulbOutline from 'material-ui-icons/LightbulbOutline';
|
||||
|
||||
const styles = (theme) => ({
|
||||
appBar: {
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
},
|
||||
title: {
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
titleName: {
|
||||
paddingRight: 10,
|
||||
},
|
||||
link: {
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
},
|
||||
});
|
||||
|
||||
class Header extends Component {
|
||||
static propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
loggedIn: PropTypes.bool.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
admin: PropTypes.bool.isRequired,
|
||||
version: PropTypes.string.isRequired,
|
||||
toggleTheme: PropTypes.func.isRequired,
|
||||
showSettings: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
renderButtons(name, admin) {
|
||||
const {classes, showSettings} = this.props;
|
||||
return (
|
||||
<div>
|
||||
{admin
|
||||
? <Link className={classes.link} to="/users">
|
||||
<Button color="inherit"><SupervisorAccount/> users</Button></Link>
|
||||
: ''}
|
||||
<Link className={classes.link} to="/applications">
|
||||
<Button color="inherit"><Chat/> apps</Button>
|
||||
</Link>
|
||||
<Link className={classes.link} to="/clients"><Button color="inherit">
|
||||
<DevicesOther/> clients</Button>
|
||||
</Link>
|
||||
<Button color="inherit" onClick={showSettings}><AccountCircle/> {name}</Button>
|
||||
<Button color="inherit" onClick={UserAction.logout}><ExitToApp/> Logout</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {classes, version, name, loggedIn, admin, toggleTheme} = this.props;
|
||||
|
||||
return (
|
||||
<AppBar position="absolute" className={classes.appBar}>
|
||||
<Toolbar>
|
||||
<div className={classes.title}>
|
||||
<a href="https://github.com/gotify/server" className={classes.link}>
|
||||
<Typography variant="headline" className={classes.titleName} color="inherit">
|
||||
Gotify
|
||||
</Typography>
|
||||
</a>
|
||||
<a href={'https://github.com/gotify/server/releases/tag/v' + version} className={classes.link}>
|
||||
<Typography variant="button" color="inherit">
|
||||
@{version}
|
||||
</Typography>
|
||||
</a>
|
||||
</div>
|
||||
{loggedIn && this.renderButtons(name, admin)}
|
||||
<IconButton onClick={toggleTheme} color="inherit"><LightbulbOutline/></IconButton>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles, {withTheme: true})(Header);
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import React, {Component} from 'react';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import Drawer from 'material-ui/Drawer';
|
||||
import {ListItem, ListItemText} from 'material-ui/List';
|
||||
import {withStyles} from 'material-ui/styles';
|
||||
import PropTypes from 'prop-types';
|
||||
import AppStore from '../stores/AppStore';
|
||||
import {Link} from 'react-router-dom';
|
||||
|
||||
const styles = (theme) => ({
|
||||
drawerPaper: {
|
||||
position: 'relative',
|
||||
width: 250,
|
||||
minHeight: '100%',
|
||||
},
|
||||
toolbar: theme.mixins.toolbar,
|
||||
link: {
|
||||
color: 'inherit',
|
||||
textDecoration: 'none',
|
||||
},
|
||||
});
|
||||
|
||||
class Navigation extends Component {
|
||||
static propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
loggedIn: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {apps: []};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
AppStore.on('change', this.updateApps);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
AppStore.removeListener('change', this.updateApps);
|
||||
}
|
||||
|
||||
updateApps = () => this.setState({apps: AppStore.get()});
|
||||
|
||||
render() {
|
||||
const {classes, loggedIn} = this.props;
|
||||
const {apps} = this.state;
|
||||
|
||||
const empty = (<ListItem disabled>
|
||||
<ListItemText primary="you have no applications :("/>
|
||||
</ListItem>);
|
||||
|
||||
const userApps = apps.length === 0 ? empty : apps.map(function(app) {
|
||||
return (
|
||||
<Link className={classes.link} to={'/messages/' + app.id} key={app.id}>
|
||||
<ListItem button>
|
||||
<ListItemText primary={app.name}/>
|
||||
</ListItem>
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
|
||||
const placeholderItems = [
|
||||
<ListItem button disabled key={-1}>
|
||||
<ListItemText primary="Some Server"/>
|
||||
</ListItem>,
|
||||
<ListItem button disabled key={-2}>
|
||||
<ListItemText primary="A Raspberry PI"/>
|
||||
</ListItem>,
|
||||
];
|
||||
|
||||
return (
|
||||
<Drawer variant="permanent" classes={{paper: classes.drawerPaper}}>
|
||||
<div className={classes.toolbar}/>
|
||||
<Link className={classes.link} to="/">
|
||||
<ListItem button disabled={!loggedIn}>
|
||||
<ListItemText primary="All Messages"/>
|
||||
</ListItem>
|
||||
</Link>
|
||||
<Divider/>
|
||||
<div>{loggedIn ? userApps : placeholderItems}</div>
|
||||
<Divider/>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles, {withTheme: true})(Navigation);
|
||||
Loading…
Reference in New Issue