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

Fix: Apply translations after sidebar load to resolve 'sidebar.screen' display issue

Browse Source
This commit is contained in:
PaulVua
2026-02-17 12:30:14 +01:00
parent f1d716d900
commit aa1b90e3d5
3 changed files with 362 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
html/index.html
View File

@@ -140,6 +140,10 @@
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.innerHTML = data; element.innerHTML = data;
// Apply translations after loading dynamic content
if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
window.i18n.applyTranslations();
}
} }
}) })
.catch(error => console.error(`Error loading ${file}:`, error)); .catch(error => console.error(`Error loading ${file}:`, error));

13
html/screen.html
View File

@@ -121,14 +121,15 @@
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.innerHTML = data; element.innerHTML = data;
// Ensure the screen tab is visible here as well if we are on this page, // Apply translations after loading dynamic content
// though index.html handles it globally, sidebar load might reset it. if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
// Ideally sidebar logic should be consistent. window.i18n.applyTranslations();
// For now, if we are ON screen.html, we should show the nav item. }
// Ensure the screen tab is visible here as well
if (id.includes('sidebar')) { if (id.includes('sidebar')) {
setTimeout(() => { setTimeout(() => {
const navScreen = element.querySelector('#nav-screen'); const navScreenElements = element.querySelectorAll('.nav-screen-item');
if (navScreen) navScreen.style.display = 'flex'; // or block navScreenElements.forEach(el => el.style.display = 'flex');
}, 100); }, 100);
} }
} }

687
html/sensors.html
View File

@@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,204 +10,217 @@
body { body {
overflow-x: hidden; overflow-x: hidden;
} }
#sidebar a.nav-link { #sidebar a.nav-link {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
#sidebar a.nav-link:hover { #sidebar a.nav-link:hover {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
#sidebar a.nav-link svg { #sidebar a.nav-link svg {
margin-right: 8px; /* Add spacing between icons and text */ margin-right: 8px;
/* Add spacing between icons and text */
} }
#sidebar { #sidebar {
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
} }
.offcanvas-backdrop { .offcanvas-backdrop {
z-index: 1040; z-index: 1040;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Topbar --> <!-- Topbar -->
<span id="topbar"></span> <span id="topbar"></span>
<!-- Sidebar Offcanvas for Mobile --> <!-- Sidebar Offcanvas for Mobile -->
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel"> <div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas"
aria-labelledby="sidebarOffcanvasLabel">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5> <h5 class="offcanvas-title" id="sidebarOffcanvasLabel">NebuleAir</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body" id="sidebar_mobile"> <div class="offcanvas-body" id="sidebar_mobile">
</div> </div>
</div> </div>
<div class="container-fluid mt-5"> <div class="container-fluid mt-5">
<div class="row"> <div class="row">
<aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar"> <aside class="col-md-2 col-lg-1 d-none d-md-block vh-100 position-fixed bg-dark text-white" id="sidebar">
</aside> </aside>
<!-- Main content --> <!-- Main content -->
<main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4"> <main class="col-md-10 ms-sm-auto col-lg-11 offset-md-2 offset-lg-1 px-md-4">
<h1 class="mt-4" data-i18n="sensors.title">Les sondes de mesure</h1> <h1 class="mt-4" data-i18n="sensors.title">Les sondes de mesure</h1>
<p data-i18n="sensors.description">Votre capteur NebuleAir est équipé de une ou plusieurs sondes qui permettent de mesurer certaines variables environnementales. La mesure <p data-i18n="sensors.description">Votre capteur NebuleAir est équipé de une ou plusieurs sondes qui permettent
est automatique mais vous pouvez ici vous assurer de leur bon fonctionnement. de mesurer certaines variables environnementales. La mesure
est automatique mais vous pouvez ici vous assurer de leur bon fonctionnement.
</p> </p>
<div class="row mb-3" id="card-container"></div> <div class="row mb-3" id="card-container"></div>
</main> </main>
</div> </div>
</div> </div>
<!-- JAVASCRIPT --> <!-- JAVASCRIPT -->
<!-- Link Ajax locally --> <!-- Link Ajax locally -->
<script src="assets/jquery/jquery-3.7.1.min.js"></script> <script src="assets/jquery/jquery-3.7.1.min.js"></script>
<!-- Link Bootstrap JS and Popper.js locally --> <!-- Link Bootstrap JS and Popper.js locally -->
<script src="assets/js/bootstrap.bundle.js"></script> <script src="assets/js/bootstrap.bundle.js"></script>
<!-- i18n translation system --> <!-- i18n translation system -->
<script src="assets/js/i18n.js"></script> <script src="assets/js/i18n.js"></script>
<script src="assets/js/topbar-logo.js"></script> <script src="assets/js/topbar-logo.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const elementsToLoad = [ const elementsToLoad = [
{ id: 'topbar', file: 'topbar.html' }, { id: 'topbar', file: 'topbar.html' },
{ id: 'sidebar', file: 'sidebar.html' }, { id: 'sidebar', file: 'sidebar.html' },
{ id: 'sidebar_mobile', file: 'sidebar.html' } { id: 'sidebar_mobile', file: 'sidebar.html' }
]; ];
elementsToLoad.forEach(({ id, file }) => { elementsToLoad.forEach(({ id, file }) => {
fetch(file) fetch(file)
.then(response => response.text()) .then(response => response.text())
.then(data => { .then(data => {
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.innerHTML = data; element.innerHTML = data;
} // Apply translations after loading dynamic content
}) if (window.i18n && typeof window.i18n.applyTranslations === 'function') {
.catch(error => console.error(`Error loading ${file}:`, error)); window.i18n.applyTranslations();
}
}
})
.catch(error => console.error(`Error loading ${file}:`, error));
});
}); });
});
function getNPM_values(port){ function getNPM_values(port) {
console.log("Data from NPM (port "+port+"):"); console.log("Data from NPM (port " + port + "):");
$("#loading_"+port).show(); $("#loading_" + port).show();
$.ajax({ $.ajax({
url: 'launcher.php?type=npm&port='+port, url: 'launcher.php?type=npm&port=' + port,
dataType: 'json', // Specify that you expect a JSON response dataType: 'json', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs method: 'GET', // Use GET or POST depending on your needs
success: function(response) { success: function (response) {
console.log(response); console.log(response);
const tableBody = document.getElementById("data-table-body_"+port); const tableBody = document.getElementById("data-table-body_" + port);
tableBody.innerHTML = ""; tableBody.innerHTML = "";
$("#loading_"+port).hide(); $("#loading_" + port).hide();
// Create an array of the desired keys // Create an array of the desired keys
const keysToShow = ["PM1", "PM25", "PM10","message"]; const keysToShow = ["PM1", "PM25", "PM10", "message"];
// Error messages mapping // Error messages mapping
const errorMessages = { const errorMessages = {
"notReady": "Sensor is not ready", "notReady": "Sensor is not ready",
"fanError": "Fan malfunction detected", "fanError": "Fan malfunction detected",
"laserError": "Laser malfunction detected", "laserError": "Laser malfunction detected",
"heatError": "Heating system error", "heatError": "Heating system error",
"t_rhError": "Temperature/Humidity sensor error", "t_rhError": "Temperature/Humidity sensor error",
"memoryError": "Memory failure detected", "memoryError": "Memory failure detected",
"degradedState": "Sensor in degraded state" "degradedState": "Sensor in degraded state"
}; };
// Add only the specified elements to the table // Add only the specified elements to the table
keysToShow.forEach(key => { keysToShow.forEach(key => {
if (response[key] !== undefined) { // Check if the key exists in the response if (response[key] !== undefined) { // Check if the key exists in the response
const value = response[key]; const value = response[key];
$("#data-table-body_"+port).append(` $("#data-table-body_" + port).append(`
<tr> <tr>
<td>${key}</td> <td>${key}</td>
<td>${value} µg/m³</td> <td>${value} µg/m³</td>
</tr> </tr>
`); `);
} }
}); });
// Check for errors and add them to the table // Check for errors and add them to the table
Object.keys(errorMessages).forEach(errorKey => { Object.keys(errorMessages).forEach(errorKey => {
if (response[errorKey] === 1) { if (response[errorKey] === 1) {
$("#data-table-body_" + port).append(` $("#data-table-body_" + port).append(`
<tr class="error-row"> <tr class="error-row">
<td><b>${errorKey}</b></td> <td><b>${errorKey}</b></td>
<td style="color: red;">⚠ ${errorMessages[errorKey]}</td> <td style="color: red;">⚠ ${errorMessages[errorKey]}</td>
</tr> </tr>
`); `);
} }
}); });
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
}
});
} }
});
function getNPM_firmware(port){ }
console.log("Firmware version from NPM (port "+port+"):");
$("#loading_fw_"+port).show();
$.ajax({ function getNPM_firmware(port) {
url: 'launcher.php?type=npm_firmware&port='+port, console.log("Firmware version from NPM (port " + port + "):");
dataType: 'json', $("#loading_fw_" + port).show();
method: 'GET',
success: function(response) { $.ajax({
console.log(response); url: 'launcher.php?type=npm_firmware&port=' + port,
$("#loading_fw_"+port).hide(); dataType: 'json',
const fwSpan = document.getElementById("fw_version_"+port); method: 'GET',
if (response.firmware_version !== undefined) { success: function (response) {
fwSpan.innerHTML = '<span class="badge bg-success">Firmware: ' + response.firmware_version + '</span>'; console.log(response);
} else { $("#loading_fw_" + port).hide();
fwSpan.innerHTML = '<span class="badge bg-danger">Error reading firmware</span>'; const fwSpan = document.getElementById("fw_version_" + port);
} if (response.firmware_version !== undefined) {
}, fwSpan.innerHTML = '<span class="badge bg-success">Firmware: ' + response.firmware_version + '</span>';
error: function(xhr, status, error) { } else {
console.error('AJAX request failed:', status, error); fwSpan.innerHTML = '<span class="badge bg-danger">Error reading firmware</span>';
$("#loading_fw_"+port).hide(); }
const fwSpan = document.getElementById("fw_version_"+port); },
fwSpan.innerHTML = '<span class="badge bg-danger">Error</span>'; error: function (xhr, status, error) {
} console.error('AJAX request failed:', status, error);
}); $("#loading_fw_" + port).hide();
const fwSpan = document.getElementById("fw_version_" + port);
fwSpan.innerHTML = '<span class="badge bg-danger">Error</span>';
} }
});
}
function getENVEA_values(port, name){ function getENVEA_values(port, name) {
console.log("Data from Envea " + name + " (port " + port + "):"); console.log("Data from Envea " + name + " (port " + port + "):");
$("#loading_envea" + name).show(); $("#loading_envea" + name).show();
$.ajax({ $.ajax({
url: 'launcher.php?type=envea&port=' + port + '&name=' + name, url: 'launcher.php?type=envea&port=' + port + '&name=' + name,
dataType: 'json', dataType: 'json',
method: 'GET', method: 'GET',
success: function(response) { success: function (response) {
console.log(response); console.log(response);
const tableBody = document.getElementById("data-table-body_envea" + name); const tableBody = document.getElementById("data-table-body_envea" + name);
tableBody.innerHTML = ""; tableBody.innerHTML = "";
$("#loading_envea" + name).hide(); $("#loading_envea" + name).hide();
const keysToShow = [name]; const keysToShow = [name];
keysToShow.forEach(key => { keysToShow.forEach(key => {
if (response !== undefined) { if (response !== undefined) {
const value = response; const value = response;
$("#data-table-body_envea" + name).append(` $("#data-table-body_envea" + name).append(`
<tr> <tr>
<td>${key}</td> <td>${key}</td>
<td>${value} ppb</td> <td>${value} ppb</td>
</tr> </tr>
`); `);
} }
}); });
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
const tableBody = document.getElementById("data-table-body_envea" + name); const tableBody = document.getElementById("data-table-body_envea" + name);
$("#loading_envea" + name).hide(); $("#loading_envea" + name).hide();
tableBody.innerHTML = ` tableBody.innerHTML = `
<tr> <tr>
<td colspan="2" class="text-danger"> <td colspan="2" class="text-danger">
❌ Error: unable to get data from sensor.<br> ❌ Error: unable to get data from sensor.<br>
@@ -215,225 +229,225 @@ function getENVEA_values(port, name){
</tr> </tr>
`; `;
} }
}); });
} }
function getENVEA_debug_values(){ function getENVEA_debug_values() {
console.log("Getting debug data from all Envea sensors"); console.log("Getting debug data from all Envea sensors");
$("#loading_envea_debug").show(); $("#loading_envea_debug").show();
$.ajax({ $.ajax({
url: 'launcher.php?type=envea_debug', url: 'launcher.php?type=envea_debug',
dataType: 'text', dataType: 'text',
method: 'GET', method: 'GET',
success: function(response) { success: function (response) {
console.log("Envea debug output:", response); console.log("Envea debug output:", response);
const outputDiv = document.getElementById("envea-debug-output"); const outputDiv = document.getElementById("envea-debug-output");
$("#loading_envea_debug").hide(); $("#loading_envea_debug").hide();
// Display raw output in a pre block // Display raw output in a pre block
outputDiv.innerHTML = `<pre style="background-color: #f5f5f5; padding: 10px; border-radius: 5px; max-height: 500px; overflow-y: auto; font-size: 12px;">${response}</pre>`; outputDiv.innerHTML = `<pre style="background-color: #f5f5f5; padding: 10px; border-radius: 5px; max-height: 500px; overflow-y: auto; font-size: 12px;">${response}</pre>`;
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
const outputDiv = document.getElementById("envea-debug-output"); const outputDiv = document.getElementById("envea-debug-output");
$("#loading_envea_debug").hide(); $("#loading_envea_debug").hide();
outputDiv.innerHTML = ` outputDiv.innerHTML = `
<div class="alert alert-danger"> <div class="alert alert-danger">
❌ Error: unable to get debug data from sensors.<br> ❌ Error: unable to get debug data from sensors.<br>
<small>${status}: ${error}</small> <small>${status}: ${error}</small>
</div> </div>
`; `;
} }
}); });
} }
function getNoise_values(){ function getNoise_values() {
console.log("Data from I2C Noise Sensor:"); console.log("Data from I2C Noise Sensor:");
$("#loading_noise").show(); $("#loading_noise").show();
$.ajax({ $.ajax({
url: 'launcher.php?type=noise', url: 'launcher.php?type=noise',
dataType: 'text', dataType: 'text',
method: 'GET', // Use GET or POST depending on your needs method: 'GET', // Use GET or POST depending on your needs
success: function(response) { success: function (response) {
console.log(response); console.log(response);
const tableBody = document.getElementById("data-table-body_noise"); const tableBody = document.getElementById("data-table-body_noise");
tableBody.innerHTML = ""; tableBody.innerHTML = "";
$("#loading_noise").hide(); $("#loading_noise").hide();
// Create an array of the desired keys // Create an array of the desired keys
const keysToShow = ["Noise"]; const keysToShow = ["Noise"];
// Add only the specified elements to the table // Add only the specified elements to the table
keysToShow.forEach(key => { keysToShow.forEach(key => {
if (response !== undefined) { // Check if the key exists in the response if (response !== undefined) { // Check if the key exists in the response
const value = response; const value = response;
$("#data-table-body_noise").append(` $("#data-table-body_noise").append(`
<tr> <tr>
<td>${key}</td> <td>${key}</td>
<td>${value} DB</td> <td>${value} DB</td>
</tr> </tr>
`); `);
} }
}); });
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
}
});
} }
});
function getMHZ19_values(){ }
function getMHZ19_values() {
console.log("Data from MH-Z19 CO2 sensor:"); console.log("Data from MH-Z19 CO2 sensor:");
$("#loading_mhz19").show(); $("#loading_mhz19").show();
$.ajax({ $.ajax({
url: 'launcher.php?type=mhz19', url: 'launcher.php?type=mhz19',
dataType: 'json', dataType: 'json',
method: 'GET', method: 'GET',
success: function(response) { success: function (response) {
console.log(response); console.log(response);
const tableBody = document.getElementById("data-table-body_mhz19"); const tableBody = document.getElementById("data-table-body_mhz19");
tableBody.innerHTML = ""; tableBody.innerHTML = "";
$("#loading_mhz19").hide(); $("#loading_mhz19").hide();
if (response.error) { if (response.error) {
$("#data-table-body_mhz19").append(` $("#data-table-body_mhz19").append(`
<tr> <tr>
<td colspan="2" class="text-danger"> <td colspan="2" class="text-danger">
⚠ ${response.error} ⚠ ${response.error}
</td> </td>
</tr> </tr>
`); `);
} else if (response.CO2 !== undefined) { } else if (response.CO2 !== undefined) {
$("#data-table-body_mhz19").append(` $("#data-table-body_mhz19").append(`
<tr> <tr>
<td>CO2</td> <td>CO2</td>
<td>${response.CO2} ppm</td> <td>${response.CO2} ppm</td>
</tr> </tr>
`); `);
} }
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
$("#loading_mhz19").hide(); $("#loading_mhz19").hide();
const tableBody = document.getElementById("data-table-body_mhz19"); const tableBody = document.getElementById("data-table-body_mhz19");
tableBody.innerHTML = ` tableBody.innerHTML = `
<tr> <tr>
<td colspan="2" class="text-danger"> <td colspan="2" class="text-danger">
⚠ Erreur de communication avec le capteur ⚠ Erreur de communication avec le capteur
</td> </td>
</tr> </tr>
`; `;
}
});
} }
});
}
function getBME280_values(){ function getBME280_values() {
console.log("Data from I2C BME280:"); console.log("Data from I2C BME280:");
$("#loading_BME280").show(); $("#loading_BME280").show();
$.ajax({ $.ajax({
url: 'launcher.php?type=BME280', url: 'launcher.php?type=BME280',
dataType: 'text', dataType: 'text',
method: 'GET', // Use GET or POST depending on your needs method: 'GET', // Use GET or POST depending on your needs
success: function(response) { success: function (response) {
console.log(response); console.log(response);
const tableBody = document.getElementById("data-table-body_BME280"); const tableBody = document.getElementById("data-table-body_BME280");
tableBody.innerHTML = ""; tableBody.innerHTML = "";
$("#loading_BME280").hide(); $("#loading_BME280").hide();
// Parse the JSON response // Parse the JSON response
const data = JSON.parse(response); const data = JSON.parse(response);
const keysToShow = ["temp", "hum", "press"]; const keysToShow = ["temp", "hum", "press"];
// Add only the specified elements to the table // Add only the specified elements to the table
keysToShow.forEach(key => { keysToShow.forEach(key => {
if (response !== undefined) { // Check if the key exists in the response if (response !== undefined) { // Check if the key exists in the response
const value = data[key]; const value = data[key];
const unit = key === "temp" ? "°C" const unit = key === "temp" ? "°C"
: key === "hum" ? "%" : key === "hum" ? "%"
: key === "press" ? "hPa" : key === "press" ? "hPa"
: ""; // Add appropriate units : ""; // Add appropriate units
$("#data-table-body_BME280").append(` $("#data-table-body_BME280").append(`
<tr> <tr>
<td>${key.charAt(0).toUpperCase() + key.slice(1)}</td> <td>${key.charAt(0).toUpperCase() + key.slice(1)}</td>
<td>${value} ${unit}</td> <td>${value} ${unit}</td>
</tr> </tr>
`); `);
} }
}); });
}, },
error: function(xhr, status, error) { error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
}
});
} }
});
window.onload = function() {
//NEW way to get config (SQLite)
let mainConfig = {}; // Store main config for use in sensor card creation
$.ajax({
url: 'launcher.php?type=get_config_sqlite',
dataType:'json',
//dataType: 'json', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function(response) {
console.log("Getting SQLite config table:");
console.log(response);
mainConfig = response; // Store for later use
// Function to update sidebar device name
function updateSidebarDeviceName(deviceName) {
const elements = document.querySelectorAll('.sideBar_sensorName');
if (elements.length > 0) {
elements.forEach((element) => {
element.innerText = deviceName;
});
console.log("Device name updated in sidebar:", deviceName);
}
} }
// Update device name immediately and with retries to handle async sidebar loading
if (response.deviceName) {
updateSidebarDeviceName(response.deviceName);
// Retry after delays to catch async sidebar load
setTimeout(() => updateSidebarDeviceName(response.deviceName), 100);
setTimeout(() => updateSidebarDeviceName(response.deviceName), 500);
// Set page title window.onload = function () {
document.title = response.deviceName;
}
// After getting main config, create sensor cards //NEW way to get config (SQLite)
createSensorCards(mainConfig); let mainConfig = {}; // Store main config for use in sensor card creation
}, $.ajax({
error: function(xhr, status, error) { url: 'launcher.php?type=get_config_sqlite',
console.error('AJAX request failed:', status, error); dataType: 'json',
} //dataType: 'json', // Specify that you expect a JSON response
});//end AJAX method: 'GET', // Use GET or POST depending on your needs
success: function (response) {
console.log("Getting SQLite config table:");
console.log(response);
//Function to create sensor cards based on config mainConfig = response; // Store for later use
function createSensorCards(config) {
console.log("Creating sensor cards with config:");
console.log(config);
const container = document.getElementById('card-container'); // Conteneur des cartes // Function to update sidebar device name
function updateSidebarDeviceName(deviceName) {
const elements = document.querySelectorAll('.sideBar_sensorName');
if (elements.length > 0) {
elements.forEach((element) => {
element.innerText = deviceName;
});
console.log("Device name updated in sidebar:", deviceName);
}
}
//creates NPM card (by default) // Update device name immediately and with retries to handle async sidebar loading
if (response.deviceName) {
updateSidebarDeviceName(response.deviceName);
// Retry after delays to catch async sidebar load
setTimeout(() => updateSidebarDeviceName(response.deviceName), 100);
setTimeout(() => updateSidebarDeviceName(response.deviceName), 500);
const cardHTML = ` // Set page title
document.title = response.deviceName;
}
// After getting main config, create sensor cards
createSensorCards(mainConfig);
},
error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
});//end AJAX
//Function to create sensor cards based on config
function createSensorCards(config) {
console.log("Creating sensor cards with config:");
console.log(config);
const container = document.getElementById('card-container'); // Conteneur des cartes
//creates NPM card (by default)
const cardHTML = `
<div class="col-sm-3"> <div class="col-sm-3">
<div class="card"> <div class="card">
<div class="card-header" data-i18n="sensors.npm.headerUart"> <div class="card-header" data-i18n="sensors.npm.headerUart">
@@ -455,12 +469,12 @@ error: function(xhr, status, error) {
</div> </div>
</div>`; </div>`;
container.innerHTML += cardHTML; // Add the I2C card if condition is met container.innerHTML += cardHTML; // Add the I2C card if condition is met
//creates i2c BME280 card //creates i2c BME280 card
if (config.BME280) { if (config.BME280) {
const i2C_BME_HTML = ` const i2C_BME_HTML = `
<div class="col-sm-3"> <div class="col-sm-3">
<div class="card"> <div class="card">
<div class="card-header" data-i18n="sensors.bme280.headerI2c"> <div class="card-header" data-i18n="sensors.bme280.headerI2c">
@@ -479,12 +493,12 @@ error: function(xhr, status, error) {
</div> </div>
</div>`; </div>`;
container.innerHTML += i2C_BME_HTML; // Add the I2C card if condition is met container.innerHTML += i2C_BME_HTML; // Add the I2C card if condition is met
} }
//creates i2c sound card //creates i2c sound card
if (config.NOISE) { if (config.NOISE) {
const i2C_HTML = ` const i2C_HTML = `
<div class="col-sm-3"> <div class="col-sm-3">
<div class="card"> <div class="card">
<div class="card-header" data-i18n="sensors.noise.headerI2c"> <div class="card-header" data-i18n="sensors.noise.headerI2c">
@@ -505,12 +519,12 @@ error: function(xhr, status, error) {
</div> </div>
</div>`; </div>`;
container.innerHTML += i2C_HTML; // Add the I2C card if condition is met container.innerHTML += i2C_HTML; // Add the I2C card if condition is met
} }
//creates MH-Z19 CO2 card //creates MH-Z19 CO2 card
if (config.MHZ19) { if (config.MHZ19) {
const MHZ19_HTML = ` const MHZ19_HTML = `
<div class="col-sm-3"> <div class="col-sm-3">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
@@ -528,27 +542,27 @@ error: function(xhr, status, error) {
</div> </div>
</div>`; </div>`;
container.innerHTML += MHZ19_HTML; container.innerHTML += MHZ19_HTML;
} }
//Si on a des SONDES ENVEA connectée il faut faire un deuxième call dans la table envea_sondes_table //Si on a des SONDES ENVEA connectée il faut faire un deuxième call dans la table envea_sondes_table
//creates ENVEA debug card //creates ENVEA debug card
if (config.envea) { if (config.envea) {
console.log("Need to display ENVEA sondes"); console.log("Need to display ENVEA sondes");
//getting config_scripts table //getting config_scripts table
$.ajax({ $.ajax({
url: 'launcher.php?type=get_envea_sondes_table_sqlite', url: 'launcher.php?type=get_envea_sondes_table_sqlite',
dataType:'json', dataType: 'json',
method: 'GET', method: 'GET',
success: function(sondes) { success: function (sondes) {
console.log("Getting SQLite envea sondes table:"); console.log("Getting SQLite envea sondes table:");
console.log(sondes); console.log(sondes);
const ENVEA_sensors = sondes.filter(sonde => sonde.connected); // Filter only connected sondes const ENVEA_sensors = sondes.filter(sonde => sonde.connected); // Filter only connected sondes
// Only create the card if there are connected sensors // Only create the card if there are connected sensors
if (ENVEA_sensors.length > 0) { if (ENVEA_sensors.length > 0) {
// Create a single debug card for all Envea sensors // Create a single debug card for all Envea sensors
const cardHTML = ` const cardHTML = `
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
@@ -564,43 +578,44 @@ error: function(xhr, status, error) {
</div> </div>
</div> </div>
</div>`; </div>`;
container.innerHTML += cardHTML; container.innerHTML += cardHTML;
} }
// Apply translations to dynamically created Envea card // Apply translations to dynamically created Envea card
i18n.applyTranslations();
},
error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
});//end AJAX envea Sondes
}//end if envea
// Apply translations to all dynamically created sensor cards
i18n.applyTranslations(); i18n.applyTranslations();
}, } // end createSensorCards function
error: function(xhr, status, error) {
//get local RTC
$.ajax({
url: 'launcher.php?type=RTC_time',
dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function (response) {
console.log("Local RTC: " + response);
const RTC_Element = document.getElementById("RTC_time");
RTC_Element.textContent = response;
},
error: function (xhr, status, error) {
console.error('AJAX request failed:', status, error); console.error('AJAX request failed:', status, error);
} }
});//end AJAX envea Sondes
}//end if envea
// Apply translations to all dynamically created sensor cards
i18n.applyTranslations();
} // end createSensorCards function
//get local RTC
$.ajax({
url: 'launcher.php?type=RTC_time',
dataType: 'text', // Specify that you expect a JSON response
method: 'GET', // Use GET or POST depending on your needs
success: function(response) {
console.log("Local RTC: " + response);
const RTC_Element = document.getElementById("RTC_time");
RTC_Element.textContent = response;
},
error: function(xhr, status, error) {
console.error('AJAX request failed:', status, error);
}
}); });
} //end windows onload } //end windows onload
</script> </script>
</body> </body>
</html>
</html>