commit 07/02/2026
This commit is contained in:
@@ -58,10 +58,6 @@
|
||||
margin-right: .5rem!important;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: .5rem!important;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 1rem!important;
|
||||
}
|
||||
|
||||
@@ -25,22 +25,38 @@
|
||||
* @property {JQuery<HTMLElement> | null} ip - The jQuery result should be <h6> element.
|
||||
* @property {JQuery<HTMLElement> | null} buffer - The jQuery result should be <h6> element.
|
||||
* @property {JQuery<HTMLElement> | null} status - The jQuery result should be <p> element.
|
||||
* @property {JQuery<HTMLElement> | null} filename - The jQuery result should be <h6> element.
|
||||
* @property {JQuery<HTMLElement> | null} duration - The jQuery result should be <h6> element.
|
||||
* @property {JQuery<HTMLElement> | null} elapsed - The jQuery result should be <h6> element.
|
||||
* @property {JQuery<HTMLElement> | null} broadcastzones - The jQuery result should be <h6> element.
|
||||
* @property {JQuery<HTMLElement> | null} vu - The jQuery result should be <progress-bar> element.
|
||||
*/
|
||||
|
||||
function getCardByIndex(index) {
|
||||
let cardname = "ch" + index.toString().padStart(2, '0');
|
||||
let obj = {
|
||||
// title is <h4> element wiht id `streamertitle${index}`, with index as two digit number, e.g. 01, 02, 03
|
||||
title: $(`#streamertitle${index.toString().padStart(2, '0')}`),
|
||||
//title: $(`#streamertitle${index.toString().padStart(2, '0')}`),
|
||||
// ip is <h6> element with id `streamerip${index}`, with index as two digit number, e.g. 01, 02, 03
|
||||
ip: $(`#streamerip${index.toString().padStart(2, '0')}`),
|
||||
//ip: $(`#streamerip${index.toString().padStart(2, '0')}`),
|
||||
// buffer is <h6> element with id `streamerbuffer${index}`, with index as two digit number, e.g. 01, 02, 03
|
||||
buffer: $(`#streamerbuffer${index.toString().padStart(2, '0')}`),
|
||||
//buffer: $(`#streamerbuffer${index.toString().padStart(2, '0')}`),
|
||||
// status is <p> element with id `streamerstatus${index}`, with index as two digit number, e.g. 01, 02, 03
|
||||
status: $(`#streamerstatus${index.toString().padStart(2, '0')}`),
|
||||
//status: $(`#streamerstatus${index.toString().padStart(2, '0')}`),
|
||||
// vu is <progress-bar> element with id `streamervu${index}`, with index as two digit number, e.g. 01, 02, 03
|
||||
vu: $(`#streamervu${index.toString().padStart(2, '0')} .progress-bar`),
|
||||
//vu: $(`#streamervu${index.toString().padStart(2, '0')} .progress-bar`),
|
||||
card: $(`#${cardname}`),
|
||||
title: $(`#${cardname} .streamertitle`),
|
||||
ip: $(`#${cardname} .streamerip`),
|
||||
buffer: $(`#${cardname} .streamerbuffer`),
|
||||
status: $(`#${cardname} .streamerstatus`),
|
||||
vu: $(`#${cardname} .streamervu .progress-bar`),
|
||||
filename: $(`#${cardname} .streamerfile`),
|
||||
duration: $(`#${cardname} .streamerduration`),
|
||||
elapsed: $(`#${cardname} .streamerelapsed`),
|
||||
broadcastzones: $(`#${cardname} .streamerzones`),
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
@@ -64,29 +80,71 @@ function UpdateStreamerCard(values) {
|
||||
values = [];
|
||||
}
|
||||
|
||||
let visiblilitychanged = false;
|
||||
|
||||
for (let i = 1; i <= 64; i++) {
|
||||
let vv = values.find(v => v.index === i);
|
||||
let card = getCardByIndex(i);
|
||||
const vv = values.find(v => v.index === i);
|
||||
const cardname = "ch" + i.toString().padStart(2, '0');
|
||||
const $card = $(`#${cardname}`);
|
||||
|
||||
|
||||
if (vv) {
|
||||
// there is value for this index
|
||||
if (card.title) card.title.text(vv.channel ? vv.channel : `Channel ${i.toString().padStart(2, '0')}`);
|
||||
if (card.ip) card.ip.text(`IP Address: ${vv.ipaddress ? vv.ipaddress : 'N/A'}`);
|
||||
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' : 'Idle'}`);
|
||||
if (card.vu) {
|
||||
setProgress(i, card.vu, vv.vu, 100);
|
||||
// ada data untuk index i
|
||||
if ($card.length > 0) {
|
||||
// ada card untuk index i, show card
|
||||
if ($card.hasClass('d-none')) {
|
||||
visiblilitychanged = true;
|
||||
$card.removeClass('d-none');
|
||||
$card.closest('.streamercol').removeClass('d-none'); // show the column as well
|
||||
}
|
||||
const $title = $(`#${cardname} .streamertitle`);
|
||||
const $ip = $(`#${cardname} .streamerip`);
|
||||
const $buffer = $(`#${cardname} .streamerbuffer`);
|
||||
const $status = $(`#${cardname} .streamerstatus`);
|
||||
const $vu = $(`#${cardname} .streamervu .progress-bar`);
|
||||
const $filename = $(`#${cardname} .streamerfile`);
|
||||
const $duration = $(`#${cardname} .streamerduration`);
|
||||
const $elapsed = $(`#${cardname} .streamerelapsed`);
|
||||
const $broadcastzones = $(`#${cardname} .streamerzones`);
|
||||
|
||||
//console.log(`Updating card for index ${i}`, vv);
|
||||
$title.text(vv.channel ? vv.channel : `Channel ${i.toString().padStart(2, '0')}`);
|
||||
$ip.text(vv.ipaddress ? vv.ipaddress : 'N/A');
|
||||
$buffer.text(vv.bufferRemain !== undefined && vv.bufferRemain !== null ? vv.bufferRemain.toString() : 'N/A');
|
||||
$status.text(vv.isPlaying ? 'Playing' : 'Idle');
|
||||
setProgress(i, $vu, vv.vu ? vv.vu : 0, 100);
|
||||
$filename.text(vv.filename ? vv.filename : 'N/A');
|
||||
$duration.text(vv.duration ? vv.duration : 'N/A');
|
||||
$elapsed.text(vv.elapsed ? vv.elapsed : 'N/A');
|
||||
$broadcastzones.text(vv.broadcastzones ? vv.broadcastzones : 'N/A');
|
||||
}
|
||||
} else {
|
||||
// no value for this index, disable the card
|
||||
if (card.title) card.title.text(`Channel ${i.toString().padStart(2, '0')}`);
|
||||
if (card.ip) card.ip.text(`IP Address: N/A`);
|
||||
if (card.buffer) card.buffer.text(`Buffer: N/A`);
|
||||
if (card.status) card.status.text(`Status: Disconnected`);
|
||||
if (card.vu) {
|
||||
setProgress(i, card.vu, 0, 100);
|
||||
// tidak ada data untuk index i, hide card
|
||||
if ($card.length > 0) {
|
||||
// ada card untuk index i, hide card
|
||||
if (!$card.hasClass('d-none')) {
|
||||
visiblilitychanged = true;
|
||||
$card.addClass('d-none');
|
||||
$card.closest('.streamercol').addClass('d-none'); // hide the column as well
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// hide rows that have all cards hidden
|
||||
if (visiblilitychanged) {
|
||||
$('.streamerrow').each(function () {
|
||||
const $row = $(this);
|
||||
const visiblecards = $row.find('.streamercard:not(.d-none)');
|
||||
if (visiblecards.length === 0) {
|
||||
$row.addClass('d-none');
|
||||
} else {
|
||||
$row.removeClass('d-none');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -428,51 +486,51 @@ $(document).ready(function () {
|
||||
|
||||
runIntervalJob();
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener('ws_connected', () =>{
|
||||
|
||||
|
||||
window.addEventListener('ws_connected', () => {
|
||||
console.log("overview.js ws_connected event triggered");
|
||||
runIntervalJob();
|
||||
runIntervalJob();
|
||||
});
|
||||
window.addEventListener('ws_disconnected', ()=>{
|
||||
window.addEventListener('ws_disconnected', () => {
|
||||
console.log("overview.js ws_disconnected event triggered");
|
||||
if (intervaljob1) clearInterval(intervaljob1);
|
||||
if (intervaljob2) clearInterval(intervaljob2);
|
||||
intervaljob1 = null;
|
||||
intervaljob2 = null;
|
||||
if (intervaljob1) clearInterval(intervaljob1);
|
||||
if (intervaljob2) clearInterval(intervaljob2);
|
||||
intervaljob1 = null;
|
||||
intervaljob2 = null;
|
||||
});
|
||||
window.addEventListener('ws_message', ()=>{
|
||||
window.addEventListener('ws_message', () => {
|
||||
let rep = event.detail;
|
||||
let cmd = rep.reply;
|
||||
let data = rep.data;
|
||||
if (cmd && cmd.length > 0) {
|
||||
switch (cmd) {
|
||||
case "getPagingQueue":
|
||||
let pq = JSON.parse(data);
|
||||
window.PagingQueue = [];
|
||||
if (Array.isArray(pq) && pq.length > 0) {
|
||||
window.PagingQueue.push(...pq);
|
||||
}
|
||||
fill_pagingqueuetablebody(window.PagingQueue);
|
||||
break;
|
||||
case "getAASQueue":
|
||||
let aq = JSON.parse(data);
|
||||
window.QueueTable = [];
|
||||
if (Array.isArray(aq) && aq.length > 0) {
|
||||
window.QueueTable.push(...aq);
|
||||
}
|
||||
fill_automaticqueuetablebody(window.QueueTable);
|
||||
break;
|
||||
case "getStreamerOutputs":
|
||||
/**
|
||||
* @type {StreamerOutputData[]}
|
||||
*/
|
||||
let so = JSON.parse(data);
|
||||
UpdateStreamerCard(so);
|
||||
break;
|
||||
}
|
||||
let cmd = rep.reply;
|
||||
let data = rep.data;
|
||||
if (cmd && cmd.length > 0) {
|
||||
switch (cmd) {
|
||||
case "getPagingQueue":
|
||||
let pq = JSON.parse(data);
|
||||
window.PagingQueue = [];
|
||||
if (Array.isArray(pq) && pq.length > 0) {
|
||||
window.PagingQueue.push(...pq);
|
||||
}
|
||||
fill_pagingqueuetablebody(window.PagingQueue);
|
||||
break;
|
||||
case "getAASQueue":
|
||||
let aq = JSON.parse(data);
|
||||
window.QueueTable = [];
|
||||
if (Array.isArray(aq) && aq.length > 0) {
|
||||
window.QueueTable.push(...aq);
|
||||
}
|
||||
fill_automaticqueuetablebody(window.QueueTable);
|
||||
break;
|
||||
case "getStreamerOutputs":
|
||||
/**
|
||||
* @type {StreamerOutputData[]}
|
||||
*/
|
||||
let so = JSON.parse(data);
|
||||
UpdateStreamerCard(so);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(window).on('beforeunload', function () {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -20,20 +20,72 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="card" id="streamercard">
|
||||
<div class="card streamercard" id="streamercard">
|
||||
<div class="card-body card-channel">
|
||||
<h4 class="card-title" id="streamertitle">Channel 01</h4>
|
||||
<h4 class="card-title streamertitle" id="streamertitle">Channel 01</h4>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
|
||||
<h6 class="text-muted mb-2" id="streamerip">IP : 192.168.10.10</h6>
|
||||
<div class="col-3">
|
||||
<p class="w-100 h-100 align-content-center">IP</p>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6">
|
||||
<h6 class="text-muted mb-2" id="streamerbuffer">Free : 64KB</h6>
|
||||
<div class="col">
|
||||
<p class="w-100 h-100 align-content-center streamerip" id="streamerip">N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="card-text" id="streamerstatus">Status : Idle</p>
|
||||
<div class="progress" id="streamervu">
|
||||
<div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<p class="w-100 h-100 align-content-center">Buffer</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="w-100 h-100 align-content-center streamerbuffer" id="streamerbuffer">N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<p class="w-100 h-100 align-content-center">Status</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="w-100 h-100 align-content-center streamerstatus" id="streamerstatus">N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<p class="w-100 h-100 align-content-center">File</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="w-100 h-100 align-content-center streamerfile" id="streamerfile">N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<p class="w-100 h-100 align-content-center">Zones</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="w-100 h-100 align-content-center streamerzones" id="streamerzones">N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<p class="w-100 h-100 align-content-center">Duration</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="w-100 h-100 align-content-center streamerduration" id="streamerduration">N/A</p>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<p class="w-100 h-100 align-content-center">Elapsed</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="w-100 h-100 align-content-center streamerelapsed" id="streamerelapsed">N/A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<p class="w-100 h-100 align-content-center">VU</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="progress w-100 h-50 streamervu" id="streamervu">
|
||||
<div class="progress-bar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user