From 79a92173073dcb62367bfa58a7ba0e9f0a80a5d3 Mon Sep 17 00:00:00 2001
From: PaulVua <paulvuarambon@gmail.com>
Date: Tue, 6 Jan 2026 16:42:43 +0100
Subject: [PATCH] Add i18n translations for page content (Home, Database, Logs)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 html/database.html | 52 +++++++++++++++++++++++-----------------------
 html/index.html    | 20 +++++++++---------
 html/lang/en.json  | 37 +++++++++++++++++++++++++++++++++
 html/lang/fr.json  | 37 +++++++++++++++++++++++++++++++++
 html/logs.html     | 16 +++++++-------
 5 files changed, 118 insertions(+), 44 deletions(-)

diff --git a/html/database.html b/html/database.html
index 817787d..f4de053 100755
--- a/html/database.html
+++ b/html/database.html
@@ -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>
diff --git a/html/index.html b/html/index.html
index 68c1523..8201768 100755
--- a/html/index.html
+++ b/html/index.html
@@ -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>
diff --git a/html/lang/en.json b/html/lang/en.json
index 7bda85d..b28f838 100644
--- a/html/lang/en.json
+++ b/html/lang/en.json
@@ -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"
   }
 }
diff --git a/html/lang/fr.json b/html/lang/fr.json
index 3eee6a7..7d1717b 100644
--- a/html/lang/fr.json
+++ b/html/lang/fr.json
@@ -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"
   }
 }
diff --git a/html/logs.html b/html/logs.html
index 892e060..524957b 100755
--- a/html/logs.html
+++ b/html/logs.html
@@ -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">