Clément SAILLANT
111 lines
3.9 KiB
HTML
111 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RTC_BL_PHONE Web UI</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>RTC_BL_PHONE Web UI</h1>
|
|
<p id="statusLine">Chargement...</p>
|
|
</header>
|
|
|
|
<nav>
|
|
<button data-section="dashboard">Dashboard</button>
|
|
<button data-section="config">Configuration</button>
|
|
<button data-section="network">Réseau</button>
|
|
<button data-section="control">Contrôle</button>
|
|
<button id="refreshAllBtn">Rafraîchir tout</button>
|
|
</nav>
|
|
|
|
<main>
|
|
<section id="dashboardSection" class="active">
|
|
<h2>Statut runtime</h2>
|
|
<pre id="statusJson"></pre>
|
|
</section>
|
|
|
|
<section id="configSection">
|
|
<h2>Configuration</h2>
|
|
<div class="inline-actions">
|
|
<button id="refreshConfigBtn">Rafraîchir configuration</button>
|
|
</div>
|
|
<pre id="configJson"></pre>
|
|
</section>
|
|
|
|
<section id="networkSection">
|
|
<h2>Réseau et bridges</h2>
|
|
<div class="grid2">
|
|
<div>
|
|
<h3>WiFi</h3>
|
|
<form id="wifiConnectForm">
|
|
<input type="text" id="wifiSsid" placeholder="SSID" required>
|
|
<input type="password" id="wifiPass" placeholder="Mot de passe">
|
|
<button type="submit">Connecter WiFi</button>
|
|
</form>
|
|
<div class="inline-actions">
|
|
<button id="wifiDisconnectBtn">Déconnecter WiFi</button>
|
|
<button id="wifiReconnectBtn">Reconnecter WiFi</button>
|
|
<button id="wifiScanBtn">Scanner WiFi</button>
|
|
</div>
|
|
<pre id="wifiJson"></pre>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>MQTT</h3>
|
|
<div class="inline-actions">
|
|
<button id="mqttConnectBtn">Connecter MQTT</button>
|
|
<button id="mqttDisconnectBtn">Déconnecter MQTT</button>
|
|
</div>
|
|
<form id="mqttPublishForm">
|
|
<input type="text" id="mqttTopic" placeholder="Topic (ex: rtc_bl_phone/a252/test)" required>
|
|
<textarea id="mqttPayload" rows="3" placeholder='Payload JSON ou texte'>{"ping":true}</textarea>
|
|
<button type="submit">Publier MQTT</button>
|
|
</form>
|
|
<pre id="mqttJson"></pre>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>ESP-NOW</h3>
|
|
<form id="espnowPeerForm">
|
|
<input type="text" id="espnowMac" placeholder="AA:BB:CC:DD:EE:FF" required>
|
|
<button type="submit">Ajouter pair</button>
|
|
<button type="button" id="espnowDelBtn">Supprimer pair</button>
|
|
</form>
|
|
<form id="espnowSendForm">
|
|
<input type="text" id="espnowTarget" placeholder="broadcast ou MAC" value="broadcast" required>
|
|
<textarea id="espnowPayload" rows="3" placeholder="Payload (texte ou JSON)">{\"cmd\":\"STATUS\"}</textarea>
|
|
<button type="submit">Envoyer</button>
|
|
</form>
|
|
<div class="inline-actions">
|
|
<button id="espnowOnBtn">ESPNOW_ON</button>
|
|
<button id="espnowOffBtn">ESPNOW_OFF</button>
|
|
<button id="espnowRefreshBtn">Rafraîchir ESP-NOW</button>
|
|
</div>
|
|
<pre id="espnowJson"></pre>
|
|
<pre id="espnowPeersJson"></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="controlSection">
|
|
<h2>Contrôle</h2>
|
|
<div class="inline-actions">
|
|
<button data-action="CALL">CALL</button>
|
|
<button data-action="CAPTURE_START">CAPTURE_START</button>
|
|
<button data-action="CAPTURE_STOP">CAPTURE_STOP</button>
|
|
<button data-action="RESET_METRICS">RESET_METRICS</button>
|
|
</div>
|
|
<form id="rawCommandForm">
|
|
<input type="text" id="rawCommandInput" placeholder="Commande série (ex: ESPNOW_STATUS)" required>
|
|
<button type="submit">Exécuter</button>
|
|
</form>
|
|
<pre id="actionResult"></pre>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|