diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/networkMapApp/src/components/details')
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!} /> } </> } |