INSTANCE: Better display of database

common/db.js

@@ -45,12 +45,17 @@ class KaraDatabase {
         logger.log("info", `Close database ${this.m_karaPath}`);
     }
 
-    /* Search from the kara table, a string. Can be anything (query, name, etc).
-     * - queryString: String
-     * => A promise, callback with [(id: Int, string: String, cat: String, type: String)] */
+    /* Search from the kara table, a string. Can be anything (query, name,
+     * language, source, etc).
+     * - queryString: String => a promize, callback with [(id: Int, string,
+     *   cat, type, language, author, title, source)] */
     search(queryString) {
         var __ret      = [];
-        let __sqlQuery = `SELECT id, string, category AS cat, (song_type || song_number) AS type
+        let __sqlQuery = `SELECT id, string,
+                            category AS cat,
+                            (song_type || song_number) AS type,
+                            language, author_name AS author,
+                            song_name AS title, source_name AS source
                           FROM kara
                           WHERE string LIKE ? OR author_name COLLATE nocase = ?`;
 
@@ -71,10 +76,15 @@ class KaraDatabase {
     }
 
     /* List all the kara in the db.
-     * => a promize, callback with [(id: Int, string: String, cat: String, type: String)] */
+     * => a promize, callback with [(id: Int, string, cat, type, language,
+     *    author, title, source)] */
     all() {
         var __ret      = [];
-        let __sqlQuery = `SELECT id, string, category AS cat, (song_type || song_number) AS type
+        let __sqlQuery = `SELECT id, string,
+                            category AS cat,
+                            (song_type || song_number) AS type,
+                            language, author_name AS author,
+                            song_name AS title, source_name AS source
                           FROM kara;`;
 
         function __getRecords(db) {

instance/main.js

@@ -56,11 +56,11 @@ ipcRenderer.on("reload-db-responce", (event, arg) => {
     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-secondary karaCard">
-            <div class="p-2 bd-highlight">${kara.id}</div>
-            <div class="p-2 bd-highlight">${kara.cat}</div>
-            <div class="p-2 bd-highlight">${kara.type}</div>
-            <div class="p-2 bd-highlight ml-auto">${kara.string}</div>
+            `<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.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>`;
     });
     document.getElementById("panelLeft").innerHTML = karaList;

style/css/instance.css

@@ -48,11 +48,27 @@ a {
     padding: 0px !important;
 }
 
+#panelLeft {
+    padding-left: 0px;
+}
+
+#panelRight {
+    padding-right: 0px;
+}
+
 .karaCard {
     border: 0px;
     margin: 0px !important;
 }
 
+.karaElement {
+    .text-uppercase;
+    height: fit-content;
+    margin: auto;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
 .panel {
     height: 100%;
     overflow-y: scroll;