f679732591
Fixed race condition where translations weren't being applied to the database page when French language was selected. The issue was caused by the i18n system loading asynchronously while page content was being rendered. Changes: - Added applyTranslationsWhenReady() function that waits for translations to load - Re-apply translations after dynamic content (sidebar/topbar) is loaded - Added languageChanged event listener to re-apply translations on language switch - Ensures all text appears in the selected language (French/English) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
552 lines
20 KiB
HTML
Executable File
552 lines
20 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NebuleAir</title>
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
|
<style>
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
#sidebar a.nav-link {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#sidebar a.nav-link:hover {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
#sidebar a.nav-link svg {
|
|
margin-right: 8px; /* Add spacing between icons and text */
|
|
}
|
|
#sidebar {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
.offcanvas-backdrop {
|
|
z-index: 1040;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Topbar -->
|
|
<span id="topbar"></span>
|
|
|
|
<!-- Sidebar Offcanvas for Mobile -->
|
|
<div class="offcanvas offcanvas-start text-white bg-dark" tabindex="-1" id="sidebarOffcanvas" aria-labelledby="sidebarOffcanvasLabel">
|
|
<div class="offcanvas-header">
|
|
<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>
|
|
</div>
|
|
<div class="offcanvas-body" id="sidebar_mobile">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid mt-5">
|
|
<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>
|
|
<!-- Main content -->
|
|
<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="database.title">Base de données</h1>
|
|
<p data-i18n="database.description">Le capteur enregistre en local les données de mesures. Vous pouvez ici les consulter et les télécharger.</p>
|
|
|
|
<div class="row mb-3">
|
|
|
|
<div class="col-sm-5">
|
|
<div class="card text-dark bg-light">
|
|
<div class="card-body">
|
|
<h5 class="card-title" data-i18n="database.viewDatabase">Consulter la base de donnée</h5>
|
|
<!-- Dropdown to select number of records -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<label for="records_limit" class="form-label me-2" data-i18n="database.numberOfMeasures">Nombre de mesures:</label>
|
|
<select id="records_limit" class="form-select w-auto">
|
|
<option value="10" selected data-i18n="database.last10">10 dernières</option>
|
|
<option value="20" data-i18n="database.last20">20 dernières</option>
|
|
<option value="30" data-i18n="database.last30">30 dernières</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM',getSelectedLimit(),false)" data-i18n="database.pmMeasures">Mesures PM</button>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_BME280',getSelectedLimit(),false)" data-i18n="database.tempHumMeasures">Mesures Temp/Hum</button>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM_5channels',getSelectedLimit(),false)" data-i18n="database.pm5Channels">Mesures PM (5 canaux)</button>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_envea',getSelectedLimit(),false)" data-i18n="database.cairsensProbe">Sonde Cairsens</button>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_NOISE',getSelectedLimit(),false)" data-i18n="database.noiseProbe">Sonde bruit</button>
|
|
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_WIND',getSelectedLimit(),false)" data-i18n="database.windProbe">Sonde Vent</button>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_MPPT',getSelectedLimit(),false)" data-i18n="database.battery">Batterie</button>
|
|
|
|
<button class="btn btn-warning" onclick="get_data_sqlite('timestamp_table',getSelectedLimit(),false)" data-i18n="database.timestampTable">Timestamp Table</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-5">
|
|
<div class="card text-dark bg-light">
|
|
<div class="card-body">
|
|
<h5 class="card-title" data-i18n="database.downloadData">Télécharger les données</h5>
|
|
<!-- Date selection for download -->
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<label for="start_date" class="form-label" data-i18n="database.startDate">Date de début:</label>
|
|
<input type="date" id="start_date" class="form-control w-auto">
|
|
<label for="end_date" class="form-label" data-i18n="database.endDate">Date de fin:</label>
|
|
<input type="date" id="end_date" class="form-control w-auto">
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM',10,true, getStartDate(), getEndDate())" data-i18n="database.pmMeasures">Mesures PM</button>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_BME280',10,true, getStartDate(), getEndDate())" data-i18n="database.tempHumMeasures">Mesures Temp/Hum</button>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM_5channels',10,true, getStartDate(), getEndDate())" data-i18n="database.pm5Channels">Mesures PM (5 canaux)</button>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_envea',10,true, getStartDate(), getEndDate())" data-i18n="database.cairsensProbe">Sonde Cairsens</button>
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_NOISE',10,true, getStartDate(), getEndDate())" data-i18n="database.noiseProbe">Sonde Bruit</button>
|
|
|
|
<button class="btn btn-primary" onclick="get_data_sqlite('data_mppt',10,true, getStartDate(), getEndDate())" data-i18n="database.battery">Batterie</button>
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-5">
|
|
<div class="card text-white bg-danger">
|
|
<div class="card-body">
|
|
<h5 class="card-title" data-i18n="database.dangerZone">Zone dangereuse</h5>
|
|
<p class="card-text" data-i18n="database.dangerWarning">Attention: Cette action est irréversible!</p>
|
|
<button class="btn btn-dark" onclick="emptySensorTables()" data-i18n="database.emptyAllTables">Vider toutes les tables de capteurs</button>
|
|
<small class="d-block mt-2" data-i18n="database.emptyTablesNote">Note: Les tables de configuration et horodatage seront préservées.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<div class="row mt-2">
|
|
<div id="table_data"></div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
|
|
<!-- Link Ajax locally -->
|
|
<script src="assets/jquery/jquery-3.7.1.min.js"></script>
|
|
<!-- Link Bootstrap JS and Popper.js locally -->
|
|
<script src="assets/js/bootstrap.bundle.js"></script>
|
|
<!-- i18n translation system -->
|
|
<script src="assets/js/i18n.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
console.log("DOMContentLoaded");
|
|
|
|
const elementsToLoad = [
|
|
{ id: 'topbar', file: 'topbar.html' },
|
|
{ id: 'sidebar', file: 'sidebar.html' },
|
|
{ id: 'sidebar_mobile', file: 'sidebar.html' }
|
|
];
|
|
|
|
let loadedCount = 0;
|
|
const totalElements = elementsToLoad.length;
|
|
|
|
function applyTranslationsWhenReady() {
|
|
if (typeof i18n !== 'undefined' && i18n.translations && Object.keys(i18n.translations).length > 0) {
|
|
console.log("Applying translations to dynamically loaded content");
|
|
i18n.applyTranslations();
|
|
} else {
|
|
// Retry after a short delay if translations aren't loaded yet
|
|
setTimeout(applyTranslationsWhenReady, 100);
|
|
}
|
|
}
|
|
|
|
elementsToLoad.forEach(({ id, file }) => {
|
|
fetch(file)
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.innerHTML = data;
|
|
}
|
|
loadedCount++;
|
|
|
|
// Re-apply translations after all dynamic content is loaded
|
|
if (loadedCount === totalElements) {
|
|
applyTranslationsWhenReady();
|
|
}
|
|
})
|
|
.catch(error => console.error(`Error loading ${file}:`, error));
|
|
});
|
|
|
|
// Also listen for language change events to re-apply translations
|
|
document.addEventListener('languageChanged', function() {
|
|
console.log("Language changed, re-applying translations");
|
|
i18n.applyTranslations();
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
|
//NEW way to get data from SQLITE
|
|
$.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);
|
|
|
|
//get device Name (for the side bar)
|
|
const deviceName = response.deviceName;
|
|
const elements = document.querySelectorAll('.sideBar_sensorName');
|
|
elements.forEach((element) => {
|
|
element.innerText = deviceName;
|
|
});
|
|
|
|
//device name html page title
|
|
if (response.deviceName) {
|
|
document.title = response.deviceName;
|
|
}
|
|
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX request failed:', status, error);
|
|
}
|
|
}); //end ajax
|
|
|
|
|
|
//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 AJAX
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// TABLE PM
|
|
function get_data_sqlite(table, limit, download , startDate = "", endDate = "") {
|
|
console.log(`Getting data for table: ${table}, limit: ${limit}, download: ${download}, start: ${startDate}, end: ${endDate}`);
|
|
// Construct URL parameters dynamically
|
|
let url = `launcher.php?type=table_mesure&table=${table}&limit=${limit}&download=${download}`;
|
|
|
|
// Add date parameters if downloading
|
|
if (download) {
|
|
url += `&start_date=${startDate}&end_date=${endDate}`;
|
|
}
|
|
|
|
console.log(url);
|
|
|
|
$.ajax({
|
|
url: url,
|
|
dataType: 'text', // Specify that you expect a JSON response
|
|
method: 'GET', // Use GET or POST depending on your needs
|
|
success: function(response) {
|
|
console.log(response);
|
|
|
|
// If download is true, generate and trigger CSV download
|
|
if (download) {
|
|
downloadCSV(response, table);
|
|
return; // Exit function after triggering download
|
|
}
|
|
|
|
let rows = response.trim().split("\n");
|
|
// Generate Bootstrap table
|
|
|
|
let tableHTML = `<table class="table table-striped table-bordered">
|
|
<thead class="table-dark"><tr>`;
|
|
|
|
// Define column headers dynamically based on the table type
|
|
if (table === "data_NPM") {
|
|
tableHTML += `
|
|
<th>Timestamp</th>
|
|
<th>PM1</th>
|
|
<th>PM2.5</th>
|
|
<th>PM10</th>
|
|
<th>Temperature (°C)</th>
|
|
<th>Humidity (%)</th>
|
|
`;
|
|
} else if (table === "data_BME280") {
|
|
tableHTML += `
|
|
<th>Timestamp</th>
|
|
<th>Temperature (°C)</th>
|
|
<th>Humidity (%)</th>
|
|
<th>Pressure (hPa)</th>
|
|
`;
|
|
} else if (table === "data_NPM_5channels") {
|
|
tableHTML += `
|
|
<th>Timestamp</th>
|
|
<th>PM_ch1 (nb/L)</th>
|
|
<th>PM_ch2 (nb/L)</th>
|
|
<th>PM_ch3 (nb/L)</th>
|
|
<th>PM_ch4 (nb/L)</th>
|
|
<th>PM_ch5 (nb/L)</th>
|
|
|
|
`;
|
|
}else if (table === "data_envea") {
|
|
tableHTML += `
|
|
<th>Timestamp</th>
|
|
<th>NO2</th>
|
|
<th>H2S</th>
|
|
<th>NH3</th>
|
|
<th>CO</th>
|
|
<th>O3</th>
|
|
|
|
`;
|
|
}else if (table === "timestamp_table") {
|
|
tableHTML += `
|
|
<th>Timestamp</th>
|
|
`;
|
|
}else if (table === "data_WIND") {
|
|
tableHTML += `
|
|
<th>Timestamp</th>
|
|
<th>speed (km/h)</th>
|
|
<th>Direction (V)</th>
|
|
`;
|
|
}else if (table === "data_MPPT") {
|
|
tableHTML += `
|
|
<th>Timestamp</th>
|
|
<th>Battery Voltage</th>
|
|
<th>Battery Current</th>
|
|
<th> solar_voltage</th>
|
|
<th> solar_power</th>
|
|
<th> charger_status</th>
|
|
|
|
`;
|
|
}else if (table === "data_NOISE") {
|
|
tableHTML += `
|
|
<th>Timestamp</th>
|
|
<th>Curent LEQ</th>
|
|
<th>DB_A_value</th>
|
|
|
|
`;
|
|
}
|
|
|
|
|
|
tableHTML += `</tr></thead><tbody>`;
|
|
|
|
// Loop through rows and create table rows
|
|
rows.forEach(row => {
|
|
let columns = row.replace(/[()]/g, "").split(", "); // Remove parentheses and split
|
|
tableHTML += "<tr>";
|
|
|
|
if (table === "data_NPM") {
|
|
tableHTML += `
|
|
<td>${columns[0]}</td>
|
|
<td>${columns[1]}</td>
|
|
<td>${columns[2]}</td>
|
|
<td>${columns[3]}</td>
|
|
<td>${columns[4]}</td>
|
|
<td>${columns[5]}</td>
|
|
`;
|
|
} else if (table === "data_BME280") {
|
|
tableHTML += `
|
|
<td>${columns[0]}</td>
|
|
<td>${columns[1]}</td>
|
|
<td>${columns[2]}</td>
|
|
<td>${columns[3]}</td>
|
|
`;
|
|
}
|
|
else if (table === "data_NPM_5channels") {
|
|
tableHTML += `
|
|
<td>${columns[0]}</td>
|
|
<td>${columns[1]}</td>
|
|
<td>${columns[2]}</td>
|
|
<td>${columns[3]}</td>
|
|
<td>${columns[4]}</td>
|
|
<td>${columns[5]}</td>
|
|
|
|
`;
|
|
} else if (table === "data_envea") {
|
|
tableHTML += `
|
|
<td>${columns[0]}</td>
|
|
<td>${columns[1]}</td>
|
|
<td>${columns[2]}</td>
|
|
<td>${columns[3]}</td>
|
|
<td>${columns[4]}</td>
|
|
<td>${columns[5]}</td>
|
|
|
|
`;
|
|
}else if (table === "timestamp_table") {
|
|
tableHTML += `
|
|
<td>${columns[1]}</td>
|
|
`;
|
|
}else if (table === "data_WIND") {
|
|
tableHTML += `
|
|
<td>${columns[0]}</td>
|
|
<td>${columns[1]}</td>
|
|
<td>${columns[2]}</td>
|
|
`;
|
|
}else if (table === "data_MPPT") {
|
|
tableHTML += `
|
|
<td>${columns[0]}</td>
|
|
<td>${columns[1]}</td>
|
|
<td>${columns[2]}</td>
|
|
<td>${columns[3]}</td>
|
|
<td>${columns[4]}</td>
|
|
<td>${columns[5]}</td>
|
|
`;
|
|
}else if (table === "data_NOISE") {
|
|
tableHTML += `
|
|
<td>${columns[0]}</td>
|
|
<td>${columns[1]}</td>
|
|
<td>${columns[2]}</td>
|
|
|
|
`;
|
|
}
|
|
|
|
tableHTML += "</tr>";
|
|
});
|
|
|
|
tableHTML += `</tbody></table>`;
|
|
|
|
// Update the #table_data div with the generated table
|
|
document.getElementById("table_data").innerHTML = tableHTML;
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX request failed:', status, error);
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function getSelectedLimit() {
|
|
return document.getElementById("records_limit").value;
|
|
}
|
|
|
|
function getStartDate() {
|
|
return document.getElementById("start_date").value || "2025-01-01"; // Default to a safe date
|
|
}
|
|
|
|
function getEndDate() {
|
|
return document.getElementById("end_date").value || "2025-12-31"; // Default to a safe date
|
|
}
|
|
|
|
function downloadCSV(response, table) {
|
|
let rows = response.trim().split("\n");
|
|
|
|
let csvContent = "";
|
|
|
|
// Add headers based on table type
|
|
if (table === "data_NPM") {
|
|
csvContent += "TimestampUTC,PM1,PM2.5,PM10,Temperature_sensor,Humidity_sensor\n";
|
|
} else if (table === "data_BME280") {
|
|
csvContent += "TimestampUTC,Temperature (°C),Humidity (%),Pressure (hPa)\n";
|
|
}
|
|
else if (table === "data_NPM_5channels") {
|
|
csvContent += "TimestampUTC,PM_ch1,PM_ch2,PM_ch3,PM_ch4,PM_ch5\n";
|
|
}
|
|
|
|
// Format rows as CSV
|
|
rows.forEach(row => {
|
|
let columns = row.replace(/[()]/g, "").split(", ");
|
|
csvContent += columns.join(",") + "\n";
|
|
});
|
|
|
|
// Create a downloadable file
|
|
let blob = new Blob([csvContent], { type: "text/csv" });
|
|
let url = window.URL.createObjectURL(blob);
|
|
let a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = table + "_data.csv"; // File name
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
}
|
|
|
|
// Function to empty all sensor tables
|
|
function emptySensorTables() {
|
|
// Show confirmation dialog
|
|
const confirmed = confirm(
|
|
"WARNING: This will permanently delete ALL sensor data from the database!\n\n" +
|
|
"The following tables will be emptied:\n" +
|
|
"- data_NPM\n" +
|
|
"- data_NPM_5channels\n" +
|
|
"- data_BME280\n" +
|
|
"- data_envea\n" +
|
|
"- data_WIND\n" +
|
|
"- data_MPPT\n" +
|
|
"- data_NOISE\n\n" +
|
|
"Configuration and timestamp tables will be preserved.\n\n" +
|
|
"Are you absolutely sure you want to continue?"
|
|
);
|
|
|
|
if (!confirmed) {
|
|
console.log("Empty sensor tables operation cancelled by user");
|
|
return;
|
|
}
|
|
|
|
// Show loading message
|
|
const tableDataDiv = document.getElementById("table_data");
|
|
tableDataDiv.innerHTML = '<div class="alert alert-info">Emptying sensor tables... Please wait...</div>';
|
|
|
|
// Make AJAX request to empty tables
|
|
$.ajax({
|
|
url: 'launcher.php?type=empty_sensor_tables',
|
|
dataType: 'json',
|
|
method: 'GET',
|
|
success: function(response) {
|
|
console.log("Empty sensor tables response:", response);
|
|
|
|
if (response.success) {
|
|
// Show success message
|
|
let message = '<div class="alert alert-success">';
|
|
message += '<h5>Success!</h5>';
|
|
message += '<p>' + response.message + '</p>';
|
|
|
|
if (response.tables_processed && response.tables_processed.length > 0) {
|
|
message += '<p><strong>Tables emptied:</strong></p><ul>';
|
|
response.tables_processed.forEach(table => {
|
|
message += `<li>${table.name}: ${table.deleted} records deleted</li>`;
|
|
});
|
|
message += '</ul>';
|
|
}
|
|
|
|
message += '</div>';
|
|
tableDataDiv.innerHTML = message;
|
|
} else {
|
|
// Show error message
|
|
tableDataDiv.innerHTML = `<div class="alert alert-danger">
|
|
<h5>Error!</h5>
|
|
<p>${response.message || response.error || 'Unknown error occurred'}</p>
|
|
</div>`;
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('AJAX request failed:', status, error);
|
|
tableDataDiv.innerHTML = `<div class="alert alert-danger">
|
|
<h5>Error!</h5>
|
|
<p>Failed to empty sensor tables: ${error}</p>
|
|
</div>`;
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|