INSTANCE: Fixing the interface, for the moment

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;

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

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

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;