更新 simpleadmin/www/network.html

This commit is contained in:
taotao 2024-10-15 12:49:36 +00:00
parent 695f1a3b6d
commit eaeafedfe7

View File

@ -1,146 +1,125 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-bs-theme="light"> <html data-bs-theme="light"
lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta content="width=device-width, initial-scale=1"
<title>模块管理</title> name="viewport">
<!-- <link <title>模块管理</title><!-- <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous" crossorigin="anonymous"
/> --> /> -->
<!-- Import all the bootstrap css files from css folder --> <!-- Import all the bootstrap css files from css folder -->
<link rel="stylesheet" href="css/styles.css" /> <link href="css/styles.css"
<link rel="stylesheet" href="css/bootstrap.min.css" /> rel="stylesheet">
<link href="css/bootstrap.min.css"
rel="stylesheet"><!-- Logo -->
<link href="favicon.ico"
rel="simpleadmin-logo"><!-- Import BootStrap Javascript -->
<!-- Logo -->
<link rel="simpleadmin-logo" href="favicon.ico" />
<!-- Import BootStrap Javascript -->
<script src="js/bootstrap.bundle.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script>
<script src="js/alpinejs.min.js" defer></script> <script defer
src="js/alpinejs.min.js"></script>
</head> </head>
<body> <body>
<main> <main>
<div class="container my-4" x-data="cellLocking()"> <div class="container my-4"
x-data="cellLocking()">
<nav class="navbar navbar-expand-lg mt-2"> <nav class="navbar navbar-expand-lg mt-2">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="/" <a class="navbar-brand"
><span class="mb-0 h4 fw-bold">模块管理</span></a> href="/"><span class="mb-0 h4 fw-bold">模块管理</span></a>
<button <div class="collapse navbar-collapse"
class="navbar-toggler" id="navbarText">
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"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/">首页</a> <a class="nav-link"
href="/">首页</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a <a aria-current="page"
class="nav-link active" class="nav-link active"
href="network.html" href="network.html">网络</a>
aria-current="page"
>网络</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/scanner.html">扫描</a> <a class="nav-link"
href="/scanner.html">扫描</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/settings.html">设置</a> <a class="nav-link"
href="/settings.html">设置</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/sms.html">短信</a> <a class="nav-link"
href="/sms.html">短信</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/console">控制台</a> <a class="nav-link"
href="/console">控制台</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="deviceinfo.html" <a class="nav-link"
>设备信息</a href="deviceinfo.html">设备信息</a>
>
</li> </li>
</ul> </ul><span class="navbar-text"><button class="btn btn-link text-reset"
<span class="navbar-text"> id="darkModeToggle"><span class="navbar-text">Dark Mode</span></button></span>
<button class="btn btn-link text-reset" id="darkModeToggle">
Dark Mode
</button>
</span>
</div> </div>
</div> </div>
</nav> </nav>
<div class="row mt-5 gap-3"> <div class="row mt-5 gap-3">
<div class="col"> <div class="col">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col">频段锁定</div> <div class="col">
频段锁定
</div>
<div class="col-md-3"> <div class="col-md-3">
<select <select aria-label="LTE"
class="form-select" class="form-select"
id="networkModeBand" id="networkModeBand">
aria-label="LTE" <option selected
> value="LTE">
<option selected value="LTE">LTE</option> LTE
<option value="NSA">NR5G-NSA</option> </option>
<option value="SA">NR5G-SA</option> <option value="NSA">
NR5G-NSA
</option>
<option value="SA">
NR5G-SA
</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<h5 class="card-subtitle" x-show="isGettingBands === true"> <h5 class="card-subtitle"
获取支持的频段... style="display: none;"
</h5> x-show="isGettingBands === true">Fetching supported bands...</h5>
<form id="checkboxForm" x-show="isGettingBands === false"> <form id="checkboxForm"
name="checkboxForm"
x-show="isGettingBands === false">
<!-- Checkboxes will be populated here --> <!-- Checkboxes will be populated here -->
</form> </form>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="col"> <div class="col">
<button <button class="btn btn-primary m-2"
type="button" type="button">锁频段</button> <button class="btn btn-info m-2"
class="btn btn-primary m-2"
@click="lockSelectedBands()"
>
锁频段
</button>
<button
type="button"
class="btn btn-info m-2"
id="uncheckAll" id="uncheckAll"
> type="button">取消勾选</button> <button class="btn btn-danger m-2"
取消勾选 type="button">复位</button>
</button>
<button
type="button"
class="btn btn-danger m-2"
@click="resetBandLocking()"
>
复位
</button>
</div> </div>
<div class="form-check"> <div class="form-check">
<input <input class="form-check-input"
class="form-check-input"
type="checkbox"
value=""
id="providerBands" id="providerBands"
onchange="saveCheckboxState()" onchange="saveCheckboxState()"
/> type="checkbox"
<label class="form-check-label" for="providerBands"> value=""> <label class="form-check-label"
显示支持的频段 for="providerBands">显示支持的频段</label>
</label>
</div> </div>
</div> </div>
</div> </div>
@ -150,271 +129,242 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row gap-3 mt-4"> <div class="row gap-3 mt-4">
<div class="col"> <div class="col">
<form> <form>
<div class="card"> <div class="card">
<div class="card-header">网络工具</div> <div class="card-header">
网络工具
</div>
<div class="card-body row"> <div class="card-body row">
<div class="col"> <div class="col">
<div class="mb-4"> <div class="mb-4">
<label for="APN" class="form-label">APN</label> <label class="form-label"
<input for="APN">APN</label> <input aria-describedby="APN"
type="text"
class="form-control" class="form-control"
id="APN" id="APN"
x-model="newApn" placeholder="Fetching..."
aria-describedby="APN" type="text"
x-bind:placeholder="apn === '-' ? 'Fetching...' : apn" x-bind:placeholder="apn === '-' ? 'Fetching...' : apn"
/> x-model="newApn">
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label for="ipForAPN" class="form-label" <label class="form-label"
>选择APN类型</label for="ipForAPN">选择APN类型</label> <select aria-label="ipForAPN"
>
<select
class="form-select" class="form-select"
id="ipAPN" id="ipAPN"
x-model="newApnIP" x-model="newApnIP">
aria-label="ipForAPN" <option selected
> x-text="apnIP === '-' ? 'Fetching...' : 'Current: ' + apnIP">
<option Fetching...
selected </option>
x-text="apnIP === '-' ? 'Fetching...' : 'Current: ' + apnIP" <option value="1">
></option> IPv4 Only
<option value="1">IPv4 Only</option> </option>
<option value="2">IPv6 Only</option> <option value="2">
<option value="3">IPv4v6</option> IPv6 Only
<option value="4">P2P Protocol</option> </option>
<option value="3">
IPv4v6
</option>
<option value="4">
P2P Protocol
</option>
</select> </select>
</div> </div>
<div class="mb-4 input-group grid gap-3"> <div class="mb-4 input-group grid gap-3">
<label for="SIM1" class="form-label"> 更改SIM卡</label> <label class="form-label"
for="SIM1">更改SIM卡</label>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<style> .form-check-inline { <style>
.form-check-inline {
display: inline-flex; /* 确保选项在同一行 */ display: inline-flex; /* 确保选项在同一行 */
align-items: center; /* 垂直居中对齐 */ align-items: center; /* 垂直居中对齐 */
margin-right: 15px; /* 添加间距 */ } margin-right: 15px; /* 添加间距 */ }
</style> </style><input aria-describedby="SIM1"
<input
class="form-check-input" class="form-check-input"
type="radio"
name="inlineRadioOptions"
aria-describedby="SIM1"
id="SIM1" id="SIM1"
name="inlineRadioOptions"
type="radio"
value="option1" value="option1"
x-bind:checked="sim === '1'" x-bind:checked="sim === '1'"
x-on:click="newSim = '1'" x-on:click="newSim = '1'"> <label class="form-check-label"
/> for="inlineRadio1">1</label>
<label class="form-check-label" for="inlineRadio1"
>1</label
>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input <input aria-describedby="SIM2"
class="form-check-input" class="form-check-input"
type="radio"
name="inlineRadioOptions"
aria-describedby="SIM2"
id="SIM2" id="SIM2"
name="inlineRadioOptions"
type="radio"
value="option2" value="option2"
x-bind:checked="sim === '2'" x-bind:checked="sim === '2'"
x-on:click="newSim = '2'" x-on:click="newSim = '2'"> <label class="form-check-label"
/> for="inlineRadio2">2</label>
<label class="form-check-label" for="inlineRadio2"
>2</label
>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="mb-4"> <div class="mb-4">
<label for="nrModeControl" class="form-label" <label class="form-label"
>选择网络模式</label for="nrModeControl">选择网络模式</label> <select aria-label="prefNetworkMode"
>
<select
class="form-select" class="form-select"
id="prefNetworkMode" id="prefNetworkMode"
x-model="prefNetworkMode" x-model="prefNetworkMode">
aria-label="prefNetworkMode" <option selected
> x-text="prefNetwork === '-' ? 'Fetching...' : 'Current: ' + prefNetwork">
<option Fetching...
selected </option>
x-text="prefNetwork === '-' ? 'Fetching...' : 'Current: ' + prefNetwork" <option value="AUTO">
></option> AUTO
<option value="AUTO">AUTO</option> </option>
<option value="LTE">LTE Only</option> <option value="LTE">
<option value="LTE:NR5G">NR5G-NSA</option> LTE Only
<option value="NR5G">NR5G-SA</option> </option>
<option value="LTE:NR5G">
NR5G-NSA
</option>
<option value="NR5G">
NR5G-SA
</option>
</select> </select>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label for="prefNetwork" class="form-label" <label class="form-label"
>5G模式控制</label for="prefNetwork">5G模式控制</label> <select aria-label="nrModeControl"
>
<select
class="form-select" class="form-select"
id="nrModeControl" id="nrModeControl"
x-model="nrModeControl" x-model="nrModeControl">
aria-label="nrModeControl" <option selected
> x-text="nrModeControl === '-' ? 'Fetching...' : 'Current: ' + nrModeControl">
<option Fetching...
selected </option>
x-text="nrModeControl === '-' ? 'Fetching...' : 'Current: ' + nrModeControl" <option value="0">
></option> Enable All
<option value="0">Enable All</option> </option>
<option value="2">Disable NR5G-NSA</option> <option value="2">
<option value="1">Disable NR5G-SA</option> Disable NR5G-NSA
</option>
<option value="1">
Disable NR5G-SA
</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<button <button class="btn btn-primary"
type="button" type="button">保存</button>
class="btn btn-primary"
@click="saveChanges()"
>
保存
</button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card"> <div class="card">
<div class="card-header">频段锁定</div> <div class="card-header">
频段锁定
</div>
<div class="card-body"> <div class="card-body">
<select <select aria-label="LTE"
class="form-select" class="form-select"
id="networkModeCell" id="networkModeCell"
x-model="networkModeCell" x-model="networkModeCell">
aria-label="LTE" <option selected
> x-text="cellLockStatus">
<option Unknown
selected </option>
x-text="'Cell Lock: ' + cellLockStatus" <option>
></option> LTE
<option>LTE</option> </option>
<option>NR5G-SA</option> <option>
<option>Unlock LTE</option> NR5G-SA
<option>Unlock NR5G-SA</option> </option>
<option>
Unlock LTE
</option>
<option>
Unlock NR5G-SA
</option>
</select> </select>
<div class="my-4"> <div class="my-4">
<!-- For LTE --> <!-- For LTE -->
<div id="lteElementsCell" x-show="networkModeCell == 'LTE'"> <div id="lteElementsCell"
style="display: none;"
x-show="networkModeCell == 'LTE'">
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1" <span class="input-group-text"
>Num Cells</span id="basic-addon1">Num Cells</span> <input aria-describedby="basic-addon1"
>
<input
type="number"
class="form-control"
placeholder="1-10"
min="1"
max="10"
aria-label="NumCells" aria-label="NumCells"
aria-describedby="basic-addon1" class="form-control"
x-model="cellNum" max="10"
/> min="1"
placeholder="1-10"
type="number"
x-model="cellNum">
</div> </div>
</div> </div>
<div id="freqNumbersContainer"> <div id="freqNumbersContainer">
<!-- Generate EARFCN and PCI here --> <!-- Generate EARFCN and PCI here -->
</div> </div><!-- For SA -->
<div id="saElementsCell"
<!-- For SA --> style="display: none;"
<div x-show="networkModeCell == 'NR5G-SA'">
id="saElementsCell" <div class="input-group mb-3"
x-show="networkModeCell == 'NR5G-SA'" style="display: none;"
> x-show="networkModeCell == 'NR5G-SA'">
<div <input aria-label="EARFCN"
class="input-group mb-3" class="form-control"
x-show="networkModeCell == 'NR5G-SA'"
>
<input
type="text"
aria-label="EARFCN"
placeholder="EARFCN" placeholder="EARFCN"
class="form-control"
x-model="earfcn1"
/>
<input
type="text" type="text"
aria-label="PCI" x-model="earfcn1"> <input aria-label="PCI"
class="form-control"
placeholder="PCI" placeholder="PCI"
class="form-control"
x-model="pci1"
/>
</div>
<div
class="input-group mb-3"
x-show="networkModeCell == 'NR5G-SA'"
>
<select
class="form-select"
x-model="scs"
aria-label="SCS"
>
<option selected>30</option>
<option>15</option>
<option>60</option>
<option>120</option>
<option>240</option>
</select>
<input
type="text" type="text"
aria-label="band" x-model="pci1">
placeholder="Band" </div>
<div class="input-group mb-3"
style="display: none;"
x-show="networkModeCell == 'NR5G-SA'">
<select aria-label="SCS"
class="form-select"
x-model="scs">
<option selected>
SCS
</option>
<option>
15
</option>
<option>
30
</option>
<option>
60
</option>
<option>
120
</option>
<option>
240
</option>
</select> <input aria-label="band"
class="form-control" class="form-control"
x-model="band" placeholder="Band"
/> type="text"
x-model="band">
</div> </div>
</div> </div><button class="btn btn-primary"
style="display: none;"
<button
type="button" type="button"
class="btn btn-primary" x-show="networkModeCell == 'LTE'">Lock LTE Cells</button> <button class="btn btn-primary"
x-show="networkModeCell == 'LTE'" style="display: none;"
@click="cellLockEnableLTE()"
>
Lock LTE Cells
</button>
<button
type="button" type="button"
class="btn btn-primary" x-show="networkModeCell == 'NR5G-SA'">Lock NR5G-SA Cells</button> <button class="btn btn-danger"
x-show="networkModeCell == 'NR5G-SA'" style="display: none;"
@click="cellLockEnableNR()"
>
Lock NR5G-SA Cells
</button>
<button
type="button" type="button"
class="btn btn-danger" x-show="networkModeCell == 'Unlock LTE'">Unlock LTE Cells</button> <button class="btn btn-danger"
x-show="networkModeCell == 'Unlock LTE'" style="display: none;"
@click="cellLockDisableLTE()"
>
Unlock LTE Cells
</button>
<button
type="button" type="button"
class="btn btn-danger" x-show="networkModeCell == 'Unlock NR5G-SA'">Unlock NR5G-SA Cells</button>
x-show="networkModeCell == 'Unlock NR5G-SA'"
@click="cellLockDisableNR()"
>
Unlock NR5G-SA Cells
</button>
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
@ -422,33 +372,28 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div><!-- Loading Modal for Locking Band -->
<!-- Loading Modal for Locking Band --> <div class="modal-overlay"
<div class="modal-overlay" x-show="showModal"> style="display: none;"
x-show="showModal">
<div class="loading-modal"> <div class="loading-modal">
<div class="loader"></div> <div class="loader"></div>
<div <div class="loading-text"
class="loading-text" style="display: flex; flex-direction: column">
style="display: flex; flex-direction: column"
>
<h3>Initializing Network...</h3> <h3>Initializing Network...</h3>
<p style="margin-top: 0.5rem"> <p style="margin-top: 0.5rem">Please wait for <span style="font-weight: 500"
Please wait for x-text="countdown">0</span> seconds.</p>
<span x-text="countdown" style="font-weight: 500"></span>
seconds.
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</main> </main><!-- Import Band Locking GUI JS -->
<!-- Import Band Locking GUI JS -->
<!-- <script src="js/band-locking.js"></script> --> <!-- <script src="js/band-locking.js"></script> -->
<script src="js/generate-freq-box.js"></script> <script src="js/generate-freq-box.js"></script>
<script src="js/populate-checkbox.js"></script> <script src="js/populate-checkbox.js"></script>
<script src="js/parse-settings.js"></script> <script src="js/parse-settings.js"></script>
<script> <script>
function cellLocking() { function cellLocking() {
return { return {
isLoading: false, isLoading: false,
@ -735,7 +680,7 @@
if (newApn !== null) { if (newApn !== null) {
if (this.newApnIP === "1") { if (this.newApnIP === "1") {
atAPN = `+CGDCONT=1,"IPV4","${newApn}";`; atAPN = `+CGDCONT=1,"IP","${newApn}";`;
} else if (this.newApnIP === "2") { } else if (this.newApnIP === "2") {
atAPN = `+CGDCONT=1,"IPV6","${newApn}";`; atAPN = `+CGDCONT=1,"IPV6","${newApn}";`;
} else if (this.newApnIP === "3") { } else if (this.newApnIP === "3") {
@ -798,7 +743,7 @@
} }
}, 1000); }, 1000);
} else { } else {
alert("No changes made"); alert("No changes made!");
} }
}, },
cellLockEnableLTE() { cellLockEnableLTE() {
@ -870,7 +815,7 @@
} }
// Construct the AT command using the valid pairs // Construct the AT command using the valid pairs
let atcmd = `AT+QNWLOCK="common/5g",${earfcn},${pci},${scs},${band}`; let atcmd = `AT+QNWLOCK="common/5g",${pci},${earfcn},${scs},${band}`;
// Mock data // Mock data
this.showModal = true; this.showModal = true;
@ -905,7 +850,7 @@
}, },
cellLockDisableNR() { cellLockDisableNR() {
// Send the atcmd command to reset the locked bands // Send the atcmd command to reset the locked bands
const atcmd = 'AT+QNWLOCK="common/5g,0"'; const atcmd = 'AT+QNWLOCK="common/5g",0';
this.showModal = true; this.showModal = true;