Skip to content

Commit

Permalink
New DeviceCard
Browse files Browse the repository at this point in the history
  • Loading branch information
@YeonV
YeonV committed Sep 17, 2021
1 parent 31c12f3 commit a1c6096
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 77 deletions.
158 changes: 91 additions & 67 deletions src/pages/Devices/DeviceCard/DeviceCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, forwardRef, useRef } from 'react';
import clsx from 'clsx';
import { useTheme, withStyles } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
Expand All @@ -22,12 +22,19 @@ import BladeIcon from '../../../components/Icons/BladeIcon';
import { Delete, MoreVert } from '@material-ui/icons';
import { ListItemIcon, Menu, MenuItem } from '@material-ui/core';

const MuiMenu = forwardRef((props, ref) => {
return <Menu ref={ref} {...props} />;
});
const MuiMenuItem = forwardRef((props, ref) => {
return <MenuItem ref={ref} {...props} />;
});

const StyledMenu = withStyles({
paper: {
border: '1px solid #d3d4d5',
},
})((props) => (
<Menu
<MuiMenu
elevation={0}
getContentAnchorEl={null}
onClick={(e) => e.preventDefault()}
Expand Down Expand Up @@ -57,13 +64,15 @@ const StyledMenu = withStyles({
const DeviceCard = ({ virtual, index }) => {
const classes = useDeviceCardStyles();
const theme = useTheme();
const menuRef = useRef(null)
const isMobile = useMediaQuery(theme.breakpoints.down(580));
const getVirtuals = useStore((state) => state.getVirtuals);
const virtuals = useStore((state) => state.virtuals);
const devices = useStore((state) => state.devices);
const deleteVirtual = useStore((state) => state.deleteVirtual);
const setDialogOpenAddDevice = useStore((state) => state.setDialogOpenAddDevice);
const setDialogOpenAddVirtual = useStore((state) => state.setDialogOpenAddVirtual);
const graphs = useStore((state) => state.graphs);

const [expanded, setExpanded] = useState(false);
const variant = 'outlined';
Expand Down Expand Up @@ -97,31 +106,30 @@ const DeviceCard = ({ virtual, index }) => {
<Card
component={NavLink}
to={`/device/${virtuals[virtual]?.id}`}
className={classes.virtualCardPortrait}
style={{
className={`${classes.virtualCardPortrait} ${Object.keys(virtuals[virtual]?.effect).length > 0 ? 'active' : '' }`}
style={{
textDecoration: 'none',
order: !(devices[Object.keys(devices).find(d => d === virtual)]?.active_virtuals.length > 0 || virtuals[virtual]?.effect.name)
? 100
: 'unset'
: !virtuals[virtual]?.effect.name
? 50
: 'unset'
}}>
<div className={classes.virtualCardContainer}>

{/* <NavLink
to={`/device/${virtuals[virtual]?.id}`}
className={classes.virtualLink}
> */}
<BladeIcon
colorIndicator={Object.keys(virtuals[virtual]?.effect).length > 0}
name={virtuals[virtual]?.config && virtuals[virtual]?.config.icon_name && virtuals[virtual]?.config.icon_name}
className={classes.virtualIcon}
card={true} />
{/* </NavLink> */}

<div className={`${classes.virtualIconWrapper}`}>
<BladeIcon
colorIndicator={!graphs && Object.keys(virtuals[virtual]?.effect).length > 0}
name={virtuals[virtual]?.config && virtuals[virtual]?.config.icon_name && virtuals[virtual]?.config.icon_name}
className={`${classes.virtualIcon} ${expanded ? 'extended' : ''}`}
style={{ zIndex: 3 }}
card={true} />
</div>


<div style={{ padding: '0 0.5rem' }}>
<Typography variant="h6"
// to={`/device/${virtuals[virtual]?.id}`}
// className={classes.virtualLink}
style={{ color: Object.keys(virtuals[virtual]?.effect).length > 0 ? theme.palette.primary.light : 'inherit' }}
style={{ color: !graphs && Object.keys(virtuals[virtual]?.effect).length > 0 ? theme.palette.primary.light : 'inherit' }}
>
{virtual && virtuals[virtual]?.config && virtuals[virtual]?.config.name}
</Typography>
Expand All @@ -131,11 +139,8 @@ const DeviceCard = ({ virtual, index }) => {
</Typography>
: devices[Object.keys(devices).find(d => d === virtual)]?.active_virtuals.length > 0
? <Typography variant="body1" color="textSecondary">
{expanded
? "Streaming from: "
: "Streaming..."}
{expanded && devices[Object.keys(devices).find(d => d === virtual)]?.active_virtuals
.map((s, i) => <li key={i}>{s}</li>)}
Streaming...

</Typography>
: <Typography variant="body1" style={{ color: theme.palette.text.disabled }}>{"off"}</Typography>}
</div>
Expand All @@ -153,17 +158,18 @@ const DeviceCard = ({ virtual, index }) => {
)}
</div>

{/* <IconButton
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded,
})}
onClick={(e) => { e.preventDefault(); handleExpandClick(e); }}
aria-expanded={expanded}
aria-label="show more"
style={{ zIndex: 2 }}
>
<ExpandMoreIcon className={`step-devices-two-${index}`} />
</IconButton> */}
<IconButton
</IconButton>
{/* <IconButton
aria-label="display more actions"
edge="end"
color="inherit"
Expand All @@ -173,7 +179,8 @@ const DeviceCard = ({ virtual, index }) => {
>
<MoreVert />
</IconButton>
<StyledMenu
<MuiMenu
ref={menuRef}
id="simple-menu"
anchorEl={anchorEl}
keepMounted
Expand All @@ -183,22 +190,26 @@ const DeviceCard = ({ virtual, index }) => {
>
<Popover
key={`three-${index}`}
innerKey={`edit-device-${index}`}
type="menuItem"
label={`Delete ${virtuals[virtual]?.is_device ? 'Device' : 'Virtual'}`}
variant={variant}
color={color}
onConfirm={() => {setAnchorEl(null);handleDeleteDevice(virtual)}}
className={`step-devices-three-${index}`}
/>
/>
{virtuals[virtual]?.is_device
?
<MenuItem onClick={(e) => { e.preventDefault(); handleEditDevice(virtuals[virtual]?.is_device) }} className={`step-devices-four-${index}`}>
<MuiMenuItem key={`edit-device-${index}`} onClick={(e) => { e.preventDefault(); handleEditDevice(virtuals[virtual]?.is_device) }} className={`step-devices-four-${index}`}>
<ListItemIcon>
<BuildIcon />
</ListItemIcon>
Edit Device
</MenuItem>
</MuiMenuItem>
: <EditVirtuals
innerKey={`edit-virtual-${index}`}
type="menuItem"
label="Edit Segments"
variant={"text"}
Expand All @@ -207,54 +218,67 @@ const DeviceCard = ({ virtual, index }) => {
className={`step-devices-six`}
icon={<TuneIcon />}
/>}
<MenuItem className={`step-devices-five-${index}`} onClick={(e) => { e.preventDefault(); handleEditVirtual(virtual) }}>
<MuiMenuItem key={`five-${index}`} className={`step-devices-five-${index}`} onClick={(e) => { e.preventDefault(); handleEditVirtual(virtual) }}>
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
Settings
</MenuItem>
</StyledMenu>
</MuiMenuItem>
</MuiMenu> */}

</div>
<PixelGraph virtId={virtuals[virtual]?.id} className={`step-devices-seven`} />
<PixelGraph active={Object.keys(virtuals[virtual]?.effect).length > 0} virtId={virtuals[virtual]?.id} className={`step-devices-seven`} />

{<Collapse in={expanded} timeout="auto" unmountOnExit className={classes.buttonBarMobile}>
<div className={classes.buttonBarMobileWrapper}>
<Popover
variant={variant}
color={color}
onConfirm={() => handleDeleteDevice(virtual)}
className={`step-devices-three-${index}`}
/>

{virtuals[virtual]?.is_device
? <Button
variant={variant}
{<div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, right: 0, zIndex: 1 }}><Collapse in={expanded} timeout="auto" unmountOnExit className={classes.buttonBarMobile}>
<div className={classes.buttonBarMobileWrapper} onClick={(e) => e.preventDefault()}>
<div>
{/* {expanded && devices[Object.keys(devices).find(d => d === virtual)]?.active_virtuals
.map((s, i) => <li key={i}>{s}</li>)} */}
</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'center' }}>
<Popover
variant={"text"}
startIcon={<Delete />}
label="delete"
color={color}
onConfirm={() => handleDeleteDevice(virtual)}
className={`step-devices-three-${index}`}
style={{ width: '100%' }}
/>

{virtuals[virtual]?.is_device
? <Button
variant={"text"}
color={color}
size="small"
startIcon={<BuildIcon />}
className={`step-devices-four-${index}`}
onClick={(e) => { e.preventDefault(); handleEditDevice(virtuals[virtual]?.is_device) }}
>
Edit Device
</Button>
: <EditVirtuals
label="Edit Segments"
variant={"text"}
color={color}
virtual={virtuals[virtual]}
className={`step-devices-six`}
startIcon={<TuneIcon />}
/>}
<Button
variant={"text"}
size="small"
className={`${classes.editButton} step-devices-four-${index}`}
onClick={(e) => { e.preventDefault(); handleEditDevice(virtuals[virtual]?.is_device) }}
startIcon={<SettingsIcon />}
color={color}
className={`step-devices-five-${index}`}
onClick={(e) => { e.preventDefault(); handleEditVirtual(virtual) }}
>
<BuildIcon />
Settings
</Button>
: <EditVirtuals
variant={variant}
color={color}
virtual={virtuals[virtual]}
className={`${classes.editButton} step-devices-six`}
icon={<TuneIcon />}
/>}
<Button
variant={variant}
size="small"
color={color}
className={`${classes.editButton} step-devices-five-${index}`}
onClick={(e) => { e.preventDefault(); handleEditVirtual(virtual) }}
>
<SettingsIcon />
</Button>
</div>

</div>
</Collapse>}
</Collapse></div>}
</Card>

: <></>
Expand Down
41 changes: 34 additions & 7 deletions src/pages/Devices/DeviceCard/DeviceCard.styles.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { makeStyles } from '@material-ui/core/styles';
import { LinearScale } from '@material-ui/icons';

export const useDeviceCardStyles = makeStyles((theme) => ({
virtualCardPortrait: {
Expand All @@ -11,6 +12,11 @@ export const useDeviceCardStyles = makeStyles((theme) => ({
maxWidth: '400px',
width: '100%',
height: '100%',
position: 'relative',
background: theme.palette.background.paper,
// '&.active': {
// background: theme.palette.background.paper,
// },
'&:hover': {
borderColor: theme.palette.text.disabled,
}
Expand All @@ -25,12 +31,34 @@ export const useDeviceCardStyles = makeStyles((theme) => ({
color: `${theme.palette.primary.main} !important`,
},
},
virtualIconWrapper: {
width: '50px',
height: '50px',
marginRight: '0.5rem',
},
virtualIcon: {
margingBottom: '4px',
marginBottom: '4px',
marginRight: '0.5rem',
position: 'relative',
fontSize: '50px',
position: 'absolute',
transformOrigin: 'top left',
transition: 'transform 0.3s ease-in-out',
transitionDelay: '0s',
'&.extended': {
transform: 'scale(2.05)',
transformOrigin: 'top left',
transition: 'transform 0.3s ease-in-out',
transitionDelay: '0s',
},
'& svg': {
transform: 'unset',
width: '100%',
marginTop: '3px',
height: '100%',
}
},

virtualCardContainer: {
display: 'flex',
alignItems: 'center',
Expand Down Expand Up @@ -72,19 +100,18 @@ export const useDeviceCardStyles = makeStyles((theme) => ({
},
buttonBarMobile: {
width: '100%',
height: '100%',
textAlign: 'right',
},
buttonBarMobileWrapper: {
height: 148,
display: 'flex',
margin: '0 -0.5rem -1rem -0.5rem',
padding: '0.5rem 0.5rem 1.5rem 0.5rem',
background: 'rgba(0,0,0,0.4)',
margin: 0,
padding: '0.5rem 80px 0.5rem 0.5rem',
background: 'rgba(0,0,0,0.93)',
'& > div, & > button': {
flexGrow: 1,
flexBasis: '30%'
},
'& > div > button': {
width: '100%'
}
},
}));
14 changes: 11 additions & 3 deletions src/pages/Devices/EditVirtuals/EditVirtuals.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,21 @@ const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});

const MuiMenuItem = React.forwardRef((props, ref) => {
return <MenuItem ref={ref} {...props} />;
});

export default function FullScreenDialog({
virtual,
icon = <Settings />,
startIcon,
label = '',
type,
className,
color = 'default',
variant = 'contained',
onClick = () => {},
innerKey,
}) {
const classes = useEditVirtualsStyles();
const showSnackbar = useStore((state) => state.showSnackbar);
Expand Down Expand Up @@ -61,20 +67,22 @@ export default function FullScreenDialog({
return virtual && virtual.config ? (
<>
{type === 'menuItem'
? <MenuItem className={className} onClick={(e) => { e.preventDefault(); onClick(e); handleClickOpen(e)}}>
? <MuiMenuItem key={innerKey} className={className} onClick={(e) => { e.preventDefault(); onClick(e); handleClickOpen(e)}}>
<ListItemIcon>
{icon}
</ListItemIcon>
{label}
</MenuItem>
</MuiMenuItem>
: <Button
variant={variant}
startIcon={startIcon}
color={color}
onClick={(e)=>{onClick(e); handleClickOpen(e);}}
size="small"
className={className}
>
{icon || <AddCircleIcon />}
{label}
{!startIcon && icon}
</Button>
}
<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
Expand Down

0 comments on commit a1c6096

Please sign in to comment.