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/nav-burger.js"></script>
<script src="/js/styles/modal-trigger.js"></script> <script src="/js/styles/modal-trigger.js"></script>
<script src="/js/utils/reboot.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 defer src="/js/auth/auth.js"></script>
<script> <script>
@@ -81,14 +82,19 @@
<a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a> <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
</div> </div>
</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>
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons is-flex-direction-column-mobile"> <div class="buttons is-flex-direction-column-mobile">
<div class="control is-expanded-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"> <span class="icon">
<i class="fas fa-arrows-rotate"></i> <i class="fas fa-arrows-rotate"></i>
</span> </span>
@@ -296,7 +302,7 @@
<div id="loading-content" style="display: none"> <div id="loading-content" style="display: none">
<div class="custom-loader"></div> <div class="custom-loader"></div>
<div class="countdown-text"> <div class="countdown-text">
Rebooting... <span id="countdown">40</span>s Rebooting... <span id="countdown">80</span>s
</div> </div>
</div> </div>
<div class="buttons" id="modal-buttons"> <div class="buttons" id="modal-buttons">

View File

@@ -23,6 +23,7 @@
<script src="/js/styles/nav-burger.js"></script> <script src="/js/styles/nav-burger.js"></script>
<script src="/js/styles/modal-trigger.js"></script> <script src="/js/styles/modal-trigger.js"></script>
<script src="/js/utils/reboot.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 defer src="/js/auth/auth.js"></script>
<script src="/js/advance/at-terminal.js"></script> <script src="/js/advance/at-terminal.js"></script>
@@ -89,7 +90,10 @@
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons is-flex-direction-column-mobile"> <div class="buttons is-flex-direction-column-mobile">
<div class="control is-expanded-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"> <span class="icon">
<i class="fas fa-arrows-rotate"></i> <i class="fas fa-arrows-rotate"></i>
</span> </span>

View File

@@ -23,6 +23,7 @@
<script src="/js/styles/nav-burger.js"></script> <script src="/js/styles/nav-burger.js"></script>
<script src="/js/styles/modal-trigger.js"></script> <script src="/js/styles/modal-trigger.js"></script>
<script src="/js/utils/reboot.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 defer src="/js/auth/auth.js"></script>
<script> <script>
@@ -87,7 +88,10 @@
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons is-flex-direction-column-mobile"> <div class="buttons is-flex-direction-column-mobile">
<div class="control is-expanded-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"> <span class="icon">
<i class="fas fa-arrows-rotate"></i> <i class="fas fa-arrows-rotate"></i>
</span> </span>
@@ -149,24 +153,24 @@
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div <a
id="lockLte" 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 Lock LTE Bands
</div> </a>
<div <a
id="uncheckLte" 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 Uncheck All
</div> </a>
<div <a
id="resetLte" 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 Reset
</div> </a>
</div> </div>
</div> </div>
</div> </div>
@@ -184,24 +188,24 @@
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div <a
id="lockSa" 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 Lock SA Bands
</div> </a>
<div <a
id="uncheckSa" 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 Uncheck All
</div> </a>
<div <a
id="resetSa" 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 Reset
</div> </a>
</div> </div>
</div> </div>
</div> </div>
@@ -219,24 +223,24 @@
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div <a
id="lockNsa" 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 Lock NSA Bands
</div> </a>
<div <a
id="uncheckNsa" 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 Uncheck All
</div> </a>
<div <a
id="resetNsa" 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 Reset
</div> </a>
</div> </div>
</div> </div>
</div> </div>
@@ -254,24 +258,24 @@
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div <a
id="lockSaDc" 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 Lock SA-DC Bands
</div> </a>
<div <a
id="uncheckSaDc" 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 Uncheck All
</div> </a>
<div <a
id="resetSaDc" 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 Reset
</div> </a>
</div> </div>
</div> </div>
</div> </div>
@@ -305,9 +309,7 @@
<span>Current Active Bands</span> <span>Current Active Bands</span>
</div> </div>
<p class="block has-text-weight-semibold"> <p class="block has-text-weight-semibold" id="currentBands"></p>
Band 1 / Band 3 / NR Band 41
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -323,7 +325,7 @@
<div id="loading-content" style="display: none"> <div id="loading-content" style="display: none">
<div class="custom-loader"></div> <div class="custom-loader"></div>
<div class="countdown-text"> <div class="countdown-text">
Rebooting... <span id="countdown">40</span>s Rebooting... <span id="countdown">80</span>s
</div> </div>
</div> </div>
<div class="buttons" id="modal-buttons"> <div class="buttons" id="modal-buttons">
@@ -334,6 +336,43 @@
</div> </div>
</div> </div>
<script> <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 // Function to fetch supported bands via AT command and populate the checkboxes
async function fetchSupportedBands() { async function fetchSupportedBands() {
try { try {
@@ -404,6 +443,9 @@
markActiveBands(activeNsaBands, "#nsa_bands"); markActiveBands(activeNsaBands, "#nsa_bands");
markActiveBands(activeSaBands, "#sa_bands"); markActiveBands(activeSaBands, "#sa_bands");
markActiveBands(activeSaDcBandsLine, "#sanrdc_bands"); markActiveBands(activeSaDcBandsLine, "#sanrdc_bands");
// Fetch current active bands and display them in the footer
fetchCurrentBands();
} catch (error) { } catch (error) {
console.error("Error fetching active bands:", 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/nav-burger.js"></script>
<script src="/js/styles/modal-trigger.js"></script> <script src="/js/styles/modal-trigger.js"></script>
<script src="/js/utils/reboot.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 defer src="/js/auth/auth.js"></script>
<script> <script>
@@ -88,7 +89,7 @@
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons is-flex-direction-column-mobile"> <div class="buttons is-flex-direction-column-mobile">
<div class="control is-expanded-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"> <span class="icon">
<i class="fas fa-arrows-rotate"></i> <i class="fas fa-arrows-rotate"></i>
</span> </span>
@@ -407,7 +408,7 @@
<div id="loading-content" style="display: none"> <div id="loading-content" style="display: none">
<div class="custom-loader"></div> <div class="custom-loader"></div>
<div class="countdown-text"> <div class="countdown-text">
Rebooting... <span id="countdown">40</span>s Rebooting... <span id="countdown">80</span>s
</div> </div>
</div> </div>
<div class="buttons" id="modal-buttons"> <div class="buttons" id="modal-buttons">

View File

@@ -23,6 +23,7 @@
<script src="/js/styles/nav-burger.js"></script> <script src="/js/styles/nav-burger.js"></script>
<script src="/js/styles/modal-trigger.js"></script> <script src="/js/styles/modal-trigger.js"></script>
<script src="/js/utils/reboot.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 defer src="/js/auth/auth.js"></script>
<script> <script>
@@ -88,7 +89,7 @@
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons is-flex-direction-column-mobile"> <div class="buttons is-flex-direction-column-mobile">
<div class="control is-expanded-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"> <span class="icon">
<i class="fas fa-arrows-rotate"></i> <i class="fas fa-arrows-rotate"></i>
</span> </span>
@@ -467,7 +468,7 @@
<div id="loading-content" style="display: none"> <div id="loading-content" style="display: none">
<div class="custom-loader"></div> <div class="custom-loader"></div>
<div class="countdown-text"> <div class="countdown-text">
Rebooting... <span id="countdown">40</span>s Rebooting... <span id="countdown">80</span>s
</div> </div>
</div> </div>
<div class="buttons" id="modal-buttons"> <div class="buttons" id="modal-buttons">

View File

@@ -23,6 +23,7 @@
<script src="/js/styles/nav-burger.js"></script> <script src="/js/styles/nav-burger.js"></script>
<script src="/js/styles/modal-trigger.js"></script> <script src="/js/styles/modal-trigger.js"></script>
<script src="/js/utils/reboot.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 defer src="/js/auth/auth.js"></script>
<script> <script>
@@ -88,7 +89,7 @@
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons is-flex-direction-column-mobile"> <div class="buttons is-flex-direction-column-mobile">
<div class="control is-expanded-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"> <span class="icon">
<i class="fas fa-arrows-rotate"></i> <i class="fas fa-arrows-rotate"></i>
</span> </span>
@@ -438,7 +439,7 @@
<div id="loading-content" style="display: none"> <div id="loading-content" style="display: none">
<div class="custom-loader"></div> <div class="custom-loader"></div>
<div class="countdown-text"> <div class="countdown-text">
Rebooting... <span id="countdown">40</span>s Rebooting... <span id="countdown">80</span>s
</div> </div>
</div> </div>
<div class="buttons" id="modal-buttons"> <div class="buttons" id="modal-buttons">

View File

@@ -23,6 +23,7 @@
<script src="/js/styles/nav-burger.js"></script> <script src="/js/styles/nav-burger.js"></script>
<script src="/js/styles/modal-trigger.js"></script> <script src="/js/styles/modal-trigger.js"></script>
<script src="/js/utils/reboot.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 defer src="/js/auth/auth.js"></script>
<script> <script>
@@ -88,7 +89,7 @@
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons is-flex-direction-column-mobile"> <div class="buttons is-flex-direction-column-mobile">
<div class="control is-expanded-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"> <span class="icon">
<i class="fas fa-arrows-rotate"></i> <i class="fas fa-arrows-rotate"></i>
</span> </span>
@@ -402,7 +403,7 @@
<div id="loading-content" style="display: none"> <div id="loading-content" style="display: none">
<div class="custom-loader"></div> <div class="custom-loader"></div>
<div class="countdown-text"> <div class="countdown-text">
Rebooting... <span id="countdown">40</span>s Rebooting... <span id="countdown">80</span>s
</div> </div>
</div> </div>
<div class="buttons" id="modal-buttons"> <div class="buttons" id="modal-buttons">

View File

@@ -261,31 +261,8 @@ html.theme-light {
background: #3273dc; background: #3273dc;
} }
} }
/* End of custom table styles */
/* Change checkbox checked color to this: #3273dc */ .isCursorPointer {
/* Hide the default checkbox */
/* input[type="checkbox"] {
appearance: none;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: white;
cursor: pointer; 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/nav-burger.js"></script>
<script src="/js/styles/modal-trigger.js"></script> <script src="/js/styles/modal-trigger.js"></script>
<script src="/js/utils/reboot.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 defer src="/js/auth/auth.js"></script>
<script> <script>
@@ -89,7 +90,7 @@
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons is-flex-direction-column-mobile"> <div class="buttons is-flex-direction-column-mobile">
<div class="control is-expanded-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"> <span class="icon">
<i class="fas fa-arrows-rotate"></i> <i class="fas fa-arrows-rotate"></i>
</span> </span>

View File

@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', function() {
const modal = document.getElementById('reboot-modal'); const modal = document.getElementById('reboot-modal');
const rebootButton = document.getElementById('rebootModem'); const rebootButton = document.getElementById('rebootModem');
const cancelButtons = modal.querySelectorAll('.cancel, .modal-background'); 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 modalMessage = document.getElementById('modal-message');
const loadingContent = document.getElementById('loading-content'); const loadingContent = document.getElementById('loading-content');
const modalButtons = document.getElementById('modal-buttons'); const modalButtons = document.getElementById('modal-buttons');
@@ -46,7 +46,7 @@ document.addEventListener('DOMContentLoaded', function() {
} }
// Show modal when restart connection button is clicked // Show modal when restart connection button is clicked
restartConnectionBtn.addEventListener('click', function(e) { powerButton.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
toggleModal(true); 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');
}
});