mirror of
https://github.com/Laxilef/OTGateway.git
synced 2025-12-11 02:34:29 +05:00
208 lines
7.0 KiB
HTML
208 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Network - OpenTherm Gateway</title>
|
|
<link rel="stylesheet" href="/static/pico.min.css">
|
|
<link rel="stylesheet" href="/static/app.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<header class="container">
|
|
<nav>
|
|
<ul>
|
|
<li><a href="/"><div class="logo">OpenTherm Gateway</div></a></li>
|
|
</ul>
|
|
<ul>
|
|
<li><a href="https://github.com/Laxilef/OTGateway/wiki" role="button" class="secondary" target="_blank">Help</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<article>
|
|
<div>
|
|
<hgroup>
|
|
<h2>Network settings</h2>
|
|
<p></p>
|
|
</hgroup>
|
|
|
|
<div id="network-settings-busy" aria-busy="true"></div>
|
|
<form action="/api/network/settings" id="network-settings" class="hidden">
|
|
<label for="network-hostname">
|
|
Hostname
|
|
<input type="text" id="network-hostname" name="hostname" maxlength="24" pattern="[A-Za-z0-9]+[A-Za-z0-9\-]+[A-Za-z0-9]+" required>
|
|
</label>
|
|
|
|
<label for="network-use-dhcp">
|
|
<input type="checkbox" id="network-use-dhcp" name="useDhcp" value="true">
|
|
Use DHCP
|
|
</label>
|
|
<br />
|
|
<hr />
|
|
|
|
<label for="network-static-ip">
|
|
Static IP:
|
|
<input type="text" id="network-static-ip" name="staticConfig[ip]" value="true" maxlength="16" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
|
|
</label>
|
|
|
|
<label for="network-static-gateway">
|
|
Static gateway:
|
|
<input type="text" id="network-static-gateway" name="staticConfig[gateway]" maxlength="16" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
|
|
</label>
|
|
|
|
<label for="network-static-subnet">
|
|
Static subnet:
|
|
<input type="text" id="network-static-subnet" name="staticConfig[subnet]" maxlength="16" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
|
|
</label>
|
|
|
|
<label for="network-static-dns">
|
|
Static DNS:
|
|
<input type="text" id="network-static-dns" name="staticConfig[dns]" maxlength="16" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" required>
|
|
</label>
|
|
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
|
|
<article>
|
|
<div>
|
|
<hgroup>
|
|
<h3>Available networks</h3>
|
|
<p></p>
|
|
</hgroup>
|
|
|
|
<form action="/api/network/scan" id="network-scan">
|
|
<figure style="max-height: 25em;">
|
|
<table id="networks" role="grid">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">SSID</th>
|
|
<th scope="col">Signal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</figure>
|
|
|
|
<button type="submit">Refresh</button>
|
|
</form>
|
|
|
|
<hr />
|
|
<div>
|
|
<hgroup>
|
|
<h2>WiFi settings</h2>
|
|
<p></p>
|
|
</hgroup>
|
|
|
|
<div id="sta-settings-busy" aria-busy="true"></div>
|
|
<form action="/api/network/settings" id="sta-settings" class="hidden">
|
|
<label for="sta-ssid">
|
|
SSID:
|
|
<input type="text" id="sta-ssid" name="sta[ssid]" maxlength="32" required>
|
|
</label>
|
|
|
|
<label for="sta-password">
|
|
Password:
|
|
<input type="password" id="sta-password" name="sta[password]" maxlength="64" required>
|
|
</label>
|
|
|
|
<label for="sta-channel">
|
|
Channel:
|
|
<input type="number" inputmode="numeric" id="sta-channel" name="sta[channel]" min="0" max="12" step="1" required>
|
|
<small>set 0 for auto select</small>
|
|
</label>
|
|
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article>
|
|
<div>
|
|
<hgroup>
|
|
<h2>AP settings</h2>
|
|
<p></p>
|
|
</hgroup>
|
|
|
|
<div id="ap-settings-busy" aria-busy="true"></div>
|
|
<form action="/api/network/settings" id="ap-settings" class="hidden">
|
|
<label for="ap-ssid">
|
|
SSID:
|
|
<input type="text" id="ap-ssid" name="ap[ssid]" maxlength="32" required>
|
|
</label>
|
|
|
|
<label for="ap-password">
|
|
Password:
|
|
<input type="text" id="ap-password" name="ap[password]" maxlength="64" required>
|
|
</label>
|
|
|
|
<label for="ap-channel">
|
|
Channel:
|
|
<input type="number" inputmode="numeric" id="ap-channel" name="ap[channel]" min="1" max="12" step="1" required>
|
|
</label>
|
|
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<footer class="container">
|
|
<small>
|
|
<b>Made by Laxilef</b>
|
|
• <a href="https://github.com/Laxilef/OTGateway/blob/master/LICENSE" target="_blank" class="secondary">License</a>
|
|
• <a href="https://github.com/Laxilef/OTGateway/blob/master/" target="_blank" class="secondary">Source code</a>
|
|
• <a href="https://github.com/Laxilef/OTGateway/wiki" target="_blank" class="secondary">Help</a>
|
|
• <a href="https://github.com/Laxilef/OTGateway/issues" target="_blank" class="secondary">Issue & questions</a>
|
|
• <a href="https://github.com/Laxilef/OTGateway/releases" target="_blank" class="secondary">Releases</a>
|
|
</small>
|
|
</footer>
|
|
|
|
<script src="/static/app.js"></script>
|
|
<script>
|
|
window.onload = async function () {
|
|
try {
|
|
const response = await fetch('/api/network/settings', { cache: 'no-cache' });
|
|
if (!response.ok) {
|
|
throw new Error('Response not valid');
|
|
}
|
|
|
|
const result = await response.json();
|
|
setInputValue('#network-hostname', result.hostname);
|
|
setCheckboxValue('#network-use-dhcp', result.useDhcp);
|
|
setInputValue('#network-static-ip', result.staticConfig.ip);
|
|
setInputValue('#network-static-gateway', result.staticConfig.gateway);
|
|
setInputValue('#network-static-subnet', result.staticConfig.subnet);
|
|
setInputValue('#network-static-dns', result.staticConfig.dns);
|
|
setBusy('#network-settings-busy', '#network-settings', false);
|
|
|
|
setInputValue('#sta-ssid', result.sta.ssid);
|
|
setInputValue('#sta-password', result.sta.password);
|
|
setInputValue('#sta-channel', result.sta.channel);
|
|
setBusy('#sta-settings-busy', '#sta-settings', false);
|
|
|
|
setInputValue('#ap-ssid', result.ap.ssid);
|
|
setInputValue('#ap-password', result.ap.password);
|
|
setInputValue('#ap-channel', result.ap.channel);
|
|
setBusy('#ap-settings-busy', '#ap-settings', false);
|
|
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
|
|
setupForm('#network-settings');
|
|
setupNetworkScanForm('#network-scan', '#networks');
|
|
setupForm('#sta-settings');
|
|
setupForm('#ap-settings');
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|