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/package.json           |   1 +
 modern/src/main/StatusCard.js | 161 +++++++++++++++++++++++-------------------
 2 files changed, 88 insertions(+), 74 deletions(-)

(limited to 'modern')

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


From 9eeef203076207c98f4b25903a9ec463d225b809 Mon Sep 17 00:00:00 2001
From: Luiz Kill <luizkill@gmail.com>
Date: Sat, 30 Jul 2022 11:48:11 -0300
Subject: Adds react-draggable to package-lock.json

---
 modern/package-lock.json | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'modern')

diff --git a/modern/package-lock.json b/modern/package-lock.json
index 248eca60..10e3ee71 100644
--- a/modern/package-lock.json
+++ b/modern/package-lock.json
@@ -31670,6 +31670,15 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "requires": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-dropzone": {
       "version": "10.2.2",
       "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-10.2.2.tgz",
-- 
cgit v1.2.3


From a33fb2affc50cfacbeac62cce0f82fc425228992 Mon Sep 17 00:00:00 2001
From: Luiz Kill <luizkill@gmail.com>
Date: Sat, 30 Jul 2022 22:04:14 -0300
Subject: Updates package-lock.json after adding react-draggable

---
 modern/package-lock.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'modern')

diff --git a/modern/package-lock.json b/modern/package-lock.json
index 10e3ee71..89fb6c9f 100644
--- a/modern/package-lock.json
+++ b/modern/package-lock.json
@@ -1,7 +1,7 @@
 {
   "name": "traccar",
   "version": "5.2.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 1,
   "requires": true,
   "packages": {
     "": {
@@ -32717,14 +32717,6 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
-    "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -32791,6 +32783,14 @@
         "es-abstract": "^1.19.5"
       }
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "stringify-object": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-- 
cgit v1.2.3


From 7c0dceca74a01948f8a002cfba157c179a2b889c Mon Sep 17 00:00:00 2001
From: Luiz Kill <luizkill@gmail.com>
Date: Sun, 31 Jul 2022 06:52:09 -0300
Subject: Fixes react-draggable on mobile devices

---
 modern/src/main/StatusCard.js | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'modern')

diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index 852b7cc6..52cf9d48 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -212,30 +212,35 @@ const StatusCard = ({ deviceId, onClose }) => {
               <IconButton
                 color="secondary"
                 onClick={(e) => setAnchorEl(e.currentTarget)}
+                onTouchStart={(e) => setAnchorEl(e.currentTarget)}
                 disabled={!position}
               >
                 <PendingIcon />
               </IconButton>
               <IconButton
                 onClick={() => navigate('/replay')}
+                onTouchStart={() => navigate('/replay')}
                 disabled={!position}
               >
                 <ReplayIcon />
               </IconButton>
               <IconButton
                 onClick={() => navigate(`/settings/command-send/${deviceId}`)}
+                onTouchStart={() => navigate(`/settings/command-send/${deviceId}`)}
                 disabled={readonly}
               >
                 <PublishIcon />
               </IconButton>
               <IconButton
                 onClick={() => navigate(`/settings/device/${deviceId}`)}
+                onTouchStart={() => navigate(`/settings/device/${deviceId}`)}
                 disabled={deviceReadonly}
               >
                 <EditIcon />
               </IconButton>
               <IconButton
                 onClick={() => setRemoving(true)}
+                onTouchStart={() => setRemoving(true)}
                 disabled={deviceReadonly}
                 className={classes.negative}
               >
-- 
cgit v1.2.3


From a688682933b9c12b8c81d9b65946a23206be637f Mon Sep 17 00:00:00 2001
From: Luiz Kill <luizkill@gmail.com>
Date: Mon, 1 Aug 2022 08:54:05 -0300
Subject: Fixes package-lock.json

---
 modern/package-lock.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'modern')

diff --git a/modern/package-lock.json b/modern/package-lock.json
index 89fb6c9f..10e3ee71 100644
--- a/modern/package-lock.json
+++ b/modern/package-lock.json
@@ -1,7 +1,7 @@
 {
   "name": "traccar",
   "version": "5.2.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
@@ -32717,6 +32717,14 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -32783,14 +32791,6 @@
         "es-abstract": "^1.19.5"
       }
     },
-    "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "stringify-object": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-- 
cgit v1.2.3


From 2b25556ab78528cc77767f352aff5fc3f6f7e113 Mon Sep 17 00:00:00 2001
From: Luiz Kill <luizkill@gmail.com>
Date: Mon, 1 Aug 2022 14:01:29 -0300
Subject: Moves the drag handle to the card header

---
 modern/src/main/StatusCard.js | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'modern')

diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index 52cf9d48..852b7cc6 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -212,35 +212,30 @@ const StatusCard = ({ deviceId, onClose }) => {
               <IconButton
                 color="secondary"
                 onClick={(e) => setAnchorEl(e.currentTarget)}
-                onTouchStart={(e) => setAnchorEl(e.currentTarget)}
                 disabled={!position}
               >
                 <PendingIcon />
               </IconButton>
               <IconButton
                 onClick={() => navigate('/replay')}
-                onTouchStart={() => navigate('/replay')}
                 disabled={!position}
               >
                 <ReplayIcon />
               </IconButton>
               <IconButton
                 onClick={() => navigate(`/settings/command-send/${deviceId}`)}
-                onTouchStart={() => navigate(`/settings/command-send/${deviceId}`)}
                 disabled={readonly}
               >
                 <PublishIcon />
               </IconButton>
               <IconButton
                 onClick={() => navigate(`/settings/device/${deviceId}`)}
-                onTouchStart={() => navigate(`/settings/device/${deviceId}`)}
                 disabled={deviceReadonly}
               >
                 <EditIcon />
               </IconButton>
               <IconButton
                 onClick={() => setRemoving(true)}
-                onTouchStart={() => setRemoving(true)}
                 disabled={deviceReadonly}
                 className={classes.negative}
               >
-- 
cgit v1.2.3


From 4d31533af3b66fbbcff9565bedc13f4916b68e6c Mon Sep 17 00:00:00 2001
From: Luiz Kill <luizkill@gmail.com>
Date: Tue, 2 Aug 2022 11:11:16 -0300
Subject: Adds the media selector to the handle

---
 modern/src/main/StatusCard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'modern')

diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index 852b7cc6..f80d9705 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -157,7 +157,7 @@ const StatusCard = ({ deviceId, onClose }) => {
     <>
       {device && (
         <Draggable
-          handle={`.${classes.header}`}
+          handle={deviceImage ? `.${classes.media}` : `.${classes.header}`}
         >
           <Card elevation={3} className={classes.card}>
             {deviceImage ? (
-- 
cgit v1.2.3


From a769c2d1206e86cf446ffdf8c7b68ef834624d0a Mon Sep 17 00:00:00 2001
From: Luiz Kill <luizkill@gmail.com>
Date: Tue, 2 Aug 2022 11:43:52 -0300
Subject: Refactors the handle selection

---
 modern/package-lock.json      | 14 ++++++++++++++
 modern/src/main/StatusCard.js |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

(limited to 'modern')

diff --git a/modern/package-lock.json b/modern/package-lock.json
index 10e3ee71..7265f0e3 100644
--- a/modern/package-lock.json
+++ b/modern/package-lock.json
@@ -25,6 +25,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",
@@ -16417,6 +16418,19 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-draggable": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
+      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-dropzone": {
       "version": "10.2.2",
       "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-10.2.2.tgz",
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js
index f80d9705..5ca45066 100644
--- a/modern/src/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -157,7 +157,7 @@ const StatusCard = ({ deviceId, onClose }) => {
     <>
       {device && (
         <Draggable
-          handle={deviceImage ? `.${classes.media}` : `.${classes.header}`}
+          handle={`.${classes.media}, .${classes.header}`}
         >
           <Card elevation={3} className={classes.card}>
             {deviceImage ? (
-- 
cgit v1.2.3