Merge pull request #79 from dr-dolomite/QuecManager
Fxed critical bug on bands table when viewing on mobile
This commit is contained in:
Cameron Thompson
@@ -23,6 +23,7 @@
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script src="/js/utils/restart-connection.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
@@ -58,7 +59,7 @@
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
@@ -74,36 +75,43 @@
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="/advance-settings.html">
|
||||
Advance Settings
|
||||
</a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item" href="/about.html"> About </a>
|
||||
<a class="navbar-item has-text-weight-bold" href="/about.html">
|
||||
About
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
<div class="control is-expanded-mobile">
|
||||
<div
|
||||
id="restartConnectionBtn"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<div class="control">
|
||||
<div
|
||||
class="button is-warning is-outlined reboot-modal"
|
||||
data-target="reboot-modal"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
@@ -294,7 +302,7 @@
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
Rebooting... <span id="countdown">80</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script src="/js/utils/restart-connection.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
<script src="/js/advance/at-terminal.js"></script>
|
||||
|
||||
@@ -59,7 +60,7 @@
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
@@ -73,9 +74,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<a class="navbar-link has-text-weight-bold"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="/advance-settings.html">
|
||||
Advance Settings
|
||||
</a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
@@ -86,25 +89,28 @@
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
<div class="control is-expanded-mobile">
|
||||
<div
|
||||
id="restartConnectionBtn"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<div class="control">
|
||||
<div
|
||||
class="button is-warning is-outlined reboot-modal"
|
||||
data-target="reboot-modal"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script src="/js/utils/restart-connection.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
@@ -57,9 +58,9 @@
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<a class="navbar-link has-text-weight-bold"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
@@ -73,7 +74,9 @@
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="/advance-settings.html">
|
||||
Advance Settings
|
||||
</a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
@@ -84,25 +87,28 @@
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
<div class="control is-expanded-mobile">
|
||||
<div
|
||||
id="restartConnectionBtn"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<div class="control">
|
||||
<div
|
||||
class="button is-warning is-outlined reboot-modal"
|
||||
data-target="reboot-modal"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
@@ -134,7 +140,7 @@
|
||||
<div class="column-margin">
|
||||
<div class="fixed-grid has-2-cols has-1-cols-mobile">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell is-col-span-2 is-col-span-1-mobile">
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">4G LTE Band Locking</div>
|
||||
@@ -142,64 +148,25 @@
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="lte_bands">
|
||||
<!-- write each lte band cell here -->
|
||||
<!-- LTE bands will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
id="lockLte"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock LTE Bands
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
id="uncheckLte"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">5G-NR NSA Band Locking</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="nsa_bands">
|
||||
<!-- write each nsa band cell here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock NSA Bands
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
id="resetLte"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
@@ -216,27 +183,95 @@
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="sa_bands">
|
||||
<!-- write each SA band cell here -->
|
||||
<!-- SA bands will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
href="#"
|
||||
id="lockSa"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock SA Bands
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
id="uncheckSa"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
id="resetSa"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">5G-NR NSA Band Locking</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="nsa_bands">
|
||||
<!-- NSA bands will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
id="lockNsa"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock NSA Bands
|
||||
</a>
|
||||
<a
|
||||
id="uncheckNsa"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</a>
|
||||
<a
|
||||
id="resetNsa"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">5G-NR SA-DC Band Locking</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-5-cols has-3-cols-mobile">
|
||||
<div class="grid" id="sanrdc_bands">
|
||||
<!-- SA bands will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a
|
||||
id="lockSaDc"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock SA-DC Bands
|
||||
</a>
|
||||
<a
|
||||
id="uncheckSaDc"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</a>
|
||||
<a
|
||||
id="resetSaDc"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
@@ -274,9 +309,7 @@
|
||||
<span>Current Active Bands</span>
|
||||
</div>
|
||||
|
||||
<p class="block has-text-weight-semibold">
|
||||
Band 1 / Band 3 / NR Band 41
|
||||
</p>
|
||||
<p class="block has-text-weight-semibold" id="currentBands"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -292,7 +325,7 @@
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
Rebooting... <span id="countdown">80</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
@@ -302,32 +335,346 @@
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
// Function to fetch current active bands and display them in the footer
|
||||
async function fetchCurrentBands() {
|
||||
try {
|
||||
const response = await fetch("/cgi-bin/atinout_handler.sh", {
|
||||
method: "POST",
|
||||
body: "command=" + encodeURIComponent("AT+QCAINFO"),
|
||||
});
|
||||
|
||||
<script>
|
||||
var lte_bands =
|
||||
"1:2:3:4:5:7:8:12:13:14:18:19:20:25:26:28:29:30:32:34:38:39:40:41:42:43:46:48:66:71";
|
||||
var nsa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
|
||||
var sa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
|
||||
|
||||
function populateBands(bandsString, targetId) {
|
||||
var bandsArray = bandsString.split(":");
|
||||
var html = "";
|
||||
|
||||
for (var i = 0; i < bandsArray.length; i++) {
|
||||
html +=
|
||||
'<div class="cell"><label class="checkbox"><input type="checkbox" /> B' +
|
||||
bandsArray[i] +
|
||||
"</label></div>";
|
||||
const data = await response.json();
|
||||
// Extract active bands
|
||||
// Find the lines that contains "LTE BAND <band number>" or "NR5G BAND <band number>" and append them to the currentBands variable
|
||||
const lteBands = data.output.match(/LTE BAND ([0-9]+)/g) || [];
|
||||
const nrBands = data.output.match(/NR5G BAND ([0-9]+)/g) || [];
|
||||
// Combine the two arrays and join them with a comma
|
||||
if (lteBands.length === 0 && nrBands.length === 0) {
|
||||
document.getElementById("currentBands").textContent =
|
||||
"No active bands found";
|
||||
return;
|
||||
} else if (lteBands.length === 0) {
|
||||
document.getElementById("currentBands").textContent =
|
||||
nrBands.join(", ");
|
||||
return;
|
||||
} else if (nrBands.length === 0) {
|
||||
document.getElementById("currentBands").textContent =
|
||||
lteBands.join(", ");
|
||||
return;
|
||||
} else {
|
||||
document.getElementById("currentBands").textContent = [
|
||||
...lteBands,
|
||||
...nrBands,
|
||||
].join(", ");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching current bands:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Inject the generated HTML into the target element
|
||||
document.querySelector(targetId).innerHTML = html;
|
||||
}
|
||||
// Function to fetch supported bands via AT command and populate the checkboxes
|
||||
async function fetchSupportedBands() {
|
||||
try {
|
||||
const response = await fetch("/cgi-bin/atinout_handler.sh", {
|
||||
method: "POST",
|
||||
body:
|
||||
"command=" + encodeURIComponent('AT+QNWPREFCFG="policy_band"'),
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
// Populate the bands in their respective grids
|
||||
populateBands(lte_bands, "#lte_bands");
|
||||
populateBands(nsa_bands, "#nsa_bands");
|
||||
populateBands(sa_bands, "#sa_bands");
|
||||
</script>
|
||||
const lteBandsMatch = data.output.match(/"lte_band",([0-9:]+)/);
|
||||
const nsaBandsMatch = data.output.match(/"nsa_nr5g_band",([0-9:]+)/);
|
||||
const saBandsMatch = data.output.match(/"nr5g_band",([0-9:]+)/);
|
||||
const saDcBandsMatch = data.output.match(
|
||||
/"nrdc_nr5g_band",([0-9:]+)/
|
||||
);
|
||||
|
||||
if (lteBandsMatch) populateBands(lteBandsMatch[1], "#lte_bands");
|
||||
if (saBandsMatch) populateBands(saBandsMatch[1], "#sa_bands");
|
||||
if (nsaBandsMatch) populateBands(nsaBandsMatch[1], "#nsa_bands");
|
||||
if (saDcBandsMatch) populateBands(saDcBandsMatch[1], "#sanrdc_bands");
|
||||
|
||||
fetchActiveBands();
|
||||
} catch (error) {
|
||||
console.error("Error fetching supported bands:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to fetch currently active bands and mark the checkboxes accordingly
|
||||
async function fetchActiveBands() {
|
||||
try {
|
||||
const response = await fetch("/cgi-bin/atinout_handler.sh", {
|
||||
method: "POST",
|
||||
body:
|
||||
"command=" +
|
||||
encodeURIComponent(
|
||||
'AT+QNWPREFCFG="lte_band";+QNWPREFCFG="nsa_nr5g_band";+QNWPREFCFG="nr5g_band";+QNWPREFCFG="nrdc_nr5g_band"'
|
||||
),
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
// Remove the first line of the output
|
||||
data.output = data.output.split("\n").slice(1).join("\n");
|
||||
|
||||
// Remove "OK" line
|
||||
data.output = data.output.replace("OK", "");
|
||||
|
||||
console.log(data.output);
|
||||
|
||||
// Extract active bands
|
||||
const activeLteBands = data.output
|
||||
.match(/"lte_band",([0-9:]+)/)[1]
|
||||
.split(":");
|
||||
const activeNsaBands = data.output
|
||||
.match(/"nsa_nr5g_band",([0-9:]+)/)[1]
|
||||
.split(":");
|
||||
const activeSaBands = data.output
|
||||
.match(/"nr5g_band",([0-9:]+)/)[1]
|
||||
.split(":");
|
||||
// get the the second to the last line of the output and use it for active sa-dc bands
|
||||
const activeSaDcBandsLine = data.output
|
||||
.split("\n")[6]
|
||||
.match(/"nr5g_band",([0-9:]+)/)[1]
|
||||
.split(":");
|
||||
|
||||
// // Mark checkboxes as checked for active bands
|
||||
markActiveBands(activeLteBands, "#lte_bands");
|
||||
markActiveBands(activeNsaBands, "#nsa_bands");
|
||||
markActiveBands(activeSaBands, "#sa_bands");
|
||||
markActiveBands(activeSaDcBandsLine, "#sanrdc_bands");
|
||||
|
||||
// Fetch current active bands and display them in the footer
|
||||
fetchCurrentBands();
|
||||
} catch (error) {
|
||||
console.error("Error fetching active bands:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to populate bands in the target element
|
||||
function populateBands(bandsString, targetId) {
|
||||
var bandsArray = bandsString.split(":");
|
||||
var html = "";
|
||||
|
||||
for (var i = 0; i < bandsArray.length; i++) {
|
||||
html += `<div class="cell">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" value="${bandsArray[i]}" /> B${bandsArray[i]}
|
||||
</label>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
document.querySelector(targetId).innerHTML = html;
|
||||
}
|
||||
|
||||
// Function to mark checkboxes as checked based on active bands
|
||||
function markActiveBands(activeBands, targetId) {
|
||||
const checkboxes = document.querySelectorAll(
|
||||
`${targetId} input[type="checkbox"]`
|
||||
);
|
||||
checkboxes.forEach((checkbox) => {
|
||||
if (activeBands.includes(checkbox.value)) {
|
||||
checkbox.setAttribute("checked", "checked");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Function to uncheck all checkboxes in the target element
|
||||
function uncheckAll(targetId) {
|
||||
const checkboxes = document.querySelectorAll(
|
||||
`${targetId} input[type="checkbox"]`
|
||||
);
|
||||
checkboxes.forEach((checkbox) => {
|
||||
checkbox.removeAttribute("checked");
|
||||
checkbox.checked = false; // Also update the state programmatically
|
||||
});
|
||||
}
|
||||
|
||||
// Event listeners for "Uncheck All" buttons
|
||||
document
|
||||
.getElementById("uncheckLte")
|
||||
.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
uncheckAll("#lte_bands");
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("uncheckNsa")
|
||||
.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
uncheckAll("#nsa_bands");
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("uncheckSa")
|
||||
.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
uncheckAll("#sa_bands");
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("uncheckSaDc")
|
||||
.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
uncheckAll("#sanrdc_bands");
|
||||
});
|
||||
|
||||
// Locking the Bands
|
||||
// Function to get checked bands and generate AT command
|
||||
function getCheckedBandsCommand(targetId, commandType) {
|
||||
const checkboxes = document.querySelectorAll(
|
||||
`${targetId} input[type="checkbox"]:checked`
|
||||
);
|
||||
const checkedBands = Array.from(checkboxes)
|
||||
.map((cb) => cb.value)
|
||||
.sort((a, b) => a - b);
|
||||
|
||||
if (checkedBands.length === 0) {
|
||||
return null; // Return null if no bands are selected
|
||||
}
|
||||
|
||||
const bandString = checkedBands.join(":");
|
||||
return `AT+QNWPREFCFG="${commandType}",${bandString}`;
|
||||
}
|
||||
|
||||
// Function to send AT command via atinout
|
||||
async function sendATCommand(command) {
|
||||
try {
|
||||
const response = await fetch("/cgi-bin/atinout_handler.sh", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
body: `command=${encodeURIComponent(command)}`,
|
||||
});
|
||||
const data = await response.json();
|
||||
return data;
|
||||
|
||||
// refetch active bands after successful command
|
||||
fetchActiveBands();
|
||||
} catch (error) {
|
||||
console.error("Error sending AT command:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Function to handle band locking for a specific type
|
||||
async function lockBands(targetId, commandType) {
|
||||
const command = getCheckedBandsCommand(targetId, commandType);
|
||||
if (!command) {
|
||||
alert("Please select at least one band to lock.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await sendATCommand(command);
|
||||
alert(
|
||||
`Successfully locked ${commandType
|
||||
.split("_")[0]
|
||||
.toUpperCase()} bands`
|
||||
);
|
||||
} catch (error) {
|
||||
alert(`Failed to lock bands: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners for Lock buttons
|
||||
document
|
||||
.getElementById("lockLte")
|
||||
.addEventListener("click", () => lockBands("#lte_bands", "lte_band"));
|
||||
|
||||
document
|
||||
.getElementById("lockNsa")
|
||||
.addEventListener("click", () =>
|
||||
lockBands("#nsa_bands", "nsa_nr5g_band")
|
||||
);
|
||||
|
||||
document
|
||||
.getElementById("lockSa")
|
||||
.addEventListener("click", () => lockBands("#sa_bands", "nr5g_band"));
|
||||
|
||||
document
|
||||
.getElementById("lockSaDc")
|
||||
.addEventListener("click", () =>
|
||||
lockBands("#sanrdc_bands", "nrdc_nr5g_band")
|
||||
);
|
||||
|
||||
// Event listeners for Reset buttons
|
||||
|
||||
// Function to reset and check all checkboxes for a given band type
|
||||
function resetBands(targetId, bandType) {
|
||||
const checkboxes = document.querySelectorAll(
|
||||
`${targetId} input[type="checkbox"]`
|
||||
);
|
||||
let selectedBands = [];
|
||||
|
||||
// Check all checkboxes and gather their values
|
||||
checkboxes.forEach((checkbox) => {
|
||||
checkbox.setAttribute("checked", "checked");
|
||||
checkbox.checked = true;
|
||||
selectedBands.push(checkbox.value);
|
||||
});
|
||||
|
||||
// Create and send the AT command with all bands
|
||||
sendBandLockCommand(selectedBands, bandType);
|
||||
}
|
||||
|
||||
// Function to send the AT command to lock the bands
|
||||
async function sendBandLockCommand(bands, bandType) {
|
||||
// Join the selected bands with ":" separator for the AT command
|
||||
const bandString = bands.join(":");
|
||||
const command = `AT+QNWPREFCFG="${bandType}",${bandString}`;
|
||||
|
||||
try {
|
||||
const response = await fetch("/cgi-bin/atinout_handler.sh", {
|
||||
method: "POST",
|
||||
body: "command=" + encodeURIComponent(command),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
console.log(
|
||||
`Band lock command for ${bandType} executed:`,
|
||||
data.output
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
`Error sending band lock command for ${bandType}:`,
|
||||
error
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners for "Reset" buttons
|
||||
document
|
||||
.getElementById("resetLte")
|
||||
.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
resetBands("#lte_bands", "lte_band");
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("resetNsa")
|
||||
.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
resetBands("#nsa_bands", "nsa_nr5g_band");
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("resetSa")
|
||||
.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
resetBands("#sa_bands", "nr5g_band");
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("resetSaDc")
|
||||
.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
resetBands("#sanrdc_bands", "nrdc_nr5g_band");
|
||||
});
|
||||
|
||||
// Initial call to fetch supported bands on page load
|
||||
window.onload = fetchSupportedBands;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script src="/js/utils/restart-connection.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
@@ -58,9 +59,9 @@
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<a class="navbar-link has-text-weight-bold"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
@@ -74,7 +75,9 @@
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="/advance-settings.html">
|
||||
Advance Settings
|
||||
</a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
@@ -85,25 +88,25 @@
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<div class="control is-expanded-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<div class="control">
|
||||
<div
|
||||
class="button is-warning is-outlined reboot-modal"
|
||||
data-target="reboot-modal"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
@@ -405,7 +408,7 @@
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
Rebooting... <span id="countdown">80</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script src="/js/utils/restart-connection.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
@@ -58,9 +59,9 @@
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<a class="navbar-link has-text-weight-bold"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
@@ -74,7 +75,9 @@
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="/advance-settings.html">
|
||||
Advance Settings
|
||||
</a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
@@ -85,25 +88,25 @@
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<div class="control is-expanded-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<div class="control">
|
||||
<div
|
||||
class="button is-warning is-outlined reboot-modal"
|
||||
data-target="reboot-modal"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
@@ -465,7 +468,7 @@
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
Rebooting... <span id="countdown">80</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script src="/js/utils/restart-connection.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
@@ -58,9 +59,9 @@
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<a class="navbar-link has-text-weight-bold"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
@@ -74,7 +75,9 @@
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="/advance-settings.html">
|
||||
Advance Settings
|
||||
</a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
@@ -85,25 +88,25 @@
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<div class="control is-expanded-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<div class="control">
|
||||
<div
|
||||
class="button is-warning is-outlined reboot-modal"
|
||||
data-target="reboot-modal"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
@@ -436,7 +439,7 @@
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
Rebooting... <span id="countdown">80</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script src="/js/utils/restart-connection.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
@@ -58,9 +59,9 @@
|
||||
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start ml-6">
|
||||
<a class="navbar-item has-text-weight-bold" href="/"> Home </a>
|
||||
<a class="navbar-item" href="/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Cellular </a>
|
||||
<a class="navbar-link has-text-weight-bold"> Cellular </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/bandlock.html"> Band Locking </a>
|
||||
<a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
|
||||
@@ -74,7 +75,9 @@
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="/advance-settings.html">
|
||||
Advance Settings
|
||||
</a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
@@ -85,25 +88,25 @@
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<div class="control is-expanded-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<div class="control">
|
||||
<div
|
||||
class="button is-warning is-outlined reboot-modal"
|
||||
data-target="reboot-modal"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
@@ -400,7 +403,7 @@
|
||||
<div id="loading-content" style="display: none">
|
||||
<div class="custom-loader"></div>
|
||||
<div class="countdown-text">
|
||||
Rebooting... <span id="countdown">40</span>s
|
||||
Rebooting... <span id="countdown">80</span>s
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" id="modal-buttons">
|
||||
|
||||
@@ -260,4 +260,9 @@ html.theme-light {
|
||||
.cell-carousel__dot--active {
|
||||
background: #3273dc;
|
||||
}
|
||||
}
|
||||
/* End of custom table styles */
|
||||
|
||||
.isCursorPointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -25,6 +25,7 @@
|
||||
<script src="/js/styles/nav-burger.js"></script>
|
||||
<script src="/js/styles/modal-trigger.js"></script>
|
||||
<script src="/js/utils/reboot.js"></script>
|
||||
<script src="/js/utils/restart-connection.js"></script>
|
||||
<script defer src="/js/auth/auth.js"></script>
|
||||
|
||||
<script>
|
||||
@@ -75,7 +76,9 @@
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Advance </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
|
||||
<a class="navbar-item" href="/advance-settings.html">
|
||||
Advance Settings
|
||||
</a>
|
||||
<a class="navbar-item" href="#">Experimental Features</a>
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
@@ -86,25 +89,25 @@
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<p class="control is-expanded-mobile">
|
||||
<a
|
||||
href="#"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<div class="control is-expanded-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
<span>Restart Connection</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-flex is-mobile is-align-items-center">
|
||||
<p class="control">
|
||||
<div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
|
||||
<div class="control">
|
||||
<div
|
||||
class="button is-warning is-outlined reboot-modal"
|
||||
data-target="reboot-modal"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-power-off"></i>
|
||||
</span>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<p class="control ml-2 is-mobile">
|
||||
<a
|
||||
href="#"
|
||||
|
||||
104
www/index.html
104
www/index.html
@@ -26,59 +26,65 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box container mt-6">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<img
|
||||
src="/assets/logo.png"
|
||||
alt="Logo"
|
||||
class="image is-square image is-32x32"
|
||||
/>
|
||||
<div class="container mt-6">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="fixed-grid has-1-cols">
|
||||
<div class="grid is-gap-5">
|
||||
<div class="cell">
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<img
|
||||
src="/assets/logo.png"
|
||||
alt="Logo"
|
||||
class="image is-square image is-32x32"
|
||||
/>
|
||||
</div>
|
||||
<div class="control">
|
||||
<h1 class="title">QuecManager Login</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<h1 class="title">QuecManager Login</h1>
|
||||
|
||||
<div class="cell">
|
||||
<form id="loginForm">
|
||||
<div class="field">
|
||||
<label class="label">Username</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="username"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="********"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="button is-primary" type="submit">
|
||||
Sign in
|
||||
</button>
|
||||
<p
|
||||
id="error"
|
||||
class="has-text-danger has-text-weight-semibold mt-2"
|
||||
></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cell">
|
||||
<form id="loginForm">
|
||||
<div class="field">
|
||||
<label class="label">Username</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="username"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
placeholder="********"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="button is-primary" type="submit">Sign in</button>
|
||||
<p
|
||||
id="error"
|
||||
class="has-text-danger has-text-weight-semibold mt-2"
|
||||
></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
0
www/js/band-locking.js/fetch-bands.js
Normal file
0
www/js/band-locking.js/fetch-bands.js
Normal file
@@ -1,12 +1,12 @@
|
||||
// Constants
|
||||
const ACCESS_TECH_MAP = {
|
||||
2: "UTRAN",
|
||||
4: "UTRAN W/ HSDPA",
|
||||
5: "UTRAN W/ HSUPA",
|
||||
6: "UTRAN W/ HSDPA & HSUPA",
|
||||
4: "UTRAN / HSDPA",
|
||||
5: "UTRAN / HSUPA",
|
||||
6: "UTRAN / HSDPA & HSUPA",
|
||||
7: "E-UTRAN",
|
||||
10: "E-UTRAN connected to a 5GCN",
|
||||
11: "NR connected to a 5GCN",
|
||||
10: "E-UTRAN - 5GCN",
|
||||
11: "NR - 5GCN",
|
||||
12: "NG-RAN",
|
||||
13: "E-UTRAN-NR dual",
|
||||
};
|
||||
@@ -384,7 +384,9 @@ function processBandwidth(response, networkType) {
|
||||
|
||||
if (networkType === "NR5G-NSA") {
|
||||
processNR5GBandwidth(sccLines, pccBWParsed);
|
||||
} else {
|
||||
} else if (networkType === "NR5G-SA") {
|
||||
processNR5GBandwidth(sccLines, pccBWParsed);
|
||||
} else if (networkType === "LTE") {
|
||||
processLTEBandwidth(sccLines, pccBWParsed);
|
||||
}
|
||||
}
|
||||
@@ -773,6 +775,8 @@ function processBandsTable(jsonData) {
|
||||
const sccRow = createBandTableRow(sccBand, networkType, servingCellJSON);
|
||||
tableBody.appendChild(sccRow);
|
||||
});
|
||||
|
||||
initMobileCarousel();
|
||||
}
|
||||
|
||||
function processCellInfo(jsonData) {
|
||||
@@ -1086,9 +1090,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
setupEventListeners();
|
||||
});
|
||||
|
||||
// Mobile carousel functions
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
let carouselInitialized = false;
|
||||
let currentSlide = 0;
|
||||
|
||||
function initMobileCarousel() {
|
||||
const table = document.getElementById("bandTable");
|
||||
@@ -1096,65 +1099,95 @@ function initMobileCarousel() {
|
||||
const rows = tbody.querySelectorAll("tr");
|
||||
|
||||
if (window.innerWidth <= 768) {
|
||||
// Create carousel structure
|
||||
const carouselWrapper = document.createElement("div");
|
||||
carouselWrapper.className = "cell-carousel";
|
||||
let carouselWrapper = document.querySelector(".cell-carousel");
|
||||
|
||||
const carouselContainer = document.createElement("div");
|
||||
carouselContainer.className = "cell-carousel__container";
|
||||
if (!carouselInitialized) {
|
||||
// Create carousel structure only if it doesn't exist
|
||||
carouselWrapper = document.createElement("div");
|
||||
carouselWrapper.className = "cell-carousel";
|
||||
|
||||
// Move content to carousel
|
||||
rows.forEach((row) => {
|
||||
carouselContainer.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
row.getAttribute("data-mobile")
|
||||
);
|
||||
});
|
||||
const carouselContainer = document.createElement("div");
|
||||
carouselContainer.className = "cell-carousel__container";
|
||||
|
||||
carouselWrapper.appendChild(carouselContainer);
|
||||
carouselWrapper.appendChild(carouselContainer);
|
||||
|
||||
// Add only indicators
|
||||
const indicatorsHTML = `
|
||||
<div class="cell-carousel__indicators">
|
||||
${Array.from(
|
||||
{ length: rows.length },
|
||||
(_, i) =>
|
||||
`<span class="cell-carousel__dot ${
|
||||
i === 0 ? "cell-carousel__dot--active" : ""
|
||||
}"
|
||||
onclick="goToSlide(${i})"></span>`
|
||||
).join("")}
|
||||
</div>
|
||||
`;
|
||||
// Add touch event listeners only once
|
||||
carouselContainer.addEventListener("touchstart", handleTouchStart, false);
|
||||
carouselContainer.addEventListener("touchmove", handleTouchMove, false);
|
||||
carouselContainer.addEventListener("touchend", handleTouchEnd, false);
|
||||
|
||||
// Replace table with carousel
|
||||
table.style.display = "none";
|
||||
table.parentNode.insertBefore(carouselWrapper, table);
|
||||
carouselWrapper.insertAdjacentHTML("beforeend", indicatorsHTML);
|
||||
// Insert carousel into DOM
|
||||
table.style.display = "none";
|
||||
table.parentNode.insertBefore(carouselWrapper, table);
|
||||
|
||||
// Add touch event listeners
|
||||
carouselContainer.addEventListener("touchstart", handleTouchStart, false);
|
||||
carouselContainer.addEventListener("touchmove", handleTouchMove, false);
|
||||
carouselContainer.addEventListener("touchend", handleTouchEnd, false);
|
||||
carouselInitialized = true;
|
||||
}
|
||||
|
||||
// Update carousel content
|
||||
updateCarouselContent(rows);
|
||||
} else {
|
||||
// Restore desktop view if necessary
|
||||
// Restore desktop view
|
||||
const carousel = document.querySelector(".cell-carousel");
|
||||
if (carousel) {
|
||||
carousel.remove();
|
||||
carousel.style.display = "none";
|
||||
table.style.display = "";
|
||||
}
|
||||
|
||||
rows.forEach((row) => {
|
||||
row.innerHTML = row.getAttribute("data-desktop");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateCarouselContent(rows) {
|
||||
const carouselContainer = document.querySelector(".cell-carousel__container");
|
||||
const indicators = document.querySelector(".cell-carousel__indicators");
|
||||
|
||||
if (!carouselContainer) return;
|
||||
|
||||
// Clear existing content
|
||||
carouselContainer.innerHTML = "";
|
||||
if (indicators) indicators.remove();
|
||||
|
||||
// Add new slides
|
||||
rows.forEach((row) => {
|
||||
carouselContainer.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
row.getAttribute("data-mobile")
|
||||
);
|
||||
});
|
||||
|
||||
// Update indicators
|
||||
const indicatorsHTML = `
|
||||
<div class="cell-carousel__indicators">
|
||||
${Array.from(
|
||||
{ length: rows.length },
|
||||
(_, i) =>
|
||||
`<span class="cell-carousel__dot ${
|
||||
i === currentSlide ? "cell-carousel__dot--active" : ""
|
||||
}"
|
||||
onclick="goToSlide(${i})"></span>`
|
||||
).join("")}
|
||||
</div>
|
||||
`;
|
||||
|
||||
carouselContainer.parentNode.insertAdjacentHTML("beforeend", indicatorsHTML);
|
||||
|
||||
// Reset to first slide and update display
|
||||
currentSlide = 0;
|
||||
updateCarousel();
|
||||
}
|
||||
|
||||
// Your existing touch handling functions remain the same
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
function handleTouchStart(event) {
|
||||
touchStartX = event.touches[0].clientX;
|
||||
}
|
||||
|
||||
function handleTouchMove(event) {
|
||||
event.preventDefault(); // Prevent scrolling while swiping
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function handleTouchEnd(event) {
|
||||
@@ -1163,18 +1196,15 @@ function handleTouchEnd(event) {
|
||||
}
|
||||
|
||||
function handleSwipe() {
|
||||
const swipeThreshold = 50; // Minimum distance for a swipe
|
||||
const swipeThreshold = 50;
|
||||
const container = document.querySelector(".cell-carousel__container");
|
||||
const slides = container.querySelectorAll(".cell-carousel__slide");
|
||||
|
||||
const diffX = touchStartX - touchEndX;
|
||||
|
||||
if (Math.abs(diffX) > swipeThreshold) {
|
||||
if (diffX > 0 && currentSlide < slides.length - 1) {
|
||||
// Swipe left, go to next slide
|
||||
currentSlide++;
|
||||
} else if (diffX < 0 && currentSlide > 0) {
|
||||
// Swipe right, go to previous slide
|
||||
currentSlide--;
|
||||
}
|
||||
updateCarousel();
|
||||
@@ -1188,15 +1218,16 @@ function goToSlide(index) {
|
||||
|
||||
function updateCarousel() {
|
||||
const container = document.querySelector(".cell-carousel__container");
|
||||
if (!container) return;
|
||||
|
||||
container.style.transform = `translateX(-${currentSlide * 100}%)`;
|
||||
|
||||
// Update indicators
|
||||
const dots = document.querySelectorAll(".cell-carousel__dot");
|
||||
dots.forEach((dot, index) => {
|
||||
dot.classList.toggle("cell-carousel__dot--active", index === currentSlide);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize carousel on load and resize
|
||||
// Update your event listeners
|
||||
window.addEventListener("load", initMobileCarousel);
|
||||
window.addEventListener("resize", initMobileCarousel);
|
||||
|
||||
@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const modal = document.getElementById('reboot-modal');
|
||||
const rebootButton = document.getElementById('rebootModem');
|
||||
const cancelButtons = modal.querySelectorAll('.cancel, .modal-background');
|
||||
const restartConnectionBtn = document.querySelector('a.button.is-link.is-outlined');
|
||||
const powerButton = document.querySelector('div.button.is-warning.is-outlined.reboot-modal');
|
||||
const modalMessage = document.getElementById('modal-message');
|
||||
const loadingContent = document.getElementById('loading-content');
|
||||
const modalButtons = document.getElementById('modal-buttons');
|
||||
@@ -46,7 +46,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
|
||||
// Show modal when restart connection button is clicked
|
||||
restartConnectionBtn.addEventListener('click', function(e) {
|
||||
powerButton.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
toggleModal(true);
|
||||
});
|
||||
|
||||
69
www/js/utils/restart-connection.js
Normal file
69
www/js/utils/restart-connection.js
Normal file
@@ -0,0 +1,69 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const restartBtn = document.getElementById('restartConnectionBtn');
|
||||
|
||||
// Function to send AT commands
|
||||
async function sendRestartCommands() {
|
||||
try {
|
||||
// Disable the restart button and show loading state
|
||||
restartBtn.classList.add('is-loading');
|
||||
restartBtn.disabled = true;
|
||||
|
||||
// Send AT+CFUN=0
|
||||
const response1 = await fetch('/cgi-bin/atinout_handler.sh', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: 'command=' + encodeURIComponent('AT+CFUN=0')
|
||||
});
|
||||
|
||||
if (!response1.ok) {
|
||||
throw new Error(`HTTP error! status: ${response1.status}`);
|
||||
}
|
||||
|
||||
// Wait for 2 seconds
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
// Send AT+CFUN=1
|
||||
const response2 = await fetch('/cgi-bin/atinout_handler.sh', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: 'command=' + encodeURIComponent('AT+CFUN=1')
|
||||
});
|
||||
|
||||
if (!response2.ok) {
|
||||
throw new Error(`HTTP error! status: ${response2.status}`);
|
||||
}
|
||||
|
||||
const data1 = await response1.json();
|
||||
const data2 = await response2.json();
|
||||
|
||||
if (data1.output.includes('OK') && data2.output.includes('OK')) {
|
||||
alert('Connection restarted successfully');
|
||||
// Optionally reload the page after a short delay
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1000);
|
||||
} else {
|
||||
throw new Error('Restart command failed');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
alert('Failed to restart connection. Please try again.');
|
||||
} finally {
|
||||
// Re-enable the restart button and remove loading state
|
||||
restartBtn.classList.remove('is-loading');
|
||||
restartBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Add click event listener to the restart button
|
||||
if (restartBtn) {
|
||||
restartBtn.addEventListener('click', sendRestartCommands);
|
||||
} else {
|
||||
console.warn('Restart Connection button not found in the DOM');
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user