Working ! 06/12/2024

2024-12-17 16:08:39 +07:00
parent 819f4a06df
commit 225be4ad61
15 changed files with 464 additions and 294 deletions
--- a/Properties/config.properties
+++ b/Properties/config.properties
@@ -4,4 +4,6 @@ WebListenPort = 8080
 SipServer=192.168.10.2
 SipPort=5060
 SipUsername=101
-SipPassword=password101
+SipPassword=password101
+AudioInputDevice=Default
+AudioOutputDevice=Default
--- a/WebContentt/public/assets/js/app.js
+++ b/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;
 }
--- a/WebContentt/public/index.html
+++ b/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>
--- a/WebContentt/public/login.html
+++ b/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>
--- a/WebContentt/public/setting.html
+++ b/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>
--- a/src/Main.java
+++ b/src/Main.java
@@ -6,7 +6,6 @@ import SIP.jSIPClient;
 import SIP.javaSipEvents;
 import Webpage.*;
 import code.common;
-import com.google.gson.JsonSyntaxException;
 import org.pmw.tinylog.Logger;

 import java.io.File;
@@ -39,16 +38,20 @@ public class Main {
    private static String SipStatus = "Idle";
    private static int cpuTemperature;
    private static RamInformation ramInformation;
+    private static DiskInfo diskInformation;
    private static ProcessorStatus[] previousCpuInfo;
    private static final Map<String, Integer> cpuUsage = new HashMap<>();
    private static NetworkTransmitReceiveInfo[] previousNetworkInfo;
    private static final Map<String, String> networkTX = new HashMap<>();
    private static final Map<String, String> networkRX = new HashMap<>();
-    private static Properties config;
+    public static Properties config;
+
+    private static Thread sipThread;

    public static void main(String[] args) {
        common.ExtractProperties(currentDir,"config.properties", false);
        config = common.LoadProperties(currentDir,"config.properties");
+        common.ExtractProperties(currentDir,"tinylog.properties", false);

        // Timer Section
        timer =  new Timer();
@@ -78,12 +81,16 @@ public class Main {
            if (callLight!=null && callLight.isInitialized()) callLight.Close();
            if (timer!=null) timer.cancel();
            if (system_monitoring_timer!=null) system_monitoring_timer.cancel();
+
+            // force kill PID
+            if (webserver!=null) killPID(webserver.getProcessID());
+            if (socketioserver!=null) killPID(socketioserver.getProcessID());
        }));
    }

    private static void SIPClient_Section(){
        // initialize pakai thread, biar cepat
-        new Thread(()->{
+        sipThread = new Thread(()->{
            client = new jSIPClient(config);
            // event dari sisi Bass Sound Manager
            client.SetBassSoundManagerEvent(new BassSoundManagerEvent() {
@@ -210,7 +217,8 @@ public class Main {
                } else Logger.error("No IP Address found, please check your network connection");

            } else Logger.error("No network interface found, please check your network connection");
-        }).start();
+        });
+        sipThread.start();

    }

@@ -219,6 +227,39 @@ public class Main {
        new Thread(()->{
            webserver = new WebServer(config);
            webserver.Start();
+            webserver.setOnLoginSettingChanged(loginsetting ->{
+                config.setProperty("WebUsername", loginsetting.Username);
+                config.setProperty("WebPassword", loginsetting.Password);
+                SaveProperties(currentDir,"config.properties",config);
+            });
+            webserver.setOnSipSettingChanged(sipsetting ->{
+                config.setProperty("SipServer", sipsetting.Server);
+                config.setProperty("SipPort", String.valueOf(sipsetting.Port));
+                config.setProperty("SipUsername", sipsetting.Username);
+                config.setProperty("SipPassword", sipsetting.Password);
+                SaveProperties(currentDir,"config.properties",config);
+                if (client!=null) {
+                    Logger.info("Disconnecting from SIP Server");
+                    client.Disconnect();
+                    client = null;
+                }
+                if (sipThread!=null){
+                    try {
+                        Logger.info("Waiting for SIP Thread to finish");
+                        sipThread.interrupt();
+                        sipThread.join();
+                        Logger.info("SIP Thread finished");
+                    } catch (InterruptedException e) {
+                        Logger.error(e);
+                    }
+                    sipThread = null;
+
+                }
+                Logger.info("Re-initiate SIP Section");
+                // re-initiate SIP Section
+                SIPClient_Section();
+            });
+
            socketioserver = new SocketioServer("0.0.0.0", 9092);
            socketioserver.Start();
            socketioserver.setOnRequest(req ->{
@@ -227,46 +268,6 @@ public class Main {
                if (networkLight!=null && networkLight.isInitialized()) networkLight.BlinkON(100);

                switch(req.getRequest()){
-                    case "setLogin":
-                        try{
-                            LoginSetting login = gson.fromJson(req.getData(), LoginSetting.class);
-                            if (ValidString(login.Username) && ValidString(login.Password)){
-                                config.setProperty("WebUsername", login.Username);
-                                config.setProperty("WebPassword", login.Password);
-                                if (SaveProperties(currentDir,"config.properties",config)){
-                                    resp = new SocketioResponse("success", "Login Setting");
-                                } else throw new Exception("Failed to save properties");
-                            } else throw new Exception("Invalid Username or Password");
-                        } catch (JsonSyntaxException e){
-                            resp = new SocketioResponse("error", "Invalid JSON");
-                        } catch (Exception e){
-                            resp = new SocketioResponse("error", e.getMessage());
-                        }
-                        break;
-                    case "getLogin":
-                        resp = SocketioResponse.fromLoginSetting("success", new LoginSetting(config.getProperty("WebUsername"), config.getProperty("WebPassword")));
-                        break;
-                    case "setSipSetting":
-                        try{
-                            SipSetting sip = gson.fromJson(req.getData(), SipSetting.class);
-                            if (ValidString(sip.Server) && ValidString(sip.Username) && ValidString(sip.Password)){
-                                config.setProperty("SipServer", sip.Server);
-                                config.setProperty("SipPort", String.valueOf(sip.Port));
-                                config.setProperty("SipUsername", sip.Username);
-                                config.setProperty("SipPassword", sip.Password);
-                                if (SaveProperties(currentDir,"config.properties",config)){
-                                    resp = new SocketioResponse("success", "SIP Setting");
-                                } else throw new Exception("Failed to save properties");
-                            } else throw new Exception("Invalid SIP Setting");
-                        } catch (JsonSyntaxException e){
-                            resp = new SocketioResponse("error", "Invalid JSON");
-                        } catch (Exception e){
-                            resp = new SocketioResponse("error", e.getMessage());
-                        }
-                        break;
-                    case "getSipSetting":
-                        resp =  SocketioResponse.fromSipSetting("success", new SipSetting(config.getProperty("SipServer"), Integer.parseInt(config.getProperty("SipPort")), config.getProperty("SipUsername"), config.getProperty("SipPassword")));
-                        break;
                    case "getSipStatus":
                        resp = new SocketioResponse("success", SipStatus);
                        break;
@@ -281,6 +282,13 @@ public class Main {
                            resp = new SocketioResponse("error", "Failed to get RAM Information");
                        }
                        break;
+                    case "getDiskInfo":
+                        if (diskInformation!=null){
+                            resp = SocketioResponse.fromDiskInfo("success", diskInformation);
+                        } else {
+                            resp = new SocketioResponse("error", "Failed to get Disk Information");
+                        }
+                        break;
                    case "getCpuInfo":
                        if (cpuTemperature>0 && !cpuUsage.isEmpty()){
                            resp = SocketioResponse.fromCpuStatus("success", cpuTemperature, cpuUsage);
@@ -295,7 +303,7 @@ public class Main {
                            resp = new SocketioResponse("error", "Failed to get Network Information");
                        }
                        break;
-                    case "call":
+                    case "dial":
                        int extension = ParseInt(req.getData(),-1) ;
                        if (extension>0){
                            if (Call(""+extension)){
@@ -305,9 +313,7 @@ public class Main {
                            }
                        } else resp = new SocketioResponse("error", "Invalid Extension");
                        break;
-                    case "getDiskInfo":
-                        resp = new SocketioResponse("error", "Not Implemented");
-                        break;
+
                    default:
                        resp = new SocketioResponse("error", "Invalid Request");
                        break;
@@ -573,6 +579,7 @@ public class Main {
            public void run() {
                cpuTemperature = SystemInformation.getCPUTemperature();
                ramInformation = SystemInformation.getRAMInformation();
+                diskInformation = SystemInformation.getDiskInfo("/");
                ProcessorStatus[] cpuinfo = SystemInformation.getProcStat();
                if (cpuinfo.length>0){
                    if (previousCpuInfo==null || !Objects.equals(previousCpuInfo.length, cpuinfo.length)){
--- a/src/SBC/DiskInfo.java
+++ b/src/SBC/DiskInfo.java
@@ -0,0 +1,13 @@
+package SBC;
+
+public class DiskInfo {
+    public String path;
+    public long totalSpace;
+    public long freeSpace;
+    public long usableSpace;
+
+    @Override
+    public String toString(){
+        return "path: " + path + ", totalSpace: " + totalSpace + ", freeSpace: " + freeSpace + ", usableSpace: " + usableSpace;
+    }
+}
--- a/src/SBC/SystemInformation.java
+++ b/src/SBC/SystemInformation.java
@@ -10,7 +10,43 @@ import java.util.regex.Matcher;
 import java.util.regex.Pattern;

 public class SystemInformation {
+    static long KB_threshold = 1024;
+    static long MB_threshold = 1024 * KB_threshold;
+    static long GB_threshold = 1024 * MB_threshold;

+    public static String DiskSize_to_String(long value){
+        if (value < KB_threshold){
+            return value + " B";
+        } else if (value < MB_threshold){
+            return String.format("%.2f", (double)value / KB_threshold) + " KB";
+        } else if (value < GB_threshold){
+            return String.format("%.2f", (double)value / MB_threshold) + " MB";
+        } else {
+            return String.format("%.2f", (double)value / GB_threshold) + " GB";
+        }
+    }
+
+    public static String RamKB_to_String(int value){
+        if (value < 1024){
+            return value + " KB";
+        } else if (value < 1024 * 1024){
+            return String.format("%.2f", (double)value / 1024) + " MB";
+        } else {
+            return String.format("%.2f", (double)value / (1024 * 1024)) + " GB";
+        }
+    }
+
+    public static DiskInfo getDiskInfo(String path){
+        DiskInfo result = new DiskInfo();
+        result.path = path;
+        File ff = new File(path);
+        if (ff.isDirectory()){
+            result.usableSpace = ff.getUsableSpace();
+            result.totalSpace = ff.getTotalSpace();
+            result.freeSpace = ff.getFreeSpace();
+        }
+        return result;
+    }


    public static int getCPUTemperature() {
--- a/src/SIP/jSIPClient.java
+++ b/src/SIP/jSIPClient.java
@@ -1,6 +1,5 @@
 package SIP;

-import java.net.InetAddress;
 import java.net.SocketException;
 import java.util.Properties;
 import java.util.concurrent.ExecutorService;
--- a/src/Webpage/AllSetting.java
+++ b/src/Webpage/AllSetting.java
@@ -0,0 +1,10 @@
+package Webpage;
+
+public class AllSetting {
+    public LoginSetting loginSetting;
+    public SipSetting sipSetting;
+    public AllSetting(LoginSetting loginSetting, SipSetting sipSetting){
+        this.loginSetting = loginSetting;
+        this.sipSetting = sipSetting;
+    }
+}
--- a/src/Webpage/SocketioResponse.java
+++ b/src/Webpage/SocketioResponse.java
@@ -1,12 +1,16 @@
 package Webpage;

+import SBC.DiskInfo;
 import SBC.RamInformation;
 import com.google.gson.JsonObject;
 import lombok.Getter;
 import lombok.Setter;
+import org.pmw.tinylog.Logger;

 import java.util.Map;

+import static SBC.SystemInformation.DiskSize_to_String;
+import static SBC.SystemInformation.RamKB_to_String;
 import static code.common.gson;

@Getter
@@ -40,14 +44,34 @@ public class SocketioResponse {
    public static SocketioResponse fromSipSetting(String response, SipSetting sipSetting){
        SocketioResponse socketioResponse = new SocketioResponse();
        socketioResponse.setResponse(response);
+
        socketioResponse.setData(gson.toJson(sipSetting));
        return socketioResponse;
    }

+    public static SocketioResponse fromDiskInfo(String response, DiskInfo diskInfo){
+        SocketioResponse socketioResponse = new SocketioResponse();
+        socketioResponse.setResponse(response);
+
+
+        JsonObject jo = new JsonObject();
+        jo.addProperty("total",DiskSize_to_String(diskInfo.totalSpace));
+        jo.addProperty("usage",DiskSize_to_String(diskInfo.usableSpace));
+        jo.addProperty("free",DiskSize_to_String(diskInfo.freeSpace));
+        socketioResponse.setData(jo.toString());
+        return socketioResponse;
+    }
+
    public static SocketioResponse fromRamInformation(String response, RamInformation ramInformation){
        SocketioResponse socketioResponse = new SocketioResponse();
        socketioResponse.setResponse(response);
-        socketioResponse.setData(gson.toJson(ramInformation));
+        JsonObject jo = new JsonObject();
+
+        jo.addProperty("totalKB",RamKB_to_String(ramInformation.totalKB));
+        jo.addProperty("availableKB",RamKB_to_String(ramInformation.availableKB));
+        jo.addProperty("usedKB",RamKB_to_String(ramInformation.usedKB));
+
+        socketioResponse.setData(jo.toString());
        return socketioResponse;
    }

--- a/src/Webpage/SocketioServer.java
+++ b/src/Webpage/SocketioServer.java
@@ -3,15 +3,22 @@ package Webpage;
 import com.corundumstudio.socketio.Configuration;
 import com.corundumstudio.socketio.SocketIONamespace;
 import com.corundumstudio.socketio.SocketIOServer;
+import lombok.Getter;
 import lombok.NonNull;
 import lombok.Setter;
 import org.pmw.tinylog.Logger;

+
 import java.util.function.Function;

+
+import static code.common.*;
+
 public class SocketioServer {
    private final SocketIOServer server;
    private @Setter Function<@NonNull SocketioRequest, @NonNull SocketioResponse> onRequest;
+    private @Getter int ProcessID;
+

    /**
     * Create Socket.io Server
@@ -21,8 +28,12 @@ public class SocketioServer {
    public SocketioServer(String localip,int listenport){
        if (localip==null || localip.isEmpty()) localip="0.0.0.0";
        if (listenport<=0 || listenport>65535) listenport=9092;
+
+        int PID = GetPID(listenport);
+        if (PID!=0) killPID(PID);
+
        Configuration config = new Configuration();
-        config.setHostname(localip);
+        //config.setHostname(localip);
        config.setPort(listenport);

        server = new SocketIOServer(config);
@@ -30,14 +41,20 @@ public class SocketioServer {
        socketio.addConnectListener(client -> Logger.info("Client id={} remoteaddress={} Connected to /socketio: " , client.getSessionId(), client.getRemoteAddress()));
        socketio.addDisconnectListener(client -> Logger.info("Client id={} remoteaddress={} Disconnected from /socketio: ", client.getSessionId(), client.getRemoteAddress()));
        socketio.addEventListener("command", SocketioRequest.class, (client, data, ackRequest) -> {
-            Logger.info("Client id={} remoteaddress={} request: {}", client.getSessionId(), client.getRemoteAddress(), data);
+            //Logger.info("Client id={} remoteaddress={} request: {}", client.getSessionId(), client.getRemoteAddress(), data);
            if (onRequest!=null){
                SocketioResponse response = onRequest.apply(data);
-                Logger.info("Client id={} remoteaddress={} response: {}", client.getSessionId(), client.getRemoteAddress(), response);
+                //Logger.info("Client id={} remoteaddress={} response: {}", client.getSessionId(), client.getRemoteAddress(), response);
                ackRequest.sendAckData(response);
            }
        });

+        Runtime.getRuntime().addShutdownHook(new Thread(() -> {
+            Logger.info("Shutting down Socket.io Server");
+            server.stop();
+        }));
+
+
    }

    /**
@@ -45,6 +62,7 @@ public class SocketioServer {
     */
    public void Start(){
        if (server!=null) server.start();
+        ProcessID = GetPID(server.getConfiguration().getPort());
    }

    /**
--- a/src/Webpage/WebServer.java
+++ b/src/Webpage/WebServer.java
@@ -1,23 +1,35 @@
 package Webpage;

 import io.javalin.Javalin;
+import io.javalin.http.HttpCode;
 import io.javalin.http.staticfiles.Location;
+import lombok.Getter;
+import lombok.Setter;
+import org.pmw.tinylog.Logger;

 import java.util.Objects;
 import java.util.Properties;
+import java.util.function.Consumer;

 import static code.common.*;

 public class WebServer {
    private final Javalin app;
    private final int listenport;
-    private final String webusername;
-    private final String webpassword;
+    private String webusername;
+    private String webpassword;
+    private @Setter Consumer<LoginSetting> onLoginSettingChanged;
+    private @Setter Consumer<SipSetting> onSipSettingChanged;
+    private @Getter int ProcessID;
+
    public WebServer(Properties prop) {
        listenport = GetProperties_IntValue(prop,"WebListenPort", 8080);
        webusername = GetProperties_StringValue(prop,"WebUsername", "admin");
        webpassword = GetProperties_StringValue(prop,"WebPassword", "admin");

+        int PID = GetPID(listenport);
+        if (PID!=0) killPID(PID);
+
        app = Javalin.create(config -> config.addStaticFiles("/public", Location.CLASSPATH));
        app.get("/", ctx ->{
           if (Objects.equals(ctx.sessionAttribute("username"), webusername)){
@@ -27,18 +39,36 @@ public class WebServer {
               ctx.redirect("/login.html");
           }
        });
+        app.before("/index.html", ctx -> {
+            if (!Objects.equals(ctx.sessionAttribute("username"), webusername)){
+                ctx.redirect("/login.html");
+            }
+        });
+        app.before("/setting.html", ctx -> {
+            if (!Objects.equals(ctx.sessionAttribute("username"), webusername)){
+                ctx.redirect("/login.html");
+            }
+        });
        app.get("/logout", ctx -> {
            ctx.sessionAttribute("username", null);
            ctx.redirect("/login.html");
        });
-        app.get("/setting", ctx -> {
-            if (Objects.equals(ctx.sessionAttribute("username"), webusername)){
-                //TODO Setting Page
-                ctx.result("Setting Page");
-            } else {
+        app.before("/setting", ctx -> {
+            if (!Objects.equals(ctx.sessionAttribute("username"), webusername)){
                ctx.redirect("/login.html");
            }
        });
+        app.get("/setting", ctx -> {
+            if (Objects.equals(ctx.sessionAttribute("username"), webusername)) {
+                AllSetting allSetting = new AllSetting(new LoginSetting(webusername, webpassword), new SipSetting(
+                        GetProperties_StringValue(prop, "SipServer", "sip.example.com"),
+                        GetProperties_IntValue(prop, "SipPort", 5060),
+                        GetProperties_StringValue(prop, "SipUsername", "username"),
+                        GetProperties_StringValue(prop, "SipPassword", "password")
+                ));
+                ctx.json(allSetting);
+            }
+        });
        app.post("/login", ctx -> {
            String username = ctx.formParam("username");
            String password = ctx.formParam("password");
@@ -49,14 +79,60 @@ public class WebServer {
                ctx.redirect("/login.html");
            }
        });
-        app.post("/setting", ctx -> {
-            if (Objects.equals(ctx.sessionAttribute("username"), webusername)){
-                //TODO Setting Page
-                ctx.result("Setting Page");
-            } else {
+        app.before("/logindata", ctx -> {
+            if (!Objects.equals(ctx.sessionAttribute("username"), webusername)){
                ctx.redirect("/login.html");
            }
        });
+        app.post("/logindata", ctx -> {
+            if (Objects.equals(ctx.sessionAttribute("username"), webusername)){
+                LoginSetting value = gson.fromJson(ctx.body(), LoginSetting.class);
+                Logger.info("Login Data: Username: {}, Password: {}", value.Username, value.Password);
+                if (ValidString(value.Username)) {
+                    if (ValidString(value.Password)) {
+                        if (value.Username.equals(webusername) && value.Password.equals(webpassword)) {
+                            ctx.result("Same as current login data").status(HttpCode.OK);
+                        } else {
+                            if (onLoginSettingChanged != null) onLoginSettingChanged.accept(value);
+                            webusername = value.Username;
+                            webpassword = value.Password;
+                            ctx.sessionAttribute("username", value.Username);
+                            ctx.result("Login Data Changed").status(HttpCode.OK);
+                        }
+                    } else ctx.result("Invalid Password").status(HttpCode.BAD_REQUEST);
+                } else ctx.result("Invalid Username").status(HttpCode.BAD_REQUEST);
+
+            }
+        });
+        app.before("/sipdata", ctx -> {
+            if (!Objects.equals(ctx.sessionAttribute("username"), webusername)){
+                ctx.redirect("/login.html");
+            }
+        });
+        app.post("/sipdata", ctx -> {
+            if (Objects.equals(ctx.sessionAttribute("username"), webusername)){
+                SipSetting value = gson.fromJson(ctx.body(), SipSetting.class);
+                Logger.info("SIP Data: Server: {}, Port: {}, Username: {}, Password: {}", value.Server, value.Port, value.Username, value.Password);
+                if (ValidString(value.Server)) {
+                    if (ValidPortNumber(value.Port)) {
+                        if (ValidString(value.Username)) {
+                            if (ValidString(value.Password)) {
+                                if (value.Username.equals(GetProperties_StringValue(prop, "SipUsername", "101")) &&
+                                        value.Password.equals(GetProperties_StringValue(prop, "SipPassword", "password101")) &&
+                                        value.Server.equals(GetProperties_StringValue(prop, "SipServer", "192.168.10.2")) &&
+                                        value.Port == GetProperties_IntValue(prop, "SipPort", 5060)) {
+                                    ctx.result("Same as current SIP data").status(HttpCode.OK);
+                                } else {
+                                    if (onSipSettingChanged != null) onSipSettingChanged.accept(value);
+                                    ctx.result("SIP Data Changed").status(HttpCode.OK);
+                                }
+                            } else ctx.result("Invalid SIP Password").status(HttpCode.BAD_REQUEST);
+                        } else ctx.result("Invalid SIP Username").status(HttpCode.BAD_REQUEST);
+                    } else ctx.result("Invalid SIP Port").status(HttpCode.BAD_REQUEST);
+                } else ctx.result("Invalid SIP Server").status(HttpCode.BAD_REQUEST);
+
+            }
+        });
    }

    /**
@@ -64,6 +140,7 @@ public class WebServer {
     */
    public void Start(){
        if (app!=null) app.start(listenport);
+        ProcessID = GetPID(listenport);
    }

    /**
--- a/src/code/common.java
+++ b/src/code/common.java
@@ -8,13 +8,13 @@ import peers.sip.syntaxencoding.SipHeaderFieldName;
 import peers.sip.syntaxencoding.SipHeaderFieldValue;
 import peers.sip.syntaxencoding.SipHeaders;

-import java.io.File;
-import java.io.FileInputStream;
-import java.io.InputStream;
+import java.io.*;
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
 import java.util.Properties;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;

 public class common {
    public static String currentDir = System.getProperty("user.dir");
@@ -26,6 +26,44 @@ public class common {
    public static final double MB_threshold = 1024.0 * 1024.0;
    public static final double GB_threshold = 1024.0 * 1024.0 * 1024.0;

+    public static int GetPID(int listenport){
+        final String regex = ".*?:"+listenport+".*?LISTEN.*?(\\d+)/java";
+        final Pattern pattern = Pattern.compile(regex);
+        int PID = 0;
+
+        try{
+            Process p = Runtime.getRuntime().exec("netstat -nlp | grep :"+listenport);
+            try (BufferedReader reader = new BufferedReader(new InputStreamReader(p.getInputStream()))) {
+                String line;
+                while ((line = reader.readLine()) != null) {
+                    Matcher matcher = pattern.matcher(line);
+                    if (matcher.find()) {
+                        PID = Integer.parseInt(matcher.group(1));
+                        System.out.println("PID: "+PID);
+                        break;
+                    }
+                }
+            }
+        } catch (Exception e){
+            Logger.error("Failed to get PID on port {}, Message : ", listenport, e.getMessage());
+        }
+
+        return PID;
+
+    }
+
+    public static void killPID(int PID){
+        try{
+            if (PID!=0){
+                Process pkill = Runtime.getRuntime().exec("kill -9 "+PID);
+                pkill.waitFor();
+                Logger.info("Killed PID {}", PID);
+            }
+        } catch (Exception e){
+            Logger.error("Failed to kill PID {}, Message : ", PID, e.getMessage());
+        }
+    }
+
    public static int RandomInt(int min, int max){
        return (int) (Math.random() * (max - min + 1) + min);
    }
--- a/tinylog.properties
+++ b/tinylog.properties
@@ -0,0 +1,4 @@
+exception           = unpack, strip: jdk.internal
+writer              = console
+writer.exception    = drop cause
+writer.format       = {date:dd-MM-yyyy HH:mm:ss} {class}.{method}()