Implement lightweight offline i18n system with French/English support

**Core System:**
- Add i18n.js translation library with data-attribute support
- Create translation files (fr.json, en.json) with offline support
- Store language preference in SQLite config_table
- Add backend endpoints for get/set language

**UI Features:**
- Add language switcher dropdown to topbar (🇫🇷 FR / 🇬🇧 EN)
- Auto-sync language selection across all pages
- Support for static HTML and dynamically created elements

**Implementation:**
- Migrate sensors.html as working example
- Add data-i18n attributes to all UI elements
- Support for buttons, inputs, and dynamic content
- Comprehensive README documentation in html/lang/

**Technical Details:**
- Works completely offline (local JSON files)
- No external dependencies
- Database-backed user preference
- Event-based language change notifications
- Automatic translation on page load

Next steps: Gradually migrate other pages (admin, wifi, index, etc.)

🤖 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
2026-01-05 18:10:06 +01:00
parent 906eaa851d
commit 163d60bf34
8 changed files with 561 additions and 24 deletions

View File

@@ -6,12 +6,18 @@
</a>
<div class="d-flex">
<button class="btn btn-outline-light d-md-none me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarOffcanvas" aria-controls="sidebarOffcanvas" aria-label="Toggle Sidebar"></button>
<!-- Centered text -->
<!--
<span id="pageTitle_plus_ID" class="position-absolute top-50 start-50 translate-middle">Texte au milieu</span>
-->
<!-- Language Switcher -->
<select class="form-select form-select-sm me-2" id="languageSwitcher" style="width: auto; background-color: transparent; color: white; border-color: white;" onchange="i18n.setLanguage(this.value)">
<option value="fr">🇫🇷 FR</option>
<option value="en">🇬🇧 EN</option>
</select>
<button type="button" class="btn btn-outline-light" id="RTC_time">loading...</button>
</div>
</div>