Fix mixed language translation issues in results and fuel labels

Translation Fixes:
- Fixed hardcoded "/mois" showing in English interface for monthly pension loss
- Fixed hardcoded "/mo" showing regardless of language in summary section
- Fixed fuel types displaying in English instead of translated versions

Technical Implementation:
- Added translation keys for time units (units.perMonth, units.perMo)
- Created translateFuelType() helper function for consistent fuel type display
- Updated results display to use dynamic translations instead of hardcoded strings

Language Support:
- English: "/month", "/mo", "Electric"
- French: "/mois", "/mois", "Électrique"
- Dutch: "/maand", "/md", "Elektrisch"

Result: All interfaces now display consistently in the selected language
without mixed language artifacts in calculations and fuel type labels.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
nokker 2025-08-31 04:15:54 +02:00
parent 0bb31b3693
commit e800bf72fc

View File

@ -948,7 +948,9 @@
"manual.vehicleName": "Vehicle Name", "manual.vehicleName": "Vehicle Name",
"manual.listPrice": "List Price (€)", "manual.listPrice": "List Price (€)",
"manual.co2Emissions": "CO2 Emissions (g/km)", "manual.co2Emissions": "CO2 Emissions (g/km)",
"manual.fuelType": "Fuel Type" "manual.fuelType": "Fuel Type",
"units.perMonth": "/month",
"units.perMo": "/mo"
}, },
fr: { fr: {
title: "Calculateur d'Impôt sur les Voitures de Société", title: "Calculateur d'Impôt sur les Voitures de Société",
@ -1048,7 +1050,9 @@
"manual.vehicleName": "Nom du Véhicule", "manual.vehicleName": "Nom du Véhicule",
"manual.listPrice": "Prix Catalogue (€)", "manual.listPrice": "Prix Catalogue (€)",
"manual.co2Emissions": "Émissions CO2 (g/km)", "manual.co2Emissions": "Émissions CO2 (g/km)",
"manual.fuelType": "Type de Carburant" "manual.fuelType": "Type de Carburant",
"units.perMonth": "/mois",
"units.perMo": "/mois"
}, },
nl: { nl: {
title: "Bedrijfswagen Belasting Calculator", title: "Bedrijfswagen Belasting Calculator",
@ -1148,7 +1152,9 @@
"manual.vehicleName": "Voertuignaam", "manual.vehicleName": "Voertuignaam",
"manual.listPrice": "Catalogusprijs (€)", "manual.listPrice": "Catalogusprijs (€)",
"manual.co2Emissions": "CO2 Uitstoot (g/km)", "manual.co2Emissions": "CO2 Uitstoot (g/km)",
"manual.fuelType": "Brandstoftype" "manual.fuelType": "Brandstoftype",
"units.perMonth": "/maand",
"units.perMo": "/md"
} }
}; };
@ -1302,6 +1308,16 @@
document.getElementById('retirement-years').value = retirementYears; document.getElementById('retirement-years').value = retirementYears;
} }
function translateFuelType(fuelType) {
const fuelTranslations = {
'electric': translations[currentLanguage]['fuel.electric'] || 'Electric',
'petrol': translations[currentLanguage]['fuel.petrol'] || 'Petrol',
'diesel': translations[currentLanguage]['fuel.diesel'] || 'Diesel',
'hybrid': translations[currentLanguage]['fuel.hybrid'] || 'Hybrid'
};
return fuelTranslations[fuelType] || fuelType;
}
// Removed switchTab function - no longer using tabs // Removed switchTab function - no longer using tabs
function validateRequiredFields() { function validateRequiredFields() {
@ -1604,14 +1620,14 @@
carComparisonHTML += '<div class="car-subtitle">' + car.examples + '</div>'; carComparisonHTML += '<div class="car-subtitle">' + car.examples + '</div>';
carComparisonHTML += '<div class="car-details">'; carComparisonHTML += '<div class="car-details">';
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].listPrice + '</span><span class="detail-value">€' + car.price.toLocaleString() + '</span></div>'; carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].listPrice + '</span><span class="detail-value">€' + car.price.toLocaleString() + '</span></div>';
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].co2Fuel + '</span><span class="detail-value">' + car.co2 + 'g / ' + car.fuel + '</span></div>'; carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].co2Fuel + '</span><span class="detail-value">' + car.co2 + 'g / ' + translateFuelType(car.fuel) + '</span></div>';
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].annualBik + '</span><span class="detail-value">€' + Math.round(annualBIK).toLocaleString() + '</span></div>'; carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].annualBik + '</span><span class="detail-value">€' + Math.round(annualBIK).toLocaleString() + '</span></div>';
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].monthlyTax + '</span><span class="detail-value">€' + Math.round(netMonthlyCost).toLocaleString() + '</span></div>'; carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].monthlyTax + '</span><span class="detail-value">€' + Math.round(netMonthlyCost).toLocaleString() + '</span></div>';
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].rszLostMonth + '</span><span class="detail-value highlight">€' + Math.round(monthlyRSZLost).toLocaleString() + '</span></div>'; carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].rszLostMonth + '</span><span class="detail-value highlight">€' + Math.round(monthlyRSZLost).toLocaleString() + '</span></div>';
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].co2TaxYear + '</span><span class="detail-value">€' + Math.round(solidarityContribution).toLocaleString() + '</span></div>'; carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].co2TaxYear + '</span><span class="detail-value">€' + Math.round(solidarityContribution).toLocaleString() + '</span></div>';
carComparisonHTML += '</div>'; carComparisonHTML += '</div>';
carComparisonHTML += '<div class="monthly-loss-box">'; carComparisonHTML += '<div class="monthly-loss-box">';
carComparisonHTML += '<div class="detail-row"><span class="detail-label" style="font-weight: 500;">' + labels[currentLanguage].monthlyPensionLoss + '</span><span class="detail-value pension-loss">-€' + Math.round(monthlyPensionLoss) + '/mois</span></div>'; carComparisonHTML += '<div class="detail-row"><span class="detail-label" style="font-weight: 500;">' + labels[currentLanguage].monthlyPensionLoss + '</span><span class="detail-value pension-loss">-€' + Math.round(monthlyPensionLoss) + translations[currentLanguage]['units.perMonth'] + '</span></div>';
carComparisonHTML += '<div class="detail-row"><span class="detail-label" style="font-size: 0.85rem;">' + labels[currentLanguage].duringRetirement + '</span><span class="detail-value" style="font-size: 0.85rem;">' + labels[currentLanguage].everyMonthFor + ' ' + retirementYears + ' ' + labels[currentLanguage].years + '</span></div>'; carComparisonHTML += '<div class="detail-row"><span class="detail-label" style="font-size: 0.85rem;">' + labels[currentLanguage].duringRetirement + '</span><span class="detail-value" style="font-size: 0.85rem;">' + labels[currentLanguage].everyMonthFor + ' ' + retirementYears + ' ' + labels[currentLanguage].years + '</span></div>';
carComparisonHTML += '<div class="detail-row" style="margin-top: 12px;"><span class="detail-label">' + labels[currentLanguage].totalLifetimeLoss + '</span><span class="detail-value pension-loss">€' + Math.round(totalPensionLoss).toLocaleString() + '</span></div>'; carComparisonHTML += '<div class="detail-row" style="margin-top: 12px;"><span class="detail-label">' + labels[currentLanguage].totalLifetimeLoss + '</span><span class="detail-value pension-loss">€' + Math.round(totalPensionLoss).toLocaleString() + '</span></div>';
carComparisonHTML += presentValueRow; carComparisonHTML += presentValueRow;
@ -1722,9 +1738,9 @@
let summaryHTML = '<h3>' + summaryLabels[currentLanguage].monthlyImpact + '</h3>'; let summaryHTML = '<h3>' + summaryLabels[currentLanguage].monthlyImpact + '</h3>';
summaryHTML += '<div class="summary-grid" style="margin-bottom: 32px;">'; summaryHTML += '<div class="summary-grid" style="margin-bottom: 32px;">';
summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #28a745;">-€' + Math.round(minMonthlyLoss) + '/mo</div><div class="summary-label">' + summaryLabels[currentLanguage].bestCase + '</div></div>'; summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #28a745;">-€' + Math.round(minMonthlyLoss) + translations[currentLanguage]['units.perMo'] + '</div><div class="summary-label">' + summaryLabels[currentLanguage].bestCase + '</div></div>';
summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #6c757d;">-€' + Math.round(avgMonthlyLoss) + '/mo</div><div class="summary-label">' + summaryLabels[currentLanguage].average + '</div></div>'; summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #6c757d;">-€' + Math.round(avgMonthlyLoss) + translations[currentLanguage]['units.perMo'] + '</div><div class="summary-label">' + summaryLabels[currentLanguage].average + '</div></div>';
summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #dc3545;">-€' + Math.round(maxMonthlyLoss) + '/mo</div><div class="summary-label">' + summaryLabels[currentLanguage].worstCase + '</div></div>'; summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #dc3545;">-€' + Math.round(maxMonthlyLoss) + translations[currentLanguage]['units.perMo'] + '</div><div class="summary-label">' + summaryLabels[currentLanguage].worstCase + '</div></div>';
summaryHTML += '<div class="summary-item"><div class="summary-value">' + retirementYears + ' ' + labels[currentLanguage].years + '</div><div class="summary-label">' + summaryLabels[currentLanguage].duration + '</div></div>'; summaryHTML += '<div class="summary-item"><div class="summary-value">' + retirementYears + ' ' + labels[currentLanguage].years + '</div><div class="summary-label">' + summaryLabels[currentLanguage].duration + '</div></div>';
summaryHTML += '</div>'; summaryHTML += '</div>';