commit 26/08/2025
This commit is contained in:
@@ -1,38 +1,209 @@
|
||||
$(document).ready(function() {
|
||||
$(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 = `<tr>
|
||||
<td>${item.index}</td>
|
||||
<td>${item.description}</td>
|
||||
<td>${item.tag}</td>
|
||||
<td>${item.category}</td>
|
||||
<td>${item.language}</td>
|
||||
<td>${item.voiceType}</td>
|
||||
<td>${item.path}</td>
|
||||
</tr>`;
|
||||
$('#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 = `<tr>
|
||||
<td>${item.index}</td>
|
||||
<td>${item.description}</td>
|
||||
<td>${item.language}</td>
|
||||
<td>${item.aNN_ID}</td>
|
||||
<td>${item.voice_Type}</td>
|
||||
<td>${item.message_Detail}</td>
|
||||
<td>${item.message_TAGS}</td>
|
||||
</tr>`;
|
||||
$('#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 = `<tr>
|
||||
<td>${item.index}</td>
|
||||
<td>${item.description}</td>
|
||||
<td>${item.language}</td>
|
||||
<td>${item.aNN_ID}</td>
|
||||
<td>${item.voice_Type}</td>
|
||||
<td>${item.message_Detail}</td>
|
||||
<td>${item.message_TAGS}</td>
|
||||
</tr>`;
|
||||
$('#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 = `<tr>
|
||||
<td>${item.index}</td>
|
||||
<td>${item.description}</td>
|
||||
<td>${item.language}</td>
|
||||
<td>${item.aNN_ID}</td>
|
||||
<td>${item.voice_Type}</td>
|
||||
<td>${item.message_Detail}</td>
|
||||
<td>${item.message_TAGS}</td>
|
||||
</tr>`;
|
||||
$('#schedulebanktablebody').append(row);
|
||||
});
|
||||
console.log("loaded " + vv.length + " schedulebank items");
|
||||
}
|
||||
|
||||
function fill_logtablebody(vv) {
|
||||
$('#logtablebody').empty();
|
||||
vv.forEach(item => {
|
||||
const row = `<tr>
|
||||
<td>${item.index}</td>
|
||||
<td>${item.date}</td>
|
||||
<td>${item.time}</td>
|
||||
<td>${item.description}</td>
|
||||
</tr>`;
|
||||
$('#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){
|
||||
// console.log('Command:', cmd);
|
||||
// console.log('Data:', data);
|
||||
switch(cmd){
|
||||
case "getCPUStatus" :
|
||||
if (cmd && cmd.length > 0) {
|
||||
switch (cmd) {
|
||||
case "getCPUStatus":
|
||||
$('#cpustatus').text("CPU Usage: " + data)
|
||||
break;
|
||||
case "getMemoryStatus" :
|
||||
case "getMemoryStatus":
|
||||
$('#ramstatus').text("Memory Usage: " + data)
|
||||
break;
|
||||
case "getDiskStatus" :
|
||||
case "getDiskStatus":
|
||||
$('#diskstatus').text("Disk Usage: " + data)
|
||||
break;
|
||||
case "getNetworkStatus" :
|
||||
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);
|
||||
@@ -43,7 +214,7 @@ $(document).ready(function() {
|
||||
* @param {String} command command to send
|
||||
* @param {String} data data to send
|
||||
*/
|
||||
function sendCommand(command, data){
|
||||
function sendCommand(command, data) {
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({ command, data }));
|
||||
} else {
|
||||
@@ -51,43 +222,133 @@ $(document).ready(function() {
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(()=>{
|
||||
$('#datetimetext').text(new Date().toLocaleString());
|
||||
setInterval(() => {
|
||||
sendCommand("getCPUStatus", "")
|
||||
sendCommand("getMemoryStatus", "")
|
||||
sendCommand("getDiskStatus", "")
|
||||
sendCommand("getNetworkStatus", "")
|
||||
sendCommand("getSystemTime", "")
|
||||
}, 1000)
|
||||
|
||||
let sidemenu = new bootstrap.Offcanvas('#offcanvas-menu');
|
||||
$('#showmenu').click(()=>{
|
||||
$('#showmenu').click(() => {
|
||||
sidemenu.show();
|
||||
})
|
||||
$('#soundbanklink').click(()=>{
|
||||
$('#soundbanklink').click(() => {
|
||||
sidemenu.hide();
|
||||
$('#content').load('soundbank.html');
|
||||
$('#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(()=>{
|
||||
$('#messagebanklink').click(() => {
|
||||
sidemenu.hide();
|
||||
$('#content').load('messagebank.html');
|
||||
$('#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(()=>{
|
||||
$('#languagelink').click(() => {
|
||||
sidemenu.hide();
|
||||
$('#content').load('language.html');
|
||||
$('#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(()=>{
|
||||
$('#timerlink').click(() => {
|
||||
sidemenu.hide();
|
||||
$('#content').load('timer.html');
|
||||
$('#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(()=>{
|
||||
$('#loglink').click(() => {
|
||||
sidemenu.hide();
|
||||
$('#content').load('log.html');
|
||||
$('#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(()=>{
|
||||
$('#settinglink').click(() => {
|
||||
sidemenu.hide();
|
||||
$('#content').load('setting.html');
|
||||
$('#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(()=>{
|
||||
$('#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 ""
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user