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
10 * http://www.apache.org/licenses/LICENSE-2.0
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
16 * ============LICENSE_END==========================================================================
19 import React, {FC, useState } from 'react';
20 import { useApplicationDispatch } from "../flux/connect";
22 import { Divider, List, ListItem, ListItemText, Paper } from '@mui/material';
23 import { makeStyles } from '@mui/styles';
24 import applicationService from '../services/applicationManager';
26 import { GoBackAction } from '../actions/navigationActions';
27 import { GeneralUserSettings } from '../components/settings/general';
28 import { toAriaLabel } from '../utilities/yangHelper';
30 type SettingsEntry = { name: string, element: JSX.Element };
32 const styles = makeStyles({
45 const UserSettings: FC = (props) => {
47 const dispatch = useApplicationDispatch();
48 const goBack = () => dispatch(new GoBackAction());
50 const [selectedIndex, setSelectedIndex] = useState(0);
52 const registrations = applicationService.applications;
54 const navigateBack = () => {
58 let settingsArray: SettingsEntry[] = [];
60 //add all framework specific settings
61 settingsArray.push({name:"General", element: <GeneralUserSettings onClose={navigateBack} />})
64 let settingsElements : (SettingsEntry) [] = Object.keys(registrations).map(p => {
65 const application = registrations[p];
67 if (application.settingsElement) {
68 const value: SettingsEntry = { name: application.menuEntry?.toString()!, element: <application.settingsElement onClose={navigateBack} /> };
74 }).filter((x): x is SettingsEntry => x !== null);
77 settingsArray.push(...settingsElements);
79 const onSelectElement = (e: any, newValue: number) => {
81 setSelectedIndex(newValue);
84 const classes = styles();
86 return <div style={{ display: "flex", flexDirection: "row", height: "100%" }}>
87 <div style={{ display: "flex", flexDirection: "column", height: "100%", width: "15%" }}>
88 <Paper variant="outlined" style={{ height: "70%" }}>
89 <List className={classes.menu} component="nav">
91 settingsArray.map((el, index) => {
94 <ListItem key={"settings-key-"+index} selected={selectedIndex === index} button onClick={e => { onSelectElement(e, index) }} aria-label={toAriaLabel(el?.name+"-settings")}>
95 <ListItemText primary={el?.name} style={{ padding: 0 }} />
104 <div style={{ height: "100%", width: "80%", marginLeft: 15 }}>
105 <div style={{ height: "100%" }}>
107 settingsArray[selectedIndex]?.element
115 export default UserSettings;