Working ! 06/12/2024

WebContentt/public/assets/js/app.js

@@ -1,232 +1,170 @@
 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);
+    socket = io.connect(':9092/socketio');
+
+    let intervalhandle;
+    socket.on('connect', function() {
+        console.log("Connected, id: " + socket.id);
+        intervalhandle = setInterval(function(){
+            socket.emit('command', requestdata('getCpuInfo',''), (response)=>{
+                let data = isSuccess(response);
+                if (data) {
+                    let cpuUsage = JSON.parse(data.cpuUsage);
+                    $('#cpuStatus').text('Temp: ' + data.cpuTemperature + ' °C, Usage: ' + cpuUsage.cpu + '%');
+                }
+            });
+            socket.emit('command', requestdata('getRamInfo','') , (response)=>{
+                let data = isSuccess(response);
+                if (data) {
+                    $('#ramStatus').text('Total: ' + data.totalKB + ' , Free: ' + data.availableKB + ' , Usage: ' + data.usedKB);
+                }
+            });
+            socket.emit('command', requestdata('getSipStatus',''), (response)=>{
+                let data = isSuccess(response);
+                if (data) {
+                    $('#sipStatus').text(data);
+                }
+            });
+            socket.emit('command', requestdata('getNetworkInfo',''), (response)=>{
+                let data = isSuccess(response);
+                if (data) {
+                    let txmap = JSON.parse(data.txmap);
+                    let rxmap = JSON.parse(data.rxmap);
+                    $('#networkStatus').text('TX: '+txmap.eth0+', RX: '+rxmap.eth0);
+                }
+            });
+            socket.emit('command', requestdata('getDiskInfo',''), (response)=>{
+                let data = isSuccess(response);
+                if (data) {
+                    $('#storageStatus').text('Total: ' + data.total + ' , Free: ' + data.free);
+                }
+            });
+        }, 5000);
+    });
+    socket.on('disconnect', function() {
+        console.log("Disconnected");
+        clearInterval(intervalhandle);
+    });
+
+
+}
+
+/**
+ * Create Socketio RequestData
+ * @param {string} request
+ * @param {string }data
+ * @returns JsonObject
+ */
+function requestdata(request, data){
+    return {request: request, data: data};
+}
+
+/**
+ * Check if response is success
+ * @param {Object} value response data to check
+ * @return {null} if failed, Object if success
+ */
+function isSuccess(value){
+    if (value){
+        if (value.hasOwnProperty('response') && value.hasOwnProperty('data')){
+            if (value.response && value.response.length>0){
+                if (value.response==='success'){
+                    let len = value.data.length;
+                    if (len>0){
+                        if (value.data[0]==='{'){
+                            if (value.data[len-1]==='}'){
+                                return JSON.parse(value.data);
+                            }
+                        }
+                    }
+                    return value.data;
+                }
+            }
         }
-    }, 2000);
+
+    }
+    return null;
 }
 
-/**
- * Executed when index page is unloaded
- */
-function indexunload(){
-    console.log("Index unloaded");
-    clearInterval(index_setinterval);
+function dialClick(){
+    console.log("Dial clicked");
+    let number = $('#dialNumber').val();
+    if (socket && socket.connected) socket.emit('command', requestdata('dial',number), (response)=>{
+        console.log("Dial response: "+response);
+    });
+}
+
+function hangupClick(){
+    console.log("Hangup clicked");
+    if (socket && socket.connected) socket.emit('command', requestdata('hangup',''), (response)=>{
+        console.log("Hangup response: "+response);
+    });
 }
 
-/**
- * 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");
-                }
-            }
-        )
+    if (socket && socket.connected) {
+        socket.disconnect();
     }
+    fetch('/setting', {method: 'GET'}).then((response)=>{
+        response.json().then((data)=>{
+            //console.log(JSON.stringify(data));
+            $('#webUsername').val(data.loginSetting.Username);
+            $('#webPassword').val(data.loginSetting.Password);
+            $('#sipServer').val(data.sipSetting.Server);
+            $('#sipPort').val(data.sipSetting.Port);
+            $('#sipUsername').val(data.sipSetting.Username);
+            $('#sipPassword').val(data.sipSetting.Password);
+        });
+    });
 }
 
-/**
- * Executed when setting page unloaded
- */
-function settingunload(){
-    console.log("Setting unloaded");
+function sendLoginData(){
+    console.log("Send login data");
+    let loginData = {
+        Username: $('#webUsername').val(),
+        Password: $('#webPassword').val()
+    };
+    fetch('/logindata', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(loginData)
+    }).then((response)=>{
+        response.text().then((msg)=>{
+            alert(msg);
+        });
+    });
+}
+
+function sendSipData(){
+    console.log("Send SIP data");
+    let sipData = {
+        Server: $('#sipServer').val(),
+        Port: $('#sipPort').val(),
+        Username: $('#sipUsername').val(),
+        Password: $('#sipPassword').val()
+    };
+    fetch('/sipdata', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(sipData)
+    }).then((response)=>{
+        response.text().then((msg)=>{
+            alert(msg);
+        });
+    });
 }
 
-/**
- * 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;
+    if (socket && socket.connected) {
+        socket.disconnect();
     }
-    return false;
 }

WebContentt/public/index.html

@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
 </head>
 
-<body onload="indexload()" onbeforeunload="indexunload()">
+<body onload="indexload()">
     <nav class="navbar navbar-expand-md bg-body py-3">
         <div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
                         <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
@@ -30,7 +30,9 @@
                 </ul>
                 <div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
             </div>
-            <div class="d-none d-md-block"><button class="btn btn-light me-2" type="button">Log Off</button></div>
+            <div class="d-none d-md-block">
+                <form method="GET" action="logout"><button class="btn btn-light me-2" type="submit">Log Off</button></form>
+            </div>
         </div>
     </nav>
     <div class="container">
@@ -83,8 +85,8 @@
             <div class="col"><input type="text" id="dialNumber" name="dialNumber"></div>
             <div class="col">
                 <div class="row">
-                    <div class="col"><button class="btn btn-primary btn-lg" id="dialButton" type="button">Dial</button></div>
-                    <div class="col"><button class="btn btn-primary btn-lg" id="hangupButton" type="button">Hangup</button></div>
+                    <div class="col"><button class="btn btn-primary btn-lg" id="dialButton" type="button" onclick="dialClick()">Dial</button></div>
+                    <div class="col"><button class="btn btn-primary btn-lg" id="hangupButton" type="button" onclick="hangupClick()">Hangup</button></div>
                 </div>
             </div>
         </div>

WebContentt/public/login.html

@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
 </head>
 
-<body onload="loginload()" onbeforeunload="loginunload()">
+<body onload="loginload()">
     <section class="position-relative py-4 py-xl-5">
         <div class="container">
             <div class="row mb-5">
@@ -33,8 +33,8 @@
                             <div class="bs-icon-xl bs-icon-circle bs-icon-primary bs-icon my-4"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-person">
                                     <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664z"></path>
                                 </svg></div>
-                            <form class="text-center" method="post">
-                                <div class="mb-3"><input class="form-control" type="email" name="username" placeholder="Username"></div>
+                            <form class="text-center" method="post" action="/login">
+                                <div class="mb-3"><input class="form-control" type="text" name="username" placeholder="Username"></div>
                                 <div class="mb-3"><input class="form-control" type="password" name="password" placeholder="Password"></div>
                                 <div class="mb-3"><button class="btn btn-primary d-block w-100" type="submit">Login</button></div>
                             </form>

WebContentt/public/setting.html

@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
 </head>
 
-<body onload="settingload()" onbeforeunload="settingunload()">
+<body onload="settingload()">
     <nav class="navbar navbar-expand-md bg-body py-3">
         <div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
                         <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
@@ -30,11 +30,13 @@
                 </ul>
                 <div class="d-md-none my-2"><button class="btn btn-light me-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>
             </div>
-            <div class="d-none d-md-block"><button class="btn btn-light me-2" type="button">Log Off</button></div>
+            <div class="d-none d-md-block">
+                <form method="GET" action="/logout"><button class="btn btn-light me-2" type="submit">Log Off</button></form>
+            </div>
         </div>
     </nav>
     <div class="container">
-        <form>
+        <form method="post" action="/logindata">
             <div class="col">
                 <div class="row">
                     <div class="col"><label class="col-form-label">Login Username</label></div>
@@ -47,7 +49,7 @@
             </div>
             <div class="col">
                 <div class="row">
-                    <div class="col"><button class="btn btn-primary btn-lg" id="btnSaveLogin" type="button">Save&nbsp;&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
+                    <div class="col"><button class="btn btn-primary btn-lg" type="button" onclick="sendLoginData()">Save&nbsp;&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
                                 <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
                                 <path d="M48 96V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V170.5c0-4.2-1.7-8.3-4.7-11.3l33.9-33.9c12 12 18.7 28.3 18.7 45.3V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H309.5c17 0 33.3 6.7 45.3 18.7l74.5 74.5-33.9 33.9L320.8 84.7c-.3-.3-.5-.5-.8-.8V184c0 13.3-10.7 24-24 24H104c-13.3 0-24-10.7-24-24V80H64c-8.8 0-16 7.2-16 16zm80-16v80H272V80H128zm32 240a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"></path>
                             </svg></button></div>
@@ -56,14 +58,14 @@
         </form>
     </div>
     <div class="container">
-        <form>
+        <form method="post" action="/sipdata">
             <div class="row">
                 <div class="col"><label class="col-form-label">SIP Server</label></div>
                 <div class="col"><input class="form-control" type="text" id="sipServer" name="sipServer" placeholder="SIP Server"></div>
             </div>
             <div class="row">
                 <div class="col"><label class="col-form-label">SIP Port</label></div>
-                <div class="col"><input class="form-control" type="text" id="sipPort" name="sipPort" placeholder="SIP Portnumber"></div>
+                <div class="col"><input class="form-control" type="number" id="sipPort" name="sipPort" placeholder="SIP Portnumber"></div>
             </div>
             <div class="row">
                 <div class="col"><label class="col-form-label">SIP Username</label></div>
@@ -74,7 +76,7 @@
                 <div class="col"><input class="form-control" type="text" id="sipPassword" name="sipPassword" placeholder="SIP Password"></div>
             </div>
             <div class="row">
-                <div class="col"><button class="btn btn-primary btn-lg" id="btnSaveSIP" type="button">Save&nbsp;&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
+                <div class="col"><button class="btn btn-primary btn-lg" type="button" onclick="sendSipData()">Save&nbsp;&nbsp;<svg xmlns="http://www.w3.org/2000/svg" viewBox="-32 0 512 512" width="1em" height="1em" fill="currentColor">
                             <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
                             <path d="M48 96V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V170.5c0-4.2-1.7-8.3-4.7-11.3l33.9-33.9c12 12 18.7 28.3 18.7 45.3V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H309.5c17 0 33.3 6.7 45.3 18.7l74.5 74.5-33.9 33.9L320.8 84.7c-.3-.3-.5-.5-.8-.8V184c0 13.3-10.7 24-24 24H104c-13.3 0-24-10.7-24-24V80H64c-8.8 0-16 7.2-16 16zm80-16v80H272V80H128zm32 240a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"></path>
                         </svg></button></div>