Update NetworkMap

update networkmap

Issue-ID: CCSDK-2713
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I97b0950a4d7f98fdb9044c1e05dfa8dfca34efaf

3 files changed, 27 insertions, 28 deletions

diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx
index a2e51d30f..081276b5c 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx
@@ -50,10 +50,9 @@ const Details: React.FunctionComponent<porps> = (props) => {
 
     }, []);
 
-    // if url changed
+    // if url changed, load details data
     React.useEffect(() => {
         const detailsId = getDetailsIdFromUrl();
-        console.log(detailsId)
         if (detailsId !== null && props.data?.name !== detailsId) {
             loadDetailsData(detailsId)
         }
@@ -154,16 +153,17 @@ const Details: React.FunctionComponent<porps> = (props) => {
                 })
     }
 
+    const panelId = props.data!== null ? (isSite(props.data) ? 'site-details-panel' : 'link-details-panel' ): 'details-panel';
 
     return (<div style={{ width: '30%', background: "#bbbdbf", padding: "20px", alignSelf:"stretch" }}>
-        <Paper style={{ height:"100%"}} id="site-details-panel"  >
+        <Paper style={{ height:"100%"}} id={panelId} aria-label={panelId}  >
             {
                 props.breadcrumbs.length > 0 &&
-                <Breadcrumbs style={{ marginLeft: "15px", marginTop: "5px" }} aria-label="breadcrumb">
-                    <Link color="inherit" href="/" onClick={backClick}>
+                <Breadcrumbs style={{ marginLeft: "15px", marginTop: "5px" }} aria-label="breadcrumbs-navigation">
+                    <Link aria-label="parent-element" color="inherit" href="/" onClick={backClick}>
                         {props.breadcrumbs[0].id}
                     </Link>
-                    <Link>
+                    <Link aria-label="child-element" color="textSecondary">
                         {props.data?.name}
                     </Link>
                 </Breadcrumbs>
@@ -171,7 +171,7 @@ const Details: React.FunctionComponent<porps> = (props) => {
             {
                 props.data !== null ?
                     createDetailPanel(props.data)
-                    : <Typography style={{ marginTop: "5px" }} align="center" variant="body1">{message}</Typography>
+                    : <Typography aria-label="details-panel-alt-message" style={{ marginTop: "5px" }} align="center" variant="body1">{message}</Typography>
 
             }
         </Paper>
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 de1bf6b16..0c9f6034f 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
@@ -32,8 +32,7 @@ const LinkDetails: React.FunctionComponent<props> = (props) => {
     const [height, setHeight] = React.useState(330);
 
     const handleResize = () =>{
-        console.log("resize")
-        const el = document.getElementById('site-details-panel')?.getBoundingClientRect();
+        const el = document.getElementById('link-details-panel')?.getBoundingClientRect();
         const el2 = document.getElementById('site-tabs')?.getBoundingClientRect();
 
         if(el && el2){
@@ -69,7 +68,7 @@ const LinkDetails: React.FunctionComponent<props> = (props) => {
        const distance = props.link.length > 0 ? props.link.length : props.link.calculatedLength;
        const azimuthA = props.link.azimuthA;
        const azimuthB = props.link.azimuthB;
-       window.open(`/#/linkCalculation?lat1=${siteA.lat}&lon1=${siteA.lon}&lat2=${siteB.lat}&lon2=${siteB.lon}&siteA=${nameA}&siteB=${nameB}&azimuthA=${azimuthA}&azimuthB=${azimuthB}&distance=${distance}`)
+       window.open(`/#/linkCalculation?lat1=${siteA.lat}&lon1=${siteA.lon}&lat2=${siteB.lat}&lon2=${siteB.lon}&siteA=${nameA}&siteB=${nameB}&azimuthA=${azimuthA}&azimuthB=${azimuthB}&distance=${distance}&amslSiteA=${siteA.amsl}&AGLsiteA=${siteA.antennaHeight}&amslSiteB=${siteB.amsl}&AGLsiteB=${siteB.antennaHeight}`)
 
     }
 
@@ -83,15 +82,15 @@ const LinkDetails: React.FunctionComponent<props> = (props) => {
 
     return (<div style={{ paddingLeft: "15px", paddingRight: "15px", paddingTop: "0px", display: 'flex', flexDirection: 'column' }}>
         <h2>{props.link.name}</h2>
-        <TextField disabled style={{ marginTop: "5px" }} value="Unkown" label="Operator" />
-        <TextField disabled style={{ marginTop: "5px" }} value={props.link.type} label="Type" />
-        <TextField disabled style={{ marginTop: "5px" }} value={props.link.length.toFixed(2)} label="Distance planned in km" />
-        <TextField disabled style={{ marginTop: "5px" }} value={props.link.calculatedLength.toFixed(2)} label="Distance calculated in km" />
+        <TextField aria-label="operator" disabled style={{ marginTop: "5px" }} value="Unkown" label="Operator" />
+        <TextField aria-label="type" disabled style={{ marginTop: "5px" }} value={props.link.type} label="Type" />
+        <TextField aria-label="planned-distance-in-km" disabled style={{ marginTop: "5px" }} value={props.link.length.toFixed(2)} label="Distance planned in km" />
+        <TextField aria-label="calculated-distance-in-km" disabled style={{ marginTop: "5px" }} value={props.link.calculatedLength.toFixed(2)} label="Distance calculated in km" />
 
         <AppBar position="static" id="site-tabs" style={{ marginTop: "20px", background: '#2E3B55' }}>
-            <Typography style={{ margin:"5px"}}>SITE DETAILS</Typography>
+            <Typography aria-label="details-of-link-sites" style={{ margin:"5px"}}>SITE DETAILS</Typography>
         </AppBar>
-        <DenseTable height={height} hover={false} headers={["", "Site A", "Site B"]} data={data} />
+        <DenseTable ariaLabel="site-information-table-entry" height={height} hover={false} headers={["", "Site A", "Site B"]} data={data} />
         {
             props.link.type==="microwave" && <Button style={{marginTop:20}} fullWidth variant="contained" color="primary" onClick={onCalculateLinkClick}>Calculate link</Button>
         }
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 a95666e38..92643d0c4 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
@@ -81,28 +81,28 @@ const SiteDetails: React.FunctionComponent<props> = (props) => {
         <h2 >{props.site.name}</h2>
         {
             props.site.operator !== '' && props.site.operator !== null ?
-                <TextField disabled={true} value={props.site.operator} label="Operator" /> :
-                <TextField disabled={true} value="Unkown" label="Operator" style={{ marginTop: "5px" }} />
+                <TextField aria-label="operator" disabled={true} value={props.site.operator} label="Operator" /> :
+                <TextField aria-label="operator" disabled={true} value="Unkown" label="Operator" style={{ marginTop: "5px" }} />
         }
         {
             props.site.type !== undefined && props.site.type.length > 0 &&
-            <TextField disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} />
+            <TextField aria-label="type" disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} />
         }
         {
             props.site.address !== undefined && props.site.address.length > 0 &&
-            <TextField disabled={true} value={props.site.address} label="Adress" style={{ marginTop: "5px" }} />
+            <TextField aria-label="adress" disabled={true} value={props.site.address} label="Adress" style={{ marginTop: "5px" }} />
         }
         {
             props.site.heighAGLInMeters !== undefined && props.site.heighAGLInMeters > 0 &&
-            <TextField disabled={true} value={props.site.heighAGLInMeters} label="AMSL in meters" style={{ marginTop: "5px" }} />
+            <TextField aria-label="amsl-in-meters" disabled={true} value={props.site.heighAGLInMeters} label="AMSL in meters" style={{ marginTop: "5px" }} />
         }
         {
             props.site.antennaHeightAGLInMeters !== undefined && props.site.antennaHeightAGLInMeters > 0 &&
-            <TextField disabled={true} value={props.site.antennaHeightAGLInMeters} label="Atenna above ground in meters" style={{ marginTop: "5px" }} />
+            <TextField aria-label="antenna-above-ground-in-meters" disabled={true} value={props.site.antennaHeightAGLInMeters} label="Atenna above ground in meters" style={{ marginTop: "5px" }} />
         }
          
-        <TextField style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lat)} label="Latitude" />
-        <TextField style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lon, true)} label="Longitude" />
+        <TextField aria-label="latitude" style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lat)} label="Latitude" />
+        <TextField aria-label="longitude" style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lon, true)} label="Longitude" />
 
         <AppBar position="static" style={{ marginTop: "5px", background: '#2E3B55' }}>
             <Tabs id="site-tabs" value={value} onChange={onHandleTabChange} aria-label="simple tabs example">
@@ -115,12 +115,12 @@ const SiteDetails: React.FunctionComponent<props> = (props) => {
             <>
                 {
                     props.site.links.length === 0 &&
-                    <Typography variant="body1" style={{ marginTop: '10px' }}>No links available.</Typography>
+                    <Typography aria-label="no-links-available" variant="body1" style={{ marginTop: '10px' }}>No links available.</Typography>
                 }
                
                 {
                     props.site.links.length > 0 &&
-                    <DenseTable height={height} hover={true} headers={["Link Name", "Azimuth in °"]}  data={linkRows} onClick={props.onLinkClick}  ></DenseTable>
+                    <DenseTable ariaLabel="available-links-table-entry" height={height} hover={true} headers={["Link Name", "Azimuth in °"]}  data={linkRows} onClick={props.onLinkClick}  ></DenseTable>
                /**
                 * 
                 * */
@@ -136,12 +136,12 @@ const SiteDetails: React.FunctionComponent<props> = (props) => {
             <>
                 {
                     props.site.devices.length === 0 &&
-                    <Typography variant="body1" style={{ marginTop: '10px' }}>No nodes available.</Typography>
+                    <Typography aria-label="no-nodes-avilable" variant="body1" style={{ marginTop: '10px' }}>No nodes available.</Typography>
                 }
 
                 {
                     props.site.devices.length>0 && props.updatedDevices !== null &&
-                    <DenseTable navigate={props.navigate} height={height} hover={false} headers={["ID","Name","Type", "Manufacturer","Owner","Status", "Ports", "Actions"]} actions={true} data={props.updatedDevices!} />
+                    <DenseTable ariaLabel="available-nodes-table-entry" navigate={props.navigate} height={height} hover={false} headers={["ID","Name","Type", "Manufacturer","Owner","Status", "Ports", "Actions"]} actions={true} data={props.updatedDevices!} />
                 }
             </>
         }