diff --git a/instance/main.js b/instance/main.js index e8090802940fe9fb413b1e8f4289319e683f3a65..ae5fd867821be99f4d9d01695c4791cde2ecfc1b 100644 --- a/instance/main.js +++ b/instance/main.js @@ -122,22 +122,18 @@ ipcRenderer.on('reload-db-responce', (event, arg) => { /* Create the right panel: the queue */ ipcRenderer.on('reload-queue-responce', (event, arg) => { - var karaList = ''; logger.debug('instance', `Web page got reload-queue`); + document.getElementById('panelRight').innerHTML = ''; arg.forEach(kara => { - 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> - <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"> - <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> - </li>`; + ejs.renderFile( + __dirname + '/views/karaListItem.ejs', + { kara: kara }, + (err, data) => { + if (err) logger.error('instance', err); + document.getElementById('panelRight').innerHTML = ` + ${document.getElementById('panelRight').innerHTML} + ${data}`; + } + ); }); - document.getElementById('panelRight').innerHTML = karaList; }); diff --git a/instance/views/karaListItem.ejs b/instance/views/karaListItem.ejs index 8ec6e77c884dbd09abfdcaf08f03400339c2ee8d..0d3c1ec9ffe25c3d1ffd87942eae179c68b40b24 100644 --- a/instance/views/karaListItem.ejs +++ b/instance/views/karaListItem.ejs @@ -1,10 +1,13 @@ -<!-- vim: ts=4 syntax=html - The template for the kara card in lists --!> +<%# vim: ts=4 syntax=html + The template for the kara card in lists %> <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> <span class="karaElement p-2 bd-highlight mr-auto"><b><%= kara.source %><br> <%= kara.title %></b> <i>[<%= kara.author %>]</i></span> + <% if (kara.hasOwnProperty('position')) { %> + <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-plus"></i></button>