fixed data fetching error
This commit is contained in:
@@ -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>
|
||||
@@ -81,14 +82,19 @@
|
||||
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="navbar-item has-text-weight-bold" 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">
|
||||
<div class="control is-expanded-mobile">
|
||||
<div class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<div
|
||||
id="restartConnectionBtn"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
@@ -296,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>
|
||||
|
||||
@@ -89,7 +90,10 @@
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<div class="control is-expanded-mobile">
|
||||
<div class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<div
|
||||
id="restartConnectionBtn"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
|
||||
@@ -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>
|
||||
@@ -87,7 +88,10 @@
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<div class="control is-expanded-mobile">
|
||||
<div class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<div
|
||||
id="restartConnectionBtn"
|
||||
class="button is-link is-outlined is-fullwidth-mobile"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
@@ -149,24 +153,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div
|
||||
<a
|
||||
id="lockLte"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock LTE Bands
|
||||
</div>
|
||||
<div
|
||||
</a>
|
||||
<a
|
||||
id="uncheckLte"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</div>
|
||||
<div
|
||||
</a>
|
||||
<a
|
||||
id="resetLte"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,24 +188,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div
|
||||
<a
|
||||
id="lockSa"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock SA Bands
|
||||
</div>
|
||||
<div
|
||||
</a>
|
||||
<a
|
||||
id="uncheckSa"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</div>
|
||||
<div
|
||||
</a>
|
||||
<a
|
||||
id="resetSa"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -219,24 +223,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div
|
||||
<a
|
||||
id="lockNsa"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock NSA Bands
|
||||
</div>
|
||||
<div
|
||||
</a>
|
||||
<a
|
||||
id="uncheckNsa"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</div>
|
||||
<div
|
||||
</a>
|
||||
<a
|
||||
id="resetNsa"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -254,24 +258,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div
|
||||
<a
|
||||
id="lockSaDc"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Lock SA-DC Bands
|
||||
</div>
|
||||
<div
|
||||
</a>
|
||||
<a
|
||||
id="uncheckSaDc"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Uncheck All
|
||||
</div>
|
||||
<div
|
||||
</a>
|
||||
<a
|
||||
id="resetSaDc"
|
||||
class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
|
||||
>
|
||||
Reset
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -305,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>
|
||||
@@ -323,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">
|
||||
@@ -334,6 +336,43 @@
|
||||
</div>
|
||||
</div>
|
||||
<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"),
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to fetch supported bands via AT command and populate the checkboxes
|
||||
async function fetchSupportedBands() {
|
||||
try {
|
||||
@@ -404,6 +443,9 @@
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -88,7 +89,7 @@
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<div class="control is-expanded-mobile">
|
||||
<div class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
@@ -407,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>
|
||||
@@ -88,7 +89,7 @@
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<div class="control is-expanded-mobile">
|
||||
<div class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
@@ -467,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>
|
||||
@@ -88,7 +89,7 @@
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<div class="control is-expanded-mobile">
|
||||
<div class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
@@ -438,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>
|
||||
@@ -88,7 +89,7 @@
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<div class="control is-expanded-mobile">
|
||||
<div class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
@@ -402,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">
|
||||
|
||||
@@ -261,31 +261,8 @@ html.theme-light {
|
||||
background: #3273dc;
|
||||
}
|
||||
}
|
||||
/* End of custom table styles */
|
||||
|
||||
/* Change checkbox checked color to this: #3273dc */
|
||||
/* Hide the default checkbox */
|
||||
/* input[type="checkbox"] {
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
.isCursorPointer {
|
||||
cursor: pointer;
|
||||
} */
|
||||
|
||||
/* Style when checkbox is checked */
|
||||
/* input[type="checkbox"]:checked {
|
||||
background-color: blue;
|
||||
border-color: blue;
|
||||
} */
|
||||
|
||||
/* Style the checkmark */
|
||||
/* input[type="checkbox"]:checked::before {
|
||||
content: "✔";
|
||||
display: block;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
} */
|
||||
}
|
||||
@@ -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>
|
||||
@@ -89,7 +90,7 @@
|
||||
<div class="navbar-item">
|
||||
<div class="buttons is-flex-direction-column-mobile">
|
||||
<div class="control is-expanded-mobile">
|
||||
<div class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
|
||||
<span class="icon">
|
||||
<i class="fas fa-arrows-rotate"></i>
|
||||
</span>
|
||||
|
||||
@@ -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