diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx | 161 |
1 files changed, 0 insertions, 161 deletions
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx deleted file mode 100644 index 307c5d203..000000000 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx +++ /dev/null @@ -1,161 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved. - * ================================================================================================= - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under the License - * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing permissions and limitations under - * the License. - * ============LICENSE_END========================================================================== - */ - -import * as React from 'react'; -import { makeStyles, Paper, InputBase, IconButton, Divider, Popover, Typography } from '@material-ui/core'; -import SearchIcon from '@material-ui/icons/Search'; - -import { URL_API } from '../../config'; -import { isSite } from '../../utils/utils'; -import { Site } from '../../model/site'; -import { link } from '../../model/link'; -import { SelectSiteAction, SelectLinkAction } from '../../actions/detailsAction'; -import { HighlightLinkAction, HighlightSiteAction, ZoomToSearchResultAction } from '../../actions/mapActions'; -import { calculateMidPoint } from '../../utils/mapUtils'; -import { SetSearchValueAction } from '../../actions/searchAction'; -import connect,{ Connect, IDispatcher } from '../../../../../framework/src/flux/connect'; -import { IApplicationStoreState } from '../../../../../framework/src/store/applicationStore'; - - - - - - -const styles = makeStyles({ - root: { - //{ padding:5, position: 'absolute', display:'flex', flexDirection:"column",top: 150, width: 200} - padding: '2px 4px', - position: 'absolute', - display:'flex', - alignItems: 'center', - top: 15, - marginLeft: 5, - width: 400, - zIndex:1 - }, - input: { - flex: 1, - marginLeft: 5 - }, - iconButton: { - padding: 10, - }, - divider: { - height: 28, - margin: 4, - }, - }); - - -const SearchBar: React.FunctionComponent<searchBarProps> = (props) =>{ - - const classes = styles(); - const [anchorEl, setAnchorEl] = React.useState<any>(null); - const [errorMessage, setErrorMessage] = React.useState(""); - - const divRef = React.useRef(); - - const handleClick = (e: any) =>{ - - setAnchorEl(null); - if(props.searchterm.length>0){ - - const siteResult = fetch(`${URL_API}/sites/name/${props.searchterm}`) - - const linkResult = fetch(`${URL_API}/links/${props.searchterm}`); - - Promise.all([ siteResult, linkResult]).then((result)=>{ - const suceededResults = result.filter(el=> el.ok); - - if(suceededResults.length==0){ - setAnchorEl(divRef.current); - setErrorMessage("No element found.") - // hide message after 3 sec - window.setTimeout(()=>{setAnchorEl(null)}, 3000); - - }else{ - suceededResults[0].json().then(result =>{ - if(isSite(result)){ - props.selectSite(result); - props.highlightSite(result); - props.zoomToSearchResult(result.location.lat, result.location.lon); - }else{ - props.selectLink(result); - props.highlightLink(result); - const midPoint = calculateMidPoint(result.locationA.lat, result.locationA.lon, result.locationB.lat, result.locationB.lon); - props.zoomToSearchResult(midPoint[1], midPoint[0]) - } - }); - } - }); - } - e.preventDefault(); -} - - const open = Boolean(anchorEl); - - const reachabe = props.isTopoServerReachable && props.isTileServerReachable; - - return ( - <> - <Paper ref={divRef} component="form" className={classes.root}> - <InputBase - disabled={!reachabe} - className={classes.input} - placeholder="Find sites or links by name" - inputProps={{ 'aria-label': 'networkmap-searchbar' }} - value={props.searchterm} - onChange={e=> props.setSearchTerm(e.currentTarget.value)} - /> - <Divider className={classes.divider} orientation="vertical" /> - <IconButton type="submit" className={classes.iconButton} aria-label="search" onClick={handleClick}> - <SearchIcon /> - </IconButton> - </Paper> - <Popover open={open} onClose={e=> setAnchorEl(null)} anchorEl={anchorEl} anchorOrigin={{ - vertical: "bottom", - horizontal: "left" - }}> - <Paper style={{width: 380, padding:10}}> - <Typography variant="body1">{errorMessage}</Typography> - </Paper> - </Popover> - </> - ); -} - -const mapStateToProps = (state: IApplicationStoreState) => ({ - searchterm: state.network.search.value, - isTopoServerReachable: state.network.connectivity.isToplogyServerAvailable, - isTileServerReachable: state.network.connectivity.isTileServerAvailable - -}); - -type searchBarProps = Connect<typeof mapStateToProps, typeof mapDispatchToProps>; - - -const mapDispatchToProps = (dispatcher: IDispatcher) => ({ - selectSite:(site: Site)=> dispatcher.dispatch(new SelectSiteAction(site)), - selectLink:(link: link) => dispatcher.dispatch(new SelectLinkAction(link)), - highlightLink:(link: link)=> dispatcher.dispatch(new HighlightLinkAction(link)), - highlightSite: (site: Site) => dispatcher.dispatch(new HighlightSiteAction(site)), - setSearchTerm: (value: string) => dispatcher.dispatch(new SetSearchValueAction(value)), - zoomToSearchResult: (lat: number, lon: number) => dispatcher.dispatch(new ZoomToSearchResultAction(lat, lon)), -});; - -export default (connect(mapStateToProps,mapDispatchToProps)(SearchBar))
\ No newline at end of file |