181 lines
4.3 KiB
HTML
181 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>WiFi Setup</title>
|
|
|
|
<script>
|
|
/*
|
|
===============================
|
|
WiFi Scan
|
|
================================
|
|
*/
|
|
async function scanWifi() {
|
|
const scanDiv = document.getElementById("scan");
|
|
scanDiv.innerHTML = "Scanning...";
|
|
|
|
try {
|
|
const res = await fetch("/api/scan");
|
|
const list = await res.json();
|
|
|
|
if (!list.length) {
|
|
scanDiv.innerHTML = "No networks found.";
|
|
return;
|
|
}
|
|
|
|
// RSSI 기준 정렬 (신호 강한 순)
|
|
list.sort((a, b) => b.rssi - a.rssi);
|
|
|
|
let html = "<ul>";
|
|
list.forEach(n => {
|
|
html += `<li>
|
|
<a href="#" onclick="selectSSID('${n.ssid}')">
|
|
${n.ssid} (${n.rssi} dBm)
|
|
</a>
|
|
</li>`;
|
|
});
|
|
html += "</ul>";
|
|
|
|
scanDiv.innerHTML = html;
|
|
} catch (e) {
|
|
scanDiv.innerHTML = "Scan failed.";
|
|
}
|
|
}
|
|
|
|
/* 선택한 SSID 입력창에 반영 */
|
|
function selectSSID(ssid) {
|
|
document.getElementById("ssid").value = ssid;
|
|
}
|
|
|
|
/*
|
|
===============================
|
|
Connect / Disconnect
|
|
================================
|
|
*/
|
|
async function connectWifi() {
|
|
const ssid = document.getElementById("ssid").value;
|
|
const pass = document.getElementById("pass").value;
|
|
|
|
const res = await fetch("/api/connect", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ ssid, pass })
|
|
});
|
|
|
|
const txt = await res.text();
|
|
document.getElementById("result").innerText = txt;
|
|
}
|
|
|
|
async function disconnectWifi() {
|
|
await fetch("/api/disconnect", { method: "POST" });
|
|
}
|
|
|
|
/*
|
|
===============================
|
|
Status Polling
|
|
================================
|
|
*/
|
|
async function pollStatus() {
|
|
const res = await fetch("/api/status");
|
|
const st = await res.json();
|
|
|
|
let txt = "Status: " + st.status;
|
|
if (st.status === "connected") {
|
|
txt += `<br>SSID: ${st.ssid}<br>IP: ${st.ip}<br>RSSI: ${st.rssi}`;
|
|
}
|
|
document.getElementById("result").innerHTML = txt;
|
|
}
|
|
setInterval(pollStatus, 2000);
|
|
|
|
/*
|
|
===============================
|
|
Saved Networks
|
|
================================
|
|
*/
|
|
async function loadSaved() {
|
|
const res = await fetch("/api/saved");
|
|
const list = await res.json();
|
|
|
|
if (!list.length) {
|
|
document.getElementById("saved").innerHTML =
|
|
"저장된 AP 정보가 없습니다.";
|
|
return;
|
|
}
|
|
|
|
let html = "<ul>";
|
|
list.forEach((s, i) => {
|
|
html += `<li>
|
|
${s}
|
|
<button onclick="connectSaved(${i})">Connect</button>
|
|
<button onclick="deleteSaved(${i})">Delete</button>
|
|
</li>`;
|
|
});
|
|
html += "</ul>";
|
|
document.getElementById("saved").innerHTML = html;
|
|
}
|
|
|
|
async function connectSaved(i) {
|
|
await fetch("/api/connect_saved", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ index: i })
|
|
});
|
|
}
|
|
|
|
async function deleteSaved(i) {
|
|
if (!confirm("이 AP 정보를 삭제하시겠습니까?")) return;
|
|
|
|
await fetch("/api/delete_saved", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ index: i })
|
|
});
|
|
|
|
loadSaved(); // 목록 갱신
|
|
}
|
|
|
|
/* 페이지 로드 시 저장된 AP 불러오기 */
|
|
loadSaved();
|
|
</script>
|
|
</head>
|
|
|
|
<body style="background-color:#1C304A; color:white; font-family: Arial;">
|
|
|
|
<h2>WiFi Setup</h2>
|
|
|
|
<!-- 입력 영역 -->
|
|
<label>SSID</label><br>
|
|
<input id="ssid" style="width:200px;"><br><br>
|
|
|
|
<label>Password</label><br>
|
|
<input id="pass" type="password" style="width:200px;"><br><br>
|
|
|
|
<!-- 버튼 정렬 -->
|
|
<button onclick="connectWifi()">Connect</button>
|
|
<button onclick="scanWifi()">Scan</button>
|
|
|
|
<hr>
|
|
|
|
<!-- Scan 결과 -->
|
|
<div id="scan"></div>
|
|
|
|
<hr>
|
|
|
|
<!-- 상태 표시 -->
|
|
<div id="result"></div>
|
|
|
|
<hr>
|
|
|
|
<!-- 저장된 네트워크 -->
|
|
<h3>Saved Networks</h3>
|
|
<div id="saved"></div>
|
|
|
|
<br>
|
|
<button onclick="disconnectWifi()">Disconnect</button>
|
|
|
|
<a href="/" style="color:#7faaff;">Back</a>
|
|
|
|
</body>
|
|
|
|
</html> |