From 1a868116614dd9996c78e69941b537e9da19460b Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Tue, 1 Feb 2022 13:18:42 +0100 Subject: Update ODLUX Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes Issue-ID: CCSDK-3580 Signed-off-by: Aijana Schumann Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c --- .../src/components/details/details.tsx | 204 --------------- .../src/components/details/linkDetails.tsx | 130 ---------- .../src/components/details/siteDetails.tsx | 248 ------------------- .../src/components/details/stadokDetailsPopup.tsx | 274 --------------------- 4 files changed, 856 deletions(-) delete mode 100644 sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx delete mode 100644 sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx delete mode 100644 sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx delete mode 100644 sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx (limited to 'sdnr/wt/odlux/apps/networkMapApp/src/components/details') diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx deleted file mode 100644 index 2540b20a7..000000000 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx +++ /dev/null @@ -1,204 +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 connect, { IDispatcher, Connect } from '../../../../../framework/src/flux/connect'; - -import { Site, Device } from '../../model/site'; -import Typography from '@material-ui/core/Typography'; -import { link } from '../../model/link'; -import { Breadcrumbs, Link, Paper } from '@material-ui/core'; -import SiteDetails from './siteDetails'; -import LinkDetails from './linkDetails'; -import { URL_API, URL_BASEPATH } from '../../config'; -import { SelectSiteAction, SelectLinkAction, AddToHistoryAction, ClearHistoryAction, CheckDeviceList, ClearDetailsAction } from '../../actions/detailsAction'; -import { HistoryEntry } from '../../model/historyEntry'; -import { HighlightLinkAction, HighlightSiteAction, RemoveHighlightingAction } from '../../actions/mapActions'; -import { isSite } from '../../utils/utils'; -import { IApplicationStoreState } from '../../../../../framework/src/store/applicationStore'; -import { NavigateToApplication } from '../../../../../framework/src/actions/navigationActions'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; - - -const Details: React.FunctionComponent = (props) => { - - const [message, setMessage] = React.useState("No data selected."); - - - //on mount - React.useEffect(() => { - const detailsId = getDetailsIdFromUrl(); - if (detailsId !== null && props.data?.name !== detailsId) { - loadDetailsData(detailsId) - } - - }, []); - - // if url changed, load details data - React.useEffect(() => { - const detailsId = getDetailsIdFromUrl(); - if (detailsId !== null && props.data?.name !== detailsId) { - loadDetailsData(detailsId) - } - else if(detailsId===null){ - setMessage("No data selected."); - props.clearDetails(); - props.undoMapSelection(); - } - - }, [props.location.pathname]); - - //update url if new element loaded - React.useEffect(() => { - if (props.data !== null) { - const currentUrl = window.location.href; - const parts = currentUrl.split(URL_BASEPATH); - const detailsPath = parts[1].split("/details/"); - props.history.replace(`/${URL_BASEPATH}${detailsPath[0]}/details/${props.data.name}`) - } - - }, [props.data]) - - const onLinkClick = async (id: string) => { - const result = await fetch(`${URL_API}/links/${id}`); - if(result.ok){ - const resultAsJson = await result.json(); - const link = resultAsJson as link; - props.selectLink(link); - props.addHistory({ id: props.data!.name, data: props.data! }); - props.highlightLink(link); - - } - } - - const backClick = (e: any) => { - if (isSite(props.breadcrumbs[0].data)) { - props.selectSite(props.breadcrumbs[0].data) - props.highlightSite(props.breadcrumbs[0].data); - - } else { - props.selectLink(props.breadcrumbs[0].data); - props.highlightLink(props.breadcrumbs[0].data); - - } - - props.clearHistory(); - e.preventDefault(); - } - - const createDetailPanel = (data: Site | link) => { - if (isSite(data)) { - return - } else { - return - } - } - - const getDetailsIdFromUrl = () =>{ - const currentUrl = window.location.href; - const parts = currentUrl.split(URL_BASEPATH); - const detailsPath = parts[1].split("/details/") - return detailsPath[1] ? detailsPath[1] : null; - } - - const loadDetailsData = (id: string) =>{ - - fetch(`${URL_API}/links/${id}`) - .then(res => { - if (res.ok) - return res.json() - else - return Promise.reject() - - }) - .then(result => { - props.selectLink(result) - props.highlightLink(result); - - }) - .catch(error => { - - fetch(`${URL_API}/sites/name/${id}`) - .then(res => { - if (res.ok) - return res.json() - else return Promise.reject(); - }) - .then(result => { - props.selectSite(result); - props.highlightSite(result); - }) - .catch(error =>{ - setMessage("No element with name " + id + " found"); - props.clearDetails(); - props.undoMapSelection(); - }); - }) - } - - const panelId = props.data!== null ? (isSite(props.data) ? 'site-details-panel' : 'link-details-panel' ): 'details-panel'; - - return (
- - { - props.breadcrumbs.length > 0 && - - - {props.breadcrumbs[0].id} - - - {props.data?.name} - - - } - { - props.data !== null ? - createDetailPanel(props.data) - : {message} - - } - -
) -} - -type porps = RouteComponentProps & Connect; - -//select always via details? -const mapStateToProps = (state: IApplicationStoreState) => ({ - data: state.network.details?.data, - breadcrumbs: state.network.details.history, - updatedDevices: state.network.details.checkedDevices -}); - -const mapDispatchToProps = (dispatcher: IDispatcher) => ({ - selectSite: (site: Site) => dispatcher.dispatch(new SelectSiteAction(site)), - selectLink: (link: link) => dispatcher.dispatch(new SelectLinkAction(link)), - clearDetails: () => dispatcher.dispatch(new ClearDetailsAction()), - addHistory: (newEntry: HistoryEntry) => dispatcher.dispatch(new AddToHistoryAction(newEntry)), - clearHistory: () => dispatcher.dispatch(new ClearHistoryAction()), - highlightLink: (link: link) => dispatcher.dispatch(new HighlightLinkAction(link)), - highlightSite: (site: Site) => dispatcher.dispatch(new HighlightSiteAction(site)), - loadDevices: async (networkElements: Device[]) => { await dispatcher.dispatch(CheckDeviceList(networkElements)) }, - navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path, "test3")), - undoMapSelection: () => dispatcher.dispatch(new RemoveHighlightingAction()) - -}) - - -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Details)); \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx deleted file mode 100644 index 96727cc0d..000000000 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx +++ /dev/null @@ -1,130 +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 { link } from '../../model/link'; -import { TextField, Tabs, Tab, Typography, AppBar, Button, Link } from '@material-ui/core'; -import DenseTable from '../denseTable'; -import { LatLonToDMS } from '../../utils/mapUtils'; - -type panelId = "siteA" | "siteB"; -type props = { link: link }; - -const LinkDetails: React.FunctionComponent = (props) => { - - const [value, setValue] = React.useState("siteA"); - const [height, setHeight] = React.useState(330); - - const handleResize = () =>{ - const el = document.getElementById('link-details-panel')?.getBoundingClientRect(); - const el2 = document.getElementById('site-tabs')?.getBoundingClientRect(); - - if(el && el2){ - if(props.link.type==="microwave") - setHeight(el!.height - el2!.y -50); - else - setHeight(el!.height - el2!.y +20); - - } - } - - //on mount - React.useEffect(()=>{ - handleResize(); - - //window.addEventListener("resize", handleResize); - },[]); - - React.useEffect(()=>{ - handleResize(); - }, [props.link]) - - const onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: panelId) => { - setValue(newValue); - } - - const onCalculateLinkClick = (e: React.MouseEvent) =>{ - e.preventDefault(); - const siteA= props.link.locationA; - const siteB =props.link.locationB; - const nameA = props.link.siteA; - const nameB = props.link.siteB; - const distance = props.link.length > 0 ? props.link.length : props.link.calculatedLength; - const azimuthA = props.link.azimuthA; - const azimuthB = props.link.azimuthB; - const antennaA = props.link.locationA.antenna; - const antennaB = props.link.locationB.antenna; - - - let antennaData = ""; - if(antennaA!==null && antennaB!==null){ - antennaData = `&antennaNameA=${antennaA.name}&antennaGainA=${antennaA.gain}&waveguideLossA=${antennaA.waveguideLossIndB}&antennaNameB=${antennaB.name}&antennaGainB=${antennaB.gain}&waveguideLossB=${antennaB.waveguideLossIndB}`; - } - - - - const baseUrl = window.location.pathname.split('#')[0]; - window.open(`${baseUrl}#/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}${antennaData}`) - - } - - const onLineofSightClick = (e: React.MouseEvent) =>{ - e.preventDefault(); - - const siteA= props.link.locationA; - const siteB =props.link.locationB; - - //TODO: add check if available - let heightPart = `&amslA=${siteA.amsl}&antennaHeightA=${siteA.antennaHeight}&amslB=${siteB.amsl}&antennaHeightB=${siteB.antennaHeight}`; - - - const baseUrl = window.location.pathname.split('#')[0]; - window.open(`${baseUrl}#/lineofsight/los?lat1=${siteA.lat}&lon1=${siteA.lon}&lat2=${siteB.lat}&lon2=${siteB.lon}${heightPart}`); - } - - const data = [ - - {name:"Site Name", val1: props.link.siteA, val2: props.link.siteB}, - {name:"Latitude", val1: LatLonToDMS(props.link.locationA.lat), val2: LatLonToDMS(props.link.locationB.lat)}, - {name:"Longitude", val1: LatLonToDMS(props.link.locationA.lon, true), val2: LatLonToDMS(props.link.locationB.lon, true)}, - props.link.azimuthA!= null && props.link.azimuthB != null && {name:"Azimuth in °", val1: props.link.azimuthA.toFixed(2), val2: props.link.azimuthB.toFixed(2)} -]; - - return (
-

{props.link.name}

- - - - - - - SITE DETAILS - - - { - props.link.type==="microwave" &&<> - - - - - } -
) -} - -export default LinkDetails; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx deleted file mode 100644 index 7f0c1c926..000000000 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx +++ /dev/null @@ -1,248 +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 { TextField, Tabs, Tab, Typography, AppBar, Button, Tooltip } from '@material-ui/core'; - - -import MaterialTable, { ColumnModel, ColumnType, MaterialTableCtorType } from "../../../../../framework/src/components/material-table"; - - -import { Site, Device, Address } from '../../model/site'; -import DenseTable from '../denseTable'; -import { LatLonToDMS } from '../../utils/mapUtils'; -import { CheckDeviceList, InitializeLoadedDevicesAction } from '../../actions/detailsAction'; -import { NavigateToApplication } from '../../../../../framework/src/actions/navigationActions'; -import connect, { Connect, IDispatcher } from '../../../../../framework/src/flux/connect'; -import { IApplicationStoreState } from '../../../../../framework/src/store/applicationStore'; -import StadokSite from '../../model/stadokSite'; -import { requestRest } from '../../../../../framework/src/services/restService'; -import StadokDetailsPopup from './stadokDetailsPopup'; - -type linkRow = { name: string, azimuth?: string} -type deviceRow = { id: string;type: string,name: string,manufacturer: string,owner: string,status?: string,port: number[]} - - -type panelId="links" | "nodes"; -type siteDetailProps = { - site: Site, - onLinkClick(id: string): void, -} & props; - -type props = Connect; - - -const SiteDetails: React.FunctionComponent = (props) => { - - const [value, setValue] = React.useState("links"); - const [height, setHeight] = React.useState(330); - const [openPopup, setOpenPopup] = React.useState(false); - const [staSite, setStaSite] = React.useState(null); - - const handleResize = () =>{ - const el = document.getElementById('site-details-panel')?.getBoundingClientRect(); - const el2 = document.getElementById('site-tabs')?.getBoundingClientRect(); - - if(el && el2){ - setHeight(el!.height - el2!.y +20); - } - - } - - //on mount - React.useEffect(()=>{ - handleResize(); - - window.addEventListener("resize", ()=>{console.log("really got resized.")}); - },[]); - - // on update - React.useEffect(()=>{ - - if(props.site.devices!== null && props.site.devices.length>0){ - props.initializeDevices(props.site.devices); - props.loadDevices(props.site.devices); - } - - handleResize(); - - }, [props.site]); - - const onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: panelId) => { - setValue(newValue); - } - - const getFurtherInformation = (url: string) =>{ - - const request = requestRest(url, { method: "GET"}); - - request.then(result =>{ - if(result){ - setStaSite(result); - setOpenPopup(true); - }else{ - console.error(result); - } - - - }); - } - - const closePopup = () =>{ - setOpenPopup(false); - } - - //prepare link table - - let hasAzimuth = false; - const linkRows: linkRow[] = props.site.links?.map(link=> - { - if(link.azimuthB!==null){ - hasAzimuth=true; - return {name: link.name, azimuth: link.azimuthB.toFixed(2) } - - }else{ - return {name: link.name } - } - }); - - const linkTableHeader = hasAzimuth ? ["Link Name", "Azimuth in °"] : ["Link Name"]; - - //prepare device table - const deviceRows : deviceRow[] = props.updatedDevices?.map(device=>{ - return{ - id: device.id, - name: device.name, - type: device.type, - status: device.status, - manufacturer: device.manufacturer, - owner: device.owner, - port: device.port - } - }); - - - const adressString = props.site.address == null ? null : buildAdress(props.site.address); - - - return (
-

{props.site.name}

- { - props.site.operator !== '' && props.site.operator !== null ? - : - - } - { - props.site.type !== undefined && props.site.type.length > 0 && - - } - { - adressString !== null && - - } - { - props.site.heightAmslInMeters !== undefined && props.site.heightAmslInMeters > 0 && - - } - { - props.site.antennaHeightAmslInMeters !== undefined && props.site.antennaHeightAmslInMeters > 0 && - - } - - - - - - - - - - - { - value === "links" && - <> - { - props.site.links==null && - No links available. - } - - { - props.site.links?.length > 0 && - - } - - - - } - { - value === "nodes" && - <> - { - props.site.devices === null && - No nodes available. - } - - { - props.site.devices?.length>0 && props.updatedDevices !== null && - - } - - } - { - props.isSitedocReachable && props.site.furtherInformation!==null && props.site.furtherInformation.length>0 && - - } - - { - staSite !== null && openPopup && - } - -
- ) -} - -const buildAdress = (adress: Address) =>{ - - switch(adress.country){ - case "de": - return `${adress.streetAndNr}, ${adress.zipCode!== null? adress.zipCode : ''} ${adress.city}` - - case "us": - return `${adress.streetAndNr}, ${adress.city} ${adress.zipCode!== null? adress.zipCode : ''}` - - default: - console.log("address formatting for country {"+adress.country+"} not recognized, defaulting."); - return `${adress.streetAndNr}, ${adress.zipCode!== null? adress.zipCode : ''} ${adress.city}` - } - - -} - -const mapStateToProps = (state: IApplicationStoreState) => ({ - updatedDevices: state.network.details.checkedDevices, - isSitedocReachable: state.network.details.isSitedocReachable -}); - -const mapDispatchToProps = (dispatcher: IDispatcher) => ({ - initializeDevices: (devices: Device[]) => {dispatcher.dispatch(new InitializeLoadedDevicesAction(devices))}, - loadDevices: async (networkElements: Device[]) => { await dispatcher.dispatch(CheckDeviceList(networkElements)) }, - navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path, "test3")), - -}) - -export default connect(mapStateToProps, mapDispatchToProps)(SiteDetails); \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx deleted file mode 100644 index 4f3235db7..000000000 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx +++ /dev/null @@ -1,274 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2021 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 MuiDialogTitle from '@material-ui/core/DialogTitle'; -import { AppBar, Dialog, DialogContent, IconButton, Tab, Tabs, TextField, Typography } from '@material-ui/core'; -import CloseIcon from '@material-ui/icons/Close'; -import { withStyles, WithStyles, createStyles, Theme, makeStyles } from '@material-ui/core/styles'; - - -import StadokSite from '../../model/stadokSite'; -import { LatLonToDMS } from '../../utils/mapUtils'; -import DenseTable from '../../components/denseTable'; -import { requestRest } from '../../../../../framework/src/services/restService'; -import { OrderToDisplay, StadokOrder } from '../../model/stadokOrder'; -import { CSSProperties } from '@material-ui/core/styles/withStyles'; -import { SITEDOC_URL } from '../../config'; - - -type props = { site: StadokSite; onClose(): void; open:boolean }; - -const styles = (theme: Theme) => createStyles({ - root: { - margin: 0, - padding: theme.spacing(2), - }, - closeButton: { - position: 'absolute', - right: theme.spacing(1), - top: theme.spacing(1), - color: theme.palette.grey[500], - }, -}); - -const useStyles = makeStyles({ - largeImage:{cursor:'pointer', width:300}, - smallImage:{cursor:'pointer', width: 50, marginTop:'10px', marginLeft:'10px'} -}); - -const StadokDetailsPopup: React.FunctionComponent = (props) => { - const classes = useStyles(); - - const [open, setOpen] = React.useState(props.open); - const [value, setValue] = React.useState("devices"); - const [orders, setOrders] = React.useState(null); - - const DialogTitle = withStyles(styles)((props: any) => { - const { children, classes, onClose, ...other } = props; - return ( - - {children} - {onClose ? ( - - - - ) : null} - - ); - }); - - const getContacts = (site: StadokSite) =>{ - const contacts = []; - - if(site.createdBy){ - contacts.push({h: "Site Creator",col1: site.createdBy.firstName, col2: site.createdBy.lastName, col3: site.createdBy.email, col4: site.createdBy.telephoneNumber }); - } - - if(site.contacts.manager){ - contacts.push({h: "Manager",col1: site.contacts.manager.firstName, col2: site.contacts.manager.lastName, col3: site.contacts.manager.email, col4: site.contacts.manager.telephoneNumber }); - } - - if(site.contacts.owner){ - contacts.push({h: "Owner",col1: site.contacts.owner.firstName, col2: site.contacts.owner.lastName, col3: site.contacts.owner.email, col4: site.contacts.owner.telephoneNumber }); - } - return contacts; - } - - const onClose = () =>{ - // setOpen(false); - props.onClose() - } - - //todo: use a set 'panelId' -> which values are allowed - const onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: string) => { - setValue(newValue); -} -console.log(props.site) - const contacts = getContacts(props.site); - - const orderUrl=`${SITEDOC_URL}/site/${props.site.siteId}/orders`; - - if(orders==null){ - requestRest(orderUrl,{ method: "GET"}).then(result =>{ - if(result){ - const orderList = result.map(order =>{ - return OrderToDisplay.parse(order); - }); - setOrders(orderList); - - }else{ - setOrders([]); - } - }); - } - - const createOrderInfo = () => { - - if (orders === null) { - return (
- - Loading orders - -
) - } else if (orders.length === 0) { - return (
- - No orders available - -
) - } else { - return - } - } - - const displayImages = () => { - - if (props.site.images.length === 1) { - return stadokImage(props.site.siteId, props.site.images[0],"large") - } else { - return <> - { - stadokImage(props.site.siteId, props.site.images[0], "large") - } -
- - { - props.site.images.length<=9 ? - props.site.images.slice(1, props.site.images.length).map(image => - stadokImage(props.site.siteId, image, "small") - ) - : - <> - { - props.site.images.slice(1, 9).map(image => - stadokImage(props.site.siteId, image, "small") - ) - } - - - } -
- - } - - } - - const stadokImage = (siteId: string, imagename: string, size: 'large' | 'small') => { - const url = `${SITEDOC_URL}/site/${siteId}/files/${imagename}`; - const className = size === "small" ? classes.smallImage : classes.largeImage; - return window.open(url)} /> - - } - - - return ( - - {props.site.siteId} - - -
-
- - - - - { - props.site.type !== undefined && props.site.type.length > 0 && - - } - - - - - - - - - - - - - - - - - { - value == "devices" && (props.site.devices?.length>0 ? - - : -
- - No devices available - -
) - } - { - value == "contacts" && (contacts.length>0 ? - - : -
- - No contacts available - -
) - } - { - value == "safteyInfo" && (props.site.safteyNotices.length>0 ? - - : -
- - No saftey notices applicable - -
) - } - { - value == "logs" && (props.site.logs.length>0 ? - - : -
- - No activity log available - -
) - } - - { - value ==="orders" && createOrderInfo() - } - -
-
- { - props.site.images.length == 0 ? - - No images available - - : displayImages() - } -
-
- - - ) - -} - -export default StadokDetailsPopup; \ No newline at end of file -- cgit 1.2.3-korg