birbnetes/birbmap
birbnetes/birbmap
4
0
Fork 0
Code Pull Requests Releases Activity

Added Logs navigation

Browse Source
This commit is contained in:
kunkliricsi 2020-11-26 09:35:50 +01:00
parent bab0984c30
commit bcbab1383a
5 changed files with 263 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
Birdmap.API/ClientApp/src/App.tsx
View File

@ -1,24 +1,17 @@
import { Box, Container, IconButton, Menu, MenuItem, MenuList, Paper, Grow, Popper } from '@material-ui/core';
import AccountCircle from '@material-ui/icons/AccountCircle';
import AppBar from '@material-ui/core/AppBar';
import { positions } from '@material-ui/system';
import { Box, Paper } from '@material-ui/core';
import { blueGrey, grey, orange } from '@material-ui/core/colors';
import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { ThemeProvider } from '@material-ui/styles';
import React, { useState, } from 'react';
import { BrowserRouter, NavLink, Redirect, Route, Switch, Link } from 'react-router-dom';
import BirdmapTitle from './components/appBar/BirdmapTitle';
import React, { useState } from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import BirdmapBar from './components/appBar/BirdmapBar';
import Auth from './components/auth/Auth';
import AuthService from './components/auth/AuthService';
import { ClickAwayListener } from '@material-ui/core';
import MapContainer from './components/heatmap/Heatmap';
import Devices from './components/devices/Devices';
import { blueGrey, blue, orange, grey } from '@material-ui/core/colors';
import DevicesContextProvider from './contexts/DevicesContextProvider'
import Dashboard from './components/dashboard/Dashboard';
import Devices from './components/devices/Devices';
import MapContainer from './components/heatmap/Heatmap';
import Logs from './components/logs/Logs';
import DevicesContextProvider from './contexts/DevicesContextProvider';
const theme = createMuiTheme({
palette: {
@ -27,14 +20,13 @@ const theme = createMuiTheme({
dark: grey[400],
},
secondary: {
main: orange[200],
main: blueGrey[700],
dark: blueGrey[50],
}
},
});
function App() {
const [authenticated, setAuthenticated] = useState(AuthService.isAuthenticated());
const [isAdmin, setIsAdmin] = useState(AuthService.isAdmin());
@ -61,6 +53,7 @@ function App() {
return <Devices isAdmin={isAdmin}/>;
};
const HeatmapComponent = () => {
return (
<Paper elevation={0}>
@ -69,16 +62,46 @@ function App() {
);
};
const HeaderComponent = () => {
return (
<BirdmapBar onLogout={AuthService.logout} isAdmin={isAdmin} isAuthenticated={authenticated}/>
);
}
const PredicateRoute = ({ component: Component, predicate: Predicate, ...rest }: { [x: string]: any, component: any, predicate: any }) => {
return (
<PredicateRouteInternal {...rest} header={HeaderComponent} body={Component} predicate={Predicate}/>
);
}
const PublicRoute = ({ component: Component, ...rest }: { [x: string]: any, component: any }) => {
return (
<PredicateRoute {...rest} component={Component} predicate={true}/>
);
}
const PrivateRoute = ({ component: Component, ...rest }: { [x: string]: any, component: any }) => {
return (
<PredicateRoute {...rest} component={Component} predicate={authenticated}/>
);
}
const AdminRoute = ({ component: Component, ...rest }: { [x: string]: any, component: any }) => {
return (
<PredicateRoute {...rest} component={Component} predicate={authenticated && isAdmin}/>
);
}
return (
<ThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
<PublicRoute path="/login" exact component={AuthComponent} />
<AdminRoute path="/logs" exact authenticated={authenticated} isAdmin={isAdmin} component={LogsComponent} />
<PublicRoute exact path="/login" component={AuthComponent} />
<AdminRoute exact path="/logs" component={LogsComponent} />
<DevicesContextProvider>
<PrivateRoute path="/" exact authenticated={authenticated} component={DashboardComponent} />
<PrivateRoute path="/devices/:id?" exact authenticated={authenticated} component={DevicesComponent} />
<PrivateRoute path="/heatmap" exact authenticated={authenticated} component={HeatmapComponent} />
<PrivateRoute exact path="/" component={DashboardComponent} />
<PrivateRoute exact path="/devices/:id?" component={DevicesComponent} />
<PrivateRoute exact path="/heatmap" component={HeatmapComponent} />
</DevicesContextProvider>
</Switch>
</BrowserRouter>
@ -88,123 +111,26 @@ function App() {
export default App;
const PublicRoute = ({ component: Component, ...rest }: { [x: string]: any, component: any}) => {
const PredicateRouteInternal = ({ header: HeaderComponent, body: BodyComponent, predicate: Predicate, ...rest }: { [x: string]: any, header: any, body: any, predicate: any }) => {
return (
<Route {...rest} render={matchProps => (
<DefaultLayout component={Component} authenticated={false} isAdmin={false} {...matchProps} />
)} />
);
}
const AdminRoute = ({ component: Component, authenticated: Authenticated, isAdmin: IsAdmin, ...rest }: { [x: string]: any, component: any, authenticated: any, isAdmin: any }) => {
return (
<Route {...rest} render={matchProps => (
Authenticated && IsAdmin
? <DefaultLayout component={Component} authenticated={Authenticated} {...matchProps} />
Predicate
? <DefaultLayoutInternal header={HeaderComponent} body={BodyComponent} {...matchProps} />
: <Redirect to='/login' />
)} />
);
};
const PrivateRoute = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: any }) => {
return (
<Route {...rest} render={matchProps => (
Authenticated
? <DefaultLayout component={Component} authenticated={Authenticated} {...matchProps} />
: <Redirect to='/login' />
)} />
);
};
const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...rest }: { [x: string]: any, component: any, authenticated: any }) => {
const DefaultLayoutInternal = ({ header: HeaderComponent, body: BodyComponent, ...rest }: { [x: string]: any, header: any, body: any }) => {
const classes = useDefaultLayoutStyles();
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef<HTMLButtonElement>(null);
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event: React.MouseEvent<EventTarget>) => {
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
return;
}
setOpen(false);
};
const handleLogout = (event: React.MouseEvent<EventTarget>) => {
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
return;
}
AuthService.logout();
setOpen(false);
};
function handleListKeyDown(event: React.KeyboardEvent) {
if (event.key === 'Tab') {
event.preventDefault();
setOpen(false);
}
}
const prevOpen = React.useRef(open);
React.useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current!.focus();
}
prevOpen.current = open;
}, [open]);
const renderNavLinks = () => {
return Authenticated
? <Container className={classes.nav_menu}>
<NavLink exact to="/" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Dashboard</NavLink>
{}
<NavLink to="/devices" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Devices</NavLink>
<NavLink exact to="/heatmap" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Heatmap</NavLink>
<IconButton className={classes.nav_menu_icon}
ref={anchorRef}
aria-haspopup="true"
aria-controls={open ? 'menu-list-grow' : undefined}
aria-label="account of current user"
onClick={handleToggle}>
<AccountCircle/>
</IconButton>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleLogout} component={Link} {...{ to: '/login' }}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</Container>
: null;
};
return (
<React.Fragment>
<AppBar position="static" className={classes.bar_root}>
<Toolbar>
<BirdmapTitle />
<Typography component={'span'} className={classes.typo}>
{renderNavLinks()}
</Typography>
</Toolbar>
</AppBar>
<Box zIndex="modal" className={classes.box_root}>
<Component {...rest} />
<Box className={classes.header}>
<HeaderComponent />
</Box>
<Box className={classes.body}>
<BodyComponent {...rest} />
</Box>
</React.Fragment>
);
@ -212,46 +138,12 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, ...
const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
createStyles({
bar_root: {
header: {
height: '7%',
},
box_root: {
body: {
backgroundColor: theme.palette.primary.dark,
height: '93%',
},
typo: {
marginLeft: 'auto',
color: 'white',
},
nav_menu: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
},
nav_menu_icon: {
color: 'inherit',
marginLeft: '24px',
'&:hover': {
color: 'inherit',
}
},
nav_menu_item: {
textDecoration: 'none',
fontWeight: 'normal',
color: 'inherit',
marginLeft: '24px',
'&:hover': {
color: 'inherit',
}
},
nav_menu_item_active: {
textDecoration: 'underline',
fontWeight: 'bold',
color: 'inherit',
marginLeft: '24px',
'&:hover': {
color: 'inherit',
}
},
}
}),
);

136
Birdmap.API/ClientApp/src/components/appBar/BirdmapBar.tsx Normal file
View File

@ -0,0 +1,136 @@
import { ClickAwayListener, Container, createStyles, Grow, IconButton, makeStyles, MenuItem, MenuList, Paper, Popper, Theme } from '@material-ui/core';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import AccountCircle from '@material-ui/icons/AccountCircle';
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import BirdmapTitle from './BirdmapTitle';
export default function BirdmapBar(props: { onLogout: () => void; isAuthenticated: any; isAdmin: any; }) {
const classes = useAppbarStyles();
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef<HTMLButtonElement>(null);
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event: React.MouseEvent<EventTarget>) => {
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
return;
}
setOpen(false);
};
const handleLogout = (event: React.MouseEvent<EventTarget>) => {
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
return;
}
props.onLogout();
setOpen(false);
};
function handleListKeyDown(event: React.KeyboardEvent) {
if (event.key === 'Tab') {
event.preventDefault();
setOpen(false);
}
}
const prevOpen = React.useRef(open);
React.useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current!.focus();
}
prevOpen.current = open;
}, [open]);
const renderNavLinks = () => {
return props.isAuthenticated
? <Container className={classes.nav_menu}>
<NavLink exact to="/" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Dashboard</NavLink>
{props.isAdmin ? <NavLink exact to="/logs" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Logs</NavLink> : null}
<NavLink to="/devices" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Devices</NavLink>
<NavLink exact to="/heatmap" className={classes.nav_menu_item} activeClassName={classes.nav_menu_item_active}>Heatmap</NavLink>
<IconButton className={classes.nav_menu_icon}
ref={anchorRef}
aria-haspopup="true"
aria-controls={open ? 'menu-list-grow' : undefined}
aria-label="account of current user"
onClick={handleToggle}>
<AccountCircle />
</IconButton>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleLogout} component={Link} {...{ to: '/login' }}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</Container>
: null;
};
return (
<AppBar position="static">
<Toolbar>
<BirdmapTitle />
<Typography component={'span'} className={classes.typo}>
{renderNavLinks()}
</Typography>
</Toolbar>
</AppBar>
)
};
const useAppbarStyles = makeStyles((theme: Theme) =>
createStyles({
typo: {
marginLeft: 'auto',
color: 'white',
},
nav_menu: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
},
nav_menu_icon: {
color: 'inherit',
marginLeft: '24px',
'&:hover': {
color: 'inherit',
}
},
nav_menu_item: {
textDecoration: 'none',
fontWeight: 'normal',
color: 'inherit',
marginLeft: '24px',
'&:hover': {
color: 'inherit',
}
},
nav_menu_item_active: {
textDecoration: 'underline',
fontWeight: 'bold',
color: 'inherit',
marginLeft: '24px',
'&:hover': {
color: 'inherit',
}
},
}),
);

20
Birdmap.API/ClientApp/src/components/heatmap/Heatmap.jsx
View File

@ -1,4 +1,5 @@
/*global google*/
import { Box, withStyles } from '@material-ui/core';
import GoogleMapReact from 'google-map-react';
import React, { Component } from 'react';
import C from '../../common/Constants';
@ -8,7 +9,14 @@ import DeviceMarker from './DeviceMarker';
const lat_offset = 0.000038;
const lng_offset = -0.000058;
export default class MapContainer extends Component {
const styles = theme => ({
root: {
height: '93vh',
width: '100%',
}
});
class MapContainer extends Component {
constructor(props) {
super(props);
@ -64,6 +72,8 @@ export default class MapContainer extends Component {
}
render() {
const {classes} = this.props;
const heatMapData = {
positions: this.state.heatmapPoints,
options: {
@ -92,7 +102,7 @@ export default class MapContainer extends Component {
));
return (
<div style={{ height: '93vh', width: '100%' }}>
<Box className={classes.root}>
<GoogleMapReact
bootstrapURLKeys={{
key: ["AIzaSyCZ51VFfxqZ2GkCmVrcNZdUKsM0fuBQUCY"],
@ -106,7 +116,9 @@ export default class MapContainer extends Component {
defaultCenter={this.state.center}>
{Markers}
</GoogleMapReact>
</div>
</Box>
);
}
}
}
export default withStyles(styles)(MapContainer);

65
Birdmap.API/ClientApp/src/components/logs/Logs.jsx
View File

@ -1,8 +1,19 @@
import { Button, Checkbox, List, ListItem, ListItemIcon, ListItemText, Paper } from '@material-ui/core';
import { Box, Button, Checkbox, List, ListItem, ListItemIcon, ListItemText, Paper, withStyles } from '@material-ui/core';
import { blueGrey } from '@material-ui/core/colors';
import React, { Component } from 'react';
import LogService from './LogService';
export class Logs extends Component {
const styles = theme => ({
root: {
padding: '64px',
backgroundColor: theme.palette.primary.dark,
},
paper: {
backgroundColor: blueGrey[50],
},
});
class Logs extends Component {
constructor(props) {
super(props)
@ -10,6 +21,7 @@ export class Logs extends Component {
service: null,
files: [],
checked: [],
selectAllChecked: false,
}
}
@ -35,7 +47,18 @@ export class Logs extends Component {
this.setState({checked: newChecked});
}
downloadChecked = () => {
handleSelectAllToggle = () => {
this.setState({selectAllChecked: !this.state.selectAllChecked});
if (this.state.selectAllChecked) {
this.setState({checked: []});
} else {
const newChecked = [...this.state.files];
this.setState({checked: newChecked});
}
}
onDownload = () => {
this.state.service.getFiles(this.state.checked)
.then(result => {
const filename = `Logs-${new Date().toISOString()}.zip`;
@ -47,11 +70,15 @@ export class Logs extends Component {
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
this.setState({checked: []});
this.setState({selectAllChecked: false});
})
.catch(ex => console.log(ex));
}
render() {
const { classes } = this.props;
const Files = this.state.files.map((value) => {
const labelId = `checkbox-list-label-${value}`;
@ -72,16 +99,30 @@ export class Logs extends Component {
})
return (
<Paper>
<List >
{Files}
</List>
<Button onClick={this.downloadChecked}>
Download
</Button>
</Paper>
<Box className={classes.root}>
<Paper className={classes.paper}>
<List className={classes.paper}>
<ListItem key="Select-all" role={undefined} dense button onClick={this.handleSelectAllToggle}>
<ListItemIcon>
<Checkbox
edge="start"
checked={this.state.selectAllChecked}
tabIndex={-1}
disableRipple
inputProps={{ 'aria-labelledby': "Select-all" }}
/>
</ListItemIcon>
<ListItemText id="checkbox-list-label-Select-all" primary={(this.state.selectAllChecked ? "Uns" : "S") + "elect all"} />
</ListItem>
{Files}
</List>
<Button onClick={this.onDownload}>
Download
</Button>
</Paper>
</Box>
)
}
}
export default Logs
export default withStyles(styles)(Logs);

2
MQTTnet.TestApp.WinForm/Retained.json
View File

@ -1 +1 @@
[{"Topic":"devices/output","Payload":"eyJ0YWciOiIxN2NmOGI4Mi1lZDQ4LTQ4MDctOTI3MS0xZDlmMGY5ZDViMWYiLCJwcm9iYWJpbGl0eSI6MC43MjA0MzAyMzAxMjU5ODUyfQ==","QualityOfServiceLevel":1,"Retain":true,"UserProperties":null,"ContentType":null,"ResponseTopic":null,"PayloadFormatIndicator":null,"MessageExpiryInterval":null,"TopicAlias":null,"CorrelationData":null,"SubscriptionIdentifiers":null}]
[{"Topic":"devices/output","Payload":"eyJ0YWciOiJkNDhhODAwOC0wYjU2LTRkYzAtODYxMy0zMWY0MDY4OTk0ZDciLCJwcm9iYWJpbGl0eSI6MC4yNTMxNDI4NDgyNjMwOTU1fQ==","QualityOfServiceLevel":1,"Retain":true,"UserProperties":null,"ContentType":null,"ResponseTopic":null,"PayloadFormatIndicator":null,"MessageExpiryInterval":null,"TopicAlias":null,"CorrelationData":null,"SubscriptionIdentifiers":null}]