From dcbdee659861c93af953083c7eb74605f560eaa2 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sun, 6 Aug 2023 10:56:02 +0200
Subject: [PATCH] [web] Fix settings page not displaying properly when the
 language is not found

When the user is using a language that is not available in OwnTone, the fallback language is set to English.
---
 .../src/pages/PageSettingsWebinterface.vue    | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/web-src/src/pages/PageSettingsWebinterface.vue b/web-src/src/pages/PageSettingsWebinterface.vue
index 0c911f10..1a507192 100644
--- a/web-src/src/pages/PageSettingsWebinterface.vue
+++ b/web-src/src/pages/PageSettingsWebinterface.vue
@@ -197,25 +197,20 @@ export default {
   },
 
   computed: {
-    settings_option_show_composer_now_playing() {
-      return this.$store.getters.settings_option_show_composer_now_playing
-    },
-
-    settings_option_show_filepath_now_playing() {
-      return this.$store.getters.settings_option_show_filepath_now_playing
-    },
-
     locale: {
       get() {
         const languages = this.$i18n.availableLocales
         let locale = languages.find((lang) => lang === this.$i18n.locale)
-        let partial = this.$i18n.locale.split('-')[0]
+        const [partial] = this.$i18n.locale.split('-')
         if (!locale) {
           locale = languages.find((lang) => lang === partial)
         }
         if (!locale) {
           locale = languages.forEach((lang) => lang.split('-')[0] === partial)
         }
+        if (!locale) {
+          locale = this.$i18n.fallbackLocale
+        }
         return locale
       },
       set(locale) {
@@ -224,10 +219,17 @@ export default {
     },
     locales: {
       get() {
-        return this.$i18n.availableLocales.map((item) => {
-          return { id: item, name: this.$t('language.' + item) }
-        })
+        return this.$i18n.availableLocales.map((item) => ({
+          id: item,
+          name: this.$t(`language.${item}`)
+        }))
       }
+    },
+    settings_option_show_composer_now_playing() {
+      return this.$store.getters.settings_option_show_composer_now_playing
+    },
+    settings_option_show_filepath_now_playing() {
+      return this.$store.getters.settings_option_show_filepath_now_playing
     }
   }
 }