Ulas Kalayci
6746a5a175
- Add Ukrainian (uk) locale to SUPPORTED_LOCALES and locale picker - Add public/locales/uk.json (622 keys, full Ukrainian translation) - Add UAH (Ukrainian Hryvnia) to SUPPORTED_CURRENCIES and VALID_CURRENCIES - Add CATEGORY_I18N map and catLabel() in settings.js to translate default shopping category names in the settings panel; rename and delete dialogs now also use the translated name instead of the raw German DB string - Align server VALID_CURRENCIES with frontend: add missing AED, BRL, INR, SAR Co-Authored-By: baragoon <baragoon@users.noreply.github.com> Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
84 lines
2.3 KiB
JavaScript
84 lines
2.3 KiB
JavaScript
/**
|
|
* oikos-locale-picker - Sprachauswahl-Web-Component
|
|
* Zeigt ein <select>-Dropdown für System/Deutsch/English.
|
|
* Bei Auswahl: setLocale() oder localStorage-Eintrag löschen (System).
|
|
* Dependencies: i18n.js
|
|
*/
|
|
|
|
import { t, setLocale, getLocale, getSupportedLocales } from '/i18n.js';
|
|
|
|
const LOCALE_LABELS = {
|
|
de: 'Deutsch',
|
|
en: 'English',
|
|
es: 'Español',
|
|
fr: 'Français',
|
|
it: 'Italiano',
|
|
sv: 'Svenska',
|
|
el: 'Ελληνικά',
|
|
ru: 'Русский',
|
|
tr: 'Türkçe',
|
|
zh: '中文',
|
|
ja: '日本語',
|
|
ar: 'العربية',
|
|
hi: 'हिन्दी',
|
|
pt: 'Português',
|
|
uk: 'Українська',
|
|
};
|
|
|
|
class OikosLocalePicker extends HTMLElement {
|
|
connectedCallback() {
|
|
this._render();
|
|
this._onLocaleChanged = () => this._render();
|
|
window.addEventListener('locale-changed', this._onLocaleChanged);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
window.removeEventListener('locale-changed', this._onLocaleChanged);
|
|
}
|
|
|
|
_render() {
|
|
const stored = localStorage.getItem('oikos-locale');
|
|
|
|
const label = document.createElement('label');
|
|
label.className = 'locale-picker__label';
|
|
label.htmlFor = 'locale-select';
|
|
label.textContent = t('settings.localeLabel');
|
|
|
|
const select = document.createElement('select');
|
|
select.className = 'form-input locale-picker__select';
|
|
select.id = 'locale-select';
|
|
|
|
// System-Option
|
|
const systemOpt = document.createElement('option');
|
|
systemOpt.value = 'system';
|
|
systemOpt.textContent = t('settings.localeSystem');
|
|
systemOpt.selected = !stored;
|
|
select.appendChild(systemOpt);
|
|
|
|
// Sprach-Optionen
|
|
for (const locale of getSupportedLocales()) {
|
|
const opt = document.createElement('option');
|
|
opt.value = locale;
|
|
opt.textContent = LOCALE_LABELS[locale] || locale;
|
|
opt.selected = stored === locale;
|
|
select.appendChild(opt);
|
|
}
|
|
|
|
select.addEventListener('change', () => {
|
|
select.disabled = true;
|
|
select.style.opacity = '0.5';
|
|
if (select.value === 'system') {
|
|
localStorage.removeItem('oikos-locale');
|
|
// Kurze Verzögerung damit der Browser den disabled-Zustand rendert
|
|
setTimeout(() => location.reload(), 60);
|
|
} else {
|
|
setLocale(select.value);
|
|
}
|
|
});
|
|
|
|
this.replaceChildren(label, select);
|
|
}
|
|
}
|
|
|
|
customElements.define('oikos-locale-picker', OikosLocalePicker);
|