Complete translation system fixes and vehicle search filter translations
Translation System Fixes: - Fixed broken translation functionality after UI refactoring - Added missing section translation keys for new single-page layout - Restored proper translation initialization in DOMContentLoaded Vehicle Search Filter Translations: - Added comprehensive translation support for all search filters - Translated filter labels: Year, Fuel Type, Price Range - Translated all dropdown options (All Years, Electric, Hybrid, etc.) - Added search interface translations (placeholder, labels) - Added manual entry form translations - Support for English, French, and Dutch languages Technical Improvements: - Added data-i18n attributes to vehicle-search.js component - Created updateTranslations() method for dynamic updates - Integrated vehicle search with main translation system - Added 20+ new translation keys across all languages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
659e16dea2
commit
0bb31b3693
103
tax.html
103
tax.html
@ -858,10 +858,14 @@
|
||||
"tab.basic": "Setup",
|
||||
"tab.advanced": "Options",
|
||||
"tab.custom": "Cars",
|
||||
"section.required": "📝 Required Information",
|
||||
"section.vehicles": "🚗 Select Your Company Cars",
|
||||
"section.calculated": "⚙️ Calculated Parameters (Adjustable)",
|
||||
"section.advancedOptions": "Advanced Options",
|
||||
"section.options": "Display Options",
|
||||
"section.personal": "Personal Information",
|
||||
"section.time": "Time Parameters",
|
||||
"section.growth": "Growth & Inflation Parameters",
|
||||
"section.options": "Calculation Options",
|
||||
"section.company": "Company Contributions",
|
||||
"section.customVehicle": "Add Custom Vehicle",
|
||||
"section.presetVehicles": "Preset Vehicles",
|
||||
@ -922,7 +926,29 @@
|
||||
"results.title": "Monthly Pension Impact by Vehicle Type",
|
||||
"chart.title": "Year-by-Year Projection",
|
||||
"assumptions.title": "Calculation Assumptions",
|
||||
"assumptions.details": "• Pension calculation: 60% (single) or 75% (married) of average career salary<br>• Employee RSZ contribution: 13.07% (7.5% for pension)<br>• CO2 coefficients for 2025: Diesel 67g/km, Petrol 82g/km<br>• Minimum BIK: €1,650/year<br>• Electric vehicles: 4% coefficient (minimum)<br>• Solidarity contribution factor 2025: 2.75x<br>• Calculations based on current regulations"
|
||||
"assumptions.details": "• Pension calculation: 60% (single) or 75% (married) of average career salary<br>• Employee RSZ contribution: 13.07% (7.5% for pension)<br>• CO2 coefficients for 2025: Diesel 67g/km, Petrol 82g/km<br>• Minimum BIK: €1,650/year<br>• Electric vehicles: 4% coefficient (minimum)<br>• Solidarity contribution factor 2025: 2.75x<br>• Calculations based on current regulations",
|
||||
"filter.year": "Year",
|
||||
"filter.fuelType": "Fuel Type",
|
||||
"filter.priceRange": "Price Range",
|
||||
"filter.allYears": "All Years",
|
||||
"filter.allFuelTypes": "All Fuel Types",
|
||||
"filter.allPrices": "All Prices",
|
||||
"filter.electric": "⚡ Electric",
|
||||
"filter.hybrid": "🔋 Hybrid",
|
||||
"filter.petrol": "⛽ Petrol",
|
||||
"filter.diesel": "🛢️ Diesel",
|
||||
"filter.under30k": "Under €30,000",
|
||||
"filter.30k50k": "€30,000 - €50,000",
|
||||
"filter.50k75k": "€50,000 - €75,000",
|
||||
"filter.75k100k": "€75,000 - €100,000",
|
||||
"filter.above100k": "Above €100,000",
|
||||
"search.placeholder": "Type to search... (e.g., BMW X1, Mercedes C200, Audi Q5)",
|
||||
"search.label": "Search Vehicle",
|
||||
"manual.override": "Enter vehicle details manually",
|
||||
"manual.vehicleName": "Vehicle Name",
|
||||
"manual.listPrice": "List Price (€)",
|
||||
"manual.co2Emissions": "CO2 Emissions (g/km)",
|
||||
"manual.fuelType": "Fuel Type"
|
||||
},
|
||||
fr: {
|
||||
title: "Calculateur d'Impôt sur les Voitures de Société",
|
||||
@ -932,10 +958,14 @@
|
||||
"tab.basic": "Config",
|
||||
"tab.advanced": "Options",
|
||||
"tab.custom": "Véhicules",
|
||||
"section.required": "📝 Informations Obligatoires",
|
||||
"section.vehicles": "🚗 Sélectionnez vos Voitures de Société",
|
||||
"section.calculated": "⚙️ Paramètres Calculés (Ajustables)",
|
||||
"section.advancedOptions": "Options Avancées",
|
||||
"section.options": "Options d'Affichage",
|
||||
"section.personal": "Informations Personnelles",
|
||||
"section.time": "Paramètres Temporels",
|
||||
"section.growth": "Paramètres de Croissance et d'Inflation",
|
||||
"section.options": "Options de Calcul",
|
||||
"section.company": "Contributions de l'Entreprise",
|
||||
"section.customVehicle": "Ajouter un Véhicule Personnalisé",
|
||||
"section.presetVehicles": "Véhicules Prédéfinis",
|
||||
@ -996,7 +1026,29 @@
|
||||
"results.title": "Impact Mensuel sur la Pension par Type de Véhicule",
|
||||
"chart.title": "Projection Année par Année",
|
||||
"assumptions.title": "Hypothèses de Calcul",
|
||||
"assumptions.details": "• Calcul de pension : 60% (célibataire) ou 75% (marié) du salaire moyen de carrière<br>• Cotisation RSZ employé : 13,07% (7,5% pour pension)<br>• Coefficients CO2 pour 2025 : Diesel 67g/km, Essence 82g/km<br>• AEN minimum : €1,650/an<br>• Véhicules électriques : coefficient 4% (minimum)<br>• Facteur contribution solidarité 2025 : 2,75x<br>• Calculs basés sur la réglementation actuelle"
|
||||
"assumptions.details": "• Calcul de pension : 60% (célibataire) ou 75% (marié) du salaire moyen de carrière<br>• Cotisation RSZ employé : 13,07% (7,5% pour pension)<br>• Coefficients CO2 pour 2025 : Diesel 67g/km, Essence 82g/km<br>• AEN minimum : €1,650/an<br>• Véhicules électriques : coefficient 4% (minimum)<br>• Facteur contribution solidarité 2025 : 2,75x<br>• Calculs basés sur la réglementation actuelle",
|
||||
"filter.year": "Année",
|
||||
"filter.fuelType": "Type de Carburant",
|
||||
"filter.priceRange": "Gamme de Prix",
|
||||
"filter.allYears": "Toutes les Années",
|
||||
"filter.allFuelTypes": "Tous les Carburants",
|
||||
"filter.allPrices": "Tous les Prix",
|
||||
"filter.electric": "⚡ Électrique",
|
||||
"filter.hybrid": "🔋 Hybride",
|
||||
"filter.petrol": "⛽ Essence",
|
||||
"filter.diesel": "🛢️ Diesel",
|
||||
"filter.under30k": "Moins de €30,000",
|
||||
"filter.30k50k": "€30,000 - €50,000",
|
||||
"filter.50k75k": "€50,000 - €75,000",
|
||||
"filter.75k100k": "€75,000 - €100,000",
|
||||
"filter.above100k": "Plus de €100,000",
|
||||
"search.placeholder": "Tapez pour rechercher... (ex: BMW X1, Mercedes C200, Audi Q5)",
|
||||
"search.label": "Rechercher Véhicule",
|
||||
"manual.override": "Saisir les détails du véhicule manuellement",
|
||||
"manual.vehicleName": "Nom du Véhicule",
|
||||
"manual.listPrice": "Prix Catalogue (€)",
|
||||
"manual.co2Emissions": "Émissions CO2 (g/km)",
|
||||
"manual.fuelType": "Type de Carburant"
|
||||
},
|
||||
nl: {
|
||||
title: "Bedrijfswagen Belasting Calculator",
|
||||
@ -1006,10 +1058,14 @@
|
||||
"tab.basic": "Basis",
|
||||
"tab.advanced": "Opties",
|
||||
"tab.custom": "Auto's",
|
||||
"section.required": "📝 Verplichte Informatie",
|
||||
"section.vehicles": "🚗 Selecteer uw Bedrijfswagens",
|
||||
"section.calculated": "⚙️ Berekende Parameters (Aanpasbaar)",
|
||||
"section.advancedOptions": "Geavanceerde Opties",
|
||||
"section.options": "Weergaveopties",
|
||||
"section.personal": "Persoonlijke Informatie",
|
||||
"section.time": "Tijd Parameters",
|
||||
"section.growth": "Groei & Inflatie Parameters",
|
||||
"section.options": "Berekeningsopties",
|
||||
"section.company": "Bedrijfsbijdragen",
|
||||
"section.customVehicle": "Aangepast Voertuig Toevoegen",
|
||||
"section.presetVehicles": "Vooraf Ingestelde Voertuigen",
|
||||
@ -1070,7 +1126,29 @@
|
||||
"results.title": "Maandelijkse Pensioenimpact per Voertuigtype",
|
||||
"chart.title": "Jaar-op-Jaar Projectie",
|
||||
"assumptions.title": "Berekeningsveronderstellingen",
|
||||
"assumptions.details": "• Pensioenberekening: 60% (alleenstaand) of 75% (getrouwd) van gemiddeld loopbaansalaris<br>• Werknemer RSZ bijdrage: 13,07% (7,5% voor pensioen)<br>• CO2 coëfficiënten voor 2025: Diesel 67g/km, Benzine 82g/km<br>• Minimum VAA: €1,650/jaar<br>• Elektrische voertuigen: 4% coëfficiënt (minimum)<br>• Solidariteitsbijdrage factor 2025: 2,75x<br>• Berekeningen gebaseerd op huidige regelgeving"
|
||||
"assumptions.details": "• Pensioenberekening: 60% (alleenstaand) of 75% (getrouwd) van gemiddeld loopbaansalaris<br>• Werknemer RSZ bijdrage: 13,07% (7,5% voor pensioen)<br>• CO2 coëfficiënten voor 2025: Diesel 67g/km, Benzine 82g/km<br>• Minimum VAA: €1,650/jaar<br>• Elektrische voertuigen: 4% coëfficiënt (minimum)<br>• Solidariteitsbijdrage factor 2025: 2,75x<br>• Berekeningen gebaseerd op huidige regelgeving",
|
||||
"filter.year": "Jaar",
|
||||
"filter.fuelType": "Brandstoftype",
|
||||
"filter.priceRange": "Prijsklasse",
|
||||
"filter.allYears": "Alle Jaren",
|
||||
"filter.allFuelTypes": "Alle Brandstoffen",
|
||||
"filter.allPrices": "Alle Prijzen",
|
||||
"filter.electric": "⚡ Elektrisch",
|
||||
"filter.hybrid": "🔋 Hybride",
|
||||
"filter.petrol": "⛽ Benzine",
|
||||
"filter.diesel": "🛢️ Diesel",
|
||||
"filter.under30k": "Onder €30,000",
|
||||
"filter.30k50k": "€30,000 - €50,000",
|
||||
"filter.50k75k": "€50,000 - €75,000",
|
||||
"filter.75k100k": "€75,000 - €100,000",
|
||||
"filter.above100k": "Boven €100,000",
|
||||
"search.placeholder": "Type om te zoeken... (bijv. BMW X1, Mercedes C200, Audi Q5)",
|
||||
"search.label": "Zoek Voertuig",
|
||||
"manual.override": "Voertuigdetails handmatig invoeren",
|
||||
"manual.vehicleName": "Voertuignaam",
|
||||
"manual.listPrice": "Catalogusprijs (€)",
|
||||
"manual.co2Emissions": "CO2 Uitstoot (g/km)",
|
||||
"manual.fuelType": "Brandstoftype"
|
||||
}
|
||||
};
|
||||
|
||||
@ -1144,8 +1222,10 @@
|
||||
// Update language buttons
|
||||
document.querySelectorAll('.language-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
if (btn.textContent.toLowerCase() === lang) {
|
||||
btn.classList.add('active');
|
||||
}
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
|
||||
// Update all translatable elements
|
||||
document.querySelectorAll('[data-i18n]').forEach(element => {
|
||||
@ -1194,6 +1274,11 @@
|
||||
fuelOptions[3].textContent = translations[currentLanguage]['fuel.hybrid'];
|
||||
}
|
||||
}
|
||||
|
||||
// Update vehicle search component if available
|
||||
if (typeof vehicleAutocomplete !== 'undefined' && vehicleAutocomplete && vehicleAutocomplete.updateTranslations) {
|
||||
vehicleAutocomplete.updateTranslations();
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-calculate years to work - will be set up in DOMContentLoaded
|
||||
@ -1689,13 +1774,15 @@
|
||||
|
||||
// Initialize when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize translation system first
|
||||
switchLanguage('en');
|
||||
|
||||
// Setup event listeners
|
||||
setupEventListeners();
|
||||
|
||||
// Initialize basic calculations
|
||||
updateYearsToWork();
|
||||
updateRetirementYears();
|
||||
updateSelectOptions();
|
||||
|
||||
// Initialize vehicle search system immediately since it's now in the main interface
|
||||
vehicleAutocomplete = new VehicleSearchAutocomplete('vehicle-autocomplete-container', function(vehicleData) {
|
||||
|
||||
@ -21,9 +21,9 @@ class VehicleSearchAutocomplete {
|
||||
<div class="vehicle-search-container">
|
||||
<div class="search-filters" style="display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;">
|
||||
<div class="filter-group">
|
||||
<label for="year-filter">Year</label>
|
||||
<label for="year-filter" data-i18n="filter.year">Year</label>
|
||||
<select id="year-filter" class="filter-dropdown">
|
||||
<option value="">All Years</option>
|
||||
<option value="" data-i18n="filter.allYears">All Years</option>
|
||||
<option value="2025">2025</option>
|
||||
<option value="2024">2024</option>
|
||||
<option value="2023">2023</option>
|
||||
@ -34,34 +34,35 @@ class VehicleSearchAutocomplete {
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label for="fuel-filter">Fuel Type</label>
|
||||
<label for="fuel-filter" data-i18n="filter.fuelType">Fuel Type</label>
|
||||
<select id="fuel-filter" class="filter-dropdown">
|
||||
<option value="">All Fuel Types</option>
|
||||
<option value="electric">⚡ Electric</option>
|
||||
<option value="hybrid">🔋 Hybrid</option>
|
||||
<option value="petrol">⛽ Petrol</option>
|
||||
<option value="diesel">🛢️ Diesel</option>
|
||||
<option value="" data-i18n="filter.allFuelTypes">All Fuel Types</option>
|
||||
<option value="electric" data-i18n="filter.electric">⚡ Electric</option>
|
||||
<option value="hybrid" data-i18n="filter.hybrid">🔋 Hybrid</option>
|
||||
<option value="petrol" data-i18n="filter.petrol">⛽ Petrol</option>
|
||||
<option value="diesel" data-i18n="filter.diesel">🛢️ Diesel</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label for="price-filter">Price Range</label>
|
||||
<label for="price-filter" data-i18n="filter.priceRange">Price Range</label>
|
||||
<select id="price-filter" class="filter-dropdown">
|
||||
<option value="">All Prices</option>
|
||||
<option value="0-30000">Under €30,000</option>
|
||||
<option value="30000-50000">€30,000 - €50,000</option>
|
||||
<option value="50000-75000">€50,000 - €75,000</option>
|
||||
<option value="75000-100000">€75,000 - €100,000</option>
|
||||
<option value="100000-999999">Above €100,000</option>
|
||||
<option value="" data-i18n="filter.allPrices">All Prices</option>
|
||||
<option value="0-30000" data-i18n="filter.under30k">Under €30,000</option>
|
||||
<option value="30000-50000" data-i18n="filter.30k50k">€30,000 - €50,000</option>
|
||||
<option value="50000-75000" data-i18n="filter.50k75k">€50,000 - €75,000</option>
|
||||
<option value="75000-100000" data-i18n="filter.75k100k">€75,000 - €100,000</option>
|
||||
<option value="100000-999999" data-i18n="filter.above100k">Above €100,000</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group" style="position: relative;">
|
||||
<label for="vehicle-search-input">Search Vehicle</label>
|
||||
<label for="vehicle-search-input" data-i18n="search.label">Search Vehicle</label>
|
||||
<input type="text"
|
||||
id="vehicle-search-input"
|
||||
class="vehicle-search-input"
|
||||
data-i18n-placeholder="search.placeholder"
|
||||
placeholder="Type to search... (e.g., BMW X1, Mercedes C200, Audi Q5)"
|
||||
autocomplete="off">
|
||||
<div id="vehicle-search-results" class="vehicle-search-results" style="display: none;"></div>
|
||||
@ -70,34 +71,34 @@ class VehicleSearchAutocomplete {
|
||||
<div class="manual-override" style="margin-top: 16px;">
|
||||
<label>
|
||||
<input type="checkbox" id="manual-override-checkbox">
|
||||
<span style="margin-left: 8px; font-size: 0.9rem; color: #6c757d;">Enter vehicle details manually</span>
|
||||
<span style="margin-left: 8px; font-size: 0.9rem; color: #6c757d;" data-i18n="manual.override">Enter vehicle details manually</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="manual-fields" class="manual-fields" style="display: none; margin-top: 16px;">
|
||||
<div class="input-row">
|
||||
<div class="input-group">
|
||||
<label for="manual-name">Vehicle Name</label>
|
||||
<label for="manual-name" data-i18n="manual.vehicleName">Vehicle Name</label>
|
||||
<input type="text" id="manual-name" placeholder="e.g., Tesla Model 3">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="manual-price">List Price (€)</label>
|
||||
<label for="manual-price" data-i18n="manual.listPrice">List Price (€)</label>
|
||||
<input type="number" id="manual-price" placeholder="50000" min="15000" max="200000">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="manual-co2">CO2 Emissions (g/km)</label>
|
||||
<label for="manual-co2" data-i18n="manual.co2Emissions">CO2 Emissions (g/km)</label>
|
||||
<input type="number" id="manual-co2" placeholder="120" min="0" max="300">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="manual-fuel">Fuel Type</label>
|
||||
<label for="manual-fuel" data-i18n="manual.fuelType">Fuel Type</label>
|
||||
<select id="manual-fuel">
|
||||
<option value="electric">Electric</option>
|
||||
<option value="petrol">Petrol</option>
|
||||
<option value="diesel">Diesel</option>
|
||||
<option value="hybrid">Hybrid</option>
|
||||
<option value="electric" data-i18n="fuel.electric">Electric</option>
|
||||
<option value="petrol" data-i18n="fuel.petrol">Petrol</option>
|
||||
<option value="diesel" data-i18n="fuel.diesel">Diesel</option>
|
||||
<option value="hybrid" data-i18n="fuel.hybrid">Hybrid</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@ -111,6 +112,21 @@ class VehicleSearchAutocomplete {
|
||||
`;
|
||||
}
|
||||
|
||||
updateTranslations() {
|
||||
// This will be called when language changes to update all translatable elements
|
||||
// The main translation system will handle the data-i18n attributes
|
||||
// Just trigger a re-render of any dynamic elements if needed
|
||||
|
||||
// Update placeholder for search input if needed
|
||||
const searchInput = document.getElementById('vehicle-search-input');
|
||||
if (searchInput && window.translations && window.currentLanguage) {
|
||||
const placeholder = window.translations[window.currentLanguage]['search.placeholder'];
|
||||
if (placeholder) {
|
||||
searchInput.setAttribute('placeholder', placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
const searchInput = document.getElementById('vehicle-search-input');
|
||||
const resultsContainer = document.getElementById('vehicle-search-results');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user