Skip to content
Extraits de code Groupes Projets
Valider 4e26f5e5 rédigé par Deurstann's avatar Deurstann
Parcourir les fichiers

Added working button for karas in Queue and DB and Drag and Drop from DB to Queue

parent 33d4c136
Aucune branche associée trouvée
Aucune étiquette associée trouvée
1 requête de fusion!5Drag and drop in queue
Masquer les modifications d'espaces
En ligne Côte à côte
instance/main.js
+ 62
− 21
Voir le fichier @ 4e26f5e5
...@@ -130,7 +130,7 @@ ipcRenderer.on('reload-db-responce', (event, arg) => { ...@@ -130,7 +130,7 @@ ipcRenderer.on('reload-db-responce', (event, arg) => {
document.getElementById('panelLeft').innerHTML = ''; document.getElementById('panelLeft').innerHTML = '';
arg.forEach(kara => { arg.forEach(kara => {
ejs.renderFile( ejs.renderFile(
__dirname + '/views/karaListItem.ejs', __dirname + '/views/karaDBListItem.ejs',
{ kara: kara }, { kara: kara },
(err, data) => { (err, data) => {
if (err) logger.error('instance', err); if (err) logger.error('instance', err);
...@@ -140,16 +140,22 @@ ipcRenderer.on('reload-db-responce', (event, arg) => { ...@@ -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 */ /* Create the right panel: the queue */
ipcRenderer.on('reload-queue-responce', (event, arg) => { ipcRenderer.on('reload-queue-responce', (event, arg) => {
logger.debug('instance', `Web page got reload-queue`); logger.debug('instance', `Web page got reload-queue`);
countKaraInQueue = 0;
document.getElementById('panelRight').innerHTML = ''; document.getElementById('panelRight').innerHTML = '';
arg.forEach(kara => { arg.forEach(kara => {
countKaraInQueue++;
ejs.renderFile( ejs.renderFile(
__dirname + '/views/karaListItem.ejs', __dirname + '/views/karaQueueListItem.ejs',
{ kara: kara }, { kara: kara },
(err, data) => { (err, data) => {
if (err) logger.error('instance', err); if (err) logger.error('instance', err);
...@@ -159,39 +165,64 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => { ...@@ -159,39 +165,64 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => {
} }
); );
}); });
logger.info('Time', new Date().getTime() - time);
[].forEach.call( [].forEach.call(
document.querySelectorAll('#panelRight .karaCard'), 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); logger.info('Time', new Date().getTime() - time);
ipcRenderer.send('reload-queue-request'); ipcRenderer.send('reload-queue-request');
}); });*/
var isDnDFromDB = false;
var date = new Date();
var time = 0;
function addDBDragAndDropHandlers(element) { function addDBKaraEventHandlers(element) {
isDnDFromDB = true; 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) { function addQueueKaraEventHandlers(element) {
element.addEventListener('dragstart', onDragStart, false); element.addEventListener('dragstart', onDragStartQueue, false);
element.addEventListener('dragenter', onDragEnter, false); element.addEventListener('dragenter', onDragEnter, false);
element.addEventListener('dragover', onDragOver, false); element.addEventListener('dragover', onDragOver, false);
element.addEventListener('dragleave', ondragLeave, false); element.addEventListener('dragleave', ondragLeave, false);
element.addEventListener('drop', onDrop, false); element.addEventListener('drop', onDrop, false);
element.addEventListener('dragend', onDragEnd, 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 dragCounter = 0;
var leavedElement; 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.dataTransfer.effectAllowed = 'move';
event.currentTarget.style.opacity = 0.4; event.currentTarget.style.opacity = 0.4;
//logger.debug(event.currentTarget.childElementCount+"\n"); //logger.debug(event.currentTarget.childElementCount+"\n");
...@@ -228,12 +259,22 @@ function ondragLeave(event) { ...@@ -228,12 +259,22 @@ function ondragLeave(event) {
function onDrop(event) { function onDrop(event) {
//logger.debug("salut", "salut"); //logger.debug("salut", "salut");
event.currentTarget.style.borderTop = ''; event.currentTarget.style.borderTop = '';
time = new Date().getTime(); if(isDnDFromDB) {
ipcRenderer.send('queue-moved-kara', { ipcRenderer.send('add-kara-queue-pos', {
from: event.dataTransfer.getData('text/plain'), id: event.dataTransfer.getData('text/plain'),
to: event.currentTarget.getElementsByClassName('karaPosition')[0] position: event.currentTarget.getElementsByClassName('karaPosition')[0]
.innerText, .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; return false;
} }
......
instance/views/karaDBListItem.ejs 0 → 100644
+ 18
− 0
Voir le fichier @ 4e26f5e5
<%# 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>
instance/views/karaListItem.ejs → instance/views/karaQueueListItem.ejs
+ 2
− 2
Voir le fichier @ 4e26f5e5
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
<% } %> <% } %>
<div class="karaElement p-2 bd-highlight"> <div class="karaElement p-2 bd-highlight">
<div class="d-flex flex-row bd-highlight mb-3 btn-group karaActionBtnGroup" role="group"> <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 karaPlayBtn" title="Play"><i class="fas fa-play"></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 karaDeleteBtn" title="Delete"><i class="fas fa-times"></i></button>
</div> </div>
</div> </div>
</li> </li>
main.js
+ 22
− 4
Voir le fichier @ 4e26f5e5
...@@ -216,10 +216,28 @@ ipcMain.on('verify-queue-reloaded-request', (event, arg) => { ...@@ -216,10 +216,28 @@ ipcMain.on('verify-queue-reloaded-request', (event, arg) => {
}); });
ipcMain.on('queue-moved-kara', (event, movement) => { ipcMain.on('queue-moved-kara', (event, movement) => {
logger.debug('bonjour', 'bonjour');
if (movement.to != movement.from) { if (movement.to != movement.from) {
lkt.commandMove(movement.from, movement.to).then(arg => { lkt.commandMove(movement.from, movement.to);
event.reply('queue-moved-responce');
});
} }
}); });
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
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter