Fix search in DB

instance/index.html

@@ -24,13 +24,13 @@
         </style>
         <script>
             $(document).ready(() => {
-                $('#filterInput').on('keyup', () => {
-                    var value = $(this).val().toLowerCase();
-                    $('#panelLeft *').filter(() => {
-                        $(this).toggle(
-                            $(this).text().toLowerCase().indexOf(value) > -1
-                        );
-                    });
+                $('#filterInput').on('keypress', e => {
+                    /* On 'Return'. */
+                    if (e.which != 13) return;
+                    ipcRenderer.send(
+                        'reload-db-request',
+                        $('#filterInput').val()
+                    );
                 });
             });
         </script>
@@ -42,14 +42,14 @@
                 class="d-flex flex-row bd-highlight mb-3 row card"
             ></div>
             <div id="panelWrapper" class="row">
-                <div
+                <ul
                     id="panelLeft"
                     class="col panel d-flex flex-column bd-highlight mb-3"
-                ></div>
-                <div
+                ></ul>
+                <ul
                     id="panelRight"
                     class="col panel d-flex flex-column bd-highlight mb-3"
-                ></div>
+                ></ul>
             </div>
             <div
                 id="progressBar"

instance/main.js

@@ -100,18 +100,18 @@ 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 karaCard">
+        karaList += `<li class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 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-2 bd-highlight mr-auto"><b>${kara.source}<br> ${kara.title}</b> <i>[${kara.author}]</i></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-plus"></i></button>
                     <button class="btn btn-outline-light karaActionBtn"><i class="fas fa-level-up-alt"></i></button>
                 </div>
             </div>
-            </div>`;
+            </li>`;
     });
     document.getElementById('panelLeft').innerHTML = karaList;
 });
@@ -121,11 +121,11 @@ 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 karaCard">
+        karaList += `<li class="card p-2 bd-highlight shadow-none d-flex flex-row bd-highlight mb-3 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-2 bd-highlight mr-auto"><b>${kara.source}<br> ${kara.title}</b> <i>[${kara.author}]</i></span>
             <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">
@@ -133,7 +133,7 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => {
                     <button class="btn btn-outline-light karaActionBtn"><i class="fas fa-play"></i></button>
                 </div>
             </div>
-            </div>`;
+            </li>`;
     });
     document.getElementById('panelRight').innerHTML = karaList;
 });

main.js

@@ -143,9 +143,15 @@ ipcMain.on('cmd-clear', (event, arg) => {
  * The `arg` is the HTML object of the pannel */
 ipcMain.on('reload-db-request', (event, arg) => {
     logger.info('Reloading the DB content');
-    myDb.all().then(karas => {
+    var callback = karas => {
         event.reply('reload-db-responce', karas);
-    });
+    };
+    if (arg) {
+        logger.debug(`Reload DB with search '${arg}'`);
+        myDb.search(arg).then(callback);
+    } else {
+        myDb.all().then(callback);
+    }
 });
 
 /* Send the queue to the webpage when asked to */