added traffic stat and fixed scan and watchat links

This commit is contained in:
Russel Yasol
2024-07-01 19:45:01 +08:00
parent a1598a7206
commit 6b9c912a24
8 changed files with 221 additions and 102 deletions

View File

@@ -45,6 +45,9 @@
<li class="nav-item">
<a class="nav-link" href="/network.html">Simple Network</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/scanner.html">Simple Scan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/settings.html">Simple Settings</a>
</li>

View File

@@ -50,6 +50,9 @@
<li class="nav-item">
<a class="nav-link" href="network.html">Simple Network</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/scanner.html">Simple Scan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/settings.html">Simple Settings</a>
</li>
@@ -275,6 +278,10 @@
<th scope="row">Assesment</th>
<td x-text="signalAssessment"></td>
</tr>
<tr>
<th scope="row">Traffic Stats</th>
<td x-text="downloadStat + ' DL / ' + uploadStat + ' UL'"></td>
</tr>
<tr x-show="csq != 'NR-SA Mode'">
<th scope="row">CSQ</th>
<td x-show="csq != '-'" x-text="csq"></td>
@@ -292,14 +299,12 @@
<th scope="row">TAC<sup>4G/5G</sup></th>
<td x-text="tac"></td>
</tr>
<tr x-show="rssi != '-'">
<!-- <tr x-show="rssi != '-'">
<th scope="row">RSSI<sup>4G</sup></th>
<td x-show="rssi != '-'" x-text="rssi"></td>
<td x-show="rssi == '-'" class="fst-italic">None</td>
</tr>
<tr
x-show="rsrqLTE != '-'"
>
</tr> -->
<tr x-show="rsrqLTE != '-'">
<th scope="row">SS_RSRQ<sup>4G</sup></th>
<td
class="gap-4 align-items-center"
@@ -344,9 +349,7 @@
</span>
</td>
</tr>
<tr
x-show="rsrqNR != '-'"
>
<tr x-show="rsrqNR != '-'">
<th scope="row">SS_RSRQ<sup>5G</sup></th>
<td
x-data="{ getProgressBarClass: function() {
@@ -390,9 +393,7 @@
</span>
</td>
</tr>
<tr
x-show="rsrpLTE != '-'"
>
<tr x-show="rsrpLTE != '-'">
<th scope="row">RSRP<sup>4G</sup></th>
<td
class="gap-4 align-items-center"
@@ -439,9 +440,7 @@
</span>
</td>
</tr>
<tr
x-show="rsrpNR != '-'"
>
<tr x-show="rsrpNR != '-'">
<th scope="row">SS_RSRP<sup>5G</sup></th>
<td
class="gap-4 align-items-center"
@@ -488,9 +487,7 @@
</span>
</td>
</tr>
<tr
x-show="sinrLTE != '-'"
>
<tr x-show="sinrLTE != '-'">
<th scope="row">SINR<sup>4G</sup></th>
<td
class="gap-4 align-items-center"
@@ -537,9 +534,7 @@
</span>
</td>
</tr>
<tr
x-show="sinrNR != '-'"
>
<tr x-show="sinrNR != '-'">
<th scope="row">SINR<sup>5G</sup></th>
<td
class="gap-4 align-items-center"
@@ -635,7 +630,7 @@
eNBID: "Unknown",
tac: "Unknown",
csq: "-",
rssi: "-",
// rssi: "-",
rsrpLTE: "-",
rsrpNR: "-",
rsrpLTEPercentage: "0%",
@@ -654,10 +649,16 @@
lastUpdate: new Date().toLocaleString(),
newRefreshRate: null,
refreshRate: 3,
nrDownload: "0",
nrUpload: "0",
nonNrDownload: "0",
nonNrUpload: "0",
downloadStat: "0",
uploadStat: "0",
fetchAllInfo() {
this.atcmd =
'AT+QTEMP;+QUIMSLOT?;+QSPN;+CGCONTRDP=1;+QMAP="WWANIP";+QENG="servingcell";+QCAINFO;+QSIMSTAT?;+CSQ';
'AT+QTEMP;+QUIMSLOT?;+QSPN;+CGCONTRDP=1;+QMAP="WWANIP";+QENG="servingcell";+QCAINFO;+QSIMSTAT?;+CSQ;+QGDNRCNT?;+QGDCNT?';
fetch(
"/cgi-bin/get_atcommand?" +
@@ -842,7 +843,10 @@
}
// --- Bandwidth ---
if (this.networkMode == "5G SA TDD" || this.networkMode == "5G SA FDD") {
if (
this.networkMode == "5G SA TDD" ||
this.networkMode == "5G SA FDD"
) {
// find this example value from lines "+QENG: \"servingcell\"
const bandwidth_line = lines.find((line) =>
line.includes('+QENG: "servingcell"')
@@ -906,7 +910,10 @@
}
// --- E/ARFCN ---
if (this.networkMode == "5G SA TDD" || this.networkMode == "5G SA FDD") {
if (
this.networkMode == "5G SA TDD" ||
this.networkMode == "5G SA FDD"
) {
// find this value from lines "+QCAINFO: \"PCC\"
const nr_pcc_arfcn = lines
.find((line) => line.includes('+QCAINFO: "PCC"'))
@@ -998,7 +1005,10 @@
}
// --- PCI ---
if (this.networkMode == "5G SA TDD" || this.networkMode == "5G SA FDD") {
if (
this.networkMode == "5G SA TDD" ||
this.networkMode == "5G SA FDD"
) {
const nr_pcc_pci = lines
.find((line) => line.includes('+QCAINFO: "PCC"'))
.split(",")[4];
@@ -1111,6 +1121,44 @@
.split(",")[4]
.replace(/"/g, "");
// Traffic Stats
// for NR traffic stats: +QGDNRCNT: 3263753367,109876105
this.nrDownload = lines
.find((line) => line.includes("+QGDNRCNT:"))
.split(",")[0]
// remove the +QGDNRCNT: part
.replace("+QGDNRCNT: ", "");
this.nrUpload = lines
.find((line) => line.includes("+QGDNRCNT:"))
.split(",")[1];
// for non-NR traffic stats: +QGDCNT: 247357510,6864571506
this.nonNrDownload = lines
.find((line) => line.includes("+QGDCNT:"))
.split(",")[1];
this.nonNrUpload = lines
.find((line) => line.includes("+QGDCNT:"))
.split(",")[0]
// remove the +QGDCNT: part
.replace("+QGDCNT: ", "");
// Add the nrDownload and nonNrDownload together
this.downloadStat = parseInt(this.nrDownload) + parseInt(this.nonNrDownload);
// Add the nrUpload and nonNrUpload together
this.uploadStat = parseInt(this.nrUpload) + parseInt(this.nonNrUpload);
// Convert the downloadStat and uploadStat bytes to readable size
this.downloadStat = this.bytesToSize(this.downloadStat);
this.uploadStat = this.bytesToSize(this.uploadStat);
console.log(this.downloadStat);
console.log(this.uploadStat);
// Signal Informations
const currentNetworkMode = this.networkMode;
@@ -1134,7 +1182,10 @@
// Get the short Cell ID (Last 2 characters of the Cell ID)
const shortCID = longCID.substring(longCID.length - 2);
if (currentNetworkMode == "5G SA TDD" || currentNetworkMode == "5G SA FDD") {
if (
currentNetworkMode == "5G SA TDD" ||
currentNetworkMode == "5G SA FDD"
) {
// TAC
this.tac = lines
.find((line) => line.includes('+QENG: "servingcell"'))
@@ -1214,11 +1265,11 @@
.split(",")[14]
.replace(/"/g, "");
// RSSI
this.rssi = lines
.find((line) => line.includes('+QENG: "servingcell"'))
.split(",")[15]
.replace(/"/g, "");
// // RSSI
// this.rssi = lines
// .find((line) => line.includes('+QENG: "servingcell"'))
// .split(",")[15]
// .replace(/"/g, "");
// SINR
this.sinrLTE = lines
@@ -1318,11 +1369,11 @@
.split(",")[12]
.replace(/"/g, "");
// RSSI LTE
this.rssi = lines
.find((line) => line.includes('+QENG: "LTE"'))
.split(",")[13]
.replace(/"/g, "");
// // RSSI LTE
// this.rssi = lines
// .find((line) => line.includes('+QENG: "LTE"'))
// .split(",")[13]
// .replace(/"/g, "");
// SINR LTE
this.sinrLTE = lines
@@ -1408,6 +1459,13 @@
});
},
bytesToSize(bytes) {
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
if (bytes == 0) return "0 Byte";
const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
},
requestPing() {
return fetch("/cgi-bin/get_ping")
.then((response) => response.text())

View File

@@ -1,47 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- change to a much simpler tab title -->
<title>Logging out...</title>
<link rel="stylesheet" href="css/bulma.css" />
<link rel="stylesheet" type="text/css" href="css/admin.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- START NAV -->
<nav class="navbar is-black" x-data="{ isOpen: false }">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item brand-text" href="/"> Logging Out... </a>
<a
role="button"
class="navbar-burger burger"
@click="isOpen = !isOpen"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div
id="navMenu"
class="navbar-menu"
:class="isOpen ? 'is-active' : ''"
>
<div class="navbar-start">
</div>
</div>
</div>
</nav>
<!-- END NAV -->
<script>
window.location=window.location.href.replace(/:\/\//, '://log:out@');
</script>
</body>
</html>

View File

@@ -53,6 +53,9 @@
>Simple Network</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="/scanner.html">Simple Scan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/settings.html">Simple Settings</a>
</li>
@@ -156,6 +159,28 @@
x-bind:placeholder="apn === '-' ? 'Fetching...' : apn"
/>
</div>
<!-- <div class="mb-4">
<label for="disableCA" class="form-label"
>Disable Carrier Aggregation</label
>
<select
class="form-select"
id="disableCA"
x-model="disableCA"
aria-label="disableCA"
>
<option
selected
x-text="disableCA === '-' ? 'Fetching...' : 'Current: ' + disableCA"
></option>
<option value="enableAll">Enable All</option>
<option value="LTE">Disable LTE</option>
<option value="NR5G">Disable NR5G</option>
<option value="both">Disable Both</option>
</select>
</div> -->
<div class="mb-4 input-group grid gap-3">
<label for="SIM1" class="form-label"> Change SIM</label>
<div class="form-check form-check-inline">
@@ -378,6 +403,10 @@
</button>
</div>
</div>
<div class="card-footer">
Cell Locking only works for the primary cell and is not
persistent across reboots.
</div>
</div>
</div>
</div>

View File

@@ -20,6 +20,8 @@
<!-- Import BootStrap Javascript -->
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/alpinejs.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<main>
@@ -51,11 +53,14 @@
<li class="nav-item">
<a
class="nav-link active"
href="/settings.html"
href="/scanner.html"
aria-current="page"
>Simple Settings</a
>Simple Scan</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="/settings.html">Simple Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sms.html">SMS</a>
</li>
@@ -76,6 +81,23 @@
</div>
</div>
</nav>
<div class="row mt-3 mb-4">
<div class="col">
<div class="card">
<div class="card-header">Live Signal</div>
<div class="card-body">
<div class="row mt-2 mb-2">
<p>Signal Graph</p>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3 mb-4">
<div class="col">
<div class="card">
@@ -2311,6 +2333,61 @@
},
};
}
const ctx = document.getElementById("myChart");
new Chart(ctx, {
type: "line",
data: {
labels: [
"0m",
"1m",
"2m",
"3m",
"4m",
"5m",
"6m",
"7m",
"8m",
"9m",
"10m",
"11m",
"12m",
"13m",
"14m",
"15m",
],
datasets: [
{
label: "LTE",
data: [0, 10, 5, 2, 20, 30, 45, 50, 60, 70, 80],
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
borderWidth: 1,
},
{
label: "NR5G",
data: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
borderColor: "rgb(54, 162, 235)",
backgroundColor: "rgba(54, 162, 235, 0.5)",
borderWidth: 1,
},
],
options: {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
},
},
});
</script>
</body>
</html>

View File

@@ -41,6 +41,9 @@
<li class="nav-item">
<a class="nav-link" href="/network.html">Simple Network</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/scanner.html">Simple Scan</a>
</li>
<li class="nav-item">
<a
class="nav-link active"
@@ -314,22 +317,12 @@
</button>
</div>
</div>
<div class="card-text">
<!-- <div class="card-text">
<div class="d-flex flex-row gap-4 w-full">
<!-- -->
<!-- <a
class="btn btn-warning"
type="button"
href="/scanner.html"
role="button"
>
Go to Cell Scanner
</a> -->
<p><a class="link-info link-opacity-50-hover link-offset-2" href="/scanner.html">Go to Cell Scanner</a></p>
<!-- <p><a class="link-info link-opacity-50-hover link-offset-2" href="/watchcat.html">Go to WatchCat</a></p> -->
<!-- </a> -->
</div>
<p><a class="link-info link-opacity-50-hover link-offset-2" href="/watchcat.html">Go to WatchCat</a></p>
</div>
</div> -->
</div>
</div>
</div>

View File

@@ -35,6 +35,9 @@
<li class="nav-item">
<a class="nav-link" href="/network.html">Simple Network</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/scanner.html">Simple Scan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/settings.html">Simple Settings</a>
</li>

View File

@@ -49,6 +49,9 @@
<li class="nav-item">
<a class="nav-link" href="/network.html">Simple Network</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/scanner.html">Simple Scan</a>
</li>
<li class="nav-item">
<a
class="nav-link active"