898 lines
38 KiB
HTML
898 lines
38 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="light">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Simple Admin</title>
|
|
<!-- <link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
|
crossorigin="anonymous"
|
|
/> -->
|
|
<!-- Import all the bootstrap css files from css folder -->
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
|
|
|
<!-- Logo -->
|
|
<link rel="simpleadmin-logo" href="favicon.ico" />
|
|
|
|
<!-- Import BootStrap Javascript -->
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
|
<script src="js/alpinejs.min.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="container my-4" x-data="processAllInfos()">
|
|
<nav class="navbar navbar-expand-lg mt-2">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/"
|
|
><span class="mb-0 h4">Simple Admin</span></a
|
|
>
|
|
<button
|
|
class="navbar-toggler"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbarText"
|
|
aria-controls="navbarText"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarText">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="/"
|
|
>Home</a
|
|
>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="network.html">Simple Network</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/console">Console</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/deviceinfo.html"
|
|
>Device Information</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
<span class="navbar-text">
|
|
<button class="btn btn-link text-reset" id="darkModeToggle">
|
|
Dark Mode
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="row align-items-center mt-5 gap-md-3 gap-2">
|
|
<div class="col align-self-center">
|
|
<div class="card">
|
|
<div
|
|
class="card-body d-flex flex-column align-items-center justify-content-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 320 512"
|
|
height="85"
|
|
width="85"
|
|
>
|
|
<path
|
|
fill="#fdb53c"
|
|
d="M160 64c-26.5 0-48 21.5-48 48V276.5c0 17.3-7.1 31.9-15.3 42.5C86.2 332.6 80 349.5 80 368c0 44.2 35.8 80 80 80s80-35.8 80-80c0-18.5-6.2-35.4-16.7-48.9c-8.2-10.6-15.3-25.2-15.3-42.5V112c0-26.5-21.5-48-48-48zM48 112C48 50.2 98.1 0 160 0s112 50.1 112 112V276.5c0 .1 .1 .3 .2 .6c.2 .6 .8 1.6 1.7 2.8c18.9 24.4 30.1 55 30.1 88.1c0 79.5-64.5 144-144 144S16 447.5 16 368c0-33.2 11.2-63.8 30.1-88.1c.9-1.2 1.5-2.2 1.7-2.8c.1-.3 .2-.5 .2-.6V112zM208 368c0 26.5-21.5 48-48 48s-48-21.5-48-48c0-20.9 13.4-38.7 32-45.3V272c0-8.8 7.2-16 16-16s16 7.2 16 16v50.7c18.6 6.6 32 24.4 32 45.3z"
|
|
/>
|
|
</svg>
|
|
<h1
|
|
class="card-text mt-4"
|
|
x-text="temperature + ' °C'"
|
|
></h1>
|
|
</div>
|
|
<div class="card-footer">Temperature</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col align-self-center">
|
|
<div class="card">
|
|
<div
|
|
class="card-body d-flex flex-column align-items-center justify-content-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 384 512"
|
|
height="85"
|
|
width="85"
|
|
>
|
|
<path
|
|
fill="#6a46d8"
|
|
d="M64 0H242.7c17 0 33.3 6.7 45.3 18.7L365.3 96c12 12 18.7 28.3 18.7 45.3V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0zM96 192c-17.7 0-32 14.3-32 32v32h64V192H96zM64 352h80 96 80V288H240 144 64v64zM320 224c0-17.7-14.3-32-32-32H256v64h64V224zM160 192v64h64V192H160zM288 448c17.7 0 32-14.3 32-32V384H256v64h32zM160 384v64h64V384H160zM64 416c0 17.7 14.3 32 32 32h32V384H64v32z"
|
|
/>
|
|
</svg>
|
|
<h1 class="card-text mt-4" x-text="simStatus"></h1>
|
|
</div>
|
|
<div class="card-footer">SIM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="col align-self-center">
|
|
<div class="card">
|
|
<div
|
|
class="card-body d-flex flex-column align-items-center justify-content-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 640 512"
|
|
height="85"
|
|
width="85"
|
|
>
|
|
<path
|
|
fill="#2fa7fb"
|
|
d="M576 0c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V32c0-17.7 14.3-32 32-32zM448 96c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V128c0-17.7 14.3-32 32-32zM352 224V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V224c0-17.7 14.3-32 32-32s32 14.3 32 32zM192 288c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V320c0-17.7 14.3-32 32-32zM96 416v64c0 17.7-14.3 32-32 32s-32-14.3-32-32V416c0-17.7 14.3-32 32-32s32 14.3 32 32z"
|
|
/>
|
|
</svg>
|
|
<h1 class="card-text mt-4" x-text="signalPercentage + '%'"></h1>
|
|
</div>
|
|
<div class="card-footer">Signal Percentage</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="col align-self-center">
|
|
<div class="card">
|
|
<div
|
|
class="card-body d-flex flex-column align-items-center justify-content-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 640 512"
|
|
height="85"
|
|
width="85"
|
|
>
|
|
<path
|
|
fill="#20c0ae"
|
|
d="M0 336c0 79.5 64.5 144 144 144H512c70.7 0 128-57.3 128-128c0-61.9-44-113.6-102.4-125.4c4.1-10.7 6.4-22.4 6.4-34.6c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192c0 2.7 .1 5.4 .2 8.1C40.2 219.8 0 273.2 0 336z"
|
|
/>
|
|
</svg>
|
|
<h1
|
|
class="card-text mt-4"
|
|
x-text="internetConnectionStatus"
|
|
></h1>
|
|
</div>
|
|
<div class="card-footer">Internet Connection</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5 gap-3">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">Network Information</div>
|
|
<div class="card-body">
|
|
<div class="card-text table-responsive-sm">
|
|
<table class="table">
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Active Sim</th>
|
|
<td x-text="activeSim"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Network Provider</th>
|
|
<td x-text="networkProvider"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">MCCMNC</th>
|
|
<td x-text="mccmnc"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">APN</th>
|
|
<td x-text="apn"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Network Mode</th>
|
|
<td x-text="networkMode"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Bands</th>
|
|
<td x-text="bands"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Bandwidth</th>
|
|
<td x-text="bandwidth"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">E/ARFCN<sup>4G/5G</sup></th>
|
|
<td x-text="earfcns"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">PCI</th>
|
|
<td
|
|
x-show="scc_pci != '-'"
|
|
x-text="pcc_pci + ', ' + scc_pci"
|
|
></td>
|
|
|
|
<td x-show="scc_pci == '-'" x-text="pcc_pci"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">IPv<sup>4</sup></th>
|
|
<td x-text="ipv4"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">IPv<sup>6</sup></th>
|
|
<td x-text="ipv6"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Uptime</th>
|
|
<td x-text="uptime"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="row row-cols-2">
|
|
<div class="col">
|
|
<p class="btn">Refresh Rate (min 3s)</p>
|
|
</div>
|
|
<div class="col">
|
|
<div class="input-group">
|
|
<input
|
|
x-model="newRefreshRate"
|
|
class="form-control"
|
|
type="number"
|
|
min="3"
|
|
max="60"
|
|
x-bind:placeholder="refreshRate + 's'"
|
|
/>
|
|
<button
|
|
@click="updateRefreshRate()"
|
|
class="btn btn-outline-secondary"
|
|
type="button"
|
|
>
|
|
Set
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="col">
|
|
<div class="card">
|
|
<div class="card-header">Signal Information</div>
|
|
<div class="card-body">
|
|
<div class="card-text table-responsive-sm">
|
|
<table class="table">
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Assesment</th>
|
|
<td x-text="signalAssessment"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">CSQ</th>
|
|
<td x-show="csq != '-'" x-text="csq"></td>
|
|
<td x-show="csq == '-'" class="fst-italic">None</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">CELL ID</th>
|
|
<td x-text="cellID"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">eNB ID <sup>4G/5G</sup></th>
|
|
<td x-text="eNBID"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">TAC<sup>4G/5G</sup></th>
|
|
<td x-text="tac"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">RSSI</th>
|
|
<td x-show="rssi != '-'" x-text="rssi"></td>
|
|
<td x-show="rssi == '-'" class="fst-italic">None</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">SS_RSRQ<sup>4G</sup></th>
|
|
<td
|
|
class="gap-4 align-items-center"
|
|
x-data="{ getProgressBarClass: function() {
|
|
// Remove the percentage sign and convert to integer
|
|
var percentage = parseInt(this.rsrqLTEPercentage);
|
|
|
|
if (percentage >= 60) {
|
|
return 'progress-bar bg-success is-medium';
|
|
} else if (percentage >= 40) {
|
|
return 'progress-bar bg-warning is-warning is-medium';
|
|
} else {
|
|
return 'progress-bar bg-danger is-medium';
|
|
}
|
|
} }"
|
|
>
|
|
<div
|
|
x-show="rsrqLTE != '-' && rsrqLTEPercentage != '0'"
|
|
class="progress w-100"
|
|
role="progressbar"
|
|
aria-label="RSRQ BAR"
|
|
:aria-valuenow="rsrqLTEPercentage"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
style="height: 18px"
|
|
>
|
|
<div
|
|
:class="getProgressBarClass()"
|
|
:style="'width: ' + rsrqLTEPercentage + '%'"
|
|
>
|
|
<span
|
|
x-text="rsrqLTE + ' / ' + rsrqLTEPercentage + '%'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<span
|
|
x-show="rsrqLTEPercentage == '0'"
|
|
x-text="rsrqLTE"
|
|
></span>
|
|
<span x-show="rsrqLTE == '-'" class="fst-italic">
|
|
None
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">SS_RSRQ<sup>5G</sup></th>
|
|
<td
|
|
x-data="{ getProgressBarClass: function() {
|
|
// Remove the percentage sign and convert to integer
|
|
var percentage = parseInt(this.rsrqNRPercentage);
|
|
|
|
if (percentage >= 60) {
|
|
return 'progress-bar bg-success is-medium';
|
|
} else if (percentage >= 40) {
|
|
return 'progress-bar bg-warning is-warning is-medium';
|
|
} else {
|
|
return 'progress-bar bg-danger is-medium';
|
|
}
|
|
} }"
|
|
>
|
|
<div
|
|
x-show="rsrqNR != '-' && rsrqNRPercentage != '0'"
|
|
class="progress w-100"
|
|
role="progressbar"
|
|
aria-label="RSRQ BAR"
|
|
:aria-valuenow="rsrqNRPercentage"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
style="height: 18px"
|
|
>
|
|
<div
|
|
:class="getProgressBarClass()"
|
|
:style="'width: ' + rsrqNRPercentage + '%'"
|
|
>
|
|
<span
|
|
x-text="rsrqNR + ' / ' + rsrqNRPercentage + '%'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<span
|
|
x-show="rsrqNRPercentage == '0'"
|
|
x-text="rsrqNR"
|
|
></span>
|
|
<span x-show="rsrqNR == '-'" class="fst-italic">
|
|
None
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">RSRP<sup>4G</sup></th>
|
|
<td
|
|
class="gap-4 align-items-center"
|
|
x-data="{
|
|
getProgressBarClass: function() {
|
|
// Remove the percentage sign and convert to integer
|
|
var percentage = parseInt(this.rsrpLTEPercentage);
|
|
|
|
if (percentage >= 60) {
|
|
return 'progress-bar bg-success is-medium';
|
|
} else if (percentage >= 40) {
|
|
return 'progress-bar bg-warning is-warning is-medium';
|
|
} else {
|
|
return 'progress-bar bg-danger is-medium';
|
|
}
|
|
}
|
|
}"
|
|
>
|
|
<div
|
|
x-show="rsrpLTE != '-' && rsrpLTEPercentage != '0'"
|
|
class="progress w-100"
|
|
role="progressbar"
|
|
aria-label="RSRP BAR"
|
|
:aria-valuenow="rsrpLTEPercentage"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
style="height: 18px"
|
|
>
|
|
<div
|
|
:class="getProgressBarClass()"
|
|
:style="'width: ' + rsrpLTEPercentage + '%'"
|
|
>
|
|
<span
|
|
x-text="rsrpLTE + ' / ' + rsrpLTEPercentage + '%'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<span
|
|
x-show="rsrpLTEPercentage == '0'"
|
|
x-text="rsrpLTE"
|
|
></span>
|
|
<span x-show="rsrpLTE == '-'" class="fst-italic">
|
|
None
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">SS_RSRP<sup>5G</sup></th>
|
|
<td
|
|
class="gap-4 align-items-center"
|
|
x-data="{
|
|
getProgressBarClass: function() {
|
|
// Remove the percentage sign and convert to integer
|
|
var percentage = parseInt(this.rsrpNRPercentage);
|
|
|
|
if (percentage >= 60) {
|
|
return 'progress-bar bg-success is-medium';
|
|
} else if (percentage >= 40) {
|
|
return 'progress-bar bg-warning is-warning is-medium';
|
|
} else {
|
|
return 'progress-bar bg-danger is-medium';
|
|
}
|
|
}
|
|
}"
|
|
>
|
|
<div
|
|
x-show="rsrpNR != '-' && rsrpNRPercentage != '0'"
|
|
class="progress w-100"
|
|
role="progressbar"
|
|
aria-label="RSRP BAR"
|
|
:aria-valuenow="rsrpNRPercentage"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
style="height: 18px"
|
|
>
|
|
<div
|
|
:class="getProgressBarClass()"
|
|
:style="'width: ' + rsrpNRPercentage + '%'"
|
|
>
|
|
<span
|
|
x-text="rsrpNR + ' / ' + rsrpNRPercentage + '%'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<span
|
|
x-show="rsrpNRPercentage == '0'"
|
|
x-text="rsrpNR"
|
|
></span>
|
|
<span x-show="rsrpNR == '-'" class="fst-italic">
|
|
None
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">SINR<sup>4G</sup></th>
|
|
<td
|
|
class="gap-4 align-items-center"
|
|
x-data="{
|
|
getProgressBarClass: function() {
|
|
// Remove the percentage sign and convert to integer
|
|
var percentage = parseInt(this.sinrLTEPercentage);
|
|
|
|
if (percentage >= 60) {
|
|
return 'progress-bar bg-success is-medium';
|
|
} else if (percentage >= 40) {
|
|
return 'progress-bar bg-warning is-warning is-medium';
|
|
} else {
|
|
return 'progress-bar bg-danger is-medium';
|
|
}
|
|
}
|
|
}"
|
|
>
|
|
<div
|
|
x-show="sinrLTE != '-' && sinrLTEPercentage != '0'"
|
|
class="progress w-100"
|
|
role="progressbar"
|
|
aria-label="SINR BAR"
|
|
:aria-valuenow="sinrLTEPercentage"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
style="height: 18px"
|
|
>
|
|
<div
|
|
:class="getProgressBarClass()"
|
|
:style="'width: ' + sinrLTEPercentage +'%'"
|
|
>
|
|
<span
|
|
x-text="sinrLTE + ' / ' + sinrLTEPercentage +'%'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<span
|
|
x-text="sinrLTE"
|
|
x-show="sinrLTEPercentage == '0'"
|
|
></span>
|
|
<span x-show="sinrLTE == '-'" class="fst-italic">
|
|
None
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">SINR<sup>5G</sup></th>
|
|
<td
|
|
class="gap-4 align-items-center"
|
|
x-data="{
|
|
getProgressBarClass: function() {
|
|
// Remove the percentage sign and convert to integer
|
|
var percentage = parseInt(this.sinrNRPercentage);
|
|
|
|
if (percentage >= 60) {
|
|
return 'progress-bar bg-success is-medium';
|
|
} else if (percentage >= 40) {
|
|
return 'progress-bar bg-warning is-warning is-medium';
|
|
} else {
|
|
return 'progress-bar bg-danger is-medium';
|
|
}
|
|
}
|
|
}"
|
|
>
|
|
<div
|
|
x-show="sinrNR != '-' && sinrNRPercentage != '0'"
|
|
class="progress w-100"
|
|
role="progressbar"
|
|
aria-label="SINR BAR"
|
|
:aria-valuenow="sinrNRPercentage"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
style="height: 18px"
|
|
>
|
|
<div
|
|
:class="getProgressBarClass()"
|
|
:style="'width: ' + sinrNRPercentage +'%'"
|
|
>
|
|
<span
|
|
x-text="sinrNR + ' / ' + sinrNRPercentage +'%'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<span
|
|
x-text="sinrNR"
|
|
x-show="sinrNRPercentage == '0'"
|
|
></span>
|
|
<span x-show="sinrNR == '-'" class="fst-italic">
|
|
None
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="card-text">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div>
|
|
<p>Date Updated</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<p x-text="lastUpdate"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script src="js/dark-mode.js"></script>
|
|
|
|
<script>
|
|
function processAllInfos() {
|
|
return {
|
|
atcmd: "",
|
|
internetConnectionStatus: "Disconnected",
|
|
temperature: "0",
|
|
simStatus: "No SIM",
|
|
activeSim: "No SIM",
|
|
networkProvider: "N/A",
|
|
mccmnc: "00000",
|
|
apn: "Unknown",
|
|
networkMode: "Disconnected",
|
|
bands: "Unknown Bands",
|
|
bandwidth: "Unknown Bandwidth",
|
|
|
|
fetchAllInfo() {
|
|
this.atcmd =
|
|
'AT+QTEMP;+QUIMSLOT?;+QSPN;+CGCONTRDP=1;+QMAP="WWANIP";+QENG="servingcell";+QCAINFO;+QSIMSTAT?;+CSQ';
|
|
|
|
fetch(
|
|
"/cgi-bin/get_atcommand?" +
|
|
new URLSearchParams({
|
|
atcmd: this.atcmd,
|
|
})
|
|
).then((response) => {
|
|
response.text().then((data) => {
|
|
// content here
|
|
if (data.includes("ERROR")) {
|
|
console.log("Error fetching data");
|
|
this.activeSim = "Something went wrong.";
|
|
return;
|
|
} else {
|
|
const rawdata = data;
|
|
const lines = rawdata.split("\n");
|
|
|
|
// --- Temperature ---
|
|
// find this example value from lines "+QTEMP:"cpuss-0-usr","50"
|
|
this.temperature = lines
|
|
.find((line) => line.includes('+QTEMP:"cpuss-0-usr"'))
|
|
.split(",")[1]
|
|
.replace(/"/g, "");
|
|
|
|
// --- SIM Status ---
|
|
// find this example value from lines "+QSIMSTAT: 0,1"
|
|
// Only get the last digit of 0,1
|
|
const sim_status = lines
|
|
.find((line) => line.includes("+QSIMSTAT:"))
|
|
.split(" ")[1]
|
|
.replace(/"/g, "")
|
|
.split(",")[1];
|
|
|
|
if (sim_status == 1) {
|
|
this.simStatus = "SIM Inserted";
|
|
} else if (sim_status == 0) {
|
|
this.simStatus = "No SIM";
|
|
}
|
|
|
|
// --- Active SIM ---
|
|
// find this example value from lines "+QUIMSLOT: 1"
|
|
const current_sim = lines
|
|
.find((line) => line.includes("+QUIMSLOT:"))
|
|
.split(" ")[1]
|
|
.replace(/"/g, "");
|
|
|
|
if (current_sim == 1) {
|
|
this.activeSim = "SIM 1";
|
|
} else if (current_sim == 2) {
|
|
this.activeSim = "SIM 2";
|
|
} else {
|
|
this.activeSim = "No SIM";
|
|
}
|
|
|
|
// --- Network Provider ---
|
|
// find this example value from lines "+QSPN: \"515 66\",\"515 66\",\"DITO\",0,\"51566\""
|
|
// remove any spaces
|
|
const network_provider = lines
|
|
.find((line) => line.includes("+QSPN:"))
|
|
.split(",")[0]
|
|
.replace("+QSPN: ", "")
|
|
.replace(/"/g, "")
|
|
.replace(/ /g, "");
|
|
|
|
// if network provider is composed of numbers and spaces, and no letters then use .split(",")[2]
|
|
if (network_provider.match(/^[0-9]+$/) != null) {
|
|
this.networkProvider = lines
|
|
.find((line) => line.includes("+QSPN:"))
|
|
.split(",")[2]
|
|
.replace(/"/g, "");
|
|
} else {
|
|
this.networkProvider = network_provider;
|
|
}
|
|
|
|
// --- MCCMNC ---
|
|
this.mccmnc = lines
|
|
.find((line) => line.includes("+QSPN:"))
|
|
.split(",")[4]
|
|
.replace(/"/g, "");
|
|
|
|
// --- APN ---
|
|
// find this example value from lines "+CGCONTRDP: 1,0,\"internet.dito.ph\",\"100.65.141.236\",\"36.5.141.64.76.204.39.68.23.210.251.16.49.239.42.149\", \"254.128.0.0.0.0.0.0.0.0.0.0.0.0.0.1\",\"131.226.72.19\",\"131.226.73.19\"\r"
|
|
this.apn = lines
|
|
.find((line) => line.includes("+CGCONTRDP:"))
|
|
.split(",")[2]
|
|
.replace(/"/g, "");
|
|
|
|
// --- Network Mode ---
|
|
// find this example value from lines "+QENG: \"servingcell\",\"NOCONN\",\"NR5G-SA\",\"TDD\",515,66,7000C4001,475,702000,620640,78,12,-83,-3,16,1,-\r"
|
|
|
|
// Use a try and except
|
|
try {
|
|
const network_mode = lines
|
|
.find((line) => line.includes("+QENG:"))
|
|
.split(",")[2]
|
|
.replace(/"/g, "");
|
|
|
|
if (network_mode == "NR5G-SA") {
|
|
this.networkMode = "5G Standalone";
|
|
}
|
|
} catch (error) {
|
|
// find this example value from lines "+QENG: \"LTE\",\"FDD\",515,03,22AE76D,398,1350,3,4,4,BF82,-110,-13,-78,10,6,200,-\r"
|
|
|
|
const network_mode_lte = lines
|
|
.find((line) => line.includes("+QENG:"))
|
|
.split(",")[1]
|
|
.replace(/"/g, "");
|
|
|
|
try {
|
|
// find this example value from lines "+QENG: \"NR5G-NSA\",515,03,843,-95,20,-11,528030,41,8,1\r"
|
|
const network_mode_5g = lines
|
|
.find((line) => line.includes("+QENG:"))
|
|
.split(",")[0]
|
|
.replace("+QENG: ", "")
|
|
.replace(/"/g, "");
|
|
|
|
if (network_mode_5g == "NR5G-NSA") {
|
|
this.networkMode = "5G Non-Standalone";
|
|
}
|
|
} catch (error) {
|
|
if (network_mode_lte == "FDD") {
|
|
this.networkMode = "4G LTE FDD";
|
|
} else if (network_mode_lte == "TDD") {
|
|
this.networkMode = "4G LTE TDD";
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Bands ---
|
|
// Get all the values with LTE BAND n (for example, LTE BAND 3, LTE BAND 1) and then store them in an array
|
|
const bands = lines.filter((line) =>
|
|
line.includes("LTE BAND")
|
|
);
|
|
|
|
// since it includes the whole line, we need to extract the band part only
|
|
for (let i = 0; i < bands.length; i++) {
|
|
bands[i] = bands[i].split(",")[3].replace(/"/g, "");
|
|
}
|
|
|
|
// Get all the values with NR BAND n (for example, NR BAND 3, NR BAND 1) and then store them in an array
|
|
const bands_5g = lines.filter((line) =>
|
|
line.includes("NR5G BAND")
|
|
);
|
|
|
|
// since it includes the whole line, we need to extract the band number only
|
|
for (let i = 0; i < bands_5g.length; i++) {
|
|
bands_5g[i] = bands_5g[i].split(",")[3].replace(/"/g, "");
|
|
}
|
|
|
|
// Combine the bands and bands_5g arrays seperated by a comma. however, bands or bands_5g can be empty
|
|
if (bands.length > 0 && bands_5g.length > 0) {
|
|
this.bands = bands.join(", ") + ", " + bands_5g.join(", ");
|
|
} else if (bands.length > 0) {
|
|
this.bands = bands.join(", ");
|
|
} else if (bands_5g.length > 0) {
|
|
this.bands = bands_5g.join(", ");
|
|
} else {
|
|
this.bands = "No Bands";
|
|
}
|
|
|
|
// --- Bandwidth ---
|
|
if (this.networkMode == "5G Standalone") {
|
|
// find this example value from lines "+QENG: \"servingcell\"
|
|
const bandwidth_line = lines.find((line) =>
|
|
line.includes("+QENG: \"servingcell\"")
|
|
);
|
|
|
|
console.log(bandwidth_line);
|
|
const nr_bw = bandwidth_line.split(",")[11];
|
|
const calculated_bandwidth = this.calculate_nr_bw(nr_bw);
|
|
this.bandwidth = "NR " + calculated_bandwidth + " MHz";
|
|
} else if (
|
|
this.networkMode == "4G LTE FDD" ||
|
|
this.networkMode == "4G LTE TDD"
|
|
) {
|
|
// find this example value from lines "+QENG: \"servingcell\"
|
|
const bandwidth_line = lines.find((line) =>
|
|
line.includes("+QENG: \"servingcell\"")
|
|
);
|
|
|
|
const lte_bw_ul = bandwidth_line.split(",")[10];
|
|
const lte_bw_dl = bandwidth_line.split(",")[11];
|
|
const calculated_bandwidth_ul = this.calculate_lte_bw(lte_bw_ul);
|
|
const calculated_bandwidth_dl = this.calculate_lte_bw(lte_bw_dl);
|
|
this.bandwidth = calculated_bandwidth_ul + " / " + calculated_bandwidth_dl + " MHz";
|
|
} else if (this.networkMode == "5G Non-Standalone") {
|
|
// find this example value from lines "+QENG: \"LTE\" for LTE
|
|
const lte_bandwidth_line = lines.find((line) =>
|
|
line.includes("+QENG: \"LTE\"")
|
|
);
|
|
|
|
const lte_bw_ul = lte_bandwidth_line.split(",")[8];
|
|
const lte_bw_dl = lte_bandwidth_line.split(",")[9];
|
|
|
|
const calculated_bandwidth_ul = this.calculate_lte_bw(lte_bw_ul);
|
|
const calculated_bandwidth_dl = this.calculate_lte_bw(lte_bw_dl);
|
|
|
|
|
|
|
|
const nr_bw = bandwidth_line.split(",")[9];
|
|
const calculated_bandwidth = this.calculate_nr_bw(nr_bw);
|
|
|
|
// combine the bandwidths
|
|
this.bandwidth = "NR " + calculated_bandwidth + " MHz, " + calculated_bandwidth_ul + " / " + calculated_bandwidth_dl + " MHz";
|
|
} else {
|
|
this.bandwidth = "Unknown Bandwidth";
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
requestPing() {
|
|
return fetch("/cgi-bin/get_ping")
|
|
.then((response) => response.text())
|
|
.then((data) => {
|
|
return data;
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
// Throw the error again to ensure it's propagated
|
|
throw error;
|
|
});
|
|
},
|
|
|
|
calculate_lte_bw(lte_bw) {
|
|
switch (true) {
|
|
case 0:
|
|
return 1.4;
|
|
case 1:
|
|
return 3;
|
|
// Now case 2 - 5
|
|
case lte_bw >= 2 && lte_bw <= 5:
|
|
return (lte_bw - 1) * 5;
|
|
default:
|
|
return "Unknown";
|
|
}
|
|
},
|
|
|
|
calculate_nr_bw(nr_bw) {
|
|
switch (true) {
|
|
case nr_bw >= 0 && nr_bw <= 5:
|
|
return (nr_bw + 1) * 5;
|
|
case nr_bw >= 6 && nr_bw <= 12:
|
|
return (nr_bw - 2) * 10;
|
|
case nr_bw === 13:
|
|
return "200";
|
|
case nr_bw === 14:
|
|
return "400";
|
|
default:
|
|
return "Unknown";
|
|
}
|
|
},
|
|
|
|
init() {
|
|
this.fetchAllInfo();
|
|
|
|
this.requestPing()
|
|
.then((data) => {
|
|
const response = data.trim();
|
|
// Trim any leading/trailing spaces
|
|
if (response === "OK") {
|
|
this.internetConnectionStatus = "Connected";
|
|
} else {
|
|
this.internetConnectionStatus = "Disconnected";
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
this.internetConnectionStatus = "Disconnected";
|
|
});
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|