Switch to vue i18n

package.json

@@ -15,6 +15,7 @@
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.4",
+    "vue-i18n": "^8.11.2",
     "vuetify": "^1.5.5"
   },
   "devDependencies": {

public/locales/en.json

@@ -1,14 +0,0 @@
-{
-    "About": "About",
-    "Authors": "Authors",
-    "AutoBookmarks": "Autobookmarks",
-    "Book": "Book",
-    "BookmarkSaved": "Bookmark saved",
-    "BookmarkRemoved": "Bookmark removed",
-    "Books": "Books",
-    "DarkTheme": "Dark theme",
-    "Error": "Error",
-    "Information": "Information",
-    "RemoveBookmark": "Remove bookmark",
-    "SetBookmark": "Set bookmark"
-}

public/locales/locales.json

@@ -1,37 +0,0 @@
-[
-    {
-        "code": "en",
-        "language": "Английский",
-        "file": "en.json"
-    },
-    {
-        "code": "en-au",
-        "language": "Английский",
-        "file": "en.json"
-    },
-    {
-        "code": "en-gb",
-        "language": "Английский",
-        "file": "en.json"
-    },
-    {
-        "code": "en-us",
-        "language": "Английский",
-        "file": "en.json"
-    },
-    {
-        "code": "ru",
-        "language": "Русский",
-        "file": "ru.json"
-    },
-    {
-        "code": "ru-ru",
-        "language": "Русский",
-        "file": "ru.json"
-    },
-    {
-        "code": "ru-md",
-        "language": "Русский",
-        "file": "ru.json"
-    }
-]

public/locales/ru.json

@@ -1,14 +0,0 @@
-{
-    "About": "О приложении",
-    "Authors": "Авторы",
-    "AutoBookmarks": "Автозакладки",
-    "Book": "Книга",
-    "BookmarkSaved": "Закладка сохранена",
-    "BookmarkRemoved": "Закладка удалена",
-    "Books": "Книги",
-    "DarkTheme": "Тёмная тема",
-    "Error": "Ошибка",
-    "Information": "Информация",
-    "RemoveBookmark": "Удалить закладку",
-    "SetBookmark": "Установить закладку"
-}

src/App.vue

@@ -26,21 +26,17 @@
                 </template>
 
                 <v-list>
-                    <v-list-tile
+                    <v-list-tile @click="setBookmark(false)">
-                        @click="setBookmark(false)"
-                    >
                         <v-list-tile-action>
                             <v-icon>mdi-bookmark-plus</v-icon>
                         </v-list-tile-action>
-                        <v-list-tile-title>{{ locale.SetBookmark }}</v-list-tile-title>
+                        <v-list-tile-title>{{ $t("setBookmark") }}</v-list-tile-title>
                     </v-list-tile>
-                    <v-list-tile
+                    <v-list-tile @click="removeBookmark(false)">
-                        @click="removeBookmark(false)"
-                    >
                         <v-list-tile-action>
                             <v-icon>mdi-bookmark-minus</v-icon>
                         </v-list-tile-action>
-                        <v-list-tile-title>{{ locale.RemoveBookmark }}</v-list-tile-title>
+                        <v-list-tile-title>{{ $t("removeBookmark") }}</v-list-tile-title>
                     </v-list-tile>
                 </v-list>
             </v-menu>
@@ -61,13 +57,13 @@
                         <v-list-tile-action>
                             <v-switch v-model="darkTheme" color="blue"></v-switch>
                         </v-list-tile-action>
-                        <v-list-tile-title>{{ locale.DarkTheme }}</v-list-tile-title>
+                        <v-list-tile-title>{{ $t("darkTheme") }}</v-list-tile-title>
                     </v-list-tile>
                     <v-list-tile>
                         <v-list-tile-action>
                             <v-switch v-model="autoBookmark" color="blue"></v-switch>
                         </v-list-tile-action>
-                        <v-list-tile-title>{{ locale.AutoBookmarks }}</v-list-tile-title>
+                        <v-list-tile-title>{{ $t("autoBookmarks") }}</v-list-tile-title>
                     </v-list-tile>
 
                     <v-divider></v-divider>
@@ -76,7 +72,7 @@
                         <v-list-tile-action>
                             <v-icon>mdi-information-variant</v-icon>
                         </v-list-tile-action>
-                        <v-list-tile-title>{{ locale.About }}</v-list-tile-title>
+                        <v-list-tile-title>{{ $t("about") }}</v-list-tile-title>
                     </v-list-tile>
 
                 </v-list>
@@ -89,15 +85,15 @@
                 centered
                 fixed-tabs
             >
-                <v-tab ripple>{{ locale.Authors }}</v-tab>
+                <v-tab ripple>{{ $t("authors") }}</v-tab>
                 <v-tab-item>
                     <Authors ref="Authors" v-on:author_selected="openBooks" />
                 </v-tab-item>
-                <v-tab ripple>{{ locale.Books }}</v-tab>
+                <v-tab ripple>{{ $t("books") }}</v-tab>
                 <v-tab-item>
                     <Books ref="Books" v-on:book_selected="openBook" />
                 </v-tab-item>
-                <v-tab ripple>{{ locale.Book }}</v-tab>
+                <v-tab ripple>{{ $t("book") }}</v-tab>
                 <v-tab-item>
                     <Book ref="Book" v-on:progress_updated="updateProgress" />
                 </v-tab-item>
@@ -188,8 +184,13 @@
                 darkTheme: false,
                 isLoading: false,
                 isMounted: false,
-                volume: 5,
+                locale: { flag: 'ru', language: 'ru', title: 'Русский' },
-                locale: []
+                locales: [
+                    { flag: 'us', language: 'en', title: 'English' },
+                    { flag: 'ru', language: 'ru', title: 'Русский' }
+                ],
+                volume: 5//,
+                //locale: []
             }
         },
 
@@ -203,6 +204,7 @@
 
             let userLocale = navigator.language || navigator.userLanguage;
 
+            /*
             this.axios.get("locales/locales.json")
                 .then(response => {
                     let localeLoaded = false;
@@ -218,7 +220,7 @@
                     console.log(error);
                     this.showMessage("Error", error);
                 });
-
+            */
             this.axios.get("config.json")
                 .then(response => {
                     this.appNet = response.data.AppNet;
@@ -226,7 +228,7 @@
                 })
                 .catch(error => {
                     console.log(error);
-                    this.showMessage(this.locale.Error, error);
+                    this.showMessage(this.$t("error"), error);
                 });
 
             this.axios.get("lib/authors.json")
@@ -236,7 +238,7 @@
                 })
                 .catch(error => {
                     console.log(error);
-                    this.showMessage(this.locale.Error, error);
+                    this.showMessage(this.$t("error"), error);
                 });
         },
 
@@ -305,6 +307,7 @@
                 return hash.toString(CryptoJS.enc.Hex);
             },
 
+            /*
             loadLocale (langFile) {
                 this.axios.get("locales/" + langFile)
                     .then(response => {
@@ -315,6 +318,7 @@
                         this.showMessage("Error", error);
                     });
             },
+            */
 
             nextChapter () { this.$refs.Book.nextChapter(); },
 
@@ -345,7 +349,7 @@
                     .catch(error => {
                         this.isLoading = false;
                         console.log(error);
-                        this.showMessage(this.locale.Error, error);
+                        this.showMessage(this.$t("error"), error);
                     });
 
                 this.activeTab = 2;
@@ -365,7 +369,7 @@
                     .catch(error => {
                         this.isLoading = false;
                         console.log(error);
-                        this.showMessage(this.locale.Error, error);
+                        this.showMessage(this.$t("error"), error);
                     });
             },
 
@@ -385,7 +389,7 @@
             removeBookmark (silent = true) {
                 if (this.$refs.Book.items.length == 0) { return; }
                 localStorage.removeItem(this.getHash(this.$refs.Book.items));
-                if (!silent) { this.showMessage(this.locale.Information, this.locale.BookmarkRemoved); }
+                if (!silent) { this.showMessage(this.$t("information"), this.$t("bookmarkRemoved")); }
             },
 
             setBookmark (silent = true) {
@@ -401,7 +405,16 @@
                     JSON.stringify(data)
                 );
 
-                if (!silent) { this.showMessage(this.locale.Information, this.locale.BookmarkSaved); }
+                if (!silent) { this.showMessage(this.$t("information"), this.$t("bookmarkSaved")); }
+            },
+
+            setLocale (locale) {
+                this.locales.forEach(element => {
+                    if (element.language == locale) {
+                        this.locale = element;
+                    }
+                });
+                this.$i18n.locale = locale;
             },
 
             showAboutDialog () {
@@ -422,7 +435,7 @@
                         "<p><center>Published under <a href=\"https://opensource.org/licenses/MIT\" target=\"_blank\">MIT license</a></center></p>" +
                         "<p><center>Git: <a href=\"https://home.cainet.info:3000/cai/AudioLib\" target=\"_blank\">https://home.cainet.info:3000/cai/AudioLib</a></center></p>";
                 }
-                this.showMessage(this.locale.About, aboutText);
+                this.showMessage(this.$t("about"), aboutText);
             },
 
             showMessage (title, text) {

src/main.js

@@ -12,6 +12,7 @@ import Vue from 'vue'
 import Axios from 'axios'
 import VueAxios from 'vue-axios'
 import './plugins/vuetify'
+import i18n from '@/plugins/i18n';
 import App from './App.vue'
 import './registerServiceWorker'
 
@@ -29,5 +30,6 @@ Vue.prototype.statuses = {
 };
 
 new Vue({
+    i18n,
     render: h => h(App),
 }).$mount('#app')

src/plugins/i18n.js

@@ -0,0 +1,43 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+const messages = {
+    "en": {
+        about: "About",
+        authors: "Authors",
+        autoBookmarks: "Autobookmarks",
+        book: "Book",
+        bookmarkSaved: "Bookmark saved",
+        bookmarkRemoved: "Bookmark removed",
+        books: "Books",
+        darkTheme: "Dark theme",
+        error: "Error",
+        information: "Information",
+        removeBookmark: "Remove bookmark",
+        setBookmark: "Set bookmark"
+    },
+    "ru": {
+        about: "О приложении",
+        authors: "Авторы",
+        autoBookmarks: "Автозакладки",
+        book: "Книга",
+        bookmarkSaved: "Закладка сохранена",
+        bookmarkRemoved: "Закладка удалена",
+        books: "Книги",
+        darkTheme: "Тёмная тема",
+        error: "Ошибка",
+        information: "Информация",
+        removeBookmark: "Удалить закладку",
+        setBookmark: "Установить закладку"
+    }
+}
+
+const i18n = new VueI18n({
+    locale: "ru",           // set locale
+    fallbackLocale: "en",   // set fallback locale
+    messages,               // set locale messages
+})
+
+export default i18n

yarn.lock

@@ -8067,6 +8067,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
   integrity sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==
 
+vue-i18n@^8.11.2:
+  version "8.11.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.11.2.tgz#92827fc42449f4602d2a0ddb437dfc4e3370d9d7"
+  integrity sha512-STcpmxqBrG77SyWi7e0Yn/B3DjKR6mSDwYS4F/V7zoi+e/+CPbVb2TaBqFwnrkoDcPmRfjM7nTwsiRQQOGdifw==
+
 vue-loader@^15.7.0:
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.0.tgz#27275aa5a3ef4958c5379c006dd1436ad04b25b3"