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

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2021 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18
  19 import * as React from 'react';
  20 import { IApplicationStoreState } from "../store/applicationStore";
  21 import connect, { Connect, IDispatcher } from "../flux/connect";
  22
  23 import applicationService from '../services/applicationManager';
  24 import { makeStyles } from '@material-ui/styles';
  25 import { Divider, List, ListItem, ListItemText, Paper } from '@material-ui/core';
  26
  27 import { GeneralUserSettings } from '../components/settings/general'
  28 import { GoBackAction } from '../actions/navigationActions';
  29 import { toAriaLabel } from '../utilities/yangHelper';
  30
  31 type props = Connect<typeof mapProps, typeof mapDispatch>;
  32
  33 type SettingsEntry = { name: string, element: JSX.Element }
  34
  35
  36 const mapProps = (state: IApplicationStoreState) => ({
  37
  38 });
  39
  40 const mapDispatch = (dispatcher: IDispatcher) => ({
  41   goBack: () => dispatcher.dispatch(new GoBackAction())
  42 });
  43
  44 const styles = makeStyles({
  45   sectionMargin: {
  46     marginTop: "30px",
  47     marginBottom: "15px"
  48   },
  49   elementMargin: {
  50
  51     marginLeft: "10px"
  52   },
  53   menu: {
  54     flex: "1 0 0%",
  55   }
  56 });
  57
  58 const UserSettings: React.FunctionComponent<props> = (props) => {
  59
  60   const classes = styles();
  61   const registrations = applicationService.applications;
  62
  63   const [selectedIndex, setSelectedIndex] = React.useState(0);
  64
  65   const navigateBack = () => {
  66     props.goBack();
  67   }
  68
  69   let settingsArray: SettingsEntry[] = [];
  70
  71   //add all framework specific settings
  72   settingsArray.push({name:"General", element: <GeneralUserSettings onClose={navigateBack} />})
  73
  74
  75   //get app settings
  76   let settingsElements : (SettingsEntry) [] = Object.keys(registrations).map(p => {
  77     const application = registrations[p];
  78
  79     if (application.settingsElement) {
  80       const value: SettingsEntry = { name: application.menuEntry?.toString()!, element: <application.settingsElement onClose={navigateBack} /> };
  81       return value;
  82
  83     } else {
  84       return null;
  85     }
  86   }).filter((x): x is SettingsEntry => x !== null);
  87
  88
  89   settingsArray.push(...settingsElements);
  90
  91   const onSelectElement = (e: any, newValue: number) => {
  92     e.preventDefault();
  93     setSelectedIndex(newValue);
  94   }
  95
  96   return <div style={{ display: "flex", flexDirection: "row", height: "100%" }}>
  97    <div style={{ display: "flex", flexDirection: "column", height: "100%", width: "15%" }}>
  98       <Paper variant="outlined" style={{ height: "70%" }}>
  99         <List className={classes.menu} component="nav">
 100           {
 101             settingsArray.map((el, index) => {
 102               return (
 103               <>
 104                 <ListItem selected={selectedIndex === index} button onClick={e => { onSelectElement(e, index) }} aria-label={toAriaLabel(el?.name+"-settings")}>
 105                   <ListItemText primary={el?.name} style={{ padding: 0 }} />
 106                 </ListItem>
 107                 <Divider />
 108               </>)
 109             })
 110           }
 111         </List>
 112       </Paper>
 113
 114     </div>
 115     <div style={{ height: "100%", width: "80%", marginLeft: 15 }}>
 116       <div style={{ height: "100%" }}>
 117         {
 118             settingsArray[selectedIndex]?.element
 119         }
 120       </div>
 121     </div>
 122   </div>
 123 }
 124
 125
 126 export default connect(mapProps, mapDispatch)(UserSettings);