From 0f28ecccb0dbd7c2f39e2c4676e17ca0c38464a2 Mon Sep 17 00:00:00 2001 From: Ravi Pendurty Date: Wed, 3 Feb 2021 16:10:57 +0100 Subject: Migrate odlux Migrate odlux to Aluminium Issue-ID: CCSDK-3136 Signed-off-by: Ravi Pendurty Change-Id: I3200a809a31e87021c95fe103a9c95e03011f503 Signed-off-by: Ravi Pendurty --- .../networkMapApp/src/components/denseTable.tsx | 124 ++++++++++++--------- .../src/components/details/linkDetails.tsx | 2 +- .../src/components/details/siteDetails.tsx | 4 +- .../apps/networkMapApp/src/components/map.tsx | 19 +++- .../apps/networkMapApp/src/components/mapPopup.tsx | 4 +- 5 files changed, 88 insertions(+), 65 deletions(-) (limited to 'sdnr/wt/odlux/apps/networkMapApp/src/components') diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx index 72fe79ee3..7e378b81e 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx @@ -26,85 +26,101 @@ import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import { makeStyles, Button, Tooltip } from '@material-ui/core'; -type props = { headers: string[], height:number, navigate?(applicationName: string, path?: string):void, onLinkClick?(id: string): void, data: any[], hover: boolean, ariaLabel: string, onClick?(id: string): void, actions?:boolean }; +type props = { headers: string[], height: number, navigate?(applicationName: string, path?: string): void, onLinkClick?(id: string): void, data: any[], hover: boolean, ariaLabelRow: string, ariaLabelColumn: string[], verticalTable?: boolean, onClick?(id: string): void, actions?: boolean }; const styles = makeStyles({ container: { - overflow:"auto" + overflow: "auto" }, button: { margin: 0, padding: "6px 6px", minWidth: 'unset' - } - - }); - + } + +}); + const DenseTable: React.FunctionComponent = (props) => { const classes = styles(); - const handleClick = (event: any, id: string) =>{ + const handleClick = (event: any, id: string) => { event.preventDefault(); props.onClick !== undefined && props.onClick(id); } - const handleHover = (event: any, id: string) =>{ + const handleHover = (event: any, id: string) => { event.preventDefault(); } return ( - -
- - - - { - props.headers.map((data) => { - return {data} - }) + +
+
+ + + { + props.headers.map((data) => { + return {data} + }) + } + + + + {props.data.map((row, index) => { + var values = Object.keys(row).map(function (e) { return row[e]; }); + return ( + handleHover(e, row.name)} onClick={e => handleClick(e, row.name)}> + + { + values.map((data: any, i) => { + if (data !== undefined) { + + if (!props.verticalTable) { + const ariaLabel = props.ariaLabelColumn[i]; + if (ariaLabel.length > 0) { + return {data} + } else { + return {data} + } + } + else { + // skip adding aria label to 'header' column + if (i === 0) { + return {data} + } else { + const ariaLabel = props.ariaLabelColumn[index]; + return {data} + } + } + } + else + return null; + }) + } + { + + props.actions && +
+ + + + + + +
+ + } + ) + }) } - - - - {props.data.map((row, index) => { - var values = Object.keys(row).map(function(e) { return row[e] }); - return ( - handleHover(e,row.name)} onClick={ e => handleClick(e, row.name)}> - - { - values.map((data:any) => { - - if(data!== undefined) - return {data} - else - return null; - }) - } - { - - props.actions && -
- - - - - - -
- - - } - ) - }) - } - - -
+ + +
); diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx index a8f73f35c..81f9bba90 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx @@ -90,7 +90,7 @@ const LinkDetails: React.FunctionComponent = (props) => { SITE DETAILS - + { props.link.type==="microwave" && } diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx index 613166116..5e617be2d 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx @@ -119,7 +119,7 @@ const SiteDetails: React.FunctionComponent = (props) => { { props.site.links.length > 0 && - + /** * * */ @@ -140,7 +140,7 @@ const SiteDetails: React.FunctionComponent = (props) => { { props.site.devices.length>0 && props.updatedDevices !== null && - + } } diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx index b6e1d9cd6..e2935f6b7 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx @@ -33,9 +33,13 @@ import { addDistance, getUniqueFeatures, increaseBoundingBox } from '../utils/ma import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; import SearchBar from './searchBar'; -import { verifyResponse, setTopologyReachableAction, setTileServerReachableAction } from '../actions/connectivityAction'; +import { verifyResponse, IsTileServerReachableAction, handleConnectionError, setTileServerReachableAction } from '../actions/connectivityAction'; import ConnectionInfo from './connectionInfo' import { showIconLayers, addBaseLayers, addBaseSources, addIconLayers } from '../utils/mapLayers'; +import lamp from '../../icons/lamp.png'; +import apartment from '../../icons/apartment.png'; +import datacenter from '../../icons/datacenter.png'; +import factory from '../../icons/factory.png'; import Statistics from './statistics'; import IconSwitch from './iconSwitch'; import { addImages } from '../services/mapImagesService'; @@ -112,6 +116,9 @@ class Map extends React.Component { map.on('load', (ev) => { map.setMaxZoom(18); + const bbox = map.getBounds(); + this.props.updateMapPosition(bbox.getCenter().lat, bbox.getCenter().lng, map.getZoom()) + addBaseSources(map, this.props.selectedSite, this.props.selectedLink); addImages(map, (result: boolean)=>{ @@ -123,10 +130,9 @@ class Map extends React.Component { } }); - const boundingBox = map.getBounds(); - + const boundingBox = increaseBoundingBox(map); - fetch(`${URL_API}/links/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`) + fetch(`${URL_API}/links/geoJson/${boundingBox.west},${boundingBox.south},${boundingBox.east},${boundingBox.north}`) .then(result => verifyResponse(result)) .then(result => result.json()) .then(features => { @@ -137,7 +143,7 @@ class Map extends React.Component { .catch(error => this.props.handleConnectionError(error)); - fetch(`${URL_API}/sites/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`) + fetch(`${URL_API}/sites/geoJson/${boundingBox.west},${boundingBox.south},${boundingBox.east},${boundingBox.north}`) .then(result => verifyResponse(result)) .then(result => result.json()) .then(features => { @@ -380,6 +386,7 @@ class Map extends React.Component { componentWillUnmount(){ window.removeEventListener("menu-resized", this.handleResize); + lastBoundingBox=null; } handleResize = () => { @@ -582,7 +589,7 @@ const mapDispatchToProps = (dispatcher: IDispatcher) => ({ updateMapPosition: (lat: number, lon: number, zoom: number) => dispatcher.dispatch(new SetCoordinatesAction(lat, lon, zoom)), setStatistics: (linkCount: string, siteCount: string) => dispatcher.dispatch(new SetStatistics(siteCount, linkCount)), setTileServerLoaded: (reachable: boolean) => dispatcher.dispatch(setTileServerReachableAction(reachable)), - handleConnectionError: (error: Error) => dispatcher.dispatch(setTopologyReachableAction(error)) + handleConnectionError: (error: Error) => dispatcher.dispatch(handleConnectionError(error)) }) export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Map)); \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx index cdc77b217..040024760 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx @@ -25,7 +25,7 @@ import { URL_API } from '../config'; import { HighlightLinkAction, HighlightSiteAction } from '../actions/mapActions'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; -import { verifyResponse, setTopologyReachableAction } from '../actions/connectivityAction'; +import { verifyResponse, handleConnectionError } from '../actions/connectivityAction'; @@ -86,7 +86,7 @@ const mapDispatchToProps = (dispatcher: IDispatcher) => ({ clearDetailsHistory:()=> dispatcher.dispatch(new ClearHistoryAction()), highlightLink: (link: link) => dispatcher.dispatch(new HighlightLinkAction(link)), highlightSite: (site: site) => dispatcher.dispatch(new HighlightSiteAction(site)), - handleConnectionError: (error:Error) => dispatcher.dispatch(setTopologyReachableAction(error)), + handleConnectionError: (error:Error) => dispatcher.dispatch(handleConnectionError(error)), clearDetails: () => dispatcher.dispatch(new ClearDetailsAction()), }); -- cgit 1.2.3-korg