andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 00:09:51 +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 { AuthenticatedRoute } from '../authentication';
import EMSESPSettingsController from './EMSESPSettingsController';
import EMSESPStatusController from './EMSESPStatusController';
import EMSESPDevicesController from './EMSESPDevicesController';
@@ -19,16 +18,14 @@ class EMSESP extends Component<RouteComponentProps> {
render() {
return (
<MenuAppBar sectionTitle="EMS-ESP">
<MenuAppBar sectionTitle="Dashboard">
<Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
<Tab value={`/${PROJECT_PATH}/status`} label="EMS-ESP Status" />
<Tab value={`/${PROJECT_PATH}/devices`} label="EMS Devices" />
<Tab value={`/${PROJECT_PATH}/settings`} label="EMS-ESP Settings" />
</Tabs>
<Switch>
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/status`} component={EMSESPStatusController} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/devices`} component={EMSESPDevicesController} />
<AuthenticatedRoute exact path={`/${PROJECT_PATH}/settings`} component={EMSESPSettingsController} />
<Redirect to={`/${PROJECT_PATH}/status`} />
</Switch>
</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 { List, ListItem, ListItemIcon, ListItemText } from "@material-ui/core";
import SettingsIcon from '@material-ui/icons/Settings';
import SettingsRemoteIcon from "@material-ui/icons/SettingsRemote";
import { PROJECT_PATH } from "../api";
// import { PROJECT_PATH } from "../api";
class ProjectMenu extends Component<RouteComponentProps> {
render() {
const path = this.props.match.url;
return (
<List>
<ListItem
to={`/${PROJECT_PATH}/`}
selected={path.startsWith(`/${PROJECT_PATH}/`)}
button
component={Link}
>
<ListItem to='/ems-esp/' selected={path.startsWith('/ems-esp/')} button component={Link}>
<ListItemIcon>
<SettingsRemoteIcon />
</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>
</List>
);

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

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