fixed data fetching error

This commit is contained in:
Russel Yasol
2024-10-03 16:28:50 +08:00
parent af8aee60ff
commit f93a4d8082
11 changed files with 185 additions and 82 deletions

View File

@@ -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">

View File

@@ -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>

View File

@@ -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);
}

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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;
} */
}

View File

@@ -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>

View File

@@ -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);
});

View 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');
}
});