using i18next instead of i18n

freedata_gui/package.json

@@ -34,7 +34,12 @@
     "core-js": "^3.8.3",
     "d3": "^7.9.0",
     "dompurify": "^3.1.6",
+    "gettext-parser": "^8.0.0",
     "gridstack": "^11.0.1",
+    "i18next": "^24.2.2",
+    "i18next-conv": "^15.1.1",
+    "i18next-vue": "^5.2.0",
+    "install": "^0.13.0",
     "js-image-compressor": "^2.0.0",
     "marked": "^15.0.3",
     "pinia": "^2.1.7",
@@ -43,7 +48,6 @@
     "uuid": "^11.0.2",
     "vue": "^3.2.13",
     "vue-chartjs": "^5.3.1",
-    "vue-i18n": "^11.1.1",
     "vuemoji-picker": "^0.3.1"
   },
   "devDependencies": {

freedata_gui/src/components/settings_gui.vue

@@ -4,11 +4,10 @@
     <strong><i class="bi bi-gear-wide-connected me-1"></i>GUI</strong> related settings, like customizing your <strong>waterfall theme</strong>, <strong>notifications</strong>, and <strong>browser behavior</strong>.
   </div>
 
-
-    <!-- Language Selector -->
+  <!-- Language Selector -->
   <div class="input-group input-group-sm mb-1">
     <span class="input-group-text w-50 text-wrap">
-      {{ $t('settings_select_language') }}
+      {{ t('settings_select_language') }}
       <button
         type="button"
         class="btn btn-link p-0 ms-2"
@@ -18,14 +17,13 @@
         <i class="bi bi-question-circle"></i>
       </button>
     </span>
-     <select class="form-select form-select-sm w-50" v-model="settings.local.language" @change="updateLanguage">
+    <select class="form-select form-select-sm w-50" v-model="settings.local.language" @change="updateLanguage">
       <option v-for="lang in availableLanguages" :key="lang.iso" :value="lang.iso">
         {{ lang.iso.toUpperCase() }} - {{ lang.name }}
       </option>
     </select>
   </div>
 
-
   <!-- Waterfall Theme Selection -->
   <div class="input-group input-group-sm mb-1">
     <span class="input-group-text w-50 text-wrap">
@@ -45,7 +43,7 @@
       @change="saveSettings"
       v-model="settings.local.wf_theme"
     >
-      <option value="2">{{ $t('settings_default') }}</option>
+      <option value="2">{{ t('settings_default') }}</option>
       <option value="0">Turbo</option>
       <option value="1">Fosphor</option>
       <option value="3">Inferno</option>
@@ -77,11 +75,10 @@
           @change="onChange"
           v-model="settings.remote.GUI.auto_run_browser"
         />
-        <label class="form-check-label" for="autoLaunchBrowserSwitch">{{ $t('settings_enable') }}</label>
+        <label class="form-check-label" for="autoLaunchBrowserSwitch">{{ t('settings_enable') }}</label>
       </div>
     </label>
   </div>
-
 </template>
 
 <script>
@@ -89,40 +86,36 @@ import { setColormap } from "../js/waterfallHandler";
 import { settingsStore as settings, onChange } from "../store/settingsStore.js";
 import { setActivePinia } from "pinia";
 import pinia from "../store/index";
-import { availableLanguages } from '../js/i18n'
-
+import { availableLanguages } from '../js/i18n';
+import i18next from '../js/i18n';
 
 // Set the active Pinia store
 setActivePinia(pinia);
 
 // Function to save settings and update colormap
 function saveSettings() {
-  // Save settings to file if needed
   setColormap();
 }
 
-// Export methods for use in the template
 export default {
   data() {
     return {
-      //currentLocale: this.$i18n.locale,
-      availableLanguages: availableLanguages
-    }
+      availableLanguages, // imported from i18next configuration
+      settings,
+    };
   },
   methods: {
     saveSettings,
     onChange,
     updateLanguage() {
       saveSettings();
-      this.$i18n.locale = this.settings.local.language;
+      // Update the language in i18next
+      i18next.changeLanguage(this.settings.local.language);
+      this.$forceUpdate();
     },
-  },
-  computed: {
-    settings() {
-      return settings;
+    t(key) {
+      return i18next.t(key);
     },
   },
 };
-
-
 </script>

freedata_gui/src/js/i18n.js

@@ -1,30 +1,44 @@
-import { createI18n } from 'vue-i18n'
+import i18next from 'i18next';
 
-// Dynamically import all JSON files from the locales folder
+// Function to load translation JSON files from the locales folder.
+// It expects file names like "en_english.json" or "de_deutsch.json"
 function loadLocaleMessages() {
-  const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
-  const messages = {}
-  const languages = []
+  // Automatically load all JSON files in ../locales
+  const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
+  const resources = {};
+  const availableLanguages = [];
+
   locales.keys().forEach(key => {
-    // Expecting file names like "./en_english.json" or "./de_deutsch.json"
-    const matched = key.match(/\.\/([^_]+)_([^.]+)\.json$/i)
+    // Use regex to extract the ISO code and language name from the file name.
+    // For example, "./en_english.json" extracts iso: "en", name: "english"
+    const matched = key.match(/\.\/([^_]+)_([^.]+)\.json$/i);
     if (matched && matched.length > 2) {
-      const iso = matched[1]
-      const name = matched[2]
-      messages[iso] = locales(key)
-      languages.push({ iso, name })
+      const iso = matched[1];
+      const name = matched[2];
+      // Load the translation JSON file
+      const translations = locales(key);
+      // Wrap translations into the default namespace ("translation")
+      resources[iso] = { translation: translations };
+      availableLanguages.push({ iso, name });
     }
-  })
-  return { messages, languages }
+  });
+
+  return { resources, availableLanguages };
 }
 
-const { messages, languages } = loadLocaleMessages()
+const { resources, availableLanguages } = loadLocaleMessages();
 
-const i18n = createI18n({
-  locale: 'de',
-  fallbackLocale: 'en', // Fallback language (English)
-  messages,
-})
+i18next.init({
+  lng: 'de',
+  fallbackLng: 'en',
+  resources,
+}, (err) => {
+  if (err) {
+    console.error('i18next initialization error:', err);
+  } else {
+    console.log('i18next is ready.');
+  }
+});
 
-export default i18n
-export const availableLanguages = languages
+export default i18next;
+export { availableLanguages };

freedata_gui/src/main.js

@@ -1,7 +1,8 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
-import i18n from './js/i18n'
+import i18next from "./js/i18n";
+import I18NextVue from "i18next-vue";
 
 import { Chart, Filler } from "chart.js";
 import { getRemote, settingsStore as settings } from "./store/settingsStore";
@@ -14,10 +15,9 @@ Chart.register(Filler);
 // Create the Vue app
 const app = createApp(App);
 
-// use i18n
-app.use(i18n)
+app.use(I18NextVue, { i18next });
 
-// Create and use Pinia store
+// Create and use the Pinia store
 const pinia = createPinia();
 app.use(pinia);
 
@@ -28,10 +28,6 @@ app.mount("#app");
 getRemote().then(() => {
   initConnections();
   getModemState();
-  //console.log(settings.local)
-  //console.log(settings.local.language)
-
-  //let language = JSON.parse(settings.local.getItem("language")) || 'en';
-  i18n.global.locale = settings.local.language;
-
+  // Update the i18next language based on the stored settings
+  i18next.changeLanguage(settings.local.language);
 });