sdnr/wt/odlux/framework/src/views/frame.tsx

   1 import * as React from 'react';\r
   2 import { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom';\r
   3 \r
   4 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';\r
   5 import { faHome, faAddressBook, faSignInAlt } from '@fortawesome/free-solid-svg-icons';\r
   6 \r
   7 import AppFrame from '../components/routing/appFrame';\r
   8 import TitleBar from '../components/titleBar';\r
   9 import Menu from '../components/navigationMenu';\r
  10 import ErrorDisplay from '../components/errorDisplay';\r
  11 import SnackDisplay from '../components/material-ui/snackDisplay';\r
  12 \r
  13 import Home from '../views/home';\r
  14 import Login from '../views/login';\r
  15 import About from '../views/about';\r
  16 \r
  17 import applicationService from '../services/applicationManager';\r
  18 import { SnackbarProvider } from 'notistack';\r
  19 \r
  20 const styles = (theme: Theme) => createStyles({\r
  21   root: {\r
  22     flexGrow: 1,\r
  23     height: '100%',\r
  24     zIndex: 1,\r
  25     overflow: 'hidden',\r
  26     position: 'relative',\r
  27     display: 'flex',\r
  28   },\r
  29   content: {\r
  30     flexGrow: 1,\r
  31     display: "flex", \r
  32     flexDirection: "column",\r
  33     backgroundColor: theme.palette.background.default,\r
  34     padding: theme.spacing.unit * 3,\r
  35     minWidth: 0, // So the Typography noWrap works\r
  36   },\r
  37   toolbar: theme.mixins.toolbar\r
  38 });\r
  39 \r
  40 export const Frame = withStyles(styles)(({ classes }: WithStyles<typeof styles>) => {\r
  41   const registrations = applicationService.applications;\r
  42   return (\r
  43     <SnackbarProvider maxSnack={3}>\r
  44       <Router>\r
  45         <div className={ classes.root }>\r
  46           <SnackDisplay />\r
  47           <ErrorDisplay />\r
  48           <TitleBar />\r
  49           <Menu />\r
  50           <main className={ classes.content }>\r
  51             <div className={ classes.toolbar } />\r
  52             <Switch>\r
  53               <Route exact path="/" component={ () => (\r
  54                 <AppFrame title={ "Home" } icon={ faHome } >\r
  55                   <Home />\r
  56                 </AppFrame>\r
  57               ) } />\r
  58               <Route path="/about" component={ () => (\r
  59                 <AppFrame title={ "About" } icon={ faAddressBook } >\r
  60                   <About />\r
  61                 </AppFrame>\r
  62               ) } />\r
  63               <Route path="/login" component={ () => (\r
  64                 <AppFrame title={ "Login" } icon={ faSignInAlt } >\r
  65                   <Login />\r
  66                 </AppFrame>\r
  67               ) } />\r
  68               { Object.keys(registrations).map(p => {\r
  69                 const application = registrations[p];\r
  70                 return (<Route key={ application.name } path={ application.path || `/${ application.name }` } component={ () => (\r
  71                   <AppFrame title={ application.title || (typeof application.menuEntry === 'string' && application.menuEntry) || application.name } icon={ application.icon } >\r
  72                     <application.rootComponent />\r
  73                   </AppFrame>\r
  74                 ) } />)\r
  75               }) }\r
  76               <Redirect to="/" />\r
  77             </Switch>\r
  78           </main>\r
  79         </div>\r
  80       </Router>\r
  81     </SnackbarProvider>\r
  82   );\r
  83 });\r
  84 \r
  85 export default Frame; \r