PaulVua/nebuleair_pro_4g
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

wifi.html: rebuild propre depuis v1.4.4 + nouvelles features

Browse Source 
Repart du code v1.4.4 qui fonctionne (elementsToLoad, config.json,
window.onload) et ajoute proprement: bouton oublier reseau, cards
contextuelles, infos WiFi detaillees, scan ameliore avec cache notice.
Ne touche PAS au systeme de chargement d'origine.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
PaulVua
2026-03-17 18:52:52 +01:00
parent 8f88eae575
commit 425a89de3f
1 changed files with 125 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
html/wifi.html
View File

@@ -72,34 +72,13 @@
</div> </div>
<table class="table table-sm mb-0" id="connection-info-table" style="display:none;"> <table class="table table-sm mb-0" id="connection-info-table" style="display:none;">
<tbody> <tbody>
<tr> <tr><td class="text-muted" style="width:40%">SSID</td><td><strong id="info-ssid">-</strong></td></tr>
<td class="text-muted" style="width:40%">SSID</td> <tr><td class="text-muted">Signal</td><td><span id="info-signal">-</span></td></tr>
<td><strong id="info-ssid">-</strong></td> <tr><td class="text-muted">Adresse IP</td><td><code id="info-ip">-</code></td></tr>
</tr> <tr><td class="text-muted">Passerelle</td><td><code id="info-gateway">-</code></td></tr>
<tr> <tr><td class="text-muted">Hostname</td><td><code id="info-hostname">-</code></td></tr>
<td class="text-muted">Signal</td> <tr><td class="text-muted">Frequence</td><td id="info-freq">-</td></tr>
<td><span id="info-signal-bar"></span> <span id="info-signal">-</span></td> <tr><td class="text-muted">Securite</td><td id="info-security">-</td></tr>
</tr>
<tr>
<td class="text-muted">Adresse IP</td>
<td><code id="info-ip">-</code></td>
</tr>
<tr>
<td class="text-muted">Passerelle</td>
<td><code id="info-gateway">-</code></td>
</tr>
<tr>
<td class="text-muted">Hostname</td>
<td><code id="info-hostname">-</code></td>
</tr>
<tr>
<td class="text-muted">Frequence</td>
<td id="info-freq">-</td>
</tr>
<tr>
<td class="text-muted">Securite</td>
<td id="info-security">-</td>
</tr>
</tbody> </tbody>
</table> </table>
<button class="btn btn-outline-primary btn-sm mt-2" onclick="get_internet()">Rafraichir</button> <button class="btn btn-outline-primary btn-sm mt-2" onclick="get_internet()">Rafraichir</button>
@@ -116,14 +95,8 @@
<div class="card-body"> <div class="card-body">
<table class="table table-sm mb-0"> <table class="table table-sm mb-0">
<tbody> <tbody>
<tr> <tr><td class="text-muted" style="width:40%">Etat</td><td id="info-eth-status">-</td></tr>
<td class="text-muted" style="width:40%">Etat</td> <tr><td class="text-muted">Adresse IP</td><td><code id="info-eth-ip">-</code></td></tr>
<td id="info-eth-status">-</td>
</tr>
<tr>
<td class="text-muted">Adresse IP</td>
<td><code id="info-eth-ip">-</code></td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -162,12 +135,7 @@
</div> </div>
<table class="table table-hover mb-0" id="wifi-scan-table" style="display:none;"> <table class="table table-hover mb-0" id="wifi-scan-table" style="display:none;">
<thead> <thead>
<tr> <tr><th>SSID</th><th>Signal</th><th>Securite</th><th></th></tr>
<th>SSID</th>
<th>Signal</th>
<th>Securite</th>
<th></th>
</tr>
</thead> </thead>
<tbody id="data-table-body_wifi_scan"></tbody> <tbody id="data-table-body_wifi_scan"></tbody>
</table> </table>
@@ -232,24 +200,8 @@
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(error => console.error(`Error loading ${file}:`, error));
}); });
}); });
function load_ethernet_info() {
$.ajax({
url: 'launcher.php?type=internet',
dataType: 'json',
method: 'GET',
success: function(response) {
const eth = response.ethernet;
document.getElementById('info-eth-status').textContent = eth.connection || '-';
document.getElementById('info-eth-ip').textContent = eth.IP || '-';
}
});
}
function getSignalBadge(signal) { function getSignalBadge(signal) {
const val = parseInt(signal, 10); const val = parseInt(signal, 10);
if (isNaN(val)) return ''; if (isNaN(val)) return '';
@@ -275,7 +227,6 @@ function get_internet(){
const wifi = response.wifi; const wifi = response.wifi;
const eth = response.ethernet; const eth = response.ethernet;
// WiFi info
document.getElementById('info-ssid').textContent = wifi.ssid || '-'; document.getElementById('info-ssid').textContent = wifi.ssid || '-';
document.getElementById('info-signal').innerHTML = wifi.signal ? getSignalBadge(wifi.signal) : '-'; document.getElementById('info-signal').innerHTML = wifi.signal ? getSignalBadge(wifi.signal) : '-';
document.getElementById('info-ip').textContent = wifi.IP || '-'; document.getElementById('info-ip').textContent = wifi.IP || '-';
@@ -284,9 +235,7 @@ function get_internet(){
document.getElementById('info-freq').textContent = wifi.frequency ? wifi.frequency + ' MHz' : '-'; document.getElementById('info-freq').textContent = wifi.frequency ? wifi.frequency + ' MHz' : '-';
document.getElementById('info-security').textContent = wifi.security || '-'; document.getElementById('info-security').textContent = wifi.security || '-';
// Ethernet info document.getElementById('info-eth-status').textContent = eth.connection || '-';
const ethStatus = eth.connection || '-';
document.getElementById('info-eth-status').textContent = ethStatus;
document.getElementById('info-eth-ip').textContent = eth.IP || '-'; document.getElementById('info-eth-ip').textContent = eth.IP || '-';
document.getElementById('connection-info-loading').style.display = 'none'; document.getElementById('connection-info-loading').style.display = 'none';
@@ -299,40 +248,24 @@ function get_internet(){
}); });
} }
function wifi_connect(SSID, PASS){ function wifi_connect(SSID, PASS){
console.log("Connecting to wifi"); console.log("Connecting to wifi");
console.log(SSID);
console.log(PASS);
if (typeof PASS === 'undefined') { if (typeof PASS === 'undefined') {
console.log("Need to add password");
//open bootstrap modal to ask for password
var myModal = new bootstrap.Modal(document.getElementById('myModal')); var myModal = new bootstrap.Modal(document.getElementById('myModal'));
//modifiy modal title
document.getElementById('myModalLabel').innerHTML = "Enter password for "+SSID; document.getElementById('myModalLabel').innerHTML = "Enter password for "+SSID;
//add input field to modal body
document.getElementById('myModalBody').innerHTML = "<input type='text' id='wifi_pass' class='form-control' placeholder='Password'>"; document.getElementById('myModalBody').innerHTML = "<input type='text' id='wifi_pass' class='form-control' placeholder='Password'>";
//add button to modal footer
document.getElementById('myModalFooter').innerHTML = "<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button><button type='button' class='btn btn-primary' onclick='wifi_connect(\""+SSID+"\", document.getElementById(\"wifi_pass\").value)'>Se connecter</button>"; document.getElementById('myModalFooter').innerHTML = "<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button><button type='button' class='btn btn-primary' onclick='wifi_connect(\""+SSID+"\", document.getElementById(\"wifi_pass\").value)'>Se connecter</button>";
myModal.show(); myModal.show();
} else { } else {
console.log("Will try to connect to "+SSID+" with password "+PASS);
console.log("Start PHP script:");
// Close modal
var myModal = bootstrap.Modal.getInstance(document.getElementById('myModal')); var myModal = bootstrap.Modal.getInstance(document.getElementById('myModal'));
if (myModal) { if (myModal) { myModal.hide(); }
myModal.hide();
}
$.ajax({ $.ajax({
url: 'launcher.php?type=wifi_connect&SSID='+SSID+'&pass='+PASS, url: 'launcher.php?type=wifi_connect&SSID='+SSID+'&pass='+PASS,
dataType: 'json', // Changed to JSON dataType: 'json',
method: 'GET', method: 'GET',
success: function(response) { success: function(response) {
console.log(response); console.log(response);
// Show connection status message
showConnectionStatus(response); showConnectionStatus(response);
}, },
error: function(xhr, status, error) { error: function(xhr, status, error) {
@@ -340,40 +273,20 @@ function get_internet(){
alert('Error: Could not start connection process'); alert('Error: Could not start connection process');
} }
}); });
} }
} }
function showConnectionStatus(response) { function showConnectionStatus(response) {
// Get user language (default to French)
const lang = localStorage.getItem('language') || 'fr'; const lang = localStorage.getItem('language') || 'fr';
const instructions = response.instructions[lang] || response.instructions['fr']; const instructions = response.instructions[lang] || response.instructions['fr'];
// Create overlay with instructions
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.id = 'connection-status-overlay'; overlay.id = 'connection-status-overlay';
overlay.style.cssText = ` overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;color:white;';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
color: white;
`;
overlay.innerHTML = ` overlay.innerHTML = `
<div style="max-width: 600px; padding: 40px; text-align: center;"> <div style="max-width: 600px; padding: 40px; text-align: center;">
<div class="spinner-border text-primary mb-4" role="status" style="width: 4rem; height: 4rem;"> <div class="spinner-border text-primary mb-4" role="status" style="width: 4rem; height: 4rem;"><span class="visually-hidden">Loading...</span></div>
<span class="visually-hidden">Loading...</span>
</div>
<h2 class="mb-4">${instructions.title}</h2> <h2 class="mb-4">${instructions.title}</h2>
<div class="alert alert-info text-start" role="alert"> <div class="alert alert-info text-start" role="alert">
<ol class="mb-0" style="padding-left: 20px;"> <ol class="mb-0" style="padding-left: 20px;">
<li class="mb-2"><strong>${instructions.step1}</strong></li> <li class="mb-2"><strong>${instructions.step1}</strong></li>
@@ -382,43 +295,19 @@ function get_internet(){
<li class="mb-2">${instructions.step4}</li> <li class="mb-2">${instructions.step4}</li>
</ol> </ol>
</div> </div>
<div class="alert alert-warning text-start" role="alert"><strong>Important:</strong> ${instructions.warning}</div>
<div class="alert alert-warning text-start" role="alert">
<strong>⚠️ Important:</strong> ${instructions.warning}
</div>
<div class="mt-4"> <div class="mt-4">
<p class="text-muted"> <p class="text-muted">${lang === 'fr' ? 'Reconnexion à' : 'Reconnecting to'}: <strong class="text-white">${response.ssid}</strong></p>
${lang === 'fr' ? 'Reconnexion à' : 'Reconnecting to'}: <p class="text-muted">${lang === 'fr' ? 'Nom du capteur' : 'Sensor name'}: <strong class="text-white">${response.deviceName}</strong></p>
<strong class="text-white">${response.ssid}</strong>
</p>
<p class="text-muted">
${lang === 'fr' ? 'Nom du capteur' : 'Sensor name'}:
<strong class="text-white">${response.deviceName}</strong>
</p>
</div> </div>
<div class="mt-4"><small class="text-muted">${lang === 'fr' ? 'Cette fenêtre va se fermer automatiquement...' : 'This window will close automatically...'}</small></div>
<div class="mt-4"> </div>`;
<small class="text-muted">
${lang === 'fr' ? 'Cette fenêtre va se fermer automatiquement...' : 'This window will close automatically...'}
</small>
</div>
</div>
`;
document.body.appendChild(overlay); document.body.appendChild(overlay);
setTimeout(() => { const o = document.getElementById('connection-status-overlay'); if (o) o.remove(); }, 30000);
// Auto-close after 30 seconds (gives time to read)
setTimeout(() => {
if (document.getElementById('connection-status-overlay')) {
document.getElementById('connection-status-overlay').remove();
}
}, 30000);
} }
function wifi_forget(){ function wifi_forget(){
if (!confirm('Oublier le réseau WiFi actuel et passer en mode hotspot ?')) return; if (!confirm('Oublier le réseau WiFi actuel et passer en mode hotspot ?')) return;
$.ajax({ $.ajax({
url: 'launcher.php?type=wifi_forget', url: 'launcher.php?type=wifi_forget',
dataType: 'json', dataType: 'json',
@@ -440,28 +329,11 @@ function get_internet(){
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.id = 'connection-status-overlay'; overlay.id = 'connection-status-overlay';
overlay.style.cssText = ` overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;color:white;';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
color: white;
`;
overlay.innerHTML = ` overlay.innerHTML = `
<div style="max-width: 600px; padding: 40px; text-align: center;"> <div style="max-width: 600px; padding: 40px; text-align: center;">
<div class="spinner-border text-warning mb-4" role="status" style="width: 4rem; height: 4rem;"> <div class="spinner-border text-warning mb-4" role="status" style="width: 4rem; height: 4rem;"><span class="visually-hidden">Loading...</span></div>
<span class="visually-hidden">Loading...</span>
</div>
<h2 class="mb-4">${instructions.title}</h2> <h2 class="mb-4">${instructions.title}</h2>
<div class="alert alert-info text-start" role="alert"> <div class="alert alert-info text-start" role="alert">
<ol class="mb-0" style="padding-left: 20px;"> <ol class="mb-0" style="padding-left: 20px;">
<li class="mb-2"><strong>${instructions.step1}</strong></li> <li class="mb-2"><strong>${instructions.step1}</strong></li>
@@ -470,27 +342,11 @@ function get_internet(){
<li class="mb-2">${instructions.step4}</li> <li class="mb-2">${instructions.step4}</li>
</ol> </ol>
</div> </div>
<div class="alert alert-warning text-start" role="alert"><strong>Important:</strong> ${instructions.warning}</div>
<div class="alert alert-warning text-start" role="alert"> <div class="mt-4"><p class="text-muted">Hotspot: <strong class="text-white">${response.deviceName}</strong></p></div>
<strong>Important:</strong> ${instructions.warning} </div>`;
</div>
<div class="mt-4">
<p class="text-muted">
${lang === 'fr' ? 'Hotspot' : 'Hotspot'}:
<strong class="text-white">${response.deviceName}</strong>
</p>
</div>
</div>
`;
document.body.appendChild(overlay); document.body.appendChild(overlay);
setTimeout(() => { const o = document.getElementById('connection-status-overlay'); if (o) o.remove(); }, 30000);
setTimeout(() => {
if (document.getElementById('connection-status-overlay')) {
document.getElementById('connection-status-overlay').remove();
}
}, 30000);
} }
function wifi_scan(){ function wifi_scan(){
@@ -524,24 +380,19 @@ function get_internet(){
response.forEach(network => { response.forEach(network => {
const row = document.createElement("tr"); const row = document.createElement("tr");
// SSID
const ssidCell = document.createElement("td"); const ssidCell = document.createElement("td");
const truncatedSSID = network.SSID.length > 25 ? network.SSID.substring(0, 25) + '...' : network.SSID; ssidCell.textContent = network.SSID.length > 25 ? network.SSID.substring(0, 25) + '...' : network.SSID;
ssidCell.textContent = truncatedSSID;
row.appendChild(ssidCell); row.appendChild(ssidCell);
// Signal with badge
const signalCell = document.createElement("td"); const signalCell = document.createElement("td");
signalCell.innerHTML = getSignalBadge(network.SIGNAL); signalCell.innerHTML = getSignalBadge(network.SIGNAL);
row.appendChild(signalCell); row.appendChild(signalCell);
// Security
const securityCell = document.createElement("td"); const securityCell = document.createElement("td");
securityCell.textContent = network.SECURITY || '--'; securityCell.textContent = network.SECURITY || '--';
securityCell.classList.add('text-muted'); securityCell.classList.add('text-muted');
row.appendChild(securityCell); row.appendChild(securityCell);
// Connect button
const buttonCell = document.createElement("td"); const buttonCell = document.createElement("td");
buttonCell.classList.add('text-end'); buttonCell.classList.add('text-end');
const button = document.createElement("button"); const button = document.createElement("button");
@@ -561,20 +412,31 @@ function get_internet(){
}); });
} }
window.onload = function() { window.onload = function() {
$.ajax({ fetch('../config.json')
url: 'launcher.php?type=get_config_sqlite', .then(response => response.json())
dataType: 'json', .then(data => {
method: 'GET', console.log("Getting config file (onload)");
success: function(data) { const deviceID = data.deviceID.trim().toUpperCase();
console.log("Getting SQLite config table (wifi page):"); const deviceName = data.deviceName;
console.log(data);
function updateSidebarDeviceName(deviceName) {
const elements = document.querySelectorAll('.sideBar_sensorName');
if (elements.length > 0) {
elements.forEach((element) => {
element.innerText = deviceName;
});
}
}
if (deviceName) {
updateSidebarDeviceName(deviceName);
setTimeout(() => updateSidebarDeviceName(deviceName), 100);
setTimeout(() => updateSidebarDeviceName(deviceName), 500);
document.title = deviceName;
}
// WiFi connection status — toggle cards
const WIFI_statusElement = document.getElementById("wifi-status"); const WIFI_statusElement = document.getElementById("wifi-status");
console.log("WIFI is: " + data.WIFI_status);
if (data.WIFI_status === "connected") { if (data.WIFI_status === "connected") {
WIFI_statusElement.textContent = "Connected"; WIFI_statusElement.textContent = "Connected";
@@ -583,7 +445,6 @@ function get_internet(){
document.getElementById('card-connection-info').style.display = ''; document.getElementById('card-connection-info').style.display = '';
document.getElementById('card-hotspot-info').style.display = 'none'; document.getElementById('card-hotspot-info').style.display = 'none';
document.getElementById('card-wifi-scan').style.display = 'none'; document.getElementById('card-wifi-scan').style.display = 'none';
// Auto-load connection details
get_internet(); get_internet();
} else if (data.WIFI_status === "hotspot") { } else if (data.WIFI_status === "hotspot") {
WIFI_statusElement.textContent = "Hotspot"; WIFI_statusElement.textContent = "Hotspot";
@@ -592,7 +453,6 @@ function get_internet(){
document.getElementById('card-connection-info').style.display = 'none'; document.getElementById('card-connection-info').style.display = 'none';
document.getElementById('card-hotspot-info').style.display = ''; document.getElementById('card-hotspot-info').style.display = '';
document.getElementById('card-wifi-scan').style.display = ''; document.getElementById('card-wifi-scan').style.display = '';
// Auto-load cached scan results in hotspot mode
wifi_scan(); wifi_scan();
} else { } else {
WIFI_statusElement.textContent = "Unknown"; WIFI_statusElement.textContent = "Unknown";
@@ -603,27 +463,21 @@ function get_internet(){
document.getElementById('card-wifi-scan').style.display = ''; document.getElementById('card-wifi-scan').style.display = '';
} }
// Always load ethernet info
load_ethernet_info();
},
error: function(xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
});
// Load RTC time
$.ajax({ $.ajax({
url: 'launcher.php?type=RTC_time', url: 'launcher.php?type=RTC_time',
dataType: 'text', dataType: 'text',
method: 'GET', method: 'GET',
success: function(response) { success: function(response) {
const RTC_Element = document.getElementById("RTC_time"); const RTC_Element = document.getElementById("RTC_time");
if (RTC_Element) RTC_Element.textContent = response; RTC_Element.textContent = response;
}, },
error: function(xhr, status, error) { error: function(xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
} }
}); });
})
.catch(error => console.error('Error loading config.json:', error));
} }
</script> </script>