From 5bf530d39a7e06bdd982a5c2495ff9a04fd83da4 Mon Sep 17 00:00:00 2001
From: undisclosed
Date: Wed, 11 Jan 2023 17:38:22 +0000
Subject: [PATCH] Erste Versuche mit StreamHandler

---
 www/js/app.js |   94 ++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 84 insertions(+), 10 deletions(-)

diff --git a/www/js/app.js b/www/js/app.js
index c7f341e..9b634bb 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -402,6 +402,47 @@
           self.removeClassMulti('selected');
           t.classList.add('selected');
         });
+        self.addEvtListener('.entity-eintrag', 'dragstart', function (e) {
+          //console.log("drag started");          
+          e.dataTransfer.setData('text/plain', e.target.textContent);
+          setTimeout(() => {
+                  e.target.classList.add('hide');
+                  e.target.classList.add('drag-elem');
+          }, 0);          
+        });
+        self.addEvtListener('.entity-eintrag', 'dragenter', function (e) {
+          e.preventDefault();
+          //console.log("drag enter");
+          e.target.classList.add('drag-over');
+        });
+        self.addEvtListener('.entity-eintrag', 'dragover', function (e) {
+          e.preventDefault();
+          //console.log("drag over");
+          e.target.classList.add('drag-over');
+        });
+        self.addEvtListener('.entity-eintrag', 'dragleave', function (e) {
+          //console.log("drag leave");
+          e.target.classList.remove('drag-over');
+        });
+        self.addEvtListener('.entity-eintrag', 'drop', function (e) {     
+          e.preventDefault();
+          //console.log("drop");
+          //console.log("index: " + self.getIndexBySelector('drag-over'));
+          const pos = self.getIndexBySelector('drag-elem');
+          const zielPos = self.getIndexBySelector('drag-over');
+          const titeltext = e.dataTransfer.getData('text/plain');
+          const draggable = document.querySelector(".drag-elem");
+          draggable.classList.remove("drag-elem");
+          e.target.classList.remove('drag-over');
+          var plname = document.querySelector('#playlist').value;
+          self.http_put('api/alist/' + plname + "/" + pos + "/" + zielPos, '', function(responseText) {
+            //self.meldung_mit_timeout(responseText, 1500);
+          });
+          ulElem = draggable.parentElement;
+          ulElem.removeChild(draggable);          
+          e.target.insertAdjacentElement('beforebegin', draggable);
+          draggable.classList.remove('hide');
+        });             
       });
     });
   };  
@@ -532,6 +573,17 @@
     });
   };
   
+  /*
+   * {
+   *  "katalogUrl":"/media",
+   *  "pfad":"/Musik/B/Bay-City-Rollers/Original-Album-Classics/3/",
+   *  "name":"3-37-Love-Is.mp3",
+   *  "interpret":"Bay City Rollers",
+   *  "titelAnzName":"Love Is",
+   *  "album":"Original Album Classics"
+   * }
+   * @returns {undefined}
+   */
   this.titelDazu = function() {
     var titel = self.titelErmitteln(document.querySelector(".selected"));
     //var titelName = elem.textContent;
@@ -554,20 +606,22 @@
   };  
   
   this.titelWeg = function() {
-    var elem = document.querySelector(".selected");
-    var parentElem = elem.parentNode;
+    //var elem = document.querySelector(".selected");
+    //var parentElem = elem.parentNode;
     //console.log("elem: " + elem.nodeName + ", parent: " + parentElem.nodeName + ", len: " + parentElem.childNodes.length);
-    var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
+    //var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
     //console.log("liElems.anz: " + liElems.length);
-    var gefunden = false;
-    for(var i = 0; i < liElems.length && !gefunden; i++) {
+    //var gefunden = false;
+    //for(var i = 0; i < liElems.length && !gefunden; i++) {
       //console.log(liElems.item(i).textContent);
-      if(liElems.item(i).classList.contains("selected")) {
-        gefunden = true;
-        var index = i;
+      //if(liElems.item(i).classList.contains("selected")) {
+        //gefunden = true;
+        //var index = i;
         //console.log(elem.textContent + ' hat Index ' + i);
-      }
-    }
+      //}
+    //}
+    
+    const index = self.getIndexBySelector("selected");
     // /mz/api/alist/[pl-name]/[nr] 
     var plname = document.querySelector('#playlist').value;
     self.http_delete('api/alist/' + plname + '/' + index,'', function(responseText) {
@@ -578,6 +632,26 @@
     
   };
   
+  this.getIndexBySelector = function(selector) {
+    var qSel = '.' + selector;
+    var elem = document.querySelector(qSel);
+    var parentElem = elem.parentNode;
+    //console.log("elem: " + elem.nodeName + ", parent: " + parentElem.nodeName + ", len: " + parentElem.childNodes.length);
+    var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
+    //console.log("liElems.anz: " + liElems.length);
+    var gefunden = false;
+    var index = -1;
+    for(var i = 0; i < liElems.length && !gefunden; i++) {
+      //console.log(liElems.item(i).textContent);
+      if(liElems.item(i).classList.contains(selector)) {
+        gefunden = true;
+        index = i;
+        //console.log(elem.textContent + ' hat Index ' + i);
+      }
+    }
+    return index;
+  };
+  
   /* ------------- Helfer fuer Entitaets-Formulare ----------------------- */
   
   /*

--
Gitblit v1.9.3