From 1fefc133105a0789bf81405a2eed6bc417620d24 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Tue, 16 May 2023 03:25:25 +0200
Subject: [PATCH] implement tab drag & drop

---
 htdocs/lib/settings/ProfileList.js | 32 ++++++++++++++++++++++++++++++
 htdocs/settings.js                 |  1 +
 owrx/controllers/assets.py         |  1 +
 owrx/controllers/settings/sdr.py   |  5 +++--
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 htdocs/lib/settings/ProfileList.js

diff --git a/htdocs/lib/settings/ProfileList.js b/htdocs/lib/settings/ProfileList.js
new file mode 100644
index 00000000..52d35fa3
--- /dev/null
+++ b/htdocs/lib/settings/ProfileList.js
@@ -0,0 +1,32 @@
+$.fn.profileList = function() {
+    this.each(function () {
+        var $profileList = $(this);
+        var $profiles = $profileList.find('.profile');
+        $profiles.attr('draggable', 'true');
+        $profiles.find('a').attr('draggable', 'false');
+        var $profileEl;
+        var originalIndex;
+        $profileList.on('dragstart', '.profile', function(event){
+            $profileEl = $(event.originalEvent.target);
+            originalIndex = $profileEl.index();
+            event.originalEvent.dataTransfer.effectAllowed = 'move';
+            event.originalEvent.dataTransfer.setData('application/x-profile', $profileEl.data('profile-id'));
+        }).on('dragenter', function(event) {
+            event.preventDefault();
+            var $target = $(event.target).closest('.profile');
+            if ($profileEl.index() < $target.index()) {
+                $profileEl.insertAfter($target);
+            } else {
+                $profileEl.insertBefore($target);
+            }
+        }).on('dragover', function(event) {
+            event.preventDefault();
+        }).on('dragend', function(event) {
+            if (event.originalEvent.dataTransfer.dropEffect === 'none') {
+                // drag was aborted - restore original position
+                $profileEl.remove().insertBefore($profileList.children().eq(originalIndex));
+            }
+            $profileEl = undefined;
+        });
+    });
+}
\ No newline at end of file
diff --git a/htdocs/settings.js b/htdocs/settings.js
index b1bc7361..72328e24 100644
--- a/htdocs/settings.js
+++ b/htdocs/settings.js
@@ -9,4 +9,5 @@ $(function(){
     $('#scheduler').schedulerInput();
     $('.exponential-input').exponentialInput();
     $('.device-log-messages').logMessages();
+    $('.profile-tabs').profileList();
 });
\ No newline at end of file
diff --git a/owrx/controllers/assets.py b/owrx/controllers/assets.py
index 2ae1ab14..f356c3cb 100644
--- a/owrx/controllers/assets.py
+++ b/owrx/controllers/assets.py
@@ -159,6 +159,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
             "lib/settings/SchedulerInput.js",
             "lib/settings/ExponentialInput.js",
             "lib/settings/LogMessages.js",
+            "lib/settings/ProfileList.js",
             "settings.js",
         ],
     }
diff --git a/owrx/controllers/settings/sdr.py b/owrx/controllers/settings/sdr.py
index 3eba7bc1..6b1808d5 100644
--- a/owrx/controllers/settings/sdr.py
+++ b/owrx/controllers/settings/sdr.py
@@ -128,7 +128,7 @@ class SdrFormController(SettingsFormController, metaclass=ABCMeta):
 
     def render_tabs(self):
         return """
-            <ul class="nav nav-tabs">
+            <ul class="nav nav-tabs profile-tabs">
                 <li class="nav-item">
                     <a class="nav-link {device_active}" href="{device_link}">{device_name}</a>
                 </li>
@@ -145,10 +145,11 @@ class SdrFormController(SettingsFormController, metaclass=ABCMeta):
             new_profile_link="{}settings/sdr/{}/newprofile".format(self.get_document_root(), quote(self.device_id)),
             profile_tabs="".join(
                 """
-                    <li class="nav-item">
+                    <li class="nav-item profile" data-profile-id="{profile_id}">
                         <a class="nav-link {profile_active}" href="{profile_link}">{profile_name}</a>
                     </li>
                 """.format(
+                    profile_id=profile["id"],
                     profile_link="{}settings/sdr/{}/profile/{}".format(
                         self.get_document_root(), quote(self.device_id), quote(profile["id"])
                     ),