#include "sh_core_esp8266.h"
const char* wifi_setup_page = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WiFi setup</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>{{STYLES}}</style>
</head>
<body>
<div class="container">
<main class="window">
<div class="window-heading">
<h3>WiFi setup</h3>
</div>
<div class="window-content">
<div class="row">
<div class="col">
<p class="sub-heading">
Connect the device to your home WiFi network.
</p>
<form method="POST" action="/save_wifi">
<div class="form-container">
<div class="form-group mb">
<label class="form-label">WiFi SSID</label>
<input name="ssid" class="form-control" placeholder="MyWiFi">
</div>
<div class="form-group mb">
<label class="form-label">Password</label>
<input name="pass" type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group mb">
<button type="submit" class="btn btn-primary">
Save & reboot
</button>
</div>
</div>
</form>
<div class="mt-2" data-last-ssid="{{LAST_SSID}}">
<h5 class="mb">Last Wi-Fi SSID: {{LAST_SSID}}</h5>
<form method="POST" action="/wifi_confirm" style="margin-top:10px;">
<button class="btn" type="submit">This connection is correct</button>
</form>
</div>
</div>
<div class="col">
<div class="wifi-list-container"></div>
</div>
</div>
</div>
</main>
<footer>
<p>ESP SmartHome Device</p>
</footer>
</div>
<script>
async function load_wifi_networks() {
const box = document.querySelector(".wifi-list-container");
if (!box) return;
box.innerHTML = "<div class='scanning'>Scanning...</div>";
try {
const res = await fetch("/wifi_scan", { cache: "no-store" });
if (!res.ok) throw new Error("HTTP " + res.status);
const data = await res.json();
if (!data || data.status !== "ok") {
box.innerHTML = "<div class='error-box'>Response ERROR</div>";
return;
}
const list = Array.isArray(data.networks) ? data.networks : [];
if (list.length === 0) {
box.innerHTML = "<div class='no-result'>Networks not found</div>";
return;
}
list.sort((a, b) => (b.signal || 0) - (a.signal || 0));
let html = "";
html += "<div class='wifi-list'>";
html += "<div class='wifi-list-header'>";
html += " <div class='heading'>Wi-Fi networks</div>";
html += " <button type='button' onclick='load_wifi_networks()'>⟳</button>";
html += "</div>";
html += "<div class='wifi-list-body'>";
for (const net of list) {
const ssid = (net.ssid ?? "");
if(!ssid.length) continue;
const secured = !!net.secured;
const p = Math.max(0, Math.min(100, Number(net.signal ?? 0)));
html += "<div class='wifi-row' data-ssid='" + encodeURIComponent(ssid) + "' data-signal='" + p + "' data-secured='" + (secured ? "1" : "0") + "'></div>";
}
html += "</div></div>";
box.innerHTML = html;
const rows = box.querySelectorAll(".wifi-row");
rows.forEach((row) => {
const ssid = decodeURIComponent(row.getAttribute("data-ssid") || "");
const p = Number(row.getAttribute("data-signal") || "0");
const secured = row.getAttribute("data-secured") === "1";
const btn = document.createElement("button");
btn.type = "button";
btn.onclick = () => {
const inp = document.querySelector("input[name=ssid]");
if (inp) inp.value = ssid;
};
btn.innerHTML = ssid + (secured ? " <small>[lock]</small>" : "");
const sig = document.createElement("div");
sig.classList.add("signal");
const bar = document.createElement("div");
bar.classList.add("signal-bar");
const fill = document.createElement("div");
fill.classList.add("signal-bar-fill");
fill.style.width = p + "%";
bar.appendChild(fill);
const perc = document.createElement("div");
perc.classList.add("signal-percent");
perc.textContent = p + "%";
sig.appendChild(bar);
sig.appendChild(perc);
row.appendChild(btn);
row.appendChild(sig);
});
} catch (e) {
box.innerHTML = "<div class='error-box'>Scanning ERROR</div>";
}
}
document.addEventListener("DOMContentLoaded", () => {
load_wifi_networks();
if(document.querySelector('[data-last-ssid]').dataset.lastSsid == '(Empty)') {
document.querySelector('[data-last-ssid]').remove();
}
});
</script>
</body>
</html>
)HTML";
const char* update_page = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Firmware Update</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="bg-dark text-light">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-5">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="h4 mb-3 text-center">Firmware Update</h1>
<p class="text-muted text-center mb-4">
Select a compiled <code>.bin</code> file and upload it to update the firmware.
</p>
<form method="POST" action="/update" enctype="multipart/form-data">
<div class="mb-3">
<input type="file" name="firmware" class="form-control">
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary">
Upload & flash
</button>
</div>
</form>
</div>
</div>
<p class="text-center mt-3 mb-0">
<a href="/" class="link-light text-decoration-none">Back</a>
</p>
</div>
</div>
</div>
</body>
</html>
)HTML";
