Drag and drop in queue

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

instance/views/karaQueueListItem.ejs

 <%# vim: ts=4 syntax=html
     The template for the kara card in lists %>
-<li class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 karaCard">
+<li class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 karaCard" draggable="true">
+    <span hidden class = "karaID"><%= kara.id %></span>
     <span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b><%= kara.language %></b></span>
     <span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b><%= kara.cat      %></b></span>
     <span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b><%= kara.type     %></b></span>
     <span class="karaElement p-2 bd-highlight mr-auto"><b><%= kara.source %><br> <%= kara.title %></b> <i>[<%= kara.author %>]</i></span>
     <% if (kara.hasOwnProperty('position')) { %>
-        <span class="karaElement p-3 bd-highlight"><b><%= kara.position %></b></span>
+        <span class="karaElement p-3 bd-highlight karaPosition"><b><%= kara.position %></b></span>
     <% } %>
     <div class="karaElement p-2 bd-highlight">
         <div class="d-flex flex-row bd-highlight mb-3 btn-group karaActionBtnGroup" role="group">
-            <button class="btn btn-outline-light karaActionBtn"><i class="fas fa-plus"></i></button>
-            <button class="btn btn-outline-light karaActionBtn"><i class="fas fa-level-up-alt"></i></button>
+            <button class="btn btn-outline-light karaActionBtn karaPlayBtn" title="Play"><i class="fas fa-play"></i></button>
+            <button class="btn btn-outline-light karaActionBtn karaDeleteBtn" title="Delete"><i class="fas fa-times"></i></button>
         </div>
     </div>
 </li>

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;
+}

main.js

@@ -144,7 +144,9 @@ app.on('ready', () => {
                 }
             });
     });
-    setTimeout(() => {lkt.idleActualisation(ipcRenderer);},500);
+    setTimeout(() => {
+        lkt.idleActualisation();
+    }, 500);
     lektor.on('close', code => {
         logger.warn('main', `Lektor exited with code ${code}`);
         lektor_closed = true;
@@ -205,7 +207,7 @@ ipcMain.on('reload-queue-request', (event, arg) => {
 });
 
 ipcMain.on('verify-queue-reloaded-request', (event, arg) => {
-    if(lkt.isQueueUpdated()) {
+    if (lkt.isQueueUpdated()) {
         lkt.setQueueUpdated(false);
         myDb.queue(0, 100).then(karas => {
             event.reply('reload-queue-responce', karas);
@@ -213,8 +215,29 @@ ipcMain.on('verify-queue-reloaded-request', (event, arg) => {
     }
 });
 
-ReloadQueue = () => {
-    myDb.queue(0,100).then(karas=>{
-        
-    })
-}
+ipcMain.on('queue-moved-kara', (event, movement) => {
+    if (movement.to != movement.from) {
+        lkt.commandMove(movement.from, movement.to);
+    }
+});
+
+ipcMain.on('play-kara-queue-pos', (event, arg) => {
+    lkt.commandPlayPos(arg.position);
+});
+
+ipcMain.on('add-kara-queue-id', (event, arg) => {
+    lkt.commandQueueAddId(arg.id);
+});
+
+ipcMain.on('insert-kara-queue-id', (event, arg) => {
+    lkt.commandQueueInsertId(arg.id);
+});
+
+ipcMain.on('delete-kara-queue-pos', (event, arg) => {
+    logger.info("cc");
+    lkt.commandQueueDelPos(arg.position);
+});
+
+ipcMain.on('add-kara-queue-pos', (event,addparams) => {
+    lkt.commandQueueAddId(addparams.id).then(() => lkt.commandMove(addparams.queueSize+1,addparams.position));
+})
\ No newline at end of file