250 lines
8.2 KiB
HTML
250 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Simple Settings</title>
|
|
|
|
<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>
|
|
<!-- START NAV -->
|
|
<nav class="navbar is-black" x-data="{ isOpen: false }">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item brand-text" href="/"> Simple Admin </a>
|
|
<a
|
|
role="button"
|
|
class="navbar-burger burger"
|
|
@click="isOpen = !isOpen"
|
|
>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
<div
|
|
id="navMenu"
|
|
class="navbar-menu"
|
|
:class="isOpen ? 'is-active' : ''"
|
|
>
|
|
<div class="navbar-start">
|
|
<a class="navbar-item" href="/"> Connection Info </a>
|
|
<a class="navbar-item" href="/atcommander.html">
|
|
Simple Settings
|
|
</a>
|
|
<a class="navbar-item" href="/bandlock.html"> Simple Network </a>
|
|
<a class="navbar-item" href="/sms.html"> SMS </a>
|
|
<a class="navbar-item" href="/ttl.html"> TTL Changer </a>
|
|
<a class="navbar-item" href="/speedtest.html"> Speedtest </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- END NAV -->
|
|
<div class="container" x-data="atCommands()">
|
|
<div class="columns">
|
|
<div class="column is-12">
|
|
<div class="columns">
|
|
<div class="column is-4">
|
|
<div class="card">
|
|
<header class="card-header">
|
|
<p class="card-header-title">AT Command</p>
|
|
</header>
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<div class="field">
|
|
<label class="label">AT Command</label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
placeholder="ATI"
|
|
x-model="atcmd"
|
|
x-ref="atCmdInput"
|
|
@keydown.enter="sendAtCommand()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<button
|
|
class="button is-success"
|
|
@click="sendAtCommand()"
|
|
:disabled="isLoading"
|
|
>
|
|
Send AT Command
|
|
</button>
|
|
|
|
<button
|
|
class="button is-danger"
|
|
@click="clearResponses()"
|
|
:disabled="atCommandResponse === ''"
|
|
>
|
|
Clear
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-8">
|
|
<div class="card">
|
|
<header class="card-header">
|
|
<p class="card-header-title">AT Command Response</p>
|
|
</header>
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<textarea
|
|
class="textarea"
|
|
placeholder="Multiple commands should be separated by a semicolon. Example: AT+CGMR;+GSN"
|
|
rows="10"
|
|
x-text="isLoading ? 'Fetching response, please wait...' : atCommandResponse"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- START Useful Commands Section -->
|
|
<div class="container" x-data="atCommands()">
|
|
<div class="columns">
|
|
<div class="column is-12">
|
|
<div class="card">
|
|
<header class="card-header">
|
|
<p class="card-header-title">Useful One Click Commands</p>
|
|
</header>
|
|
<div class="card-content">
|
|
<div class="content">
|
|
<div style="display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 1rem; justify-content: space-between;">
|
|
<div class="field">
|
|
<div class="control">
|
|
<button
|
|
class="button is-danger"
|
|
@click="sendRebootCommand()"
|
|
:disabled="isRebooting"
|
|
>
|
|
Reboot
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="field">
|
|
<div class="control">
|
|
<button
|
|
class="button is-danger"
|
|
@click="sendRebootCommand()"
|
|
:disabled="isRebooting"
|
|
>
|
|
Reboot
|
|
</button>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 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>
|
|
|
|
<script>
|
|
function atCommands() {
|
|
return {
|
|
isLoading: false,
|
|
isRebooting: false,
|
|
countdown: 40, // Total waiting time in seconds
|
|
atcmd: null,
|
|
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
|
|
);
|
|
}
|
|
this.isLoading = true;
|
|
fetch(
|
|
"/cgi-bin/get_atcommand?" +
|
|
new URLSearchParams({
|
|
atcmd: this.atcmd,
|
|
})
|
|
)
|
|
.then((res) => {
|
|
return res.text();
|
|
})
|
|
.then((data) => {
|
|
this.atCommandResponse = data;
|
|
this.isLoading = false;
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
});
|
|
},
|
|
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>
|
|
</body>
|
|
</html>
|