Automatically set translation according to browser settings

common/webapp/public/lang/settings.conf

@@ -1,5 +1,6 @@
 {
   default: "en"
+  useBrowserLanguage: true
   languages: [
     // remove the languages you don't need reorder them or add your own
     { locale: "cs", name: "Czech" }
@@ -11,22 +12,22 @@
     { locale: "lv", name: "Latviešu" }
     { locale: "hu", name: "Magyar" }
     { locale: "nl", name: "Nederlands" }
-    { locale: "no_nb", name: "Norsk bokmål" }
+    { locale: "nb", name: "Norsk bokmål" }
     { locale: "pl", name: "Polski" }
-    { locale: "pt_PT", name: "Português (Portugal)" }
+    { locale: "pt-PT", name: "Português (Portugal)" }
     { locale: "ru", name: "Русский" }
-    { locale: "sr_latn", name: "Srpski (latinica)" }
-    { locale: "sr_cyrl", name: "Српски (ћирилица)" }
+    { locale: "sr-Latn-RS", name: "Srpski (latinica)" }
+    { locale: "sr-Cyrl-RS", name: "Српски (ћирилица)" }
     { locale: "fi", name: "Suomi" }
     { locale: "es", name: "Spanish" }
     { locale: "sv", name: "Svenska" }
     { locale: "tr", name: "Türkçe" }
     { locale: "th", name: "ภาษาไทย" }
     { locale: "ua", name: "Українська" }
     { locale: "ja", name: "日本語" }
-    { locale: "zh_CN", name: "简体中文(中国大陆)" }
-    { locale: "zh_TW", name: "繁體中文(台灣)" }
-    { locale: "zh_HK", name: "繁體中文(香港特別行政區)" }
+    { locale: "zh-CN", name: "简体中文(中国大陆)" }
+    { locale: "zh-TW", name: "繁體中文(台灣)" }
+    { locale: "zh-HK", name: "繁體中文(香港特別行政區)" }
     { locale: "ko", name: "한국어" }
     { locale: "vi", name: "Tiếng Việt"}
   ]

common/webapp/src/components/Menu/SettingsMenu.vue

@@ -52,7 +52,7 @@
     <Group v-if="languages.length > 1" :title="$t('language.title')">
       <SimpleButton v-for="lang of languages" :key="lang.locale"
                     :active="lang.locale === $i18n.locale"
-                    @action="changeLanguage(lang.locale); $bluemap.saveUserSettings();"
+                    @action="changeLanguage(lang.locale);"
       >{{lang.name}}</SimpleButton>
     </Group>
 
@@ -117,8 +117,9 @@ name: "SettingsMenu",
       let f = parseFloat(value);
       return f === 0 ? this.$t("renderDistance.off") : f.toFixed(0);
     },
-    changeLanguage(lang) {
-      setLanguage(lang)
+    async changeLanguage(lang) {
+        await setLanguage(lang);
+        this.$bluemap.saveUserSettings();
     }
   }
 }

common/webapp/src/i18n.js

@@ -32,6 +32,25 @@ export async function setLanguage(lang) {
 
 export async function loadLanguageSettings() {
 	let settings = await fetchHocon(`./lang/settings.conf`);
+	let selectedLanguage = null;
+
+	if (settings.useBrowserLanguage) {
+		const availableLanguages = settings.languages.map(lang => lang.locale);
+
+        for (let browserLanguage of navigator.languages) {
+            selectedLanguage = availableLanguages.find(lang => lang === browserLanguage);
+            if (selectedLanguage) break;
+
+            let baseBrowserLanguage = browserLanguage.split('-')[0];
+            selectedLanguage = availableLanguages.find(lang => lang.startsWith(baseBrowserLanguage));
+            if (selectedLanguage) break;
+        }
+	}
+
+	if (!selectedLanguage) {
+		selectedLanguage = settings.default;
+	}
+
 	i18n.languages = settings.languages;
-	await setLanguage(settings.default);
+	await setLanguage(selectedLanguage);
 }