Drag and drop in queue

You can now drag and drop kara that are in the queue to reorder them.

instance/main.js

 const { ipcRenderer } = require('electron');
 const ejs = require('ejs');
 const logger = require('../common/logger.js');
+const e = require('express');
 
 /* prettier-ignore */
 const buttonList = [
@@ -49,9 +50,8 @@ window.onload = () => {
     addIpcToButton('reloadQueue', ['reload-queue-request']);
     addIpcToButton('reloadDb', ['reload-db-request', 'reload-queue-request']);
 
-    logger.debug('Window loaded');
-    setTimeout(()=>ipcRenderer.send('reload-queue-request'),500);
-    setInterval(()=>ipcRenderer.send('verify-queue-reloaded-request'),1000);
+    setTimeout(() => ipcRenderer.send('reload-queue-request'), 1000);
+    setInterval(() => ipcRenderer.send('verify-queue-reloaded-request'), 50);
     logger.debug('instance', 'Window loaded');
 
     $('#filterInput').on('keypress', e => {
@@ -130,7 +130,7 @@ ipcRenderer.on('reload-db-responce', (event, arg) => {
     document.getElementById('panelLeft').innerHTML = '';
     arg.forEach(kara => {
         ejs.renderFile(
-            __dirname + '/views/karaListItem.ejs',
+            __dirname + '/views/karaDBListItem.ejs',
             { kara: kara },
             (err, data) => {
                 if (err) logger.error('instance', err);
@@ -140,15 +140,22 @@ ipcRenderer.on('reload-db-responce', (event, arg) => {
             }
         );
     });
+    [].forEach.call(
+        document.querySelectorAll('#panelLeft .karaCard'), 
+        addDBKaraEventHandlers
+    );
 });
 
+var countKaraInQueue = 0;
 /* Create the right panel: the queue */
 ipcRenderer.on('reload-queue-responce', (event, arg) => {
     logger.debug('instance', `Web page got reload-queue`);
+    countKaraInQueue = 0;
     document.getElementById('panelRight').innerHTML = '';
     arg.forEach(kara => {
+        countKaraInQueue++;
         ejs.renderFile(
-            __dirname + '/views/karaListItem.ejs',
+            __dirname + '/views/karaQueueListItem.ejs',
             { kara: kara },
             (err, data) => {
                 if (err) logger.error('instance', err);
@@ -158,6 +165,120 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => {
             }
         );
     });
+    [].forEach.call(
+        document.querySelectorAll('#panelRight .karaCard'),
+        addQueueKaraEventHandlers
+    );
 });
 
+/*ipcRenderer.on('queue-moved-responce', (event, arg) => {
+    logger.info('Time', new Date().getTime() - time);
+    ipcRenderer.send('reload-queue-request');
+});*/
+
+
+function addDBKaraEventHandlers(element) {
+    element.addEventListener('dragstart', onDragStartDB, false);
+    element.addEventListener('dragend', onDragEnd, false);
+    element.getElementsByClassName('karaAddBtn')[0]
+    .addEventListener('click',()=>ipcRenderer.send('add-kara-queue-id', {
+        id:element.getElementsByClassName('karaID')[0].innerText
+    }));
+    element.getElementsByClassName('karaInsertBtn')[0]
+    .addEventListener('click',()=>ipcRenderer.send('insert-kara-queue-id', {
+        id:element.getElementsByClassName('karaID')[0].innerText
+    }));
+}
+
+function addQueueKaraEventHandlers(element) {
+    element.addEventListener('dragstart', onDragStartQueue, false);
+    element.addEventListener('dragenter', onDragEnter, false);
+    element.addEventListener('dragover', onDragOver, false);
+    element.addEventListener('dragleave', ondragLeave, false);
+    element.addEventListener('drop', onDrop, false);
+    element.addEventListener('dragend', onDragEnd, false);
+    element.getElementsByClassName('karaDeleteBtn')[0]
+    .addEventListener('click',()=>ipcRenderer.send('delete-kara-queue-pos', {
+        position:element.getElementsByClassName('karaPosition')[0].innerText
+    }));
+    element.getElementsByClassName('karaPlayBtn')[0]
+    .addEventListener('click',()=>ipcRenderer.send('play-kara-queue-pos', {
+        position:element.getElementsByClassName('karaPosition')[0].innerText
+    }));
+}
+
+var dragCounter = 0;
+var leavedElement;
+var isDnDFromDB = false;
+
+function onDragStartDB(event) {
+    isDnDFromDB = true;
+    event.dataTransfer.effectAllowed = 'move';
+    event.currentTarget.style.opacity = 0.4;
+    //logger.debug(event.currentTarget.childElementCount+"\n");
+    event.dataTransfer.setData(
+        'text/plain',
+        event.currentTarget.getElementsByClassName('karaID')[0].innerText
+    );
+}
+
+function onDragStartQueue(event) {
+    event.dataTransfer.effectAllowed = 'move';
+    event.currentTarget.style.opacity = 0.4;
+    //logger.debug(event.currentTarget.childElementCount+"\n");
+    event.dataTransfer.setData(
+        'text/plain',
+        event.currentTarget.getElementsByClassName('karaPosition')[0].innerText
+    );
+}
+
+function onDragEnter(event) {
+    if (leavedElement != event.currentTarget) {
+        leavedElement.style.borderTop = '';
+    }
+    event.currentTarget.style.borderTop = '3px solid grey';
+    dragCounter++;
+}
+
+function onDragOver(event) {
+    if (event.preventDefault) {
+        event.preventDefault();
+    }
+    event.dataTransfer.dropEffect = 'move';
+}
+
+function ondragLeave(event) {
+    dragCounter--;
+    leavedElement = event.currentTarget;
+    if (dragCounter == 0) {
+        event.currentTarget.style.borderTop = '';
+    }
+    //logger.debug("dragCount", dragCounter)
+}
 
+function onDrop(event) {
+    //logger.debug("salut", "salut");
+    event.currentTarget.style.borderTop = '';
+    if(isDnDFromDB) {
+        ipcRenderer.send('add-kara-queue-pos', {
+            id: event.dataTransfer.getData('text/plain'),
+            position: event.currentTarget.getElementsByClassName('karaPosition')[0]
+                .innerText,
+            queueSize: countKaraInQueue,
+        });
+    }
+    else {
+        ipcRenderer.send('queue-moved-kara', {
+            from: event.dataTransfer.getData('text/plain'),
+            to: event.currentTarget.getElementsByClassName('karaPosition')[0]
+                .innerText,
+        });
+    }
+    isDnDFromDB = false;
+    return false;
+}
+
+function onDragEnd(event) {
+    event.currentTarget.style.opacity = 1;
+    dragCounter = 0;
+}