$(document).ready(function () {
document.title = "Automatic Announcement System"
$('#onlineindicator').attr('src', '/assets/img/red_circle.png');
let soundbankdata = [];
let messagebankdata = [];
let languagebankdata = [];
let schedulebankdata = [];
let logdata = [];
/**
* Fill soundbank table body with values
* @param {SoundBank[]} vv values to fill
*/
function fill_soundbanktablebody(vv) {
$('#soundbanktablebody').empty();
vv.forEach(item => {
const row = `
| ${item.index} |
${item.description} |
${item.tag} |
${item.category} |
${item.language} |
${item.voiceType} |
${item.path} |
`;
$('#soundbanktablebody').append(row);
});
$('#tablesize').text("Table Size: " + vv.length);
}
/**
* Fill messagebank table body with values
* @param {MessageBank[]} vv values to fill
*/
function fill_messagebanktablebody(vv) {
$('#messagebanktablebody').empty();
vv.forEach(item => {
const row = `
| ${item.index} |
${item.description} |
${item.language} |
${item.aNN_ID} |
${item.voice_Type} |
${item.message_Detail} |
${item.message_TAGS} |
`;
$('#messagebanktablebody').append(row);
});
console.log("loaded " + vv.length + " messagebank items");
}
function fill_languagebanktablebody(vv) {
$('#languagebanktablebody').empty();
vv.forEach(item => {
//TODO examine JSON structure
const row = `
| ${item.index} |
${item.description} |
${item.language} |
${item.aNN_ID} |
${item.voice_Type} |
${item.message_Detail} |
${item.message_TAGS} |
`;
$('#languagebanktablebody').append(row);
});
console.log("loaded " + vv.length + " languagebank items");
}
function fill_schedulebanktablebody(vv) {
$('#schedulebanktablebody').empty();
//TODO examine JSON structure
vv.forEach(item => {
const row = `
| ${item.index} |
${item.description} |
${item.language} |
${item.aNN_ID} |
${item.voice_Type} |
${item.message_Detail} |
${item.message_TAGS} |
`;
$('#schedulebanktablebody').append(row);
});
console.log("loaded " + vv.length + " schedulebank items");
}
function fill_logtablebody(vv) {
$('#logtablebody').empty();
vv.forEach(item => {
const row = `
| ${item.index} |
${item.date} |
${item.time} |
${item.description} |
`;
$('#logtablebody').append(row);
});
console.log("loaded " + vv.length + " log items");
}
const ws = new WebSocket(window.location.pathname + '/ws');
ws.onopen = () => {
console.log('WebSocket connection established');
$('#onlineindicator').attr('src', '/assets/img/green_circle.png');
};
ws.onmessage = (event) => {
let rep = JSON.parse(event.data);
let cmd = rep.reply
let data = rep.data;
if (cmd && cmd.length > 0) {
switch (cmd) {
case "getCPUStatus":
$('#cpustatus').text("CPU Usage: " + data)
break;
case "getMemoryStatus":
$('#ramstatus').text("Memory Usage: " + data)
break;
case "getDiskStatus":
$('#diskstatus').text("Disk Usage: " + data)
break;
case "getNetworkStatus":
$('#networkstatus').text("Network Usage: " + data)
break;
case "getSystemTime":
$('#datetimetext').text(data)
break;
case "getSoundBankList":
let $soundbankfilter = $('#findsoundbank');
$soundbankfilter.empty();
soundbankdata = [];
fill_soundbanktablebody(soundbankdata)
let xx = JSON.parse(data);
if (Array.isArray(xx) && xx.length > 0) {
soundbankdata = xx;
fill_soundbanktablebody(soundbankdata);
$soundbankfilter.prop('disabled', false);
$soundbankfilter.off('input').on('input', function () {
const filterText = $(this).val().toLowerCase();
if (filterText.length === 0) {
fill_soundbanktablebody(soundbankdata);
return;
} else {
const filtered = soundbankdata.filter(item =>
item.description && item.description.toLowerCase().startsWith(filterText)
);
fill_soundbanktablebody(filtered);
}
});
} else {
$soundbankfilter.prop('disabled', true);
alert("No soundbank data available");
}
break;
case "getMessageBankList":
messagebankdata = [];
fill_messagebanktablebody(messagebankdata);
let yy = JSON.parse(data);
if (Array.isArray(yy) && yy.length > 0) {
messagebankdata = yy;
fill_messagebanktablebody(messagebankdata);
} else alert("No messagebank data available");
break;
case "getLanguageList":
languagebankdata = []
fill_languagebanktablebody(languagebankdata);
let zz = JSON.parse(data);
if (Array.isArray(zz) && zz.length > 0) {
languagebankdata = zz;
fill_languagebanktablebody(languagebankdata);
} else alert("No language data available");
break;
case "getTimerList":
schedulebankdata = []
fill_schedulebanktablebody(schedulebankdata);
let aa = JSON.parse(data);
if (Array.isArray(aa) && aa.length > 0) {
schedulebankdata = aa;
fill_schedulebanktablebody(schedulebankdata);
} else alert("No schedule data available");
break;
case "getLog":
let $logfilter = $('#searchfilter');
logdata = [];
fill_logtablebody(logdata);
let bb = JSON.parse(data);
if (Array.isArray(bb) && bb.length > 0) {
logdata = bb;
fill_logtablebody(logdata);
} else alert("No log data available");
break;
case "getSetting":
console.log("Setting:");
console.log(data);
break;
}
}
};
ws.onclose = () => {
console.log('WebSocket connection closed');
$('#onlineindicator').attr('src', '/assets/img/red_circle.png');
};
// ws.onerror = (error) => {
// console.error('WebSocket error:', error);
// };
/**
* Send a command to the WebSocket server.
* @param {String} command command to send
* @param {String} data data to send
*/
function sendCommand(command, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ command, data }));
} else {
console.error('WebSocket is not open');
}
}
setInterval(() => {
sendCommand("getCPUStatus", "")
sendCommand("getMemoryStatus", "")
sendCommand("getDiskStatus", "")
sendCommand("getNetworkStatus", "")
sendCommand("getSystemTime", "")
}, 1000)
let sidemenu = new bootstrap.Offcanvas('#offcanvas-menu');
$('#showmenu').click(() => {
sidemenu.show();
})
$('#soundbanklink').click(() => {
sidemenu.hide();
$('#content').load('soundbank.html', function (response, status, xhr) {
if (status === "success") {
console.log("Soundbank content loaded successfully");
sendCommand("getSoundBankList", "");
} else {
console.error("Error loading soundbank content:", xhr.status, xhr.statusText);
}
});
})
$('#messagebanklink').click(() => {
sidemenu.hide();
$('#content').load('messagebank.html', function (response, status, xhr) {
if (status === "success") {
console.log("Messagebank content loaded successfully");
sendCommand("getMessageBankList", "");
} else {
console.error("Error loading messagebank content:", xhr.status, xhr.statusText);
}
});
})
$('#languagelink').click(() => {
sidemenu.hide();
$('#content').load('language.html', function (response, status, xhr) {
if (status === "success") {
console.log("Language content loaded successfully");
sendCommand("getLanguageList", "");
} else {
console.error("Error loading language content:", xhr.status, xhr.statusText);
}
});
})
$('#timerlink').click(() => {
sidemenu.hide();
$('#content').load('timer.html', function (response, status, xhr) {
if (status === "success") {
console.log("Timer content loaded successfully");
sendCommand("getTimerList", "");
} else {
console.error("Error loading timer content:", xhr.status, xhr.statusText);
}
});
})
$('#loglink').click(() => {
sidemenu.hide();
$('#content').load('log.html', function (response, status, xhr) {
if (status === "success") {
console.log("Log content loaded successfully");
const $logdate = $('#logdate');
const $searchfilter = $('#searchfilter');
if (!$logdate.val()) {
const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0');
const yyyy = today.getFullYear();
$logdate.val(`${yyyy}-${mm}-${dd}`);
}
$logdate.off('change').on('change', function () {
const selected = $(this).val();
if (selected) {
const [year, month, day] = selected.split('-');
const formatted = `${day}/${month}/${year}`;
sendCommand("getLog", logRequstData(formatted, $searchfilter.val()));
}
});
const selected = $logdate.val();
if (selected) {
const [year, month, day] = selected.split('-');
const formatted = `${day}/${month}/${year}`;
sendCommand("getLog", logRequstData(formatted, $searchfilter.val()));
}
} else {
console.error("Error loading log content:", xhr.status, xhr.statusText);
}
});
})
$('#settinglink').click(() => {
sidemenu.hide();
$('#content').load('setting.html', function (response, status, xhr) {
if (status === "success") {
console.log("Setting content loaded successfully");
sendCommand("getSetting", "");
} else {
console.error("Error loading setting content:", xhr.status, xhr.statusText);
}
});
})
$('#logoutlink').click(() => {
window.location.href = "login.html"
})
/**
* Create log Request Data
* @param {String} logdate in format dd/mm/yyyy
* @param {String} logfilter
* @returns JSON string of log Request data
*/
function logRequstData(logdate, logfilter) {
if (logdate && logdate.length > 0) {
const dateRegex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
if (dateRegex.test(logdate)) {
// logdate is valid
return JSON.stringify({
date: logdate,
filter: logfilter
})
}
}
return ""
}
});