Merge branch 'master' of https://gitea.rdkartono.my.id/rdkartono/AAS_NewGeneration into feature-webapp

html/webpage/assets/js/overview.js

@@ -50,9 +50,12 @@ function getCardByIndex(index) {
  */
 function UpdateStreamerCard(values) {
     if (!Array.isArray(values) || values.length === 0) return;
-    function setProgress($bar, value, max = 100) {
+    
+    function setProgress(index, $bar, value, max = 100) {
         const v = Number(value ?? 0);
         const pct = Math.max(0, Math.min(100, Math.round((v / max) * 100)));
+        //if (index!==1) return; // only update index 1 for testing
+        //console.log(`setProgress: index=${index}, value=${v}, pct=${pct}`);
         $bar
             .attr('aria-valuenow', v)     // semantic value
             .css('width', pct + '%')      // visual width
@@ -68,7 +71,7 @@ function UpdateStreamerCard(values) {
             if (card.buffer) card.buffer.text(`Buffer: ${vv.bufferRemain !== undefined && vv.bufferRemain !== null ? vv.bufferRemain.toString() : 'N/A'}`);
             if (card.status) card.status.text(`Status: ${vv.isPlaying ? 'Playing' : 'Stopped'}`);
             if (card.vu) {
-                setProgress(card.vu, vv.vu, 100);
+                setProgress(i, card.vu, vv.vu, 100);
             }
         } else {
             // no value for this index, disable the card
@@ -77,7 +80,7 @@ function UpdateStreamerCard(values) {
             if (card.buffer) card.buffer.text(`Buffer: N/A`);
             if (card.status) card.status.text(`Status: Disconnected`);
             if (card.vu) {
-                setProgress(card.vu, 0, 100);
+                setProgress(i, card.vu, 0, 100);
             }
         }
     }
@@ -124,10 +127,13 @@ function fill_pagingqueuetablebody(vv) {
     if (!Array.isArray(vv) || vv.length === 0) return;
     vv.forEach(item => {
         // fill index and description columns using item properties  
-        let description = `${item.Date_Time}_${item.Source}_${item.Type}_${item.Message}_${item.BroadcastZones}`;
         $('#pagingqueuetable').append(`<tr>
             <td>${item.index}</td>
-            <td>${description}</td>
+            <td>${item.date_Time}</td>
+            <td>${item.source}</td>
+            <td>${item.type}</td>
+            <td>${item.message}</td>
+            <td>${item.broadcastZones}</td>
         </tr>`);
         let $addedrow = $('#pagingqueuetable tr:last');
         $addedrow.off('click').on('click', function () {
@@ -156,10 +162,14 @@ function fill_automaticqueuetablebody(vv) {
     if (!Array.isArray(vv) || vv.length === 0) return;
     vv.forEach(item => {
         // fill index and description columns using item properties
-        let description = `${item.Date_Time}_${item.Source}_${item.Type}_${item.Message}_${item.BroadcastZones}`;
+        //console.log("fill_automaticqueuetablebody: item", item);
         $('#automaticqueuetable').append(`<tr>
             <td>${item.index}</td>
-            <td>${description}</td>
+            <td>${item.date_Time}</td>
+            <td>${item.source}</td>
+            <td>${item.type}</td>
+            <td>${item.message}</td>
+            <td>${item.broadcastZones}</td>
         </tr>`);
         let $addedrow = $('#automaticqueuetable tr:last');
         $addedrow.off('click').on('click', function () {
@@ -277,14 +287,18 @@ $(document).ready(function () {
         }
     });
 
-    let intervaljob = null;
+    let intervaljob1 = null;
+    let intervaljob2 = null;
     function runIntervalJob() {
-        if (intervaljob) clearInterval(intervaljob);
-        intervaljob = setInterval(() => {
+        if (intervaljob1) clearInterval(intervaljob1);
+        intervaljob1 = setInterval(() => {
+            sendCommand("getStreamerOutputs", "");
+        }, 100);
+        if (intervaljob2) clearInterval(intervaljob2);
+        intervaljob2 = setInterval(() => {
             sendCommand("getPagingQueue", "");
             sendCommand("getAASQueue", "");
-            sendCommand("getStreamerOutputs", "");
-        }, 1000);
+        }, 2000);
         console.log("overview.js interval job started");
     }
 
@@ -309,22 +323,20 @@ $(document).ready(function () {
                 case "getPagingQueue":
                     let pq = JSON.parse(data);
                     //console.log("getPagingQueue:", pq);
+                    window.PagingQueue = [];
                     if (Array.isArray(pq) && pq.length > 0) {
-                        window.PagingQueue = [];
                         window.PagingQueue.push(...pq);
-                        console.log(`PagingQueue length: ${window.PagingQueue.length}`);
-                        fill_pagingqueuetablebody(window.PagingQueue);
                     }
+                    fill_pagingqueuetablebody(window.PagingQueue);
                     break;
                 case "getAASQueue":
                     let aq = JSON.parse(data);
                     //console.log("getAASQueue:", aq);
+                    window.QueueTable = [];
                     if (Array.isArray(aq) && aq.length > 0) {
-                        window.QueueTable = [];
                         window.QueueTable.push(...aq);
-                        console.log(`QueueTable length: ${window.QueueTable.length}`);
-                        fill_automaticqueuetablebody(window.QueueTable);
-                    }
+                    } 
+                    fill_automaticqueuetablebody(window.QueueTable);
                     break;
                 case "getStreamerOutputs":
                     /**
@@ -337,13 +349,11 @@ $(document).ready(function () {
         }
     });
 
-
-
-
-
     $(window).on('beforeunload', function () {
         console.log("overview.js beforeunload event triggered");
-        clearInterval(intervaljob);
-        intervaljob = null;
+        clearInterval(intervaljob1);
+        clearInterval(intervaljob2);
+        intervaljob1 = null;
+        intervaljob2 = null;
     });
 });