tyk/quectel-rgmii-toolkit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added reboot button

Browse Source
This commit is contained in:
Russel Yasol
2024-03-24 22:38:21 +08:00
parent 4a3307f683
commit b423866d0d
2 changed files with 106 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
simpleadmin/www/atcommander.html
View File

@@ -9,6 +9,7 @@
<script src="/js/alpinejs.min.js" defer></script>
<link rel="stylesheet" href="/css/bulma.css" />
<link rel="stylesheet" type="text/css" href="/css/admin.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
@@ -122,11 +123,40 @@
</header>
<div class="card-content">
<div class="content">
<div
class="field"
style="margin-bottom: 1rem"
x-data="atCommands()"
>
<p class="control">
<button
class="button is-danger"
@click="sendRebootCommand()"
:disabled="isRebooting"
>
Reboot
</button>
</p>
<!-- Loading modal -->
<div x-show="isRebooting" class="modal-overlay">
<div class="loading-modal">
<div class="spinner"></div>
<div class="loading-text" style="display: flex; flex-direction: column;">
<h3>Rebooting...</h3>
<p style="margin-top: 0.5rem;">Please wait for
<span x-text="countdown" style="font-weight: 500;"></span> seconds before
refreshing the page.</p>
</div>
</div>
</div>
</div>
<!-- Add your useful commands content here -->
<p>Here are some useful commands:</p>
<ul>
<li>
See https://github.com/iamromulan/RM520N-GL#at-commands for
<!-- Open to another tab -->
See <a href="https://github.com/iamromulan/RM520N-GL#at-commands" target="_blank" style="cursor: pointer;">https://github.com/iamromulan/RM520N-GL#at-commands</a> for
more
</li>
<li>AT+CFUN=1,1 (reboot)</li>
@@ -235,20 +265,24 @@
</div>
</div>
</div>
<!-- END Useful Commands Section -->
<script>
function atCommands() {
return {
isLoading: false,
isRebooting: false,
countdown: 40, // Total waiting time in seconds
atcmd: null,
defaultAtCommand: 'ATI',
defaultAtCommand: "ATI",
atCommandResponse: "",
sendAtCommand() {
if (!this.atcmd) {
// Use ATI as default command
this.atcmd = "ATI";
console.log("AT Command is empty, using ATI as default command: ", this.atcmd);
console.log(
"AT Command is empty, using ATI as default command: ",
this.atcmd
);
}
this.isLoading = true;
fetch(
@@ -271,6 +305,33 @@
clearResponses() {
this.atCommandResponse = "";
},
sendRebootCommand() {
this.atcmd = "AT+CFUN=1,1";
this.isRebooting = true;
console.log("Reboot command sent: ", this.atcmd);
fetch(
"/cgi-bin/get_atcommand?" +
new URLSearchParams({
atcmd: this.atcmd,
})
)
.then((res) => {
return res.text();
})
.then((data) => {
this.atCommandResponse =
"Rebooting... Please wait a few seconds before refreshing the page.";
})
.finally(() => {
let timer = setInterval(() => {
this.countdown--;
if (this.countdown <= 0) {
clearInterval(timer);
this.isRebooting = false;
}
}, 1000); // Update countdown every second
});
},
};
}
</script>

41
simpleadmin/www/styles.css Normal file
View File

@@ -0,0 +1,41 @@
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}
.loading-modal {
background-color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #333;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 10px auto;
}
.loading-text {
font-size: 18px;
color: #333;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}