andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 15:59:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

added dashboard and settings pages to web

Browse Source
This commit is contained in:
proddy
2020-07-16 22:34:40 +02:00
parent cdd7e79d0b
commit 70b8a43afc
3 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
interface/src/project/EMSESP.tsx
View File

@@ -7,7 +7,6 @@ import { PROJECT_PATH } from '../api';
import { MenuAppBar } from '../components'; import { MenuAppBar } from '../components';
import { AuthenticatedRoute } from '../authentication'; import { AuthenticatedRoute } from '../authentication';
import EMSESPSettingsController from './EMSESPSettingsController';
import EMSESPStatusController from './EMSESPStatusController'; import EMSESPStatusController from './EMSESPStatusController';
import EMSESPDevicesController from './EMSESPDevicesController'; import EMSESPDevicesController from './EMSESPDevicesController';
@@ -19,16 +18,14 @@ class EMSESP extends Component<RouteComponentProps> {
render() { render() {
return ( return (
<MenuAppBar sectionTitle="EMS-ESP"> <MenuAppBar sectionTitle="Dashboard">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth"> <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
<Tab value={`/${PROJECT_PATH}/status`} label="EMS-ESP Status" /> <Tab value={`/${PROJECT_PATH}/status`} label="EMS-ESP Status" />
<Tab value={`/${PROJECT_PATH}/devices`} label="EMS Devices" /> <Tab value={`/${PROJECT_PATH}/devices`} label="EMS Devices" />
<Tab value={`/${PROJECT_PATH}/settings`} label="EMS-ESP Settings" />
</Tabs> </Tabs>
<Switch> <Switch>
<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}/settings`} component={EMSESPSettingsController} />
<Redirect to={`/${PROJECT_PATH}/status`} /> <Redirect to={`/${PROJECT_PATH}/status`} />
</Switch> </Switch>
</MenuAppBar> </MenuAppBar>

19
interface/src/project/ProjectMenu.tsx
View File

@@ -2,25 +2,28 @@ import React, { Component } from "react";
import { Link, withRouter, RouteComponentProps } from "react-router-dom"; import { Link, withRouter, RouteComponentProps } from "react-router-dom";
import { List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core"; import { List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
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"; // 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 <ListItem to='/ems-esp/' selected={path.startsWith('/ems-esp/')} button component={Link}>
to={`/${PROJECT_PATH}/`}
selected={path.startsWith(`/${PROJECT_PATH}/`)}
button
component={Link}
>
<ListItemIcon> <ListItemIcon>
<SettingsRemoteIcon /> <SettingsRemoteIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="EMS-ESP" /> <ListItemText primary="Dashboard" />
</ListItem>
<ListItem to='/ems-esp/settings' selected={path.startsWith('/ems-esp/settings/')} button component={Link}>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary="Settings" />
</ListItem> </ListItem>
</List> </List>
); );

13
interface/src/project/ProjectRouting.tsx
View File

@@ -5,25 +5,24 @@ import { PROJECT_PATH } from '../api';
import { AuthenticatedRoute } from '../authentication'; import { AuthenticatedRoute } from '../authentication';
import EMSESP from './EMSESP'; import EMSESP from './EMSESP';
import EMSESPSettings from './EMSESPSettings';
class ProjectRouting extends Component { class ProjectRouting extends Component {
render() { render() {
return ( return (
<Switch> <Switch>
{ <AuthenticatedRoute exact path="/ems-esp/status" component={EMSESP} />
/* <AuthenticatedRoute exact path="/ems-esp/settings" component={EMSESPSettings} />
* Add your project page routing below. <AuthenticatedRoute exact path="/ems-esp/*" component={EMSESP} />
*/
}
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/*`} 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}/`} /> <Redirect to={`/${PROJECT_PATH}/status`} />
</Switch> </Switch>
) )
} }