From 4e26f5e563780e04ea9f1064073a1fb216f40ffc Mon Sep 17 00:00:00 2001
From: deurstann <tristan.derouet@gmail.com>
Date: Tue, 2 Feb 2021 23:10:40 +0100
Subject: [PATCH] Added working button for karas in Queue and DB and Drag and
Drop from DB to Queue
---
instance/main.js | 83 ++++++++++++++-----
instance/views/karaDBListItem.ejs | 18 ++++
...karaListItem.ejs => karaQueueListItem.ejs} | 4 +-
main.js | 26 +++++-
4 files changed, 104 insertions(+), 27 deletions(-)
create mode 100644 instance/views/karaDBListItem.ejs
rename instance/views/{karaListItem.ejs => karaQueueListItem.ejs} (80%)
diff --git a/instance/main.js b/instance/main.js
index d3ad286..0311905 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -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,16 +140,22 @@ ipcRenderer.on('reload-db-responce', (event, arg) => {
}
);
});
- [].forEach.call(document.querySelectorAll('#panelLeft .karaCard'), a);
+ [].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);
@@ -159,39 +165,64 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => {
}
);
});
- logger.info('Time', new Date().getTime() - time);
[].forEach.call(
document.querySelectorAll('#panelRight .karaCard'),
- addQueueDragAndDropHandlers
+ addQueueKaraEventHandlers
);
});
-ipcRenderer.on('queue-moved-responce', (event, arg) => {
+/*ipcRenderer.on('queue-moved-responce', (event, arg) => {
logger.info('Time', new Date().getTime() - time);
ipcRenderer.send('reload-queue-request');
-});
+});*/
-var isDnDFromDB = false;
-var date = new Date();
-var time = 0;
-function addDBDragAndDropHandlers(element) {
- isDnDFromDB = true;
+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 addQueueDragAndDropHandlers(element) {
- element.addEventListener('dragstart', onDragStart, false);
+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 onDragStart(event) {
+function onDragStartQueue(event) {
event.dataTransfer.effectAllowed = 'move';
event.currentTarget.style.opacity = 0.4;
//logger.debug(event.currentTarget.childElementCount+"\n");
@@ -228,12 +259,22 @@ function ondragLeave(event) {
function onDrop(event) {
//logger.debug("salut", "salut");
event.currentTarget.style.borderTop = '';
- time = new Date().getTime();
- ipcRenderer.send('queue-moved-kara', {
- from: event.dataTransfer.getData('text/plain'),
- to: event.currentTarget.getElementsByClassName('karaPosition')[0]
- .innerText,
- });
+ 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;
}
diff --git a/instance/views/karaDBListItem.ejs b/instance/views/karaDBListItem.ejs
new file mode 100644
index 0000000..8f29e2c
--- /dev/null
+++ b/instance/views/karaDBListItem.ejs
@@ -0,0 +1,18 @@
+<%# 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" 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 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 karaAddBtn" title="Add"><i class="fas fa-plus"></i></button>
+ <button class="btn btn-outline-light karaActionBtn karaInsertBtn" title="Insert"><i class="fas fa-level-up-alt"></i></button>
+ </div>
+ </div>
+</li>
diff --git a/instance/views/karaListItem.ejs b/instance/views/karaQueueListItem.ejs
similarity index 80%
rename from instance/views/karaListItem.ejs
rename to instance/views/karaQueueListItem.ejs
index 85bced1..dea8ed8 100644
--- a/instance/views/karaListItem.ejs
+++ b/instance/views/karaQueueListItem.ejs
@@ -11,8 +11,8 @@
<% } %>
<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>
diff --git a/main.js b/main.js
index 56ff2da..551b9be 100644
--- a/main.js
+++ b/main.js
@@ -216,10 +216,28 @@ ipcMain.on('verify-queue-reloaded-request', (event, arg) => {
});
ipcMain.on('queue-moved-kara', (event, movement) => {
- logger.debug('bonjour', 'bonjour');
if (movement.to != movement.from) {
- lkt.commandMove(movement.from, movement.to).then(arg => {
- event.reply('queue-moved-responce');
- });
+ 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
--
GitLab