filemanager: add translation support

filemanager/src/main.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
+
 import './style.css';
 
 import "@fontsource/noto-sans";
@@ -9,6 +11,7 @@ import 'primeicons/primeicons.css';
 
 import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
+import superagent from 'superagent';
 
 import { createRouter, createWebHashHistory } from 'vue-router';
 
@@ -28,8 +31,45 @@ const router = createRouter({
   routes,
 });
 
+const translations = {};
+const i18n = createI18n({
+    locale: 'en', // set locale
+    fallbackLocale: 'en', // set fallback locale
+    messages: translations
+});
+
+// https://vue-i18n.intlify.dev/guide/advanced/lazy.html
+(async function loadLanguages() {
+  const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';
+
+  async function loadLanguage(lang) {
+    try {
+      const result = await superagent.get(`${API_ORIGIN}/translation/${lang}.json`);
+
+      // we do not deliver as application/json :/
+      translations[lang] = JSON.parse(result.text);
+    } catch (e) {
+      console.error(`Failed to load language file for ${lang}`, e);
+    }
+  }
+
+  await loadLanguage('en');
+
+  const locale = window.localStorage.NG_TRANSLATE_LANG_KEY;
+  if (locale && locale !== 'en') {
+    await loadLanguage(locale);
+
+    if (i18n.mode === 'legacy') {
+      i18n.global.locale = locale;
+    } else {
+      i18n.global.locale.value = locale;
+    }
+  }
+})();
+
 const app = createApp(App);
 
+app.use(i18n);
 app.use(router);
 app.use(PrimeVue, { ripple: true });
 app.use(ConfirmationService);