From 3b5fafcb4ea42e6aa1344aaa866b83513f953843 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Thu, 18 May 2023 19:35:09 +0200
Subject: [PATCH] gather data to send to the server

---
 htdocs/lib/settings/ProfileList.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/htdocs/lib/settings/ProfileList.js b/htdocs/lib/settings/ProfileList.js
index 52d35fa3..75ea728b 100644
--- a/htdocs/lib/settings/ProfileList.js
+++ b/htdocs/lib/settings/ProfileList.js
@@ -1,4 +1,20 @@
 $.fn.profileList = function() {
+    var dataType = 'application/x-profile';
+
+    var isValidDrag = function(event) {
+        // check and avoid external drags
+        if (!event.originalEvent.dataTransfer.types.includes(dataType)) return false;
+
+        var $target = $(event.target).closest('.profile');
+
+        // check if we are a valid drop target
+        return !!$target.length;
+    }
+
+    var moveProfile = function(profileId, index, callback) {
+        console.info('moving ' + profileId + ' to ' + index);
+    }
+
     this.each(function () {
         var $profileList = $(this);
         var $profiles = $profileList.find('.profile');
@@ -10,9 +26,11 @@ $.fn.profileList = function() {
             $profileEl = $(event.originalEvent.target);
             originalIndex = $profileEl.index();
             event.originalEvent.dataTransfer.effectAllowed = 'move';
-            event.originalEvent.dataTransfer.setData('application/x-profile', $profileEl.data('profile-id'));
+            event.originalEvent.dataTransfer.setData(dataType, $profileEl.data('profile-id'));
         }).on('dragenter', function(event) {
+            if (!isValidDrag(event)) return;
             event.preventDefault();
+
             var $target = $(event.target).closest('.profile');
             if ($profileEl.index() < $target.index()) {
                 $profileEl.insertAfter($target);
@@ -20,7 +38,12 @@ $.fn.profileList = function() {
                 $profileEl.insertBefore($target);
             }
         }).on('dragover', function(event) {
+            if (!isValidDrag(event)) return;
             event.preventDefault();
+        }).on('drop', function(event) {
+            var $target = $(event.target).closest('.profile');
+            var index = $profileList.find('.profile').index($target);
+            moveProfile(event.originalEvent.dataTransfer.getData(dataType), index);
         }).on('dragend', function(event) {
             if (event.originalEvent.dataTransfer.dropEffect === 'none') {
                 // drag was aborted - restore original position