INSTANCE: Menu buttons send ipc to main

Makefile

 # On debian, yarn is named yarnpkg
 YARN=yarnpkg
 
-all: prepare run
+all: prepare style run
 
 prepare:
 	$(YARN) install

client/routes/public.js

 var express = require('express');
 var router = express.Router();
 
-// Simulate karaoke data
-dummyKaras = require('../../test/dummyKara.json');
-
 /* GET on root. */
 router.get('/', function (req, res, next) {
-    res.render('public', { karas: dummyKaras });
+    res.render('public', { karas: [{}] });
 });
 
 module.exports = router;

instance/main.js

@@ -3,45 +3,59 @@ const logger = require('../common/logger.js');
 
 /* prettier-ignore */
 const buttonList = [
-    ['left',    `<i class="fas fa-sync-alt"></i>`,      'reloadDb',         'Reload database'       ],
-    ['left',    `<i class="fas fa-play"></i>`,          'commandPlay',      'Play or pause Lektor'  ],
-    ['left',    `<i class="fas fa-stop"></i>`,          'commandStop',      'Stop lektor'           ],
-    ['sleft',   `<i class="fas fa-search"></i>`,        'selectAdvence',    'Advence search'        ],
-    ['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-user-friends"></i>`,  'openUserView',     'Open client view'      ],
-    ['right',   `<i class="fas fa-sync-alt"></i>`,      'reloadQueue',      'Reload the queue'      ],
-    ['right',   `<i class="fas fa-window-close"></i>`,  'closeButton',      'Quit Lektor-App'       ],
+    [ 'left',   `<i class="fas fa-sync-alt"></i>`,      'reloadDb',         'Reload database'       ],
+    [ 'left',   `<i class="fas fa-play"></i>`,          'commandPlay',      'Play or pause Lektor'  ],
+    [ 'left',   `<i class="fas fa-stop"></i>`,          'commandStop',      'Stop lektor'           ],
+    [ 'left',   `<i class="fas fa-eraser"></i>`,        'commandClear',     'Clear the queue'       ],
+
+    [ 'sleft',  `<i class="fas fa-search"></i>`,        'selectAdvence',    'Advence search'        ],
+    [ 'sleft',  `<i class="fas fa-database"></i>`,      'selectDatabase',   'Database search'       ],
+    [ 'sleft',  `<i class="fas fa-tag"></i>`,           'selectPlaylist',   'Playlist search'       ],
+    [ 'sleft',  `<i class="fas fa-bookmark"></i>`,      'selectPool',       'Pool search'           ],
+
+    [ 'right',  `<i class="fas fa-user-friends"></i>`,  'openUserView',     'Open client view'      ],
+    [ 'right',  `<i class="fas fa-music"></i>`,         'openMdtView',      'Open metadata view'    ],
+    [ 'right',  `<i class="fas fa-sync-alt"></i>`,      'reloadQueue',      'Reload the queue'      ],
+    [ 'right',  `<i class="fas fa-window-close"></i>`,  'closeButton',      'Quit Lektor-App'       ],
 ];
 
+function addIpcToButton(btnId, ipc) {
+    document.getElementById(btnId).addEventListener('click', () => {
+        ipc.forEach(ipc => {
+            ipcRenderer.send(ipc);
+        });
+    });
+}
+
 window.onload = () => {
     createButtonList(buttonList);
 
-    document.getElementById('closeButton').addEventListener('click', () => {
-        ipcRenderer.send('close-app');
-    });
-    document.getElementById('commandPlay').addEventListener('click', () => {
-        logger.debug('Command play !');
-        ipcRenderer.send('cmd-play', null);
-    });
-    document.getElementById('commandStop').addEventListener('click', () => {
-        logger.debug('Command stop !');
-        ipcRenderer.send('cmd-stop', null);
-    });
-    document.getElementById('reloadDb').addEventListener('click', () => {
-        ipcRenderer.send('reload-db-request', null);
-        ipcRenderer.send('reload-queue-request', null);
-    });
-    document.getElementById('reloadQueue').addEventListener('click', () => {
-        ipcRenderer.send('reload-queue-request', null);
-    });
+    addIpcToButton('closeButton', ['close-app']);
+
+    addIpcToButton('commandPlay', ['cmd-play']);
+    addIpcToButton('commandStop', ['cmd-stop']);
+    addIpcToButton('commandClear', ['cmd-clear']);
+
+    addIpcToButton('selectAdvence', ['select-advence']);
+    addIpcToButton('selectDatabase', ['select-database']);
+    addIpcToButton('selectPlaylist', ['select-playlist']);
+    addIpcToButton('selectPool', ['select-pool']);
+    addIpcToButton('openMdtView', ['select-mdt']);
+
+    addIpcToButton('openUserView', ['toggle-client-view']);
+    addIpcToButton('reloadQueue', ['reload-queue-request']);
+    addIpcToButton('reloadDb', ['reload-db-request', 'reload-queue-request']);
 
     logger.debug('Window loaded');
 };
 
 /* Create the button list */
 function createButtonList(list) {
+    function action(ipc, argument) {
+        logger.error(
+            'The action function builder for control buttons is not implemented'
+        );
+    }
     var renderHtmlLeft = '';
     var renderHtmlRight = '';
     var renderHtmlSLeft = '';

main.js

@@ -94,17 +94,20 @@ app.on('ready', () => {
                 var line = line.trim();
                 if (!line) return;
                 switch (line[0]) {
-                    case '.':
-                        logger.info(line);
-                        break;
                     case '*':
-                        logger.warn(line);
+                        logger.warn(line.replace(/^\* (.*)$/g, '$1'));
                         break;
                     case '!':
-                        logger.error(line);
+                        logger.error(line.replace(/^! (.*)$/g, '$1'));
                         break;
+                    case '.':
+                        if (line.length >= 2 && line[1] != '.') {
+                            logger.info(line.replace(/^\. (.*)$/g, '$1'));
+                            break;
+                        }
+                    /* Fallthrough case */
                     default:
-                        logger.debug(line);
+                        logger.debug(line.replace(/^\.\.\. (.*)$/g, '\t$1'));
                         break;
                 }
             });
@@ -130,6 +133,11 @@ ipcMain.on('cmd-stop', (event, arg) => {
         logger.debug('Returned from cmd-stop');
     });
 });
+ipcMain.on('cmd-clear', (event, arg) => {
+    lkt.commandClear().then(arg => {
+        logger.debug('Cleared queue with cmd-clear');
+    });
+});
 
 /* Fill the pannel with the content of the DB.
  * The `arg` is the HTML object of the pannel */

style/css/instance.css

@@ -116,6 +116,11 @@ button {
     background-color: #df691a;
 }
 
+.btn-primary:hover {
+    background-color: #4e5d6c !important;
+    color: #df691a !important;
+}
+
 .btn:focus,
 .btn:active {
     outline: none !important;