diff --git a/common/db.js b/common/db.js
index 8980492022923d234976de58919990189f8badc3..d0e7c5cdbd1dbc6f87ce120e784adc8d4f655a48 100644
--- a/common/db.js
+++ b/common/db.js
@@ -25,6 +25,17 @@ var sqlite3 = require.main.require('sqlite3').verbose();
* </code>
*/
+/* The queue table is defined as follows:
+ *
+ * <code>
+ * CREATE TABLE IF NOT EXISTS queue
+ * ( position INTEGER PRIMARY KEY AUTOINCREMENT CHECK(position > 0)
+ * , kara_id INTEGER REFERENCES kara
+ * , priority INTEGER NOT NULL DEFAULT 1 CHECK(priority > 0 AND priority < 6)
+ * );
+ * </code>
+ */
+
class KaraDatabase {
/* The constructor
@@ -102,6 +113,45 @@ class KaraDatabase {
return __getRecords(this.m_db);
}
+
+ /* List all the next karas in the queue.
+ * - first: Integer => the first kara to consider being in the queue (the
+ * current one, starts ad 0)
+ * - count: Integer => the number of karas of the queue to load.
+ * => a promize, callback with [(id: Int, string, cat, type, language,
+ * author, title, source, position: Int)] */
+ queue(first, count) {
+ var __ret = [];
+ let __sqlQuery =
+ `WITH content AS (
+ SELECT kara.id AS id, string,
+ category AS cat,
+ (song_type || song_number) AS type,
+ language, author_name AS author,
+ song_name AS title, source_name AS source,
+ position
+ FROM queue
+ JOIN kara ON kara_id = kara.id
+ WHERE position >= ${first} AND position <= ${count + first}
+ GROUP BY position ORDER BY position ASC, priority DESC)
+ SELECT id, string, position, cat, type, language, author, source, title
+ FROM content;`
+
+ function __getRecords(db) {
+ return new Promise(resolv => {
+ db.all(__sqlQuery, [], (err, rows) => {
+ if (err) {
+ logger.error(err);
+ throw err;
+ }
+ rows.forEach((row) => { __ret.push(row); });
+ resolv(__ret);
+ });
+ });
+ };
+
+ return __getRecords(this.m_db);
+ }
}
module.exports = KaraDatabase;
diff --git a/instance/main.js b/instance/main.js
index 146a29c6a6e1e2efeefde9ecbc6ac44bfe5fd199..4ea36e9508598eda3fd5dc7610830e4e515ccc43 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -9,6 +9,7 @@ const buttonList = [
[ "sleft", `<i class="fas fa-database"></i>`, "selectDatabase", "Database search" ],
[ "sleft", `<i class="fas fa-list"></i>`, "selectPlaylist", "Playlist search" ],
[ "sleft", `<i class="fas fa-bookmark"></i>`, "selectPool", "Pool search" ],
+ [ "right", `<i class="fas fa-sync-alt"></i>`, "reloadQueue", "Reload the queue" ],
[ "right", `<i class="fas fa-window-close"></i>`, "closeButton", "Quit Lektor-App" ],
];
@@ -27,7 +28,11 @@ window.onload = () => {
ipcRenderer.send("cmd-stop", null);
});
document.getElementById("reloadDb").addEventListener("click", () => {
- ipcRenderer.send("reload-db-request", document.getElementById("buttonPanelListLeft").innerHTML);
+ ipcRenderer.send("reload-db-request", null);
+ ipcRenderer.send("reload-queue-request", null);
+ });
+ document.getElementById("reloadQueue").addEventListener("click", () => {
+ ipcRenderer.send("reload-queue-request", null);
});
logger.debug("Window loaded");
@@ -66,18 +71,19 @@ function createButtonList(list) {
${renderHtmlRight}`;
}
+/* Create the left panel */
ipcRenderer.on("reload-db-responce", (event, arg) => {
var karaList = "";
logger.debug(`Web page got reload-db`);
arg.forEach( kara => {
karaList +=
`<div class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 border border-info karaCard">
- <span class="karaElement text-uppercase p-2 bd-highlight badge badge-success"><b>${kara.language}</b></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-info"><b>${kara.type}</b></span>
- <div class="p-2 bd-highlight mr-auto">${kara.source}<br> ${kara.title} <i>[${kara.author}]</i></div>
- <div class="p-2 bd-highlight">
- <div class="d-flex flex-row bd-highlight mb-3 btn-group" role="group" style="vertical-align: middle;">
+ <span class="karaElement text-uppercase p-2 bd-highlight badge badge-light"><b>${kara.type}</b></span>
+ <div class="karaElement p-2 bd-highlight mr-auto"><b>${kara.source}<br> ${kara.title}</b> <i>[${kara.author}]</i></div>
+ <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>
</div>
@@ -86,3 +92,26 @@ ipcRenderer.on("reload-db-responce", (event, arg) => {
});
document.getElementById("panelLeft").innerHTML = karaList;
});
+
+/* Create the right panel: the queue */
+ipcRenderer.on("reload-queue-responce", (event, arg) => {
+ var karaList = "";
+ logger.debug(`Web page got reload-queue`);
+ arg.forEach( kara => {
+ karaList +=
+ `<div class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 border border-info karaCard">
+ <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>
+ <div class="karaElement p-2 bd-highlight mr-auto"><b>${kara.source}<br> ${kara.title}</b> <i>[${kara.author}]</i></div>
+ <span class="karaElement p-3 bd-highlight"><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-minus"></i></button>
+ <button class="btn btn-outline-light karaActionBtn"><i class="fas fa-play"></i></button>
+ </div>
+ </div>
+ </div>`;
+ });
+ document.getElementById("panelRight").innerHTML = karaList;
+});
diff --git a/main.js b/main.js
index d6fee932e0988d2516276451324cf76723fadb80..9ede0b5313d3fc69126e8737a82dbb2fa8a45a28 100644
--- a/main.js
+++ b/main.js
@@ -95,8 +95,16 @@ ipcMain.on("cmd-stop", (event, arg) => {
/* Fill the pannel with the content of the DB.
* The `arg` is the HTML object of the pannel */
ipcMain.on("reload-db-request", (event, arg) => {
- logger.info("Reloading the left panel with all the DB");
+ logger.info("Reloading the DB content");
myDb.all().then( karas => {
event.reply("reload-db-responce", karas);
});
});
+
+/* Send the queue to the webpage when asked to */
+ipcMain.on("reload-queue-request", (event, arg) => {
+ logger.info("Reloading next karas in queue");
+ myDb.queue(0, 100).then( karas => {
+ event.reply("reload-queue-responce", karas);
+ });
+});
diff --git a/style/css/instance.css b/style/css/instance.css
index 7da1bc4abbcb601fa9f413f6fea4154f1be636a2..dc3f78311c119c48dbc454662dc3a07c7ab40c71 100644
--- a/style/css/instance.css
+++ b/style/css/instance.css
@@ -9,17 +9,6 @@ body {
overflow: hidden;
height: 100vh;
font-family: "LTFinneganCustom";
-/*
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
- -webkit-tap-highlight-color: transparent !important;
- -webkip-transition: none !important;
- -webkit-touch-callout: none !important;
- -webkit-user-select: none !important;
- -khtml-user-select: none !important;
- -moz-user-select: none !important;
- -ms-user-select: none !important;
- user-select: none !important;
-*/
}
a {
@@ -74,7 +63,8 @@ button {
}
.karaCard {
- border: 0px;
+ padding-top: 0px !important;
+ padding-bottom: 0px !important;
margin: 0px !important;
}
@@ -85,6 +75,12 @@ button {
margin-right: 2px;
}
+.karaActionBtnGroup {
+ margin: 13%;
+ margin-right:8px;
+ margin-left:8px;
+}
+
.karaActionBtn {
margin: auto;
margin-left: 0px;