diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx')
| -rw-r--r-- | sdnr/wt/odlux/apps/networkMapApp/src/components/details/stadokDetailsPopup.tsx | 274 |
1 files changed, 0 insertions, 274 deletions
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> = (props) => { - const classes = useStyles(); - - const [open, setOpen] = React.useState(props.open); - const [value, setValue] = React.useState("devices"); - const [orders, setOrders] = React.useState<OrderToDisplay[]|null>(null); - - const DialogTitle = withStyles(styles)((props: any) => { - const { children, classes, onClose, ...other } = props; - return ( - <MuiDialogTitle disableTypography className={classes.root} {...other}> - <Typography variant="h6">{children}</Typography> - {onClose ? ( - <IconButton aria-label="close" style={{position: 'absolute', top:0, right:0, color: 'black'}} onClick={onClose}> - <CloseIcon /> - </IconButton> - ) : null} - </MuiDialogTitle> - ); - }); - - 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<StadokOrder[]>(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 (<div style={{ height: 300 }}> - <Typography variant="body1" style={{ marginTop: '10px' }}> - Loading orders - </Typography> - </div>) - } else if (orders.length === 0) { - return (<div style={{ height: 300 }}> - <Typography variant="body1" style={{ marginTop: '10px' }}> - No orders available - </Typography> - </div>) - } else { - return <DenseTable data={orders} height={300} headers={["Person", "State", "Current Task"]} hover={false} ariaLabelRow="activity-log-table" /> - } - } - - 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") - } - <div style={{ display: 'flex', flexDirection: 'row', flexWrap:'wrap' }}> - - { - 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") - ) - } - - </> - } - </div> - </> - } - - } - - 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 <img className={className} src={url} onClick={e => window.open(url)} /> - - } - - - return (<Dialog onClose={onClose} fullWidth maxWidth="md" aria-labelledby="customized-dialog-title" open={open}> - <DialogTitle id="customized-dialog-title" onClose={onClose}> - {props.site.siteId} - </DialogTitle> - <DialogContent style={{minWidth:'900px'}} dividers> - <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}> - <div style={{ width: '60%', display:'flex', flexDirection: 'column' }}> - - <TextField inputProps={{ 'aria-label': 'type' }} disabled={true} value={props.site.updatedOn} label="Updated on" style={{ marginTop: "5px" }} /> - - - { - props.site.type !== undefined && props.site.type.length > 0 && - <TextField inputProps={{ 'aria-label': 'type' }} disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} /> - } - - - <TextField inputProps={{ 'aria-label': 'adress' }} disabled={true} value={`${props.site.address.streetAndNr}, ${props.site.address.zipCode !== null ? props.site.address.zipCode : ''} ${props.site.address.city}`} label="Address" style={{ marginTop: "5px" }} /> - - - <TextField inputProps={{ 'aria-label': 'latitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.location.lat)} label="Latitude" /> - <TextField inputProps={{ 'aria-label': 'longitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.location.lon, true)} label="Longitude" /> - <AppBar position="static" style={{ marginTop: "5px", background: '#2E3B55' }}> - <Tabs id="site-tabs" variant="scrollable" scrollButtons="on" value={value} onChange={onHandleTabChange} aria-label="simple tabs example"> - <Tab label="Devices" value="devices" /> - <Tab label="Contacts" value="contacts" /> - <Tab label="Saftey" value="safteyInfo" /> - <Tab label="Logs" value="logs" /> - <Tab label="Orders" value="orders" /> - </Tabs> - </AppBar> - { - value == "devices" && (props.site.devices?.length>0 ? - <DenseTable data={props.site.devices} height={300} headers={["Device", "Antenna"]} hover={false} ariaLabelRow="devices-table" /> - : - <div style={{height:300}}> - <Typography variant="body1" style={{ marginTop: '10px' }}> - No devices available - </Typography> - </div>) - } - { - value == "contacts" && (contacts.length>0 ? - <DenseTable data={contacts} height={300} headers={["Person", "Firstname", "Lastname", "Email", "Phone No."]} hover={false} ariaLabelRow="contacts-table" ariaLabelColumn={["person", "firstname", "lastname", "email", "phoneno"]} /> - : - <div style={{height:300}}> - <Typography variant="body1" style={{ marginTop: '10px' }}> - No contacts available - </Typography> - </div>) - } - { - value == "safteyInfo" && (props.site.safteyNotices.length>0 ? - <DenseTable data={props.site.safteyNotices} height={300} headers={["Note"]} hover={false} ariaLabelRow="saftey-info-table" /> - : - <div style={{height:300}}> - <Typography variant="body1" style={{ marginTop: '10px' }}> - No saftey notices applicable - </Typography> - </div>) - } - { - value == "logs" && (props.site.logs.length>0 ? - <DenseTable data={props.site.logs} height={300} headers={["Date","Person", "Activity"]} hover={false} ariaLabelRow="activity-log-table" /> - : - <div style={{height:300}}> - <Typography variant="body1" style={{ marginTop: '10px' }}> - No activity log available - </Typography> - </div>) - } - - { - value ==="orders" && createOrderInfo() - } - - </div> - <div style={{padding: '10px', display: 'flex', alignItems:'center', flexDirection:'column', justifyContent: 'start', width:'40%'}}> - { - props.site.images.length == 0 ? - <Typography variant="body1" style={{ marginTop: '10px' }}> - No images available - </Typography> - : displayImages() - } - </div> - </div> - - </DialogContent> - </Dialog>) - -} - -export default StadokDetailsPopup;
\ No newline at end of file |