diff options
| author | Luiz Kill <luizkill@gmail.com> | 2022-07-30 11:38:38 -0300 |
|---|---|---|
| committer | Luiz Kill <luizkill@gmail.com> | 2022-08-02 07:52:35 -0300 |
| commit | c434422a9216fd0793d896c7ac271206262c4e38 (patch) | |
| tree | 8e6fa40f28dcbaca87afde7acec46ce60071456c | |
| parent | b1961a111581e9958c823087429b98f77318607e (diff) | |
| download | trackermap-web-c434422a9216fd0793d896c7ac271206262c4e38.tar.gz trackermap-web-c434422a9216fd0793d896c7ac271206262c4e38.tar.bz2 trackermap-web-c434422a9216fd0793d896c7ac271206262c4e38.zip | |
Adds a draggable status card to the modern interface
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/src/main/StatusCard.js | 161 |
2 files changed, 88 insertions, 74 deletions
diff --git a/modern/package.json b/modern/package.json index 5e50d70d..e34cb7e0 100644 --- a/modern/package.json +++ b/modern/package.json @@ -20,6 +20,7 @@ "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.5", "react-mui-dropzone": "^4.0.6", "react-redux": "^8.0.2", "react-router-dom": "^6.3.0", diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js index 373b02ab..852b7cc6 100644 --- a/modern/src/main/StatusCard.js +++ b/modern/src/main/StatusCard.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; +import Draggable from 'react-draggable'; import { Card, CardContent, @@ -155,82 +156,94 @@ const StatusCard = ({ deviceId, onClose }) => { return ( <> {device && ( - <Card elevation={3} className={classes.card}> - {deviceImage ? ( - <CardMedia - className={classes.media} - image={`/api/media/${device.uniqueId}/${deviceImage}`} - > - <IconButton size="small" onClick={onClose}> - <CloseIcon fontSize="small" className={classes.mediaButton} /> + <Draggable + handle={`.${classes.header}`} + > + <Card elevation={3} className={classes.card}> + {deviceImage ? ( + <CardMedia + className={classes.media} + image={`/api/media/${device.uniqueId}/${deviceImage}`} + > + <IconButton + size="small" + onClick={onClose} + onTouchStart={onClose} + > + <CloseIcon fontSize="small" className={classes.mediaButton} /> + </IconButton> + </CardMedia> + ) : ( + <div className={classes.header}> + <Typography variant="body2" color="textSecondary"> + {device.name} + </Typography> + <IconButton + size="small" + onClick={onClose} + onTouchStart={onClose} + > + <CloseIcon fontSize="small" /> + </IconButton> + </div> + )} + {position && ( + <CardContent className={classes.content}> + <Table size="small" classes={{ root: classes.table }}> + <TableBody> + {positionItems.filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => ( + <StatusRow + key={key} + name={positionAttributes[key].name} + content={( + <PositionValue + position={position} + property={position.hasOwnProperty(key) ? key : null} + attribute={position.hasOwnProperty(key) ? null : key} + /> + )} + /> + ))} + </TableBody> + </Table> + </CardContent> + )} + <CardActions classes={{ root: classes.actions }} disableSpacing> + <IconButton + color="secondary" + onClick={(e) => setAnchorEl(e.currentTarget)} + disabled={!position} + > + <PendingIcon /> </IconButton> - </CardMedia> - ) : ( - <div className={classes.header}> - <Typography variant="body2" color="textSecondary"> - {device.name} - </Typography> - <IconButton size="small" onClick={onClose}> - <CloseIcon fontSize="small" /> + <IconButton + onClick={() => navigate('/replay')} + disabled={!position} + > + <ReplayIcon /> </IconButton> - </div> - )} - {position && ( - <CardContent className={classes.content}> - <Table size="small" classes={{ root: classes.table }}> - <TableBody> - {positionItems.filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => ( - <StatusRow - key={key} - name={positionAttributes[key].name} - content={( - <PositionValue - position={position} - property={position.hasOwnProperty(key) ? key : null} - attribute={position.hasOwnProperty(key) ? null : key} - /> - )} - /> - ))} - </TableBody> - </Table> - </CardContent> - )} - <CardActions classes={{ root: classes.actions }} disableSpacing> - <IconButton - color="secondary" - onClick={(e) => setAnchorEl(e.currentTarget)} - disabled={!position} - > - <PendingIcon /> - </IconButton> - <IconButton - onClick={() => navigate('/replay')} - disabled={!position} - > - <ReplayIcon /> - </IconButton> - <IconButton - onClick={() => navigate(`/settings/command-send/${deviceId}`)} - disabled={readonly} - > - <PublishIcon /> - </IconButton> - <IconButton - onClick={() => navigate(`/settings/device/${deviceId}`)} - disabled={deviceReadonly} - > - <EditIcon /> - </IconButton> - <IconButton - onClick={() => setRemoving(true)} - disabled={deviceReadonly} - className={classes.negative} - > - <DeleteIcon /> - </IconButton> - </CardActions> - </Card> + <IconButton + onClick={() => navigate(`/settings/command-send/${deviceId}`)} + disabled={readonly} + > + <PublishIcon /> + </IconButton> + <IconButton + onClick={() => navigate(`/settings/device/${deviceId}`)} + disabled={deviceReadonly} + > + <EditIcon /> + </IconButton> + <IconButton + onClick={() => setRemoving(true)} + disabled={deviceReadonly} + className={classes.negative} + > + <DeleteIcon /> + </IconButton> + </CardActions> + </Card> + </Draggable> )} {position && ( <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}> |