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 import Test from '../views/test';\r
  17 \r
  18 import applicationService from '../services/applicationManager';\r
  19 import { SnackbarProvider } from 'notistack';\r
  20 \r
  21 const styles = (theme: Theme) => createStyles({\r
  22   root: {\r
  23     flexGrow: 1,\r
  24     height: '100%',\r
  25     zIndex: 1,\r
  26     overflow: 'hidden',\r
  27     position: 'relative',\r
  28     display: 'flex',\r
  29   },\r
  30   content: {\r
  31     flexGrow: 1,\r
  32     display: "flex",\r
  33     flexDirection: "column",\r
  34     backgroundColor: theme.palette.background.default,\r
  35     padding: theme.spacing.unit * 3,\r
  36     minWidth: 0, // So the Typography noWrap works\r
  37   },\r
  38   toolbar: theme.mixins.toolbar\r
  39 });\r
  40 \r
  41 export const Frame = withStyles(styles)(({ classes }: WithStyles<typeof styles>) => {\r
  42   const registrations = applicationService.applications;\r
  43   return (\r
  44     <SnackbarProvider maxSnack={3}>\r
  45       <Router>\r
  46         <div className={ classes.root }>\r
  47           <SnackDisplay />\r
  48           <ErrorDisplay />\r
  49           <TitleBar />\r
  50           <Menu />\r
  51           <main className={ classes.content }>\r
  52             <div className={ classes.toolbar } />\r
  53             <Switch>\r
  54               <Route exact path="/" component={ () => (\r
  55                 <AppFrame title={ "Home" } icon={ faHome } >\r
  56                   <Home />\r
  57                 </AppFrame>\r
  58               ) } />\r
  59               <Route path="/about" component={ () => (\r
  60                 <AppFrame title={ "About" } icon={ faAddressBook } >\r
  61                   <About />\r
  62                 </AppFrame>\r
  63               )} />\r
  64               { process.env.NODE_ENV === "development" ? <Route path="/test" component={() => (\r
  65                 <AppFrame title={"Test"} icon={faAddressBook} >\r
  66                   <Test />\r
  67                 </AppFrame>\r
  68               )} /> : null}\r
  69               <Route path="/login" component={ () => (\r
  70                 <AppFrame title={ "Login" } icon={ faSignInAlt } >\r
  71                   <Login />\r
  72                 </AppFrame>\r
  73               ) } />\r
  74               { Object.keys(registrations).map(p => {\r
  75                 const application = registrations[p];\r
  76                 return (<Route key={ application.name } path={ application.path || `/${ application.name }` } component={ () => (\r
  77                   <AppFrame title={ application.title || (typeof application.menuEntry === 'string' && application.menuEntry) || application.name } icon={ application.icon } appId={application.name} >\r
  78                     <application.rootComponent />\r
  79                   </AppFrame>\r
  80                 ) } />)\r
  81               }) }\r
  82               <Redirect to="/" />\r
  83             </Switch>\r
  84           </main>\r
  85         </div>\r
  86       </Router>\r
  87     </SnackbarProvider>\r
  88   );\r
  89 });\r
  90 \r
  91 export default Frame;\r