first test with tabs for queue/playlist

instance/index.html

@@ -138,7 +138,20 @@
             ></div>
             <div id="panelWrapper" class="row">
                 <ul id="panelLeft" class="col panel d-flex flex-column bd-highlight mb-3"></ul>
-                <ul id="panelRight" class="col panel d-flex flex-column bd-highlight mb-3"></ul>
+                <div id="panelRight" class="col panel d-flex flex-column bd-highlight mb-3">
+                    <ul class="nav nav-tabs">
+                        <li class="active"><a data-toggle="tab" href="#queue">queue</a></li>
+                        <li><a data-toggle="tab" href="#playlist">Playlist</a></li>
+                      </ul>
+                    <div class="tab-content">
+                        <div id="queue" class="tab-pane fade in active">
+                            <ul id="queueList"></ul>
+                        </div>
+                        <div id="playlist" class="tab-pane fade">
+                            <ul id="playlistList"></ul>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div
                 id="progress"

instance/main.js

@@ -197,13 +197,13 @@ ipcRenderer.on('reload-db-responce', (event, arg) => {
 ipcRenderer.on('reload-queue-responce', (event, arg) => {
     logger.debug('instance', `Web page got reload-queue`);
     countKaraInQueue = 0;
-    document.getElementById('panelRight').innerHTML = '';
+    document.getElementById('queueList').innerHTML = '';
     arg.forEach(kara => {
         countKaraInQueue++;
         ejs.renderFile(__dirname + '/views/karaQueueListItem.ejs', { kara: kara }, (err, data) => {
             if (err) logger.error('instance', err);
-            document.getElementById('panelRight').innerHTML = `
-                ${document.getElementById('panelRight').innerHTML}
+            document.getElementById('queueList').innerHTML = `
+                ${document.getElementById('queueList').innerHTML}
                 ${data}`;
         });
     });