Add i18n translations for page content (Home, Database, Logs)
Extended internationalization support by adding translation keys and data-i18n attributes to page content. Previously only the sidebar was translated - now the main content of Home, Database, and Logs pages will switch between French and English when the user changes the language selector. Translation keys added: - Home page: title, welcome message, PM measures, Linux stats, disk/memory usage - Database page: all UI labels, buttons, and dropdown options - Logs page: title, description, log types, and action buttons 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
PaulVua
@@ -49,59 +49,59 @@
|
||||
</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">Base de données</h1>
|
||||
<p>Le capteur enregistre en local les données de mesures. Vous pouvez ici les consulter et les télécharger.</p>
|
||||
|
||||
<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">Consulter la base de donnée</h5>
|
||||
<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">Nombre de mesures:</label>
|
||||
<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>10 dernières</option>
|
||||
<option value="20">20 dernières</option>
|
||||
<option value="30">30 dernières</option>
|
||||
<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)">Mesures PM</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_BME280',getSelectedLimit(),false)">Mesures Temp/Hum</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM_5channels',getSelectedLimit(),false)">Mesures PM (5 canaux)</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_envea',getSelectedLimit(),false)">Sonde Cairsens</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_NOISE',getSelectedLimit(),false)">Sonde bruit</button>
|
||||
<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)">Sonde Vent</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_MPPT',getSelectedLimit(),false)">Batterie</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)">Timestamp Table</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">Télécharger les données</h5>
|
||||
<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">Date de début:</label>
|
||||
<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">Date de fin:</label>
|
||||
<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())">Mesures PM</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_BME280',10,true, getStartDate(), getEndDate())">Mesures Temp/Hum</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_NPM_5channels',10,true, getStartDate(), getEndDate())">Mesures PM (5 canaux)</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_envea',10,true, getStartDate(), getEndDate())">Sonde Cairsens</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_NOISE',10,true, getStartDate(), getEndDate())">Sonde Bruit</button>
|
||||
<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())">Batterie</button>
|
||||
<button class="btn btn-primary" onclick="get_data_sqlite('data_mppt',10,true, getStartDate(), getEndDate())" data-i18n="database.battery">Batterie</button>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -51,16 +51,16 @@
|
||||
</aside>
|
||||
<!-- Main content -->
|
||||
<main class="col-md-9 ms-sm-auto col-lg-10 offset-md-3 offset-lg-2 px-md-4">
|
||||
<h1 class="mt-4">Votre capteur</h1>
|
||||
<p>Bienvenue sur votre interface de configuration de votre capteur.</p>
|
||||
|
||||
<h1 class="mt-4" data-i18n="home.title">Votre capteur</h1>
|
||||
<p data-i18n="home.welcome">Bienvenue sur votre interface de configuration de votre capteur.</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
|
||||
<!-- Card NPM values -->
|
||||
<div class="col-sm-4 mt-2">
|
||||
<div class="card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Mesures PM</h5>
|
||||
<h5 class="card-title" data-i18n="home.pmMeasures">Mesures PM</h5>
|
||||
<canvas id="sensorPMChart" style="width: 100%; max-width: 600px; height: 200px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,14 +68,14 @@
|
||||
|
||||
<!-- Card Linux Stats -->
|
||||
<div class="col-sm-4 mt-2">
|
||||
<div class="card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Linux stats</h5>
|
||||
<p class="card-text">Disk usage (total size <span id="disk_size"></span> Gb) </p>
|
||||
<h5 class="card-title" data-i18n="home.linuxStats">Statistiques Linux</h5>
|
||||
<p class="card-text"><span data-i18n="home.diskUsage">Utilisation du disque (taille totale</span> <span id="disk_size"></span> Gb) </p>
|
||||
<div id="disk_space"></div>
|
||||
<p class="card-text">Memory usage (total size <span id="memory_size"></span> Mb) </p>
|
||||
<p class="card-text"><span data-i18n="home.memoryUsage">Utilisation de la mémoire (taille totale</span> <span id="memory_size"></span> Mb) </p>
|
||||
<div id="memory_space"></div>
|
||||
<p class="card-text"> Database size: <span id="database_size"></span> </p>
|
||||
<p class="card-text"><span data-i18n="home.databaseSize">Taille de la base de données:</span> <span id="database_size"></span> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -60,5 +60,42 @@
|
||||
"map": "Map",
|
||||
"terminal": "Terminal",
|
||||
"admin": "Admin"
|
||||
},
|
||||
"home": {
|
||||
"title": "Your Sensor",
|
||||
"welcome": "Welcome to your sensor configuration interface.",
|
||||
"pmMeasures": "PM Measurements",
|
||||
"linuxStats": "Linux Statistics",
|
||||
"diskUsage": "Disk usage (total size",
|
||||
"memoryUsage": "Memory usage (total size",
|
||||
"databaseSize": "Database size:"
|
||||
},
|
||||
"database": {
|
||||
"title": "Database",
|
||||
"description": "The sensor records measurement data locally. You can view and download it here.",
|
||||
"viewDatabase": "View Database",
|
||||
"numberOfMeasures": "Number of measurements:",
|
||||
"last10": "Last 10",
|
||||
"last20": "Last 20",
|
||||
"last30": "Last 30",
|
||||
"pmMeasures": "PM Measurements",
|
||||
"tempHumMeasures": "Temp/Hum Measurements",
|
||||
"pm5Channels": "PM Measurements (5 channels)",
|
||||
"cairsensProbe": "Cairsens Probe",
|
||||
"noiseProbe": "Noise Probe",
|
||||
"windProbe": "Wind Probe",
|
||||
"battery": "Battery",
|
||||
"timestampTable": "Timestamp Table",
|
||||
"downloadData": "Download Data",
|
||||
"startDate": "Start date:",
|
||||
"endDate": "End date:"
|
||||
},
|
||||
"logs": {
|
||||
"title": "The Log",
|
||||
"description": "The log allows you to know if the sensor processes are running correctly.",
|
||||
"saraLogs": "Sara logs",
|
||||
"bootLogs": "Boot logs",
|
||||
"refresh": "Refresh",
|
||||
"clear": "Clear"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,5 +60,42 @@
|
||||
"map": "Carte",
|
||||
"terminal": "Terminal",
|
||||
"admin": "Admin"
|
||||
},
|
||||
"home": {
|
||||
"title": "Votre capteur",
|
||||
"welcome": "Bienvenue sur votre interface de configuration de votre capteur.",
|
||||
"pmMeasures": "Mesures PM",
|
||||
"linuxStats": "Statistiques Linux",
|
||||
"diskUsage": "Utilisation du disque (taille totale",
|
||||
"memoryUsage": "Utilisation de la mémoire (taille totale",
|
||||
"databaseSize": "Taille de la base de données:"
|
||||
},
|
||||
"database": {
|
||||
"title": "Base de données",
|
||||
"description": "Le capteur enregistre en local les données de mesures. Vous pouvez ici les consulter et les télécharger.",
|
||||
"viewDatabase": "Consulter la base de donnée",
|
||||
"numberOfMeasures": "Nombre de mesures:",
|
||||
"last10": "10 dernières",
|
||||
"last20": "20 dernières",
|
||||
"last30": "30 dernières",
|
||||
"pmMeasures": "Mesures PM",
|
||||
"tempHumMeasures": "Mesures Temp/Hum",
|
||||
"pm5Channels": "Mesures PM (5 canaux)",
|
||||
"cairsensProbe": "Sonde Cairsens",
|
||||
"noiseProbe": "Sonde bruit",
|
||||
"windProbe": "Sonde Vent",
|
||||
"battery": "Batterie",
|
||||
"timestampTable": "Timestamp Table",
|
||||
"downloadData": "Télécharger les données",
|
||||
"startDate": "Date de début:",
|
||||
"endDate": "Date de fin:"
|
||||
},
|
||||
"logs": {
|
||||
"title": "Le journal",
|
||||
"description": "Le journal des logs permet de savoir si les processus du capteur se déroulent correctement.",
|
||||
"saraLogs": "Sara logs",
|
||||
"bootLogs": "Boot logs",
|
||||
"refresh": "Refresh",
|
||||
"clear": "Clear"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,30 +49,30 @@
|
||||
</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">Le journal</h1>
|
||||
<p>Le journal des logs permet de savoir si les processus du capteur se déroulent correctement.</p>
|
||||
<h1 class="mt-4" data-i18n="logs.title">Le journal</h1>
|
||||
<p data-i18n="logs.description">Le journal des logs permet de savoir si les processus du capteur se déroulent correctement.</p>
|
||||
<div class="row">
|
||||
<!-- card 1 -->
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card" style="height: 80vh;">
|
||||
<div class="card-header">
|
||||
Sara logs
|
||||
<button type="submit" class="btn btn-secondary btn-sm" id="refresh-master-log">Refresh</button>
|
||||
<button type="submit" class="btn btn-secondary btn-sm" onclick="clear_loopLogs()">Clear</button>
|
||||
<span data-i18n="logs.saraLogs">Sara logs</span>
|
||||
<button type="submit" class="btn btn-secondary btn-sm" id="refresh-master-log" data-i18n="logs.refresh">Refresh</button>
|
||||
<button type="submit" class="btn btn-secondary btn-sm" onclick="clear_loopLogs()" data-i18n="logs.clear">Clear</button>
|
||||
|
||||
<span id="script_running"></span>
|
||||
</div>
|
||||
<div class="card-body overflow-auto" id="card_loop_content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- card 2 -->
|
||||
<div class="col-lg-6 col-12">
|
||||
<div class="card" style="height: 80vh;">
|
||||
<div class="card-header">
|
||||
Boot logs
|
||||
<button type="submit" class="btn btn-secondary btn-sm" id="refresh-boot-log">Refresh</button>
|
||||
<span data-i18n="logs.bootLogs">Boot logs</span>
|
||||
<button type="submit" class="btn btn-secondary btn-sm" id="refresh-boot-log" data-i18n="logs.refresh">Refresh</button>
|
||||
</div>
|
||||
<div class="card-body overflow-auto" id="card_boot_content">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user