Updates (visual and refactoring)

1 files changed, 21 insertions, 36 deletions

diff --git a/client/js/radio_emulator.js b/client/js/radio_emulator.js
index 37bb163..97b0474 100644
--- a/client/js/radio_emulator.js
+++ b/client/js/radio_emulator.js
@@ -259,49 +259,34 @@ function syncOnDOMfromListCallback(now, hash_of_list, json)
 function infoShowCallback(json, params)
 {
     var [ hash ] = params;
-    if ( document.querySelector(`#t-${hash}`) === null )
+    if ( document.querySelector(`#d-${hash}`) !== null )
     {
         var parent = document.querySelector(`#d-${hash}`);
-        var tableElement = document.createElement('table');
-        tableElement.id = `t-${hash}`;
-
-        var atr = document.createElement('tr');
-        var artistth = document.createElement('th');
-        artistth.innerText = "Artist";
-        var artistElement = document.createElement('td');
-        artistElement.innerText = `${json.artist}`;
-        atr.appendChild(artistth);
-        atr.appendChild(artistElement);
-        tableElement.appendChild(atr);
-
-        var ttr = document.createElement('tr');
-        var titleth = document.createElement('th');
-        titleth.innerText = "Title";
-        var titleElement = document.createElement('td');
-        titleElement.innerText = `${json.title}`;
-        ttr.appendChild(titleth);
-        ttr.appendChild(titleElement);
-        tableElement.appendChild(ttr);
-
-        parent.appendChild(tableElement);
+        var tableElement = {
+            element:'div',
+            id: `t-${hash}`,
+            innerHTML:[
+                {element:"div",innerText:`${json.artist}`},
+                {element:"div",innerText:`${json.title}`}
+            ]
+        };
+        makeElement(tableElement, parent);
     }
 }
 
 function appendPreviouslyPlayedShows(listItem){
-    if ( document.querySelector(`#s-${listItem.hash}`) === null )
+    if ( document.querySelector(`#d-${listItem.hash}`) === null )
     {
-        var tmp = document.createElement('div');
-        var tmpp = document.createElement('pre');
-        // tmp.style = 'flex-direction:row-reverse;';
-        tmp.style = 'flex-direction:row;align-items:center;';
-        tmp.id = `d-${listItem.hash}`;
-        // tmpp.id = `s-${listItem.hash}`;
-        // tmpp.innerText = JSON.stringify(listItem, null, 2);
-        var tmpc = document.createElement('img');
-        tmpc.id = `i-${listItem.hash}`;
-        // tmp.append(tmpp);
-        tmp.append(tmpc);
-        placeholders.previouslyPlayed.append(tmp);
+        var tmp = {
+            element:'div',
+            style: 'flex-direction:row;align-items:center;',
+            id: `d-${listItem.hash}`,
+            innerHTML:[
+                { element:"img", id: `i-${listItem.hash}` }
+            ]
+        }
+        makeElement(tmp, placeholders.previouslyPlayed);
+        document.querySelector(`#d-${listItem.hash}`).scrollIntoView();
         generateImage(listItem.hash, 'new');
         FetchJSON(`${jsonRequest}${listItem.hash}`, infoShowCallback, [listItem.hash]);
     }