更新 simpleadmin/www/network.html

This commit is contained in:
taotao 2024-10-15 13:16:27 +00:00
parent 570c9cebe4
commit 50e0daecf7

View File

@ -1,396 +1,455 @@
<!DOCTYPE html>
<html data-bs-theme="light"
lang="en">
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1"
name="viewport">
<title>模块管理</title><!-- <link
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>模块管理</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 href="css/styles.css"
rel="stylesheet">
<link href="css/bootstrap.min.css"
rel="stylesheet"><!-- Logo -->
<link href="favicon.ico"
rel="simpleadmin-logo"><!-- Import BootStrap Javascript -->
<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 defer
src="js/alpinejs.min.js"></script>
<script src="js/alpinejs.min.js" defer></script>
</head>
<body>
<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">
<div class="container-fluid">
<a class="navbar-brand"
href="/"><span class="mb-0 h4 fw-bold">模块管理</span></a>
<div class="collapse navbar-collapse"
id="navbarText">
<a class="navbar-brand" href="/"
><span class="mb-0 h4 fw-bold">模块管理</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"
href="/">首页</a>
<a class="nav-link" href="/">首页</a>
</li>
<li class="nav-item">
<a aria-current="page"
<a
class="nav-link active"
href="network.html">网络</a>
href="network.html"
aria-current="page"
>网络</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/scanner.html">扫描</a>
<a class="nav-link" href="/scanner.html">扫描</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/settings.html">设置</a>
<a class="nav-link" href="/settings.html">设置</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/sms.html">短信</a>
<a class="nav-link" href="/sms.html">短信</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="/console">控制台</a>
<a class="nav-link" href="/console">控制台</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="deviceinfo.html">设备信息</a>
<a class="nav-link" href="deviceinfo.html"
>设备信息</a
>
</li>
</ul><span class="navbar-text"><button class="btn btn-link text-reset"
id="darkModeToggle"><span class="navbar-text">Dark Mode</span></button></span>
</ul>
<span class="navbar-text">
<button class="btn btn-link text-reset" id="darkModeToggle">
Dark Mode
</button>
</span>
</div>
</div>
</nav>
<div class="row mt-5 gap-3">
<div class="col">
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col">
频段锁定
</div>
<div class="col">频段锁定</div>
<div class="col-md-3">
<select aria-label="LTE"
<select
class="form-select"
id="networkModeBand">
<option selected
value="LTE">
LTE
</option>
<option value="NSA">
NR5G-NSA
</option>
<option value="SA">
NR5G-SA
</option>
id="networkModeBand"
aria-label="LTE"
>
<option selected value="LTE">LTE</option>
<option value="NSA">NR5G-NSA</option>
<option value="SA">NR5G-SA</option>
</select>
</div>
</div>
</div>
<div class="card-body">
<h5 class="card-subtitle"
style="display: none;"
x-show="isGettingBands === true">Fetching supported bands...</h5>
<form id="checkboxForm"
name="checkboxForm"
x-show="isGettingBands === false">
<h5 class="card-subtitle" x-show="isGettingBands === true">
获取支持的频段...
</h5>
<form id="checkboxForm" x-show="isGettingBands === false">
<!-- Checkboxes will be populated here -->
</form>
</div>
<div class="card-footer">
<div class="d-flex align-items-center">
<div class="col">
<button class="btn btn-primary m-2"
type="button">锁频段</button> <button class="btn btn-info m-2"
<button
type="button"
class="btn btn-primary m-2"
@click="lockSelectedBands()"
>
锁频段
</button>
<button
type="button"
class="btn btn-info m-2"
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 class="form-check">
<input class="form-check-input"
<input
class="form-check-input"
type="checkbox"
value=""
id="providerBands"
onchange="saveCheckboxState()"
type="checkbox"
value=""> <label class="form-check-label"
for="providerBands">显示支持的频段</label>
/>
<label class="form-check-label" for="providerBands">
显示支持的频段
</label>
</div>
</div>
</div>
<div class="card-footer">
<p x-text="'当前使用频段: ' + bands">当前使用频段: Fetching Bands...</p>
<p x-text="'激活的频段: ' + bands"></p>
</div>
</div>
</div>
</div>
<div class="row gap-3 mt-4">
<div class="col">
<form>
<div class="card">
<div class="card-header">
联网设置
</div>
<div class="card-header">网络工具</div>
<div class="card-body row">
<div class="col">
<div class="mb-4">
<label class="form-label"
for="APN">APN</label> <input aria-describedby="APN"
<label for="APN" class="form-label">APN</label>
<input
type="text"
class="form-control"
id="APN"
placeholder="Fetching..."
type="text"
x-model="newApn"
aria-describedby="APN"
x-bind:placeholder="apn === '-' ? 'Fetching...' : apn"
x-model="newApn">
/>
</div>
<div class="mb-4">
<label class="form-label"
for="ipForAPN">选择APN类型</label> <select aria-label="ipForAPN"
<label for="ipForAPN" class="form-label"
>选择APN类型</label
>
<select
class="form-select"
id="ipAPN"
x-model="newApnIP">
<option selected
x-text="apnIP === '-' ? 'Fetching...' : 'Current: ' + apnIP">
Fetching...
</option>
<option value="1">
IPv4 Only
</option>
<option value="2">
IPv6 Only
</option>
<option value="3">
IPv4v6
</option>
<option value="4">
P2P Protocol
</option>
x-model="newApnIP"
aria-label="ipForAPN"
>
<option
selected
x-text="apnIP === '-' ? 'Fetching...' : 'Current: ' + apnIP"
></option>
<option value="1">IPv4 Only</option>
<option value="2">IPv6 Only</option>
<option value="3">IPv4v6</option>
<option value="4">P2P Protocol</option>
</select>
</div>
<div class="mb-4 input-group grid gap-3">
<label class="form-label"
for="SIM1">更改SIM卡</label>
<label for="SIM1" class="form-label"> 更改SIM卡</label>
<div class="form-check form-check-inline">
<style>
.form-check-inline {
<style> .form-check-inline {
display: inline-flex; /* 确保选项在同一行 */
align-items: center; /* 垂直居中对齐 */
margin-right: 15px; /* 添加间距 */ }
</style><input aria-describedby="SIM1"
</style>
<input
class="form-check-input"
id="SIM1"
name="inlineRadioOptions"
type="radio"
name="inlineRadioOptions"
aria-describedby="SIM1"
id="SIM1"
value="option1"
x-bind:checked="sim === '1'"
x-on:click="newSim = '1'"> <label class="form-check-label"
for="inlineRadio1">1</label>
x-on:click="newSim = '1'"
/>
<label class="form-check-label" for="inlineRadio1"
>1</label
>
</div>
<div class="form-check form-check-inline">
<input aria-describedby="SIM2"
<input
class="form-check-input"
id="SIM2"
name="inlineRadioOptions"
type="radio"
name="inlineRadioOptions"
aria-describedby="SIM2"
id="SIM2"
value="option2"
x-bind:checked="sim === '2'"
x-on:click="newSim = '2'"> <label class="form-check-label"
for="inlineRadio2">2</label>
x-on:click="newSim = '2'"
/>
<label class="form-check-label" for="inlineRadio2"
>2</label
>
</div>
</div>
</div>
<div class="col">
<div class="mb-4">
<label class="form-label"
for="nrModeControl">选择网络模式</label> <select aria-label="prefNetworkMode"
<label for="nrModeControl" class="form-label"
>选择网络模式</label
>
<select
class="form-select"
id="prefNetworkMode"
x-model="prefNetworkMode">
<option selected
x-text="prefNetwork === '-' ? 'Fetching...' : 'Current: ' + prefNetwork">
Fetching...
</option>
<option value="AUTO">
AUTO
</option>
<option value="LTE">
LTE Only
</option>
<option value="LTE:NR5G">
NR5G-NSA
</option>
<option value="NR5G">
NR5G-SA
</option>
x-model="prefNetworkMode"
aria-label="prefNetworkMode"
>
<option
selected
x-text="prefNetwork === '-' ? 'Fetching...' : 'Current: ' + prefNetwork"
></option>
<option value="AUTO">AUTO</option>
<option value="LTE">LTE Only</option>
<option value="LTE:NR5G">NR5G-NSA</option>
<option value="NR5G">NR5G-SA</option>
</select>
</div>
<div class="mb-4">
<label class="form-label"
for="prefNetwork">5G模式控制</label> <select aria-label="nrModeControl"
<label for="prefNetwork" class="form-label"
>5G模式控制</label
>
<select
class="form-select"
id="nrModeControl"
x-model="nrModeControl">
<option selected
x-text="nrModeControl === '-' ? 'Fetching...' : 'Current: ' + nrModeControl">
Fetching...
</option>
<option value="0">
Enable All
</option>
<option value="2">
Disable NR5G-NSA
</option>
<option value="1">
Disable NR5G-SA
</option>
x-model="nrModeControl"
aria-label="nrModeControl"
>
<option
selected
x-text="nrModeControl === '-' ? 'Fetching...' : 'Current: ' + nrModeControl"
></option>
<option value="0">Enable All</option>
<option value="2">Disable NR5G-NSA</option>
<option value="1">Disable NR5G-SA</option>
</select>
</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-primary"
type="button">保存</button>
<button
type="button"
class="btn btn-primary"
@click="saveChanges()"
>
保存
</button>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
锁基站
</div>
<div class="card-header">频段锁定</div>
<div class="card-body">
<select aria-label="LTE"
<select
class="form-select"
id="networkModeCell"
x-model="networkModeCell">
<option selected
x-text="cellLockStatus">
Unknown
</option>
<option>
LTE
</option>
<option>
NR5G-SA
</option>
<option>
Unlock LTE
</option>
<option>
Unlock NR5G-SA
</option>
x-model="networkModeCell"
aria-label="LTE"
>
<option
selected
x-text="'Cell Lock: ' + cellLockStatus"
></option>
<option>LTE</option>
<option>NR5G-SA</option>
<option>Unlock LTE</option>
<option>Unlock NR5G-SA</option>
</select>
<div class="my-4">
<!-- For LTE -->
<div id="lteElementsCell"
style="display: none;"
x-show="networkModeCell == 'LTE'">
<div id="lteElementsCell" x-show="networkModeCell == 'LTE'">
<div class="input-group mb-3">
<span class="input-group-text"
id="basic-addon1">Num Cells</span> <input aria-describedby="basic-addon1"
aria-label="NumCells"
class="form-control"
max="10"
min="1"
placeholder="1-10"
<span class="input-group-text" id="basic-addon1"
>Num Cells</span
>
<input
type="number"
x-model="cellNum">
class="form-control"
placeholder="1-10"
min="1"
max="10"
aria-label="NumCells"
aria-describedby="basic-addon1"
x-model="cellNum"
/>
</div>
</div>
<div id="freqNumbersContainer">
<!-- Generate EARFCN and PCI here -->
</div><!-- For SA -->
<div id="saElementsCell"
style="display: none;"
x-show="networkModeCell == 'NR5G-SA'">
<div class="input-group mb-3"
style="display: none;"
x-show="networkModeCell == 'NR5G-SA'">
<input aria-label="EARFCN"
class="form-control"
</div>
<!-- For SA -->
<div
id="saElementsCell"
x-show="networkModeCell == 'NR5G-SA'"
>
<div
class="input-group mb-3"
x-show="networkModeCell == 'NR5G-SA'"
>
<input
type="text"
aria-label="EARFCN"
placeholder="EARFCN"
type="text"
x-model="earfcn1"> <input aria-label="PCI"
class="form-control"
x-model="earfcn1"
/>
<input
type="text"
aria-label="PCI"
placeholder="PCI"
type="text"
x-model="pci1">
</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"
placeholder="Band"
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>SCS</option>
<option>15</option>
<option>30</option>
<option>60</option>
<option>120</option>
<option>240</option>
</select>
<input
type="text"
x-model="band">
aria-label="band"
placeholder="Band"
class="form-control"
x-model="band"
/>
</div>
</div><button class="btn btn-primary"
style="display: none;"
</div>
<button
type="button"
x-show="networkModeCell == 'LTE'">Lock LTE Cells</button> <button class="btn btn-primary"
style="display: none;"
class="btn btn-primary"
x-show="networkModeCell == 'LTE'"
@click="cellLockEnableLTE()"
>
Lock LTE Cells
</button>
<button
type="button"
x-show="networkModeCell == 'NR5G-SA'">Lock NR5G-SA Cells</button> <button class="btn btn-danger"
style="display: none;"
class="btn btn-primary"
x-show="networkModeCell == 'NR5G-SA'"
@click="cellLockEnableNR()"
>
Lock NR5G-SA Cells
</button>
<button
type="button"
x-show="networkModeCell == 'Unlock LTE'">Unlock LTE Cells</button> <button class="btn btn-danger"
style="display: none;"
class="btn btn-danger"
x-show="networkModeCell == 'Unlock LTE'"
@click="cellLockDisableLTE()"
>
Unlock LTE Cells
</button>
<button
type="button"
x-show="networkModeCell == 'Unlock NR5G-SA'">Unlock NR5G-SA Cells</button>
class="btn btn-danger"
x-show="networkModeCell == 'Unlock NR5G-SA'"
@click="cellLockDisableNR()"
>
Unlock NR5G-SA Cells
</button>
</div>
</div>
<div class="card-footer">
信道锁定仅适用于主信道,并且在重启后不会持久保存
</div>
</div>
</div>
</div>
</div><!-- Loading Modal for Locking Band -->
<div class="modal-overlay"
style="display: none;"
x-show="showModal">
<!-- Loading Modal for Locking Band -->
<div class="modal-overlay" x-show="showModal">
<div class="loading-modal">
<div class="loader"></div>
<div class="loading-text"
style="display: flex; flex-direction: column">
<div
class="loading-text"
style="display: flex; flex-direction: column"
>
<h3>Initializing Network...</h3>
<p style="margin-top: 0.5rem">Please wait for <span style="font-weight: 500"
x-text="countdown">0</span> seconds.</p>
<p style="margin-top: 0.5rem">
Please wait for
<span x-text="countdown" style="font-weight: 500"></span>
seconds.
</p>
</div>
</div>
</div>
</div>
</main><!-- Import Band Locking GUI JS -->
</main>
<!-- Import Band Locking GUI JS -->
<!-- <script src="js/band-locking.js"></script> -->
<script src="js/generate-freq-box.js"></script>
<script src="js/populate-checkbox.js"></script>
<script src="js/parse-settings.js"></script>
<script>
function cellLocking() {
return {
isLoading: false,
@ -740,7 +799,7 @@
}
}, 1000);
} else {
alert("No changes made!");
alert("No changes made");
}
},
cellLockEnableLTE() {