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

   1 /**\r
   2  * ============LICENSE_START========================================================================\r
   3  * ONAP : ccsdk feature sdnr wt odlux\r
   4  * =================================================================================================\r
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.\r
   6  * =================================================================================================\r
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except\r
   8  * in compliance with the License. You may obtain a copy of the License at\r
   9  *\r
  10  * http://www.apache.org/licenses/LICENSE-2.0\r
  11  *\r
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License\r
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express\r
  14  * or implied. See the License for the specific language governing permissions and limitations under\r
  15  * the License.\r
  16  * ============LICENSE_END==========================================================================\r
  17  */\r
  18 import * as React from 'react';\r
  19 import { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom';\r
  20 \r
  21 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';\r
  22 import { faHome, faAddressBook, faSignInAlt } from '@fortawesome/free-solid-svg-icons';\r
  23 \r
  24 import { SnackbarProvider } from 'notistack';\r
  25 import { ConfirmProvider } from 'material-ui-confirm';\r
  26 \r
  27 import AppFrame from '../components/routing/appFrame';\r
  28 import TitleBar from '../components/titleBar';\r
  29 import Menu from '../components/navigationMenu';\r
  30 import ErrorDisplay from '../components/errorDisplay';\r
  31 import SnackDisplay from '../components/material-ui/snackDisplay';\r
  32 \r
  33 import Home from '../views/home';\r
  34 import Login from '../views/login';\r
  35 import About from '../views/about';\r
  36 import Test from '../views/test';\r
  37 \r
  38 import applicationService from '../services/applicationManager';\r
  39 \r
  40 \r
  41 const styles = (theme: Theme) => createStyles({\r
  42   root: {\r
  43     flexGrow: 1,\r
  44     height: '100%',\r
  45     zIndex: 1,\r
  46     overflow: 'hidden',\r
  47     position: 'relative',\r
  48     display: 'flex',\r
  49   },\r
  50   content: {\r
  51     flexGrow: 1,\r
  52     display: "flex",\r
  53     flexDirection: "column",\r
  54     backgroundColor: theme.palette.background.default,\r
  55     padding: theme.spacing(3),\r
  56     minWidth: 0, // So the Typography noWrap works\r
  57   },\r
  58   toolbar: theme.mixins.toolbar as any\r
  59 });\r
  60 \r
  61 type FrameProps = WithStyles<typeof styles>;\r
  62 \r
  63 class FrameComponent extends React.Component<FrameProps>{\r
  64 \r
  65   render() {\r
  66     const registrations = applicationService.applications;\r
  67     const { classes } = this.props;\r
  68     return (\r
  69       <ConfirmProvider>\r
  70         <SnackbarProvider maxSnack={3}>\r
  71             <Router>\r
  72             <div className={classes.root}>\r
  73                 <SnackDisplay />\r
  74                 <ErrorDisplay />\r
  75                 <TitleBar />\r
  76                 <Menu />\r
  77                 <main className={classes.content}>\r
  78                 {\r
  79                     <div className={classes.toolbar} /> //needed for margins, don't remove!\r
  80                 }\r
  81                 <Switch>\r
  82                     <Route exact path="/" component={() => (\r
  83                     <AppFrame title={"Home"} icon={faHome} >\r
  84                         <Home />\r
  85                     </AppFrame>\r
  86                     )} />\r
  87                     <Route path="/about" component={() => (\r
  88                     <AppFrame title={"About"} icon={faAddressBook} >\r
  89                         <About />\r
  90                     </AppFrame>\r
  91                     )} />\r
  92                     {process.env.NODE_ENV === "development" ? <Route path="/test" component={() => (\r
  93                     <AppFrame title={"Test"} icon={faAddressBook} >\r
  94                         <Test />\r
  95                     </AppFrame>\r
  96                     )} /> : null}\r
  97                     <Route path="/login" component={() => (\r
  98                     <AppFrame title={"Login"} icon={faSignInAlt} >\r
  99                         <Login />\r
 100                     </AppFrame>\r
 101                     )} />\r
 102                     {Object.keys(registrations).map(p => {\r
 103                     const application = registrations[p];\r
 104                     return (<Route key={application.name} path={application.path || `/${application.name}`} component={() => (\r
 105                         <AppFrame title={application.title || (typeof application.menuEntry === 'string' && application.menuEntry) || application.name} icon={application.icon} appId={application.name} >\r
 106                         <application.rootComponent />\r
 107                         </AppFrame>\r
 108                     )} />)\r
 109                     })}\r
 110                     <Redirect to="/" />\r
 111                 </Switch>\r
 112                 </main>\r
 113             </div>\r
 114             </Router>\r
 115         </SnackbarProvider>\r
 116       </ConfirmProvider>  \r
 117     );\r
 118   }\r
 119 }\r
 120 \r
 121 export const Frame = withStyles(styles)(FrameComponent);\r
 122 export default Frame;\r