Working ! 06/12/2024

This commit is contained in:
2024-12-06 16:27:15 +07:00
parent a4ede5b1f3
commit 819f4a06df
8 changed files with 335 additions and 28 deletions

View File

@@ -1,14 +1,232 @@
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;
}

View File

@@ -17,7 +17,7 @@
<link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
</head>
<body onload="indexload()">
<body onload="indexload()" onbeforeunload="indexunload()">
<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>
@@ -81,7 +81,12 @@
<p>Dial To</p>
</div>
<div class="col"><input type="text" id="dialNumber" name="dialNumber"></div>
<div class="col"><button class="btn btn-primary btn-lg" id="dialButton" type="button">Dial</button></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>
</div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

View File

@@ -17,7 +17,7 @@
<link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
</head>
<body onload="loginload()">
<body onload="loginload()" onbeforeunload="loginunload()">
<section class="position-relative py-4 py-xl-5">
<div class="container">
<div class="row mb-5">

View File

@@ -17,7 +17,7 @@
<link rel="stylesheet" href="assets/css/Navbar-Centered-Brand-icons.css">
</head>
<body onload="settingload()">
<body onload="settingload()" onbeforeunload="settingunload()">
<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>
@@ -47,7 +47,7 @@
</div>
<div class="col">
<div class="row">
<div class="col"><button class="btn btn-primary btn-lg" 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" 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">
<!--! 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>
@@ -74,7 +74,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" 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" 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">
<!--! 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>