AAS_NewGeneration/html/webpage/assets/js/soundchannel.js

/**
 * @typedef {Object} SoundChannel
 * @property {number} index - The index of the sound channel.
 * @property {string} channel - The name of the sound channel.
 * @property {string} ip - The IP address associated with the sound channel.
 */

/**
 * @type {SoundChannel[]}
 */
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.
 */
function fill_soundchanneltablebody(vv) {
    let $btnEditSoundChannel = $('#btnEditSoundChannel');
    let $tablesizeSoundChannel = $('#tablesizeSoundChannel');
    dtSoundChannel.clear();

    if (!Array.isArray(vv) || vv.length === 0) return;
    dtSoundChannel.rows.add(vv);
    dtSoundChannel.draw();

    $('#soundchanneltable tbody').off('click').on('click', 'tr', function () {
        // if no data
        if (!dtSoundChannel) return;
        // if user click an empty row
        if (!dtSoundChannel.data().any()) return;

        const selected = dtSoundChannel.row(this)

        // toggle behaviour - unselect if already selected
        if ($(this).hasClass('row-selected')) {
            $(this).removeClass('row-selected').find('td').css('background-color', '');
            window.selectedSoundChannel = null;
            $btnEditSoundChannel.prop('disabled', true);
            return;
        }

        // unselect previously selected row
        $('#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/")
 */
function reloadSoundChannel(APIURL = "SoundChannel/") {
    window.soundChannels = [];
    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata)) {
            //console.log("reloadSoundChannel : ", okdata)
            window.soundChannels.push(...okdata);
            fill_soundchanneltablebody(window.soundChannels);
        } else console.log("reloadSoundChannel: okdata is not array");
    }, (errdata) => {
        alert("Error loading sound channels : " + errdata.message);
    });
}

$(document).ready(function () {
    console.log("soundchannel.js loaded successfully");
    let $soundchannelmodal = $('#soundchannelmodal');
    let $soundchannelindex = $soundchannelmodal.find('#soundchannelindex');
    let $soundchanneldescription = $soundchannelmodal.find('#soundchanneldescription');
    let $soundchannelip = $soundchannelmodal.find('#soundchannelip');

    let $btnReinitializeSoundChannel = $('#btnReinitializeSoundChannel');
    let $btnEditSoundChannel = $('#btnEditSoundChannel');
    let $btnExportSoundChannel = $('#btnExportSoundChannel');
    let $btnImportSoundChannel = $('#btnImportSoundChannel');
    let $findsoundchannel = $('#findsoundchannel');
    $btnEditSoundChannel.prop('disabled', true);
    let API_SoundChannel = "SoundChannel/";

    if (dtSoundChannel === null) {
        dtSoundChannel = new DataTable('#soundchanneltable', {
            data: [],
            pageLength: 25,
            columns: [
                { title: "No", data: "index" },
                { title: "Channel", data: "channel" },
                { title: "IP", data: "ip" }
            ]
        });
    }



    // $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
     */
    function clearSoundChannelModal() {
        $soundchannelindex.val('');
        $soundchanneldescription.val('');
        $soundchannelip.val('');
    }

    reloadSoundChannel(API_SoundChannel);
    $btnReinitializeSoundChannel.off('click').on('click', () => {
        DoClear(API_SoundChannel, "SoundChannels", (okdata) => {
            reloadSoundChannel(API_SoundChannel);
            alert("Success clear sound channels: " + okdata.message);
        }, (errdata) => {
            alert("Error clear sound channels: " + errdata.message);
        });
    });
    $btnEditSoundChannel.off('click').on('click', () => {
        if (window.selectedSoundChannel) {
            /** @type {SoundChannel} */
            let sc = {
                index: window.selectedSoundChannel.index,
                description: window.selectedSoundChannel.channel,
                ip: window.selectedSoundChannel.ip
            };
            if (confirm(`Are you sure to edit sound channel [${sc.index}] Description=${sc.description} IP=${sc.ip}?`)) {
                $soundchannelmodal.modal('show');
                clearSoundChannelModal();
                $soundchannelindex.val(sc.index).prop('disabled', true);
                $soundchanneldescription.val(sc.description);
                $soundchannelip.val(sc.ip);

                // Handle save changes
                $soundchannelmodal.off('click.soundchannelsave').on('click.soundchannelsave', '#soundchannelsave', function () {
                    let newsc = {
                        index: parseInt($soundchannelindex.val(), 10),
                        description: $soundchanneldescription.val(),
                        ip: $soundchannelip.val()
                    };
                    if (newsc.description.trim().length === 0) {
                        alert("Description cannot be empty");
                        return;
                    }
                    if (newsc.ip.trim().length === 0) {
                        alert("IP cannot be empty");
                        return;
                    }
                    if (newsc.description === sc.description && newsc.ip === sc.ip) {
                        alert("No changes detected");
                        return;
                    }



                    fetchAPI(API_SoundChannel + "UpdateByIndex/" + newsc.index, "PATCH", {}, newsc, (okdata) => {
                        reloadSoundChannel(API_SoundChannel);
                        alert("Success edit sound channel: " + okdata.message);
                    }, (errdata) => {
                        alert("Error edit sound channel: " + errdata.message);
                    });
                    $soundchannelmodal.modal('hide');


                });
                $soundchannelmodal.off('click.soundchannelclose').on('click.soundchannelclose', '#soundchannelclose', function () {
                    $soundchannelmodal.modal('hide');
                });
            }
        }
    });
    $btnExportSoundChannel.off('click').on('click', () => {
        DoExport(API_SoundChannel, "soundchannels.xlsx", {});
    });

    $btnImportSoundChannel.off('click').on('click', () => {
        DoImport(API_SoundChannel, (okdata) => {
            reloadSoundChannel(API_SoundChannel);
            alert("Success import sound channels: " + okdata.message);
        }, (errdata) => {
            alert("Error importing sound channels from XLSX: " + errdata.message);
        });
    });
});