+++ /dev/null
-/**
- * ============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
Code Review / ccsdk / features.git / blobdiff