From c434422a9216fd0793d896c7ac271206262c4e38 Mon Sep 17 00:00:00 2001
From: Luiz Kill <luizkill@gmail.com>
Date: Sat, 30 Jul 2022 11:38:38 -0300
Subject: Adds a draggable status card to the modern interface

---
 modern/src/main/StatusCard.js | 161 +++++++++++++++++++++++-------------------
 1 file changed, 87 insertions(+), 74 deletions(-)

(limited to 'modern/src/main')

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)}>
-- 
cgit v1.2.3