commit 26/01/2026

.idea/inspectionProfiles/Project_Default.xml

@@ -8,6 +8,7 @@
     <inspection_tool class="FunctionName" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="LocalVariableName" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="MethodNameSameAsClassName" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="NestedLambdaShadowedImplicitParameter" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="PropertyName" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="RedundantCast" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
@@ -15,5 +16,6 @@
       <option name="processLiterals" value="true" />
       <option name="processComments" value="true" />
     </inspection_tool>
+    <inspection_tool class="SqlDialectInspection" enabled="false" level="WARNING" enabled_by_default="false" />
   </profile>
 </component>

config.properties

@@ -1,5 +1,5 @@
 #Configuration file
-#Tue Nov 25 10:00:19 WIB 2025
+#Mon Jan 26 15:17:01 WIB 2026
 auto.delete.result.days=7
 database.host=localhost
 database.name=aas
@@ -7,10 +7,10 @@ database.password=admin
 database.port=3306
 database.user=admin
 default.voice.type=VOICE_1
-remark.FLD=Arrival [9]
+remark.FLD=Arrival [2]
-remark.GBD=Second Call [2]
+remark.GBD=Second Call [20]
-remark.GFC=Last Call [3]
+remark.GFC=Last Call [34]
-remark.GOP=First Call [1]
+remark.GOP=First Call [12]
 soundbank.directory=C\:\\soundbank
 webapp.admin.password=password
 webapp.admin.username=admin

html/webpage/assets/js/broadcastzones.js

@@ -12,44 +12,46 @@ window.selectedBroadcastZoneRow = null;
  */
 window.SoundChannelList = []
 
+dtBroadcastZone = null;
+
 /**
  * Fill broadcast zone table body with values
  * @param {BroadcastZone[]} vv values to fill
  */
 function fill_broadcastzonetablebody(vv) {
-    $('#broadcastzonetablebody').empty();
+    dtBroadcastZone.clear();
     if (!Array.isArray(vv) || vv.length === 0) return;
-    vv.forEach(item => {
+    dtBroadcastZone.rows.add(vv);
-        const row = `<tr>
+    dtBroadcastZone.draw();
-            <td>${item.index}</td>
+
-            <td>${item.description}</td>
+    $('#broadcastzonetable tbody').off('click').on('click', 'tr', function () {
-            <td>${item.soundChannel}</td>
+        // if no data
-            <td>${item.id}</td>
+        if (!dtBroadcastZone) return;
-            <td>${item.bp}</td>
+        // if user click an empty row
-        </tr>`;
+        if (!dtBroadcastZone.data().any()) return;
-        $('#broadcastzonetablebody').append(row);
+
-        let $addedrow = $('#broadcastzonetablebody tr:last');
+        const selected = dtBroadcastZone.row(this)
-        $addedrow.off('click').on('click', function () {
+        // toggle behaviour - unselect if already selected
-            if (window.selectedBroadcastZoneRow) {
+        if ($(this).hasClass('row-selected')) {
-                window.selectedBroadcastZoneRow.find('td').css('background-color', '');
+            $(this).removeClass('row-selected').find('td').css('background-color', '');
-                if (window.selectedBroadcastZoneRow.is($(this))) {
             window.selectedBroadcastZoneRow = null;
             $('#btnRemove').prop('disabled', true);
             $('#btnEdit').prop('disabled', true);
             return;
         }
-            }
+
-            $(this).find('td').css('background-color', '#ffeeba');
+        // unselect previously selected row
-            window.selectedBroadcastZoneRow = $(this);
+        $('#broadcastzonetable tbody tr.row-selected').removeClass('row-selected').find('td').css('background-color', '');
+
+        $(this).addClass('row-selected').find('td').css('background-color', '#ffeeba');
+        window.selectedBroadcastZoneRow = selected.data();
         $('#btnRemove').prop('disabled', false);
         $('#btnEdit').prop('disabled', false);
     });
-    });
+
     $('#tablesize').text("Table Size: " + vv.length);
 }
 
-
-
 function fetchSoundChannels(APIURL = "SoundChannel/") {
     window.SoundChannelList = [];
     fetchAPI(APIURL + "SoundChannelDescriptions", "GET", {}, null, (okdata) => {
@@ -82,20 +84,33 @@ $(document).ready(function () {
     let $broadcastzonesoundchannel = $broadcastzonemodal.find('#broadcastzonesoundchannel');
     let $broadcastzonebox = $broadcastzonemodal.find('#broadcastzonebox');
 
-    
+    if (dtBroadcastZone === null) {
-
+        dtBroadcastZone = new DataTable('#broadcastzonetable', {
-    let $findzone = $('#findzone');
+            data: [],
-    $findzone.off('input').on('input', function () {
+            pageLength: 25,
-        let searchTerm = $findzone.val().trim().toLowerCase();
+            columns: [
-        if (searchTerm.length > 0) {
+                { title: "No", data: "index" },
-            window.selectedBroadcastZoneRow = null;
+                { title: "Description", data: "description" },
-            let filtered = window.BroadcastZoneList.filter(item => item.description.toLowerCase().includes(searchTerm) || item.id.toLowerCase().includes(searchTerm) || item.soundChannel.toLowerCase().includes(searchTerm) || item.bp.toLowerCase().includes(searchTerm));
+                { title: "Sound Channel", data: "soundChannel" },
-            fill_broadcastzonetablebody(filtered);
+                { title: "Address", data: "id" },
-        } else {
+                { title: "Contact Output", data: "bp" },
-            window.selectedBroadcastZoneRow = null;
+            ]
-            fill_broadcastzonetablebody(window.BroadcastZoneList);
-        }
         });
+    }
+
+
+    // let $findzone = $('#findzone');
+    // $findzone.off('input').on('input', function () {
+    //     let searchTerm = $findzone.val().trim().toLowerCase();
+    //     if (searchTerm.length > 0) {
+    //         window.selectedBroadcastZoneRow = null;
+    //         let filtered = window.BroadcastZoneList.filter(item => item.description.toLowerCase().includes(searchTerm) || item.id.toLowerCase().includes(searchTerm) || item.soundChannel.toLowerCase().includes(searchTerm) || item.bp.toLowerCase().includes(searchTerm));
+    //         fill_broadcastzonetablebody(filtered);
+    //     } else {
+    //         window.selectedBroadcastZoneRow = null;
+    //         fill_broadcastzonetablebody(window.BroadcastZoneList);
+    //     }
+    // });
 
     /**
      * Find Checkbox for relays 1 to 32
@@ -115,7 +130,7 @@ $(document).ready(function () {
         $broadcastzonedescription.val('');
         // fill broadcastzonesoundchannel from SoundChannelList
         $broadcastzonesoundchannel.empty();
-        console.log("SoundChannelList:", window.SoundChannelList);
+        //console.log("SoundChannelList:", window.SoundChannelList);
         if (Array.isArray(window.SoundChannelList) && window.SoundChannelList.length > 0) {
             // SoundChannelList ada isinya
             window.SoundChannelList.forEach(ch => {
@@ -197,14 +212,13 @@ $(document).ready(function () {
 
     $btnRemove.off('click').on('click', () => {
         if (window.selectedBroadcastZoneRow) {
-            let cells = window.selectedBroadcastZoneRow.find('td');
             /** @type {BroadcastZone} */
             let bz = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedBroadcastZoneRow.index,
-                description: cells.eq(1).text(),
+                description: window.selectedBroadcastZoneRow.description,
-                SoundChannel: cells.eq(2).text(),
+                SoundChannel: window.selectedBroadcastZoneRow.soundChannel,
-                Box: cells.eq(3).text(),
+                Box: window.selectedBroadcastZoneRow.id,
-                Relay: cells.eq(4).text()
+                Relay: window.selectedBroadcastZoneRow.bp
             };
             if (confirm(`Are you sure to delete broadcast zone [${bz.index}] Description=${bz.description}?`)) {
                 fetchAPI(APIURL_BroadcastZone + "DeleteByIndex/" + bz.index, "DELETE", {}, null, (okdata) => {
@@ -219,14 +233,13 @@ $(document).ready(function () {
 
     $btnEdit.off('click').on('click', () => {
         if (window.selectedBroadcastZoneRow) {
-            let cells = window.selectedBroadcastZoneRow.find('td');
             /** @type {BroadcastZone} */
             let bz = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedBroadcastZoneRow.index,
-                description: cells.eq(1).text(),
+                description: window.selectedBroadcastZoneRow.description,
-                SoundChannel: cells.eq(2).text(),
+                SoundChannel: window.selectedBroadcastZoneRow.soundChannel,
-                Box: cells.eq(3).text(),
+                Box: window.selectedBroadcastZoneRow.id,
-                Relay: cells.eq(4).text()
+                Relay: window.selectedBroadcastZoneRow.bp
             };
             if (confirm(`Are you sure to edit broadcast zone [${bz.index}] Description=${bz.description} SoundChannel=${bz.SoundChannel} Box=${bz.id} Relay=${bz.bp}?`)) {
                 $broadcastzonemodal.modal('show');

html/webpage/assets/js/languagelink.js

@@ -6,6 +6,8 @@
  * 
  */
 
+dtLanguageLink = null;
+
 /** List of Languagebank data loaded from server
  * @type {LanguageBank[]}
  */
@@ -21,32 +23,36 @@ window.selectedlanguagerow = null;
  * @param {LanguageBank[]} vv values to fill
  */
 function fill_languagebanktablebody(vv) {
-    $('#languagebanktablebody').empty();
+    dtLanguageLink.clear();
     if (!Array.isArray(vv) || vv.length === 0) return;
-    vv.forEach(item => {
+    dtLanguageLink.rows.add(vv);
-        const row = `<tr>
+    dtLanguageLink.draw();
-                     <td>${item.index}</td>
+
-                     <td>${item.tag}</td>
+
-                     <td>${item.language}</td>
+    $('#languagebanktable tbody').off('click').on('click', 'tr', function () {
-                     </tr>`;
+        // if no data
-        $('#languagebanktablebody').append(row);
+        if (!dtLanguageLink) return;
-        let $addedrow = $('#languagebanktablebody tr:last');
+        // if user click an empty row
-        $addedrow.click(function () {
+        if (!dtLanguageLink.data().any()) return;
-            if (window.selectedlanguagerow) {
+
-                window.selectedlanguagerow.find('td').css('background-color', '');
+        const selected = dtLanguageLink.row(this)
-                if (window.selectedlanguagerow.is($(this))) {
+        // toggle behaviour - unselect if already selected
+        if ($(this).hasClass('row-selected')) {
+            $(this).removeClass('row-selected').find('td').css('background-color', '');
             window.selectedlanguagerow = null;
             $('#btnRemove').prop('disabled', true);
             $('#btnEdit').prop('disabled', true);
             return;
         }
-            }
+
-            $addedrow.find('td').css('background-color', '#ffeeba');
+        // unselect previously selected row
-            window.selectedlanguagerow = $addedrow;
+        $('#languagebanktable tbody tr.row-selected').removeClass('row-selected').find('td').css('background-color', '');
+
+        $(this).addClass('row-selected').find('td').css('background-color', '#ffeeba');
+        window.selectedlanguagerow = selected.data();
         $('#btnRemove').prop('disabled', false);
         $('#btnEdit').prop('disabled', false);
-        });
+    })
-    });
     $('#tablesize').text("Table Size: " + vv.length);
 }
 
@@ -69,7 +75,6 @@ function reloadLanguageBank(APIURL = "LanguageLink/") {
 
 $(document).ready(function () {
     console.log('languagebank.js loaded');
-
     $('#languagebanktablebody').empty();
     window.selectedlanguagerow = null;
     let $btnClear = $('#btnClear');
@@ -92,6 +97,19 @@ $(document).ready(function () {
     let $cbJap = $modal.find('#langJap');
     let $cbChi = $modal.find('#langChi');
 
+    if (dtLanguageLink === null) {
+        dtLanguageLink = new DataTable('#languagebanktable', {
+            data: [],
+            pageLength: 25,
+            columns: [
+                { title: "No", data: "index" },
+                { title: "TAG", data: "tag" },
+                { title: "Languages", data: "language" }
+            ]
+        });
+    }
+
+
     function clearLanguageModal() {
         $langid.prop('disabled', true).val('');
         $langtag.val('');
@@ -103,17 +121,17 @@ $(document).ready(function () {
         $cbChi.prop('checked', false);
     }
 
-    $findlanguage.on('input', function () {
+    // $findlanguage.on('input', function () {
-        let searchTerm = $findlanguage.val().toLowerCase();
+    //     let searchTerm = $findlanguage.val().toLowerCase();
-        if (searchTerm.length > 0) {
+    //     if (searchTerm.length > 0) {
-            window.selectedlanguagerow = null;
+    //         window.selectedlanguagerow = null;
-            let filtered = window.languagebankdata.filter(item => item.tag.toLowerCase().includes(searchTerm) || item.language.toLowerCase().includes(searchTerm));
+    //         let filtered = window.languagebankdata.filter(item => item.tag.toLowerCase().includes(searchTerm) || item.language.toLowerCase().includes(searchTerm));
-            fill_languagebanktablebody(filtered);
+    //         fill_languagebanktablebody(filtered);
-        } else {
+    //     } else {
-            window.selectedlanguagerow = null;
+    //         window.selectedlanguagerow = null;
-            fill_languagebanktablebody(window.languagebankdata);
+    //         fill_languagebanktablebody(window.languagebankdata);
-        }
+    //     }
-    });
+    // });
 
     reloadLanguageBank(APIURL);
     $btnClear.click(() => {
@@ -172,12 +190,11 @@ $(document).ready(function () {
     });
     $btnRemove.click(() => {
         if (window.selectedlanguagerow) {
-            let cells = window.selectedlanguagerow.find('td');
             /** @type {Language} */
             let ll = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedlanguagerow.index,
-                tag: cells.eq(1).text(),
+                tag: window.selectedlanguagerow.tag,
-                language: cells.eq(2).text()
+                language: window.selectedlanguagerow.language
             }
             if (confirm(`Are you sure to delete language [${ll.index}] Tag=${ll.tag} Language=${ll.language}?`)) {
                 fetchAPI(APIURL + "DeleteByIndex/" + ll.index, "DELETE", {}, null, (okdata) => {
@@ -191,12 +208,11 @@ $(document).ready(function () {
     });
     $btnEdit.click(() => {
         if (window.selectedlanguagerow) {
-            let cells = window.selectedlanguagerow.find('td');
             /** @type {Language} */
             let ll = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedlanguagerow.index,
-                tag: cells.eq(1).text(),
+                tag: window.selectedlanguagerow.tag,
-                language: cells.eq(2).text()
+                language: window.selectedlanguagerow.language
             }
             if (confirm(`Are you sure to edit language [${ll.index}] Tag=${ll.tag} Language=${ll.language}?`)) {
 

html/webpage/assets/js/log.js

@@ -12,27 +12,22 @@
  */
 window.logdata = [];
 
+dtLog = null;
+
 /**
  * Fill log table body with values
  * @param {Log[]} vv values to fill
  */
 function fill_logtablebody(vv) {
-    $('#logtablebody').empty();
+    dtLog.clear();
-    
     if (!Array.isArray(vv) || vv.length === 0) {
         $('#btnExport').prop('disabled', true);
         return;
     }
-    vv.forEach(item => {
+    dtLog.rows.add(vv);
-        const row = `<tr>
+    dtLog.draw();
-                     <td>${item.index}</td>
+
-                     <td>${item.datenya}</td>
+
-                     <td>${item.timenya}</td>
-                     <td>${item.machine}</td>
-                     <td>${item.description}</td>
-                     </tr>`;
-        $('#logtablebody').append(row);
-    });
     $('#tablesize').text("Table Size: " + vv.length);
     $('#btnExport').prop('disabled', false);
 }
@@ -64,7 +59,20 @@ $(document).ready(function () {
     let selectedlogdate = "";
     let logfilter = "";
     let APIURL = "Log/";
-    $('#logtablebody').empty();
+
+    if (dtLog === null) {
+        dtLog = new DataTable('#logtable', {
+            data: [],
+            pageLength: 25,
+            columns: [
+                { title: "No", data: "index" },
+                { title: "Date", data: "datenya" },
+                { title: "Time", data: "timenya" },
+                { title: "Machine", data: "machine" },
+                { title: "Description", data: "description" }
+            ]
+        });
+    }
 
 
     if (!$('#logdate').val()) {

html/webpage/assets/js/messagebank.js

@@ -5,41 +5,43 @@
  */
 window.selectedmessagerow = null;
 
+dtMessageBank = null;
+
 /**
  * Fill messagebank table body with values
 * @param {MessageBank[]} vv values to fill
 */
 function fill_messagebanktablebody(vv) {
-    $('#messagebanktablebody').empty();
+    dtMessageBank.clear();
     if (!Array.isArray(vv) || vv.length === 0) return;
-    vv.forEach(item => {
+
-        const row = `<tr>
+    dtMessageBank.rows.add(vv);
-                     <td>${item.index}</td>
+    dtMessageBank.draw();
-                     <td>${item.description}</td>
+
-                     <td>${item.language}</td>
+    $('#messagebanktable tbody').off('click').on('click', 'tr', function () {
-                     <td>${item.aNN_ID}</td>
+        // if no data
-                     <td>${item.voice_Type}</td>
+        if (!dtMessageBank) return;
-                     <td>${item.message_Detail}</td>
+        // if user click an empty row
-                     <td>${item.message_TAGS}</td>
+        if (!dtMessageBank.data().any()) return;
-                            </tr>`;
+
-        $('#messagebanktablebody').append(row);
+        const selected = dtMessageBank.row(this)
-        let $addedrow = $('#messagebanktablebody tr:last');
+        // toggle behaviour - unselect if already selected
-        $addedrow.click(function () {
+        if ($(this).hasClass('row-selected')) {
-            if (window.selectedmessagerow) {
+            $(this).removeClass('row-selected').find('td').css('background-color', '');
-                window.selectedmessagerow.find('td').css('background-color', '');
-                if (window.selectedmessagerow.is($(this))) {
             window.selectedmessagerow = null;
             $('#btnRemove').prop('disabled', true);
             $('#btnEdit').prop('disabled', true);
             return;
         }
-            }
+
-            $addedrow.find('td').css('background-color', '#ffeeba');
+        // unselect previously selected row
-            window.selectedmessagerow = $addedrow;
+        $('#messagebanktable tbody tr.row-selected').removeClass('row-selected').find('td').css('background-color', '');
+
+        $(this).addClass('row-selected').find('td').css('background-color', '#ffeeba');
+        window.selectedmessagerow = selected.data();
         $('#btnRemove').prop('disabled', false);
         $('#btnEdit').prop('disabled', false);
-        });
+    })
-    });
 
     $('#tablesize').text("Table Size: " + vv.length);
 }
@@ -59,7 +61,6 @@ function fill_messagebanktablebody(vv) {
 
 $(document).ready(function () {
     console.log("messagebank.js loaded");
-    $('#messagebanktablebody').empty();
     window.selectedmessagerow = null;
     let $btnClear = $('#btnClear');
     let $btnAdd = $('#btnAdd');
@@ -72,6 +73,23 @@ $(document).ready(function () {
     let APIURL = "MessageBank/";
     let $findmessage = $('#findmessage');
 
+    if (dtMessageBank === null) {
+        dtMessageBank = new DataTable('#messagebanktable', {
+            data: [],
+            pageLength: 25,
+            columns: [
+                { title: "Index", data: "index" },
+                { title: "Description", data: "description" },
+                { title: "Language", data: "language" },
+                { title: "ANN ID", data: "aNN_ID" },
+                { title: "Type", data: "voice_Type" },
+                { title: "Message Details", data: "message_Detail" },
+                { title: "Message TAGS", data: "message_TAGS" }
+            ]
+        });
+    }
+
+
     // modal for add / edit messagebank
     let $modal = $('#messagebankmodal');
     // text input, disabled by default
@@ -267,17 +285,17 @@ $(document).ready(function () {
     }
 
 
-    $findmessage.on('input', function () {
+    // $findmessage.on('input', function () {
-        let searchTerm = $findmessage.val().toLowerCase();
+    //     let searchTerm = $findmessage.val().toLowerCase();
-        if (searchTerm.length > 0) {
+    //     if (searchTerm.length > 0) {
-            window.selectedmessagerow = null;
+    //         window.selectedmessagerow = null;
-            let filtered = window.messagebankdata.filter(item => item.description.toLowerCase().includes(searchTerm) || item.message_Detail.toLowerCase().includes(searchTerm) || item.message_TAGS.toLowerCase().includes(searchTerm));
+    //         let filtered = window.messagebankdata.filter(item => item.description.toLowerCase().includes(searchTerm) || item.message_Detail.toLowerCase().includes(searchTerm) || item.message_TAGS.toLowerCase().includes(searchTerm));
-            fill_messagebanktablebody(filtered);
+    //         fill_messagebanktablebody(filtered);
-        } else {
+    //     } else {
-            window.selectedmessagerow = null;
+    //         window.selectedmessagerow = null;
-            fill_messagebanktablebody(window.messagebankdata);
+    //         fill_messagebanktablebody(window.messagebankdata);
-        }
+    //     }
-    });
+    // });
 
 
     reloadMessageBank(APIURL, () => fill_messagebanktablebody(window.messagebankdata));
@@ -322,16 +340,15 @@ $(document).ready(function () {
     });
     $btnRemove.click(() => {
         if (window.selectedmessagerow) {
-            let cells = window.selectedmessagerow.find('td');
             /** @type {MessageBank} */
             let mb = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedmessagerow.index,
-                description: cells.eq(1).text(),
+                description: window.selectedmessagerow.description,
-                language: cells.eq(2).text(),
+                language: window.selectedmessagerow.language,
-                aNN_ID: parseInt(cells.eq(3).text()),
+                aNN_ID: window.selectedmessagerow.aNN_ID,
-                voice_Type: cells.eq(4).text(),
+                voice_Type: window.selectedmessagerow.voice_Type,
-                message_Detail: cells.eq(5).text(),
+                message_Detail: window.selectedmessagerow.message_Detail,
-                message_TAGS: cells.eq(6).text()
+                message_TAGS: window.selectedmessagerow.message_TAGS
             }
 
             if (confirm(`Are you sure to delete messagebank [${mb.index}] Description=${mb.description}? ANN_ID=${mb.aNN_ID} Language=${mb.language} Voice_Type=${mb.voice_Type} `)) {
@@ -346,16 +363,15 @@ $(document).ready(function () {
     });
     $btnEdit.click(() => {
         if (window.selectedmessagerow) {
-            let cells = window.selectedmessagerow.find('td');
             /** @type {MessageBank} */
             let mb = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedmessagerow.index,
-                description: cells.eq(1).text(),
+                description: window.selectedmessagerow.description,
-                language: cells.eq(2).text(),
+                language: window.selectedmessagerow.language,
-                aNN_ID: parseInt(cells.eq(3).text()),
+                aNN_ID: window.selectedmessagerow.aNN_ID,
-                voice_Type: cells.eq(4).text(),
+                voice_Type: window.selectedmessagerow.voice_Type,
-                message_Detail: cells.eq(5).text(),
+                message_Detail: window.selectedmessagerow.message_Detail,
-                message_TAGS: cells.eq(6).text()
+                message_TAGS: window.selectedmessagerow.message_TAGS
             }
             if (confirm(`Are you sure to edit messagebank [${mb.index}] Description=${mb.description} ANN_ID=${mb.aNN_ID} Language=${mb.language} Voice_Type=${mb.voice_Type} `)) {
                 $modal.modal('show');

html/webpage/assets/js/overview.js

@@ -461,6 +461,7 @@ $(document).ready(function () {
                      * @type {StreamerOutputData[]}
                      */
                     let so = JSON.parse(data);
+                    console.log(so);
                     UpdateStreamerCard(so);
                     break;
             }

html/webpage/assets/js/schedulebank.js

@@ -21,46 +21,50 @@ window.schedulebankdata = [];
  */
 window.selectedschedulerow = null;
 
+dtScheduleBank = null;
+
 /**
  * Fill schedulebank table body with values
  * @param {ScheduleBank[]} vv values to fill
  */
 function fill_schedulebanktablebody(vv) {
-    $('#schedulebanktablebody').empty();
+    dtScheduleBank.clear();
     if (!Array.isArray(vv) || vv.length === 0) return;
-    vv.forEach(item => {
+
-        const row = `<tr>
+    dtScheduleBank.rows.add(vv);
-                     <td>${item.index}</td>
+    dtScheduleBank.draw();
-                     <td>${item.description}</td>
+
-                     <td>${item.day}</td>
+
-                     <td>${item.time}</td>
+    $('#schedulebanktable tbody').off('click').on('click', 'tr', function () {
-                     <td>${item.soundpath}</td>
+        // if no data
-                     <td>${item.repeat}</td>
+        if (!dtScheduleBank) return;
-                     <td>${item.enable}</td>
+        // if user click an empty row
-                     <td>${item.broadcastZones}</td>
+        if (!dtScheduleBank.data().any()) return;
-                     <td>${item.language}</td>
+
-                     </tr>`;
+        const selected = dtScheduleBank.row(this)
-        $('#schedulebanktablebody').append(row);
+
-        let $addedrow = $('#schedulebanktablebody tr:last');
+        // toggle behaviour - unselect if already selected
-        $addedrow.click(function () {
+        if ($(this).hasClass('row-selected')) {
-            if (selectedschedulerow) {
+            $(this).removeClass('row-selected').find('td').css('background-color', '');
-                selectedschedulerow.find('td').css('background-color', '');
+            window.selectedschedulerow = null;
-                if (selectedschedulerow.is($(this))) {
-                    selectedschedulerow = null;
             $('#btnRemove').prop('disabled', true);
             $('#btnEdit').prop('disabled', true);
             return;
         }
-            }
+
-            $addedrow.find('td').css('background-color', '#ffeeba');
+        // unselect previously selected row
-            selectedschedulerow = $addedrow;
+        $('#schedulebanktable tbody tr.row-selected').removeClass('row-selected').find('td').css('background-color', '');
+
+        $(this).addClass('row-selected').find('td').css('background-color', '#ffeeba');
+        window.selectedschedulerow = selected.data();
         $('#btnRemove').prop('disabled', false);
         $('#btnEdit').prop('disabled', false);
     });
-    });
     $('#tablesize').text("Table Size: " + vv.length);
 }
 
+
+
 /**
  * Convert input date string yyyy-mm-dd to dd/mm/yyyy
  * @param {String} value from input date, which is in format yyyy-mm-dd
@@ -128,6 +132,25 @@ $(document).ready(function () {
     $btnRemove.prop('disabled', true);
     let APIURL = "ScheduleBank/";
 
+    if (dtScheduleBank === null) {
+        dtScheduleBank = new DataTable('#schedulebanktable', {
+            data: [],
+            pageLength: 25,
+            columns: [
+                { title: "No", data: "index" },
+                { title: "Description", data: "description" },
+                { title: "Day", data: "day" },
+                { title: "Time", data: "time" },
+                { title: "Sound Path", data: "soundpath" },
+                { title: "Repeat", data: "repeat" },
+                { title: "Enable", data: "enable" },
+                { title: "Broadcast Zones", data: "broadcastZones" },
+                { title: "Language", data: "language" }
+            ]
+        });
+    }
+
+
     let $schedulemodal = $('#schedulemodal');
     // text input
     let $scheduleid = $schedulemodal.find('#scheduleid');
@@ -237,20 +260,20 @@ $(document).ready(function () {
     }
 
     let $findschedule = $('#findschedule');
-    $findschedule.off('input').on('input', function () {
+    // $findschedule.off('input').on('input', function () {
-        let searchTerm = $findschedule.val().toLowerCase();
+    //     let searchTerm = $findschedule.val().toLowerCase();
-        if (searchTerm.length > 0) {
+    //     if (searchTerm.length > 0) {
-            window.selectedschedulerow = null;
+    //         window.selectedschedulerow = null;
-            let filtered = window.schedulebankdata.filter(item =>
+    //         let filtered = window.schedulebankdata.filter(item =>
-                item.description.toLowerCase().includes(searchTerm)
+    //             item.description.toLowerCase().includes(searchTerm)
-                || item.soundpath.toLowerCase().includes(searchTerm)
+    //             || item.soundpath.toLowerCase().includes(searchTerm)
-                || item.broadcastZones.toLowerCase().includes(searchTerm));
+    //             || item.broadcastZones.toLowerCase().includes(searchTerm));
-            fill_schedulebanktablebody(filtered);
+    //         fill_schedulebanktablebody(filtered);
-        } else {
+    //     } else {
-            window.selectedschedulerow = null;
+    //         window.selectedschedulerow = null;
-            fill_schedulebanktablebody(window.schedulebankdata);
+    //         fill_schedulebanktablebody(window.schedulebankdata);
-        }
+    //     }
-    });
+    // });
 
 
     reloadTimerBank(APIURL);
@@ -328,18 +351,17 @@ $(document).ready(function () {
     });
     $btnRemove.click(() => {
         if (window.selectedschedulerow) {
-            let cells = window.selectedschedulerow.find('td');
             /** @type {ScheduleBank} */
             let sr = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedschedulerow.index,
-                description: cells.eq(1).text(),
+                description: window.selectedschedulerow.description,
-                day: cells.eq(2).text(),
+                day: window.selectedschedulerow.day,
-                time: cells.eq(3).text(),
+                time: window.selectedschedulerow.time,
-                soundpath: cells.eq(4).text(),
+                soundpath: window.selectedschedulerow.soundpath,
-                repeat: cells.eq(5).text(),
+                repeat: window.selectedschedulerow.repeat,
-                enable: cells.eq(6).text(),
+                enable: window.selectedschedulerow.enable,
-                broadcastZones: cells.eq(7).text(),
+                broadcastZones: window.selectedschedulerow.broadcastZones,
-                language: cells.eq(8).text()
+                language: window.selectedschedulerow.language
             }
             if (confirm(`Are you sure to delete schedule [${sr.index}] Description=${sr.description}?`)) {
                 fetchAPI(APIURL + "DeleteByIndex/" + sr.index, "DELETE", {}, null, (okdata) => {
@@ -353,18 +375,17 @@ $(document).ready(function () {
     });
     $btnEdit.click(() => {
         if (window.selectedschedulerow) {
-            let cells = window.selectedschedulerow.find('td');
             /** @type {ScheduleBank} */
             let sr = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedschedulerow.index,
-                Description: cells.eq(1).text(),
+                Description: window.selectedschedulerow.description,
-                Day: cells.eq(2).text(),
+                Day: window.selectedschedulerow.day,
-                Time: cells.eq(3).text(),
+                Time: window.selectedschedulerow.time,
-                Soundpath: cells.eq(4).text(),
+                Soundpath: window.selectedschedulerow.soundpath,
-                Repeat: cells.eq(5).text(),
+                Repeat: window.selectedschedulerow.repeat,
-                Enable: cells.eq(6).text(),
+                Enable: window.selectedschedulerow.enable,
-                BroadcastZones: cells.eq(7).text(),
+                BroadcastZones: window.selectedschedulerow.broadcastZones,
-                Language: cells.eq(8).text()
+                Language: window.selectedschedulerow.language
             }
             if (confirm(`Are you sure to edit schedule [${sr.index}] Description=${sr.Description}?`)) {
                 $schedulemodal.modal('show');

html/webpage/assets/js/script.js

@@ -400,7 +400,7 @@ $(document).ready(function () {
         if (window.ws && window.ws.readyState === WebSocket.OPEN) return;
         const s = new WebSocket(wsURL);
         s.addEventListener('open', () => {
-            console.log('WebSocket connection established');
+            //console.log('WebSocket connection established');
             $('#onlineindicator').attr('src', window.greencircle);
 
             if (ws_reconnect) {
@@ -411,7 +411,7 @@ $(document).ready(function () {
             window.dispatchEvent(new Event('ws_connected'));
         });
         s.addEventListener('close', () => {
-            console.log('WebSocket connection closed');
+            //console.log('WebSocket connection closed');
             window.dispatchEvent(new Event('ws_disconnected'));
             resetStatusIndicators();
             if (!ws_reconnect) {

html/webpage/assets/js/soundbank.js

@@ -28,7 +28,7 @@ window.soundbankdata = [];
  */
 window.selectedsoundrow = null;
 
-
+dtSoundbank = null;
 
 /**
  * Select2 data source
@@ -46,6 +46,7 @@ function reloadSoundBank(APIURL = "SoundBank/") {
     fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
 
         if (Array.isArray(okdata)) {
+            //console.log("reloadSoundBank: got " + okdata.length + " items");
             window.soundbankdata.push(...okdata);
             window.selectedsoundrow = null;
             fill_soundbanktablebody(window.soundbankdata);
@@ -60,41 +61,41 @@ function reloadSoundBank(APIURL = "SoundBank/") {
      * @param {SoundBank[]} vv values to fill
     */
 function fill_soundbanktablebody(vv) {
-    $('#soundbanktablebody').empty();
+    dtSoundbank.clear();
     if (!Array.isArray(vv) || vv.length === 0) return;
-    vv.forEach(item => {
+    dtSoundbank.rows.add(vv);
-        const row = `<tr>
+    dtSoundbank.draw();
-                     <td>${item.index}</td>
+
-                     <td>${item.description}</td>
+    $('#soundbanktable tbody').off('click').on('click', 'tr', function () {
-                     <td>${item.tag}</td>
+        // if no data
-                     <td>${item.category}</td>
+        if (!dtSoundbank) return;
-                     <td>${item.language}</td>
+        // if user click an empty row
-                     <td>${item.voiceType}</td>
+        if (!dtSoundbank.data().any()) return;
-                     <td>${item.path}</td>
+
-                     </tr>`;
+        const selected = dtSoundbank.row(this)
-        $('#soundbanktablebody').append(row);
+        // toggle behaviour - unselect if already selected
-        let $addedrow = $('#soundbanktablebody tr:last');
+        if ($(this).hasClass('row-selected')) {
-        $addedrow.on('click', function () {
+            $(this).removeClass('row-selected').find('td').css('background-color', '');
-            if (window.selectedsoundrow) {
-                window.selectedsoundrow.find('td').css('background-color', '');
-                if (window.selectedsoundrow.is($(this))) {
             window.selectedsoundrow = null;
             $('#btnRemove').prop('disabled', true);
             $('#btnEdit').prop('disabled', true);
             return;
         }
-            }
+
-            $(this).find('td').css('background-color', '#ffeeba');
+        // unselect previously selected row
-            window.selectedsoundrow = $(this);
+        $('#soundbanktable tbody tr.row-selected').removeClass('row-selected').find('td').css('background-color', '');
+
+        $(this).addClass('row-selected').find('td').css('background-color', '#ffeeba');
+        window.selectedsoundrow = selected.data();
         $('#btnRemove').prop('disabled', false);
         $('#btnEdit').prop('disabled', false);
-        });
+    })
-    });
-
 
     $('#tablesize').text("Table Size: " + vv.length);
 }
 
+
+
 /**
  * Reload soundbank files from server and filter by language, category, and voiceType
  * @param {String} language 
@@ -109,7 +110,7 @@ function reloadSoundbankFiles(language, category, voiceType, cb=null) {
         if (category && category.length > 0) {
             if (voiceType && voiceType.length > 0) {
                 fetchAPI(`ListFiles/${language}/${voiceType}/${category}`, "GET", {}, null, (okdata) => {
-                    console.log("reloadSoundbankFiles: got " + okdata.length + " items");
+                    //console.log("reloadSoundbankFiles: got " + okdata.length + " items");
                     if (Array.isArray(okdata)) {
                         window.select2data = okdata.map(p => ({ id: getFilenameFromPath(p), text: getFilenameFromPath(p) }));
 
@@ -171,6 +172,23 @@ $(document).ready(function () {
     let selected_language = null;
     let selected_voicetype = null;
 
+    if (dtSoundbank === null) {
+        dtSoundbank = new DataTable('#soundbanktable', {
+            data: [],
+            pageLength: 25,
+            columns: [
+                { title: "Index", data: "index" },
+                { title: "Description", data: "description" },
+                { title: "Tag", data: "tag" },
+                { title: "Category", data: "category" },
+                { title: "Language", data: "language" },
+                { title: "Type", data: "voiceType" },
+                { title: "Filename", data: "path" }
+            ]
+        });
+    }
+
+
     /**
      * Clear soundbank modal inputs
      */
@@ -201,17 +219,17 @@ $(document).ready(function () {
     }
 
     reloadSoundBank(APIURL);
-    $('#findsoundbank').on('input', function () {
+    // $('#findsoundbank').on('input', function () {
-        let searchTerm = $(this).val().trim().toLowerCase();
+    //     let searchTerm = $(this).val().trim().toLowerCase();
-        if (searchTerm.length > 0) {
+    //     if (searchTerm.length > 0) {
-            window.selectedsoundrow = null;
+    //         window.selectedsoundrow = null;
-            let filtered = window.soundbankdata.filter(item => item.description.toLowerCase().includes(searchTerm) || item.tag.toLowerCase().includes(searchTerm) || item.path.toLowerCase().includes(searchTerm));
+    //         let filtered = window.soundbankdata.filter(item => item.description.toLowerCase().includes(searchTerm) || item.tag.toLowerCase().includes(searchTerm) || item.path.toLowerCase().includes(searchTerm));
-            fill_soundbanktablebody(filtered);
+    //         fill_soundbanktablebody(filtered);
-        } else {
+    //     } else {
-            window.selectedsoundrow = null;
+    //         window.selectedsoundrow = null;
-            fill_soundbanktablebody(window.soundbankdata);
+    //         fill_soundbanktablebody(window.soundbankdata);
-        }
+    //     }
-    });
+    // });
     $btnClear.click(() => {
         DoClear(APIURL, "Soundbank", (okdata) => {
             reloadSoundBank(APIURL);
@@ -304,16 +322,16 @@ $(document).ready(function () {
     });
     $btnRemove.click(() => {
         if (window.selectedsoundrow) {
-            let cells = window.selectedsoundrow.find('td');
+            //console.log(window.selectedsoundrow);
             /** @type {SoundBank} */
             let sb = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedsoundrow.index,
-                description: cells.eq(1).text(),
+                description: window.selectedsoundrow.description,
-                tag: cells.eq(2).text(),
+                tag: window.selectedsoundrow.tag,
-                category: cells.eq(3).text(),
+                category: window.selectedsoundrow.category,
-                language: cells.eq(4).text(),
+                language: window.selectedsoundrow.language,
-                voiceType: cells.eq(5).text(),
+                voiceType: window.selectedsoundrow.voiceType,
-                path: cells.eq(6).text()
+                path: window.selectedsoundrow.path
             }
             if (confirm(`Are you sure to delete soundbank [${sb.index}] Description=${sb.description} Tag=${sb.tag}?`)) {
                 fetchAPI(APIURL + "DeleteByIndex/" + sb.index, "DELETE", {}, null, (okdata) => {
@@ -327,16 +345,16 @@ $(document).ready(function () {
     });
     $btnEdit.click(() => {
         if (window.selectedsoundrow) {
-            let cells = window.selectedsoundrow.find('td');
+            //console.log(window.selectedsoundrow);
             /** @type {SoundBank} */
             let sb = {
-                index: Number(cells.eq(0).text()),
+                index: window.selectedsoundrow.index,
-                Description: cells.eq(1).text(),
+                Description: window.selectedsoundrow.description,
-                TAG: cells.eq(2).text(),
+                TAG: window.selectedsoundrow.tag,
-                Category: cells.eq(3).text(),
+                Category: window.selectedsoundrow.category,
-                Language: cells.eq(4).text(),
+                Language: window.selectedsoundrow.language,
-                VoiceType: cells.eq(5).text(),
+                VoiceType: window.selectedsoundrow.voiceType,
-                Path: cells.eq(6).text()
+                Path: window.selectedsoundrow.path
             }
             if (confirm(`Are you sure to edit soundbank [${sb.index}] Description=${sb.Description} Tag=${sb.TAG}?`)) {
                 $modal.modal('show');

html/webpage/assets/js/soundchannel.js

@@ -13,6 +13,8 @@ window.soundChannels = [];
 // Currently selected sound channel row in the table
 window.selectedSoundChannel = null;
 
+dtSoundChannel = null;
+
 /**
  * Fills the sound channel table body with the provided data.
  * @param {SoundChannel[]} vv Sound channel data to populate the table.
@@ -20,36 +22,41 @@ window.selectedSoundChannel = null;
 function fill_soundchanneltablebody(vv) {
     let $btnEditSoundChannel = $('#btnEditSoundChannel');
     let $tablesizeSoundChannel = $('#tablesizeSoundChannel');
-    $('#soundchanneltablebody').empty();
+    dtSoundChannel.clear();
 
-    $tablesizeSoundChannel.text('Table Length : N/A');
     if (!Array.isArray(vv) || vv.length === 0) return;
+    dtSoundChannel.rows.add(vv);
+    dtSoundChannel.draw();
 
-    vv.forEach(item => {
+    $('#soundchanneltable tbody').off('click').on('click', 'tr', function () {
-        const row = `<tr>
+        // if no data
-            <td>${item.index}</td>
+        if (!dtSoundChannel) return;
-            <td>${item.channel}</td>
+        // if user click an empty row
-            <td>${item.ip}</td>
+        if (!dtSoundChannel.data().any()) return;
-        </tr>`;
+
-        $('#soundchanneltablebody').append(row);
+        const selected = dtSoundChannel.row(this)
-        let $addedrow = $('#soundchanneltablebody tr:last');
+
-        $addedrow.off('click').on('click', function () {
+        // toggle behaviour - unselect if already selected
-            if (selectedSoundChannel) {
+        if ($(this).hasClass('row-selected')) {
-                selectedSoundChannel.find('td').css('background-color', '');
+            $(this).removeClass('row-selected').find('td').css('background-color', '');
-                if (selectedSoundChannel.is($(this))) {
+            window.selectedSoundChannel = null;
-                    selectedSoundChannel = null;
             $btnEditSoundChannel.prop('disabled', true);
             return;
         }
-            }
+
-            $(this).find('td').css('background-color', '#ffeeba');
+        // unselect previously selected row
-            selectedSoundChannel = $(this);
+        $('#soundchanneltable tbody tr.row-selected').removeClass('row-selected').find('td').css('background-color', '');
+
+        $(this).addClass('row-selected').find('td').css('background-color', '#ffeeba');
+        window.selectedSoundChannel = selected.data();
         $btnEditSoundChannel.prop('disabled', false);
-        });
+    })
-    });
+
     $tablesizeSoundChannel.text("Table Size: " + vv.length);
 }
 
+
+
 /**
  * Reload sound channels from server
  * @param {String} APIURL API URL endpoint (default "SoundChannel/")
@@ -82,21 +89,35 @@ $(document).ready(function () {
     $btnEditSoundChannel.prop('disabled', true);
     let API_SoundChannel = "SoundChannel/";
 
-    $findsoundchannel.off('input').on('input', function () {
+    if (dtSoundChannel === null) {
-        let searchTerm = $(this).val().toLowerCase();
+        dtSoundChannel = new DataTable('#soundchanneltable', {
-        if (searchTerm.length==0){
+            data: [],
-            window.selectedSoundChannel = null;
+            pageLength: 25,
-            fill_soundchanneltablebody(window.soundChannels);
+            columns: [
-        } else {
+                { title: "No", data: "index" },
-            window.selectedSoundChannel = null;
+                { title: "Channel", data: "channel" },
-            let filteredChannels = window.soundChannels.filter(xx =>
+                { title: "IP", data: "ip" }
-                xx.index.toString().includes(searchTerm) ||
+            ]
-                xx.channel.toLowerCase().includes(searchTerm) ||
-                xx.ip.toLowerCase().includes(searchTerm)
-            );
-            fill_soundchanneltablebody(filteredChannels);
-        }
         });
+    }
+
+
+
+    // $findsoundchannel.off('input').on('input', function () {
+    //     let searchTerm = $(this).val().toLowerCase();
+    //     if (searchTerm.length == 0) {
+    //         window.selectedSoundChannel = null;
+    //         fill_soundchanneltablebody(window.soundChannels);
+    //     } else {
+    //         window.selectedSoundChannel = null;
+    //         let filteredChannels = window.soundChannels.filter(xx =>
+    //             xx.index.toString().includes(searchTerm) ||
+    //             xx.channel.toLowerCase().includes(searchTerm) ||
+    //             xx.ip.toLowerCase().includes(searchTerm)
+    //         );
+    //         fill_soundchanneltablebody(filteredChannels);
+    //     }
+    // });
 
     /**
      * Clear sound channel modal inputs
@@ -117,13 +138,12 @@ $(document).ready(function () {
         });
     });
     $btnEditSoundChannel.off('click').on('click', () => {
-        if (selectedSoundChannel) {
+        if (window.selectedSoundChannel) {
-            let cells = selectedSoundChannel.find('td');
             /** @type {SoundChannel} */
             let sc = {
-                index: parseInt(cells.eq(0).text(), 10),
+                index: window.selectedSoundChannel.index,
-                description: cells.eq(1).text(),
+                description: window.selectedSoundChannel.channel,
-                ip: cells.eq(2).text()
+                ip: window.selectedSoundChannel.ip
             };
             if (confirm(`Are you sure to edit sound channel [${sc.index}] Description=${sc.description} IP=${sc.ip}?`)) {
                 $soundchannelmodal.modal('show');

html/webpage/assets/js/usermanagement.js

@@ -48,6 +48,8 @@ window.messagebankids = [];
  */
 window.broadcastzones = [];
 
+dtUserManagement = null;
+
 /**
  * Get Messagebank ANN_IDs from server
  */
@@ -109,40 +111,42 @@ function get_broadcastzones_descriptions() {
  * @param {UserDB[]} vv values to fill
  */
 function fill_usertablebody(vv) {
-    $('#usertablebody').empty();
+    dtUserManagement.clear();
 
     if (!Array.isArray(vv) || vv.length === 0) {
         $('#btnExport').prop('disabled', true);
         return;
     }
-    vv.forEach(item => {
+
-        const row = `<tr>
+    dtUserManagement.rows.add(vv);
-                     <td>${item.index}</td>
+    dtUserManagement.draw();
-                     <td>${item.username}</td>
+
-                     <td>${item.location}</td>
+
-                     <td>${item.airline_tags}</td>
+    $('#usertable tbody').off('click').on('click', 'tr', function () {
-                     <td>${item.city_tags}</td>
+        // if no data
-                     <td>${item.messagebank_ann_id}</td>
+        if (!dtUserManagement) return;
-                     <td>${item.broadcastzones}</td>
+        // if user click an empty row
-                     </tr>`;
+        if (!dtUserManagement.data().any()) return;
-        $('#usertablebody').append(row);
+
-        let $addedrow = $('#usertablebody tr:last');
+        const selected = dtUserManagement.row(this)
-        $addedrow.off('click').on('click', function () {
+        // toggle behaviour - unselect if already selected
-            if (window.selecteduserrow) {
+        if ($(this).hasClass('row-selected')) {
-                window.selecteduserrow.find('td').css('background-color', '');
+            $(this).removeClass('row-selected').find('td').css('background-color', '');
-                if (window.selecteduserrow.is($(this))) {
             window.selecteduserrow = null;
             $('#btnRemove').prop('disabled', true);
             $('#btnEdit').prop('disabled', true);
             return;
         }
-            }
+
-            $(this).find('td').css('background-color', '#ffeeba');
+        // unselect previously selected row
-            window.selecteduserrow = $(this);
+        $('#usertable tbody tr.row-selected').removeClass('row-selected').find('td').css('background-color', '');
+
+        $(this).addClass('row-selected').find('td').css('background-color', '#ffeeba');
+        window.selecteduserrow = selected.data();
         $('#btnRemove').prop('disabled', false);
         $('#btnEdit').prop('disabled', false);
     });
-    });
+
     $('#tablesize').text("Table Size: " + vv.length);
     $('#btnExport').prop('disabled', false);
 }
@@ -170,6 +174,23 @@ $(document).ready(function () {
     get_messagebankids();
     get_broadcastzones_descriptions();
 
+    if (dtUserManagement === null) {
+        dtUserManagement = new DataTable('#usertable', {
+            data: [],
+            pageLength: 25,
+            columns: [
+                { title: "No", data: "index" },
+                { title: "Username", data: "username" },
+                { title: "Location", data: "location" },
+                { title: "Airline", data: "airline_tags" },
+                { title: "City", data: "city_tags" },
+                { title: "Messagebank", data: "messagebank_ann_id" },
+                { title: "Broadcast Zones", data: "broadcastzones" }
+            ]
+        });
+    }
+
+
     let APIURL = "UserManagement/";
 
     function clearAddModal() {
@@ -247,22 +268,22 @@ $(document).ready(function () {
 
     $('#usertablebody').empty();
     reloaduserDB();
-    $('#finduser').off('input').on('input', function () {
+    // $('#finduser').off('input').on('input', function () {
-        let searchTerm = $(this).val().toLowerCase();
+    //     let searchTerm = $(this).val().toLowerCase();
-        if (searchTerm.length > 0) {
+    //     if (searchTerm.length > 0) {
-            let filteredUsers = window.userdb.filter(user =>
+    //         let filteredUsers = window.userdb.filter(user =>
-                user.username.toLowerCase().includes(searchTerm) ||
+    //             user.username.toLowerCase().includes(searchTerm) ||
-                user.airline_tags.toLowerCase().includes(searchTerm) ||
+    //             user.airline_tags.toLowerCase().includes(searchTerm) ||
-                user.city_tags.toLowerCase().includes(searchTerm)
+    //             user.city_tags.toLowerCase().includes(searchTerm)
-                //user.messagebank_ann_id.toLowerCase().includes(searchTerm) ||
+    //             //user.messagebank_ann_id.toLowerCase().includes(searchTerm) ||
-                //user.broadcastzones.toLowerCase().includes(searchTerm)
+    //             //user.broadcastzones.toLowerCase().includes(searchTerm)
-            );
+    //         );
-            fill_usertablebody(filteredUsers);
+    //         fill_usertablebody(filteredUsers);
-        } else {
+    //     } else {
-            fill_usertablebody(window.userdb);
+    //         fill_usertablebody(window.userdb);
-        }
+    //     }
 
-    });
+    // });
 
     /**
      * Show modal dialog for soundbank, messagebank, broadcastzone selection
@@ -489,16 +510,11 @@ $(document).ready(function () {
     });
     $('#btnRemove').off('click').on('click', () => {
         if (window.selecteduserrow) {
-            let cells = window.selecteduserrow.find('td');
+
             /** @type {UserDB} */
             let user = {
-                index: parseInt(cells.eq(0).text()),
+                index: window.selecteduserrow.index,
-                username: cells.eq(1).text(),
+                username: window.selecteduserrow.username
-                password: cells.eq(2).text(),
-                airline_tags: cells.eq(3).text(),
-                city_tags: cells.eq(4).text(),
-                messagebank_ann_id: cells.eq(5).text(),
-                broadcastzones: cells.eq(6).text()
             }
             if (confirm(`Are you sure to delete user [${user.index}] Username=${user.username} ?`)) {
                 fetchAPI(APIURL + "DeleteByIndex/" + user.index, "DELETE", {}, null, (okdata) => {
@@ -514,8 +530,7 @@ $(document).ready(function () {
     });
     $('#btnEdit').off('click').on('click', () => {
         if (window.selecteduserrow) {
-            let cells = window.selecteduserrow.find('td');
+            let index = window.selecteduserrow.index;
-            let index = parseInt(cells.eq(0).text());
             if (isNaN(index) || index <= 0) {
                 alert("Invalid user index");
                 return;

html/webpage/broadcastzones.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -176,10 +177,10 @@
     <div class="row">
         <div class="accordion" role="tablist" id="accordion-1">
             <div class="accordion-item pad-accordion">
-                <h2 class="accordion-header" role="tab"><button class="accordion-button collapsed bg-heading1" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="false" aria-controls="accordion-1 .item-1">Sound Channel</button></h2>
+                <h2 class="accordion-header" role="tab"><button class="accordion-button bg-heading1" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1">Sound Channel</button></h2>
-                <div class="accordion-collapse collapse item-1" role="tabpanel" data-bs-parent="#accordion-1">
+                <div class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordion-1">
                     <div class="accordion-body">
-                        <div class="row">
+                        <div class="row d-none">
                             <div class="col-md-7 col-lg-7 col-xl-7"></div>
                             <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 search">
                                 <p class="text-add">Search</p>
@@ -199,7 +200,7 @@
                         </div>
                         <div class="row">
                             <div class="table-responsive">
-                                <table class="table">
+                                <table class="table" id="soundchanneltable">
                                     <thead>
                                         <tr>
                                             <th class="class05">No</th>
@@ -215,10 +216,10 @@
                 </div>
             </div>
             <div class="accordion-item pad-accordion">
-                <h2 class="accordion-header" role="tab"><button class="accordion-button bg-heading2" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-2" aria-expanded="true" aria-controls="accordion-1 .item-2">Broadcast Zones</button></h2>
+                <h2 class="accordion-header" role="tab"><button class="accordion-button collapsed bg-heading2" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-2" aria-expanded="false" aria-controls="accordion-1 .item-2">Broadcast Zones</button></h2>
-                <div class="accordion-collapse collapse show item-2" role="tabpanel" data-bs-parent="#accordion-1">
+                <div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordion-1">
                     <div class="accordion-body">
-                        <div class="row">
+                        <div class="row d-none">
                             <div class="col-md-7 col-lg-7 col-xl-7"></div>
                             <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 search">
                                 <p class="text-add">Search</p>
@@ -240,7 +241,7 @@
                         </div>
                         <div class="row">
                             <div class="table-responsive">
-                                <table class="table">
+                                <table class="table" id="broadcastzonetable">
                                     <thead>
                                         <tr>
                                             <th class="class05">No</th>
@@ -293,6 +294,7 @@
     <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/soundchannel.js"></script>
     <script src="assets/js/broadcastzones.js"></script>
+    <script src="assets/js/datatables.js"></script>
 </body>
 
 </html>

html/webpage/filemanagement.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -155,6 +156,7 @@
     <div><audio class="invisible" id="audioplayer" controls=""></audio></div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/datatables.js"></script>
     <script src="assets/js/filemanagement.js"></script>
 </body>
 

html/webpage/homeadmin.html

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/all.min.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/select2.min.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
@@ -88,19 +89,6 @@
                                     <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"></path>
                                 </g>
                             </svg>&nbsp;Setting</a></li>
-                    <li class="nav-item"><a class="nav-link link-body-emphasis text-menu" id="ttsgenerator" href="#"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="1em" viewBox="0 0 24 24" width="1em" fill="currentColor" class="me-2 icon-menu pad-icon-menu" style="font-size: 20px;">
-                                <g>
-                                    <rect fill="none" height="24" width="24"></rect>
-                                </g>
-                                <g>
-                                    <g>
-                                        <circle cx="10" cy="9" r="4"></circle>
-                                        <path d="M16.39,15.56C14.71,14.7,12.53,14,10,14c-2.53,0-4.71,0.7-6.39,1.56C2.61,16.07,2,17.1,2,18.22V21h16v-2.78 C18,17.1,17.39,16.07,16.39,15.56z"></path>
-                                        <path d="M20.36,1l-1.41,1.41c2.73,2.73,2.73,7.17,0,9.9l1.41,1.41C23.88,10.21,23.88,4.51,20.36,1z"></path>
-                                        <path d="M17.54,10.9c1.95-1.95,1.95-5.12,0-7.07l-1.41,1.41c1.17,1.17,1.17,3.07,0,4.24L17.54,10.9z"></path>
-                                    </g>
-                                </g>
-                            </svg>&nbsp;Text To Speech Generator</a></li>
                     <li class="nav-item"><a class="nav-link link-body-emphasis text-menu" id="logoutlink" href="#"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 24 24" width="1em" fill="currentColor" class="me-2 icon-menu" style="font-size: 20px;">
                                 <path d="M0 0h24v24H0z" fill="none"></path>
                                 <path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"></path>
@@ -132,6 +120,7 @@
     <script src="assets/js/jquery-3.7.1.min.js"></script>
     <script src="assets/js/script.js"></script>
     <script src="assets/js/all.min.js"></script>
+    <script src="assets/js/datatables.js"></script>
     <script src="assets/js/select2.min.js"></script>
 </body>
 

html/webpage/homeviewer.html

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
     <link rel="stylesheet" href="assets/css/all.min.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/select2.min.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
@@ -79,6 +80,7 @@
     <script src="assets/js/jquery-3.7.1.min.js"></script>
     <script src="assets/js/script.js"></script>
     <script src="assets/js/all.min.js"></script>
+    <script src="assets/js/datatables.js"></script>
     <script src="assets/js/select2.min.js"></script>
 </body>
 

html/webpage/language.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -24,7 +25,7 @@
             <h2 style="text-align: center;">Language Link</h2>
         </div>
     </div>
-    <div class="row pad-row-search">
+    <div class="row d-none pad-row-search">
         <div class="col-md-7 col-lg-7 col-xl-7"></div>
         <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 search">
             <p class="text-add">Search</p>
@@ -46,7 +47,7 @@
     </div>
     <div class="row">
         <div class="table-responsive">
-            <table class="table">
+            <table class="table" id="languagebanktable">
                 <thead>
                     <tr>
                         <th class="class05">No</th>
@@ -98,6 +99,7 @@
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/languagelink.js"></script>
+    <script src="assets/js/datatables.js"></script>
 </body>
 
 </html>

html/webpage/log.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -31,10 +32,10 @@
         <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2"><input id="logdate" class="form-control" type="date"></div>
         <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2"><button class="btn w-100 pad-button btn-round-basic color-import" id="btnExport" type="button">Export</button></div>
         <div class="col-md-2 col-lg-2 col-xl-2"></div>
-        <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2">
+        <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2 d-none">
             <p class="text-add">Search</p>
         </div>
-        <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2"><input type="text" id="searchfilter" class="form-control" placeholder="Search Filter"></div>
+        <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2 d-none"><input type="text" id="searchfilter" class="form-control" placeholder="Search Filter"></div>
     </div>
     <div class="row">
         <div class="col">
@@ -43,7 +44,7 @@
     </div>
     <div class="row">
         <div class="table-responsive">
-            <table class="table table-hover">
+            <table class="table table-hover" id="logtable">
                 <thead>
                     <tr>
                         <th class="class10">No</th>
@@ -60,6 +61,7 @@
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/log.js"></script>
+    <script src="assets/js/datatables.js"></script>
 </body>
 
 </html>

html/webpage/login.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -46,6 +47,7 @@
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/jquery-3.7.1.min.js"></script>
+    <script src="assets/js/datatables.js"></script>
     <script src="assets/js/login.js"></script>
 </body>
 

html/webpage/messagebank.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -24,7 +25,7 @@
             <h2 style="text-align: center;">Message Bank</h2>
         </div>
     </div>
-    <div class="row pad-row-search">
+    <div class="row d-none pad-row-search">
         <div class="col-md-7 col-lg-7 col-xl-7"></div>
         <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
             <p class="text-add">Search</p>
@@ -46,7 +47,7 @@
     </div>
     <div class="row">
         <div class="table-responsive">
-            <table class="table">
+            <table class="table" id="messagebanktable">
                 <thead>
                     <tr>
                         <th class="class05">No</th>
@@ -136,6 +137,7 @@
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/messagebank.js"></script>
+    <script src="assets/js/datatables.js"></script>
 </body>
 
 </html>

html/webpage/overview.html

@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -27,8 +28,8 @@
     </div>
     <div class="accordion" role="tablist" id="accordion-1">
         <div class="accordion-item pad-accordion">
-            <h2 class="accordion-header" role="tab"><button class="accordion-button collapsed bg-heading1" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="false" aria-controls="accordion-1 .item-1">Channel Status</button></h2>
+            <h2 class="accordion-header" role="tab"><button class="accordion-button bg-heading1" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-1" aria-expanded="true" aria-controls="accordion-1 .item-1">Channel Status</button></h2>
-            <div class="accordion-collapse collapse item-1 bg-accordion" role="tabpanel" data-bs-parent="#accordion-1">
+            <div class="accordion-collapse collapse show item-1 bg-accordion" role="tabpanel" data-bs-parent="#accordion-1">
                 <div class="accordion-body">
                     <div class="row">
                         <div class="col-12 col-sm-6 col-md-3 col-lg-3 col-xl-3 pad-card">
@@ -1338,8 +1339,8 @@
             </div>
         </div>
         <div class="accordion-item pad-accordion">
-            <h2 class="accordion-header" role="tab"><button class="accordion-button bg-heading3" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-4" aria-expanded="true" aria-controls="accordion-1 .item-4">Remote Listening</button></h2>
+            <h2 class="accordion-header" role="tab"><button class="accordion-button collapsed bg-heading3" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-1 .item-4" aria-expanded="false" aria-controls="accordion-1 .item-4">Remote Listening</button></h2>
-            <div class="accordion-collapse collapse show item-4" role="tabpanel" data-bs-parent="#accordion-1">
+            <div class="accordion-collapse collapse item-4" role="tabpanel" data-bs-parent="#accordion-1">
                 <div class="accordion-body">
                     <div class="row">
                         <div class="col-4 col-sm-4 col-md-2 col-lg-2 col-xl-2">
@@ -1355,6 +1356,7 @@
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/datatables.js"></script>
     <script src="assets/js/overview.js"></script>
 </body>
 

html/webpage/setting.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -124,6 +125,7 @@
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/datatables.js"></script>
     <script src="assets/js/setting.js"></script>
 </body>
 

html/webpage/soundbank.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -24,7 +25,7 @@
             <h2 style="text-align: center;">Sound Bank</h2>
         </div>
     </div>
-    <div class="row">
+    <div class="row d-none">
         <div class="col-md-7 col-lg-7 col-xl-7"></div>
         <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 search">
             <p class="text-add">Search</p>
@@ -46,7 +47,7 @@
     </div>
     <div class="row">
         <div class="table-responsive">
-            <table class="table">
+            <table class="table" id="soundbanktable">
                 <thead>
                     <tr>
                         <th class="class05">No</th>
@@ -119,6 +120,7 @@
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/soundbank.js"></script>
+    <script src="assets/js/datatables.js"></script>
 </body>
 
 </html>

html/webpage/streamerstatus.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -38,6 +39,7 @@
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/datatables.js"></script>
 </body>
 
 </html>

html/webpage/timer.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -24,7 +25,7 @@
             <h2 style="text-align: center;">Schedule Bank</h2>
         </div>
     </div>
-    <div class="row pad-row-search">
+    <div class="row d-none pad-row-search">
         <div class="col-md-7 col-lg-7 col-xl-7"></div>
         <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 search">
             <p class="text-add">Search</p>
@@ -46,7 +47,7 @@
     </div>
     <div class="row">
         <div class="table-responsive">
-            <table class="table">
+            <table class="table" id="schedulebanktable">
                 <thead>
                     <tr>
                         <th class="class05">No</th>
@@ -183,6 +184,7 @@
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
     <script src="assets/js/schedulebank.js"></script>
+    <script src="assets/js/datatables.js"></script>
 </body>
 
 </html>

html/webpage/tts.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -123,6 +124,7 @@
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/datatables.js"></script>
     <script src="assets/js/tts.js"></script>
 </body>
 

html/webpage/usermanagement.html

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="assets/css/Font%20Awesome%206%20Pro.css">
     <link rel="stylesheet" href="assets/css/FontAwesome.css">
     <link rel="stylesheet" href="assets/css/bss-overrides.css">
+    <link rel="stylesheet" href="assets/css/datatables.css">
     <link rel="stylesheet" href="assets/css/Login-Form-Basic-icons.css">
     <link rel="stylesheet" href="assets/css/styles.css">
 </head>
@@ -24,7 +25,7 @@
             <h2 style="text-align: center;">User Management</h2>
         </div>
     </div>
-    <div class="row">
+    <div class="row d-none">
         <div class="col-md-7 col-lg-7 col-xl-7"></div>
         <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 search">
             <p class="text-add">Search</p>
@@ -46,7 +47,7 @@
     </div>
     <div class="row">
         <div class="table-responsive">
-            <table class="table" id="table_user_management">
+            <table class="table" id="usertable">
                 <thead>
                     <tr>
                         <th class="class05">No</th>
@@ -201,6 +202,7 @@
     </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/bs-init.js"></script>
+    <script src="assets/js/datatables.js"></script>
     <script src="assets/js/usermanagement.js"></script>
 </body>
 

src/Main.kt

@@ -105,7 +105,14 @@ fun main() {
     if (!sdx.CheckDongle()){
         Logger.error { "Dongle check failed. Application will exit." }
         exitProcess(1)
+    } else {
+        sdx.startChecking {
+            Logger.error { "Dongle removed. Application will exit." }
+            exitProcess(1)
+            sdx.stopChecking()
         }
+    }
+
 
 
 
@@ -239,6 +246,8 @@ fun main() {
 
     db.Add_Log("AAS"," Application started")
 
+
+
     // shutdown hook
     Runtime.getRuntime().addShutdownHook(Thread ({
 
@@ -253,6 +262,8 @@ fun main() {
         StreamerOutputs.values.forEach { it.close() }
         audioPlayer.Close()
         db.close()
+        sdx.stopChecking()
+
         Logger.info { "All services stopped, exiting application." }
         ProviderRegistry.getLoggingProvider().shutdown()
     },"ShutdownHook") )

src/MainExtension01.kt

@@ -999,7 +999,6 @@ class MainExtension01 {
                                         return true
                                     }
                                 } else {
-                                    println("Failed to write WAV file: ${result.message}")
                                     db.queuetableDB.DeleteByIndex(qa.index.toInt())
                                     db.queuetableDB.Resort()
                                     db.Add_Log("AAS", result.message)

src/audio/OpusEncoder.kt

@@ -122,6 +122,5 @@ class OpusEncoder(val samplingrate: Int=44100, val channels: Int=1) {
         // auto close by BASS_ENCODE_AUTOFREE
         opus_handle = 0
         callback = null
-        println("Opus Encoder: Stopped.")
     }
 }

src/database/ColumnInfo.kt

@@ -0,0 +1,3 @@
+package database
+
+data class ColumnInfo(val index: Int, val name: String, val type: String)

src/database/MariaDB.kt

@@ -89,7 +89,8 @@ class MariaDB(
             Logger.info("Connected to MySQL" as Any)
             connected = true
 
-            soundDB = object : dbFunctions<Soundbank>("soundbank", connection) {
+            soundDB = object : dbFunctions<Soundbank>("soundbank", connection, listOf("index", "Description", "TAG", "Category", "Language", "VoiceType", "Path")) {
+
                 override fun Create() {
                     val tabledefinition = "CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +
@@ -320,7 +321,7 @@ class MariaDB(
                 }
             }
 
-            messageDB = object : dbFunctions<Messagebank>("messagebank", connection) {
+            messageDB = object : dbFunctions<Messagebank>("messagebank", connection, listOf("index", "Description", "Language", "ANN_ID", "Voice_Type", "Message_Detail", "Message_TAGS")) {
                 override fun Create() {
                     val tabledefinition = "CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +
@@ -544,7 +545,7 @@ class MariaDB(
 
             }
 
-            languageDB = object : dbFunctions<LanguageLink>("languagelinking", connection) {
+            languageDB = object : dbFunctions<LanguageLink>("languagelinking", connection, listOf("index", "TAG", "Language")) {
                 override fun Create() {
                     val tabledefinition = "CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +
@@ -722,7 +723,7 @@ class MariaDB(
 
             }
 
-            scheduleDB = object : dbFunctions<ScheduleBank>("schedulebank", connection) {
+            scheduleDB = object : dbFunctions<ScheduleBank>("schedulebank", connection, listOf("index", "Description", "Day", "Time", "Soundpath", "Repeat", "Enable", "BroadcastZones", "Language")) {
                 override fun Create() {
                     val tabledefinition = "CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +
@@ -1006,7 +1007,7 @@ class MariaDB(
 
             }
 
-            broadcastDB = object : dbFunctions<BroadcastZones>("broadcastzones", connection) {
+            broadcastDB = object : dbFunctions<BroadcastZones>("broadcastzones", connection, listOf("index", "description", "SoundChannel", "id", "bp")) {
                 override fun Create() {
                     val tabledefinition = "CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +
@@ -1197,7 +1198,7 @@ class MariaDB(
 
             }
 
-            queuetableDB = object : dbFunctions<QueueTable>("queue_table", connection) {
+            queuetableDB = object : dbFunctions<QueueTable>("queue_table", connection, listOf("index", "Date_Time", "Source", "Type", "Message", "SB_TAGS", "BroadcastZones", "Repeat", "Language")) {
                 override fun Create() {
                     val tabledefinition = "CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +
@@ -1371,7 +1372,7 @@ class MariaDB(
 
             }
 
-            queuepagingDB = object : dbFunctions<QueuePaging>("queue_paging", connection) {
+            queuepagingDB = object : dbFunctions<QueuePaging>("queue_paging", connection, listOf("index", "Date_Time", "Source", "Type", "Message", "BroadcastZones")) {
                 override fun Create() {
                     val tabledefinition ="CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +
@@ -1521,7 +1522,7 @@ class MariaDB(
 
             }
 
-            soundchannelDB = object : dbFunctions<SoundChannel>("soundchannel", connection) {
+            soundchannelDB = object : dbFunctions<SoundChannel>("soundchannel", connection, listOf("index", "channel", "ip")) {
                 override fun Create() {
                     val tableDefinition = "CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +
@@ -1768,7 +1769,7 @@ class MariaDB(
 
             }
 
-            logDB = object : dbFunctions<Log>("logs", connection) {
+            logDB = object : dbFunctions<Log>("logs", connection, listOf("index", "datenya", "timenya", "machine", "description")) {
                 override fun Create() {
                     val tabledefinition = "CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +
@@ -1920,7 +1921,7 @@ class MariaDB(
 
             }
 
-            userDB = object : dbFunctions<UserDB>("newuser", connection){
+            userDB = object : dbFunctions<UserDB>("newuser", connection, listOf("index", "username", "password", "location", "airline_tags", "city_tags", "messagebank_ann_id", "broadcastzones")) {
                 override fun Create() {
                     val tableDefinition = "CREATE TABLE IF NOT EXISTS ${super.dbName} (" +
                             "`index` INT AUTO_INCREMENT PRIMARY KEY," +

src/database/dbFunctions.kt

@@ -5,9 +5,23 @@ import org.tinylog.Logger
 import java.sql.Connection
 
 @Suppress("unused", "SqlDialectInspection", "SqlSourceToSinkFlow")
-abstract class dbFunctions<T>(val dbName: String, val connection: Connection) {
+abstract class dbFunctions<T>(val dbName: String, val connection: Connection, requiredcolumns: List<String>) {
     var List : ArrayList<T> = ArrayList()
 
+    init{
+        val columns = GetColumnInfo()
+        var invalid_table = false
+        for (requiredcolumn in requiredcolumns) {
+            if (columns.none { it.name.equals(requiredcolumn, ignoreCase = true) }) {
+                Logger.error("Table $dbName is missing required column: $requiredcolumn" as Any)
+                invalid_table = true
+            }
+        }
+        if (invalid_table) {
+            Logger.error("Table $dbName is invalid. Please recreate the table." as Any)
+            DestroyTable()
+        }
+    }
     /**
      * Clear all entries in the table
      * @return true if successful, false otherwise
@@ -26,6 +40,23 @@ abstract class dbFunctions<T>(val dbName: String, val connection: Connection) {
         return false
     }
 
+    /**
+     * Destroy the table
+     * @return true if successful, false otherwise
+     */
+    open fun DestroyTable() : Boolean{
+        try {
+            val statement = connection.createStatement()
+            statement?.executeUpdate("DROP TABLE IF EXISTS $dbName")
+            Logger.info("$dbName table dropped" as Any)
+            List.clear()
+            return true
+        } catch (e: Exception) {
+            Logger.error("Error dropping $dbName table: ${e.message}" as Any)
+        }
+        return false
+    }
+
     /**
      * Delete entry by index
      * @param index The index of the entry to delete
@@ -48,6 +79,27 @@ abstract class dbFunctions<T>(val dbName: String, val connection: Connection) {
         return false
     }
 
+    /**
+     * Get column info from the table
+     * @return List of ColumnInfo
+     */
+    open fun GetColumnInfo() : ArrayList<ColumnInfo> {
+        val columns = ArrayList<ColumnInfo>()
+        try {
+            val statement = connection.createStatement()
+            val resultSet = statement.executeQuery("DESC $dbName")
+            var index = 1
+            while (resultSet.next()) {
+                columns.add(ColumnInfo(index, resultSet.getString("Field"), resultSet.getString("Type")))
+                index++
+            }
+        } catch (e: Exception) {
+            Logger.error("Error getting column info from $dbName: ${e.message}" as Any)
+        }
+        return columns
+    }
+
+
     /**
      * Create the table if it does not exist
      */

src/securedonglex/DongleChecker.kt

@@ -1,5 +1,9 @@
 package securedonglex
 
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 import org.tinylog.Logger
 import java.util.function.Consumer
 
@@ -16,17 +20,20 @@ class DongleChecker {
      */
     fun startChecking(interval: Int=1000, cbMissing: Consumer<Unit>) {
         isRunning = true
-        Thread {
+        CoroutineScope(Dispatchers.IO).launch {
             while (isRunning) {
                 val donglePresent = CheckDongle()
                 if (!donglePresent) {
                     isRunning = false
-                }
-                Thread.sleep(interval.toLong())
-            }
-        }.start()
                     cbMissing.accept(Unit)
                 }
+                delay(interval.toLong())
+            }
+            cbMissing.accept(Unit)
+        }
+
+
+    }
 
     /**
      * Stops the dongle checking process.
@@ -43,12 +50,10 @@ class DongleChecker {
         try{
             val sdx = securedonglex.Instance
             val found = sdx.SDX_Find()
-            Logger.info { "Found Dongle: $found" }
             if (found>0){
                 val uid = securedonglex.DWORD(253570225)
                 val hid = securedonglex.DWORDByReference(securedonglex.DWORD(0))
                 val handle = sdx.SDX_Open(1, uid, hid)
-                Logger.info { "Handle: $handle" }
                 if (handle>=0){
                     sdx.SDX_Close(handle)
                     return true

src/web/WebApp.kt

@@ -125,10 +125,8 @@ class WebApp(val listenPort: Int, var userlist: List<Pair<String, String>>, val
                         // Redirect to home page
                         if (user.first== GetAdminUserFromConfig()){
                             it.redirect("homeadmin.html")
-                            println("User ${user.first} redirected to homeadmin.html")
                         } else {
                             it.redirect("homeviewer.html")
-                            println("User ${user.first} redirected to homeviewer.html")
                         }
                     }
                 }
@@ -802,7 +800,7 @@ class WebApp(val listenPort: Int, var userlist: List<Pair<String, String>>, val
                         }
                         post("Add") {
                             val json: JsonNode = objectmapper.readTree(it.body())
-                            Logger.info { "Add MessageBank JSON: ${json}" }
+                            Logger.info { "Add MessageBank JSON: $json" }
                             val description = json.get("Description")?.asText("") ?: ""
                             val language = json.get("Language")?.asText("") ?: ""
                             val ann_id = json.get("ANN_ID")?.asInt()?.toUInt() ?: 0u