fix appmenu highlighting

This commit is contained in:
proddy
2020-07-17 21:21:57 +02:00
parent abbe6296ea
commit 0475211040
4 changed files with 7 additions and 10 deletions

View File

@@ -130,7 +130,7 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
</Typography> </Typography>
<Typography align="right" variant="caption" color="textPrimary"> <Typography align="right" variant="caption" color="textPrimary">
&nbsp;&nbsp;{authenticatedContext.me.version} &nbsp;&nbsp;v{authenticatedContext.me.version}
</Typography> </Typography>
<Divider absolute /> <Divider absolute />
@@ -142,6 +142,7 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
<Divider /> <Divider />
</Fragment> </Fragment>
)} )}
<List> <List>
<ListItem to='/wifi/' selected={path.startsWith('/wifi/')} button component={Link}> <ListItem to='/wifi/' selected={path.startsWith('/wifi/')} button component={Link}>
<ListItemIcon> <ListItemIcon>

View File

@@ -26,9 +26,9 @@ class EMSESP extends Component<RouteComponentProps> {
<Tab value={`/${PROJECT_PATH}/help`} label="EMS-ESP Help" /> <Tab value={`/${PROJECT_PATH}/help`} label="EMS-ESP Help" />
</Tabs> </Tabs>
<Switch> <Switch>
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/help`} component={EMSESPHelp} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/status`} component={EMSESPStatusController} /> <AuthenticatedRoute exact path={`/${PROJECT_PATH}/status`} component={EMSESPStatusController} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/devices`} component={EMSESPDevicesController} /> <AuthenticatedRoute exact path={`/${PROJECT_PATH}/devices`} component={EMSESPDevicesController} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/help`} component={EMSESPHelp} />
<Redirect to={`/${PROJECT_PATH}/status`} /> <Redirect to={`/${PROJECT_PATH}/status`} />
</Switch> </Switch>
</MenuAppBar> </MenuAppBar>

View File

@@ -6,20 +6,18 @@ import { List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
import SettingsIcon from '@material-ui/icons/Settings'; import SettingsIcon from '@material-ui/icons/Settings';
import SettingsRemoteIcon from "@material-ui/icons/SettingsRemote"; import SettingsRemoteIcon from "@material-ui/icons/SettingsRemote";
// import { PROJECT_PATH } from "../api";
class ProjectMenu extends Component<RouteComponentProps> { class ProjectMenu extends Component<RouteComponentProps> {
render() { render() {
const path = this.props.match.url; const path = this.props.match.url;
return ( return (
<List> <List>
<ListItem to='/ems-esp/' selected={path.startsWith('/ems-esp/')} button component={Link}> <ListItem to='/ems-esp/status/' selected={path.startsWith('/ems-esp/status/')} button component={Link}>
<ListItemIcon> <ListItemIcon>
<SettingsRemoteIcon /> <SettingsRemoteIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Dashboard" /> <ListItemText primary="Dashboard" />
</ListItem> </ListItem>
<ListItem to='/ems-esp/settings' selected={path.startsWith('/ems-esp/settings/')} button component={Link}> <ListItem to='/ems-esp/settings/' selected={path.startsWith('/ems-esp/settings/')} button component={Link}>
<ListItemIcon> <ListItemIcon>
<SettingsIcon /> <SettingsIcon />
</ListItemIcon> </ListItemIcon>

View File

@@ -1,7 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Redirect, Switch } from 'react-router'; import { Redirect, Switch } from 'react-router';
import { PROJECT_PATH } from '../api';
import { AuthenticatedRoute } from '../authentication'; import { AuthenticatedRoute } from '../authentication';
import EMSESP from './EMSESP'; import EMSESP from './EMSESP';
@@ -12,17 +11,16 @@ class ProjectRouting extends Component {
render() { render() {
return ( return (
<Switch> <Switch>
<AuthenticatedRoute exact path="/ems-esp/status" component={EMSESP} /> <AuthenticatedRoute exact path="/ems-esp/status/*" component={EMSESP} />
<AuthenticatedRoute exact path="/ems-esp/settings" component={EMSESPSettings} /> <AuthenticatedRoute exact path="/ems-esp/settings" component={EMSESPSettings} />
<AuthenticatedRoute exact path="/ems-esp/*" component={EMSESP} /> <AuthenticatedRoute exact path="/ems-esp/*" component={EMSESP} />
{ {
/* /*
* The redirect below caters for the default project route and redirecting invalid paths. * The redirect below caters for the default project route and redirecting invalid paths.
* The "to" property must match one of the routes above for this to work correctly. * The "to" property must match one of the routes above for this to work correctly.
*/ */
} }
<Redirect to={`/${PROJECT_PATH}/status`} /> <Redirect to={`/ems-esp/status/`} />
</Switch> </Switch>
) )
} }