SIPIntercom/WebContentt/public/assets/js/app.js

let socket;
let index_setinterval;

/**
 * Executed when document is ready
 */
$(document).ready(function(){
    socket = io(":9092/socketio");
    socket.on("connect", () => {console.log("Connected to server")});
    socket.on("disconnect", (reason) => {console.log("Disconnected from server because of " + reason)});
});

/**
 * Executed when index page is loaded
 */
function indexload(){
    console.log("Index loaded");
    index_setinterval = setInterval(()=>{
        if (socket.connected){
            $("#sipStatus").css("color", "green");
            $("#cpuStatus").css("color", "green");
            $("#ramStatus").css("color", "green");
            $("#storageStatus").css("color", "green");
            $("#networkStatus").css("color", "green");
            $("#dialButton").prop("disabled", false);
            $("#hangupButton").prop("disabled", false);
            $("#dialNumber").prop("disabled",false);
        } else {
            $("#sipStatus").text("Not connected to server").css("color", "red");
            $("#cpuStatus").text("Not connected to server").css("color", "red");
            $("#ramStatus").text("Not connected to server").css("color", "red");
            $("#storageStatus").text("Not connected to server").css("color", "red");
            $("#networkStatus").text("Not connected to server").css("color", "red");
            $("#dialButton").prop("disabled", true);
            $("#hangupButton").prop("disabled", true);
            $("#dialNumber").prop("disabled", true);
        }
    }, 2000);
}

/**
 * Executed when index page is unloaded
 */
function indexunload(){
    console.log("Index unloaded");
    clearInterval(index_setinterval);
}

/**
 * Executed when setting page is loaded
 */
function settingload(){
    console.log("Setting loaded");
    if (socket.connected){
        $("#btnSaveLogin")
            .prop("disabled", false)
            .on("click", () =>{
                let username = $("#webUsername").text();
                let password = $("#webPassword").text();
                if (isValidString(username) && isValidString(password)){
                    setLogin(username, password);
                } else {
                    alert("Please enter valid username and password");
                }
            });
        $("#btnSaveSIP")
            .prop("disabled", false)
            .on("click", () =>{
                let server = $("#sipServer").text();
                let port = $("#sipPort").text();
                let username = $("#sipUsername").text();
                let password = $("#sipPassword").text();
                if (isValidString(server) && isValidPort(port) && isValidString(username) && isValidString(password)){
                    setSipSetting(server, port, username, password);
                } else {
                    alert("Please enter valid server, port, username and password");
                }
            });
        getLogin();
        getSipSetting();
    } else {
        $("#webUsername").text("Not connected to server").css("color", "red");
        $("#webPassword").text("Not connected to server").css("color", "red");
        $("#sipServer").text("Not connected to server").css("color", "red");
        $("#sipPort").text("Not connected to server").css("color", "red");
        $("#sipUsername").text("Not connected to server").css("color", "red");
        $("#sipPassword").text("Not connected to server").css("color", "red");
        $("#btnSaveLogin").prop("disabled", true);
        $("#btnSaveSIP").prop("disabled", true);
    }

    /**
     * Get LoginUsername and LoginPassword data from server
     */
    function getLogin(){
        socket.emit(
            "command",
            {request: "getLogin", data:""},
            (reply)=>{
                if (reply.response==="success"){
                    /**
                     * @type {Object}
                     * @property {string} Username
                     * @property {string} Password
                     */
                    let data = JSON.parse(reply.data);
                    $("#webUsername").text(data.Username).css("color", "black");
                    $("#webPassword").text(data.Password).css("color", "black");
                } else {
                    $("#webUsername").text("Error").css("color", "red");
                    $("#webPassword").text("Error").css("color", "red");
                }
            }
        );
    }

    /**
     * Set LoginUsername and LoginPassword data to server
     *
     * @param {string} username Login Username
     * @param {string} password Login Password
     */
    function setLogin(username, password){
        socket.emit(
            "command",
            {request: "setLogin", data:JSON.stringify({Username:username, Password:password})},
            (reply)=>{
                if (reply.response==="success"){
                    alert("Login saved successfully");
                } else {
                    alert("Failed to save login");
                }
            });
    }

    /**
     * Get SIP Setting data from server
     */
    function getSipSetting(){
        socket.emit(
            "command",
            {request: "getSipSetting", data:""},
            (reply)=>{
                if (reply.response==="success"){
                    /**
                     * @type {Object}
                     * @property {string} Server
                     * @property {number} Port
                     * @property {string} Username
                     * @property {string} Password
                     */
                    let data = JSON.parse(reply.data);
                    $("#sipServer").text(data.Server).css("color", "black");
                    $("#sipPort").text(data.Port).css("color", "black");
                    $("#sipUsername").text(data.Username).css("color", "black");
                    $("#sipPassword").text(data.Password).css("color", "black");
                } else {
                    $("#sipServer").text("Error").css("color", "red");
                    $("#sipPort").text("Error").css("color", "red");
                    $("#sipUsername").text("Error").css("color", "red");
                    $("#sipPassword").text("Error").css("color", "red");
                }
            }
        );
    }

    /**
     * Set SIP Setting data to server
     * @param {string} server
     * @param {number} port
     * @param {string} username
     * @param {string} password
     */
    function setSipSetting(server, port, username, password){
        socket.emit(
            "command",
            {request: "setSipSetting", data:JSON.stringify({Server:server, Port:port, Username:username, Password:password})},
            (reply)=>{
                if (reply.response==="success"){
                    alert("SIP setting saved successfully");
                } else {
                    alert("Failed to save SIP setting");
                }
            }
        )
    }
}

/**
 * Executed when setting page unloaded
 */
function settingunload(){
    console.log("Setting unloaded");
}

/**
 * Executed when login page is loaded
 */
function loginload(){
    console.log("Login loaded");
}

/**
 * Executed when login page is unloaded
 */
function loginunload(){
    console.log("Login unloaded");
}

/**
 * Check if the string is valid
 * @param {string} str String to check
 * @return {boolean} True if the string is not empty
 */
function isValidString(str){
    return typeof str === "string" && str.trim().length > 0;
}

/**
 * Check if the port is valid
 * @param str {string|number} Port to check
 * @return {boolean} True if the port is between 0 and 65535
 */
function isValidPort(str){
    if (typeof str === "number"){
        return str > 0 && str <= 65535;
    } else if (typeof str === "string"){
        let port = parseInt(str);
        return port > 0 && port <= 65535;
    }
    return false;
}