refactor: extract all i18n resources into locales/locale.json

penguin-statistics · Feb 18, 2023 · 0e741ce · 0e741ce
1 parent 104cd55
commit 0e741ce
Show file tree

Hide file tree

Showing 18 changed files with 4,094 additions and 158 deletions.
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "@vue/cli-plugin-eslint": "~4.4.6",
     "@vue/cli-service": "^4.4.6",
     "@vue/eslint-config-standard": "5.1.2",
+    "add": "^2.0.6",
     "axios": "^0.19.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.1",
@@ -102,6 +103,7 @@
     "stylus-loader": "^3.0.1",
     "vue-cli-plugin-i18n": "^1.0.1",
     "vue-cli-plugin-vuetify": "^2.0.5",
+    "vue-sfc-parser": "^0.1.2",
     "vue-template-compiler": "^2.6.10",
     "vuetify-loader": "^1.7.3",
     "webfontloader": "^1.6.28",

diff --git a/src/components/drawer/Logo.vue b/src/components/drawer/Logo.vue
@@ -4,7 +4,7 @@
       'drawer-logo primary': true,
       '': dark,
       '': !dark,
-      'drawer-logo--two-line': $t('app.name_line2') !== ''
+      'drawer-logo--two-line': $t('app.name_lines').split('\n').length > 1
     }"
   >
     <!--    <v-img-->
@@ -23,8 +23,9 @@
         justify="center"
         class="flex-column font-weight-bold text-glow--flipped"
       >
-        <span>{{ $t('app.name_line1') }}</span>
-        <span>{{ $t('app.name_line2') }}</span>
+        <span v-for="(line, index) in $t('app.name_lines').split('\n')" :key="index">
+          {{ line }}
+        </span>
       </v-row>
     </div>
   </div>

diff --git a/src/components/toolbar/AccountManager.vue b/src/components/toolbar/AccountManager.vue
@@ -1,63 +1,71 @@
 <i18n>
 {
-	"en": {
-		"failed": {
-			"message": "Failed to log in: {message}",
-			"notfound": "This User ID cannot be found. Please note that this is not the ID in the game. You will get one after your first drop report."
-		},
-		"loggedOut": "Logged out",
-		"login": "Login",
-		"logout": "Logout",
-		"logoutPrompt": "Are you sure?",
-		"notice": "You can connect and manage drop reports using your User ID. If you don't have a User ID yet, you will be automatically assigned one after you've made your first report.",
-		"success": "Successfully logged in",
-		"userId": "User ID",
-    "details": "Account",
-    "loggedAs": "Logged in as"
-	},
-	"ja": {
-		"failed": {
-			"message": "ログイン失敗：{message}",
-			"notfound": "指定されたユーザーIDが見つかりませんでした。初めてドロップをアップロードすると、ユーザーIDを自動的に取得できます。"
-		},
-		"loggedOut": "ログアウトしました",
-		"login": "ログイン",
-		"logout": "ログアウト",
-		"logoutPrompt": "本当にログアウトしますか？",
-		"notice": "ユーザーIDはアップロードの際にのみ使用します。このIDを使用し各機器を登録することでデータを1つのアカウントに統合することが可能となり、アップロードの管理や個人のドロップデータを調べることが可能となります。",
-		"success": "ログイン成功",
-    "userId": "ユーザーID",
-    "details": "アカウント",
-    "loggedAs": "Logged in as"
-	},
-	"ko": {
-		"failed": {
-			"message": "로그인에 실패했습니다: {message}",
-			"notfound": "지정된 사용자 ID를 찾을 수 없습니다"
-		},
-		"loggedOut": "로그아웃 되었습니다",
-		"login": "로그인",
-		"logout": "로그아웃",
-		"logoutPrompt": "정말로 로그아웃 하시겠습니까?",
-		"notice": "사용자 ID는 당신의 보고서를 확인하는데 사용됩니다. 이 ID를 다른 기기에 입력하면 편리하게 보고서를 관리하고 검사할 수 있습니다.",
-		"success": "성공적으로 로그인 되었습니다.",
-		"userId": "사용자 ID"
-	},
-	"zh": {
-		"failed": {
-			"message": "登录失败：{message}",
-			"notfound": "未找到此用户ID。请注意这不是游戏内的ID。在本站汇报一次掉落数据即可自动获得。"
-		},
-		"loggedOut": "已退出登录",
-		"login": "登录",
-		"logout": "退出登录",
-		"logoutPrompt": "确定要退出登录吗？",
-		"notice": "此用户 ID 非游戏内的 ID ，仅供本网站使用，用来标记您的上传身份。若无用户 ID，汇报一次掉落后即可拥有用户 ID。",
-		"success": "登录成功",
-		"userId": "用户 ID",
-    "details": "账户信息",
-    "loggedAs": "已登录为"
-	}
+  "en": {
+    "auth": {
+      "failed": {
+        "message": "Failed to log in: {message}",
+        "notfound": "This User ID cannot be found. Please note that this is not the ID in the game. You will get one after your first drop report."
+      },
+      "loggedOut": "Logged out",
+      "login": "Login",
+      "logout": "Logout",
+      "logoutPrompt": "Are you sure?",
+      "notice": "You can connect and manage drop reports using your User ID. If you don't have a User ID yet, you will be automatically assigned one after you've made your first report.",
+      "success": "Successfully logged in",
+      "userId": "User ID",
+      "details": "Account",
+      "loggedAs": "Logged in as"
+    }
+  },
+  "ja": {
+    "auth": {
+      "failed": {
+        "message": "ログイン失敗：{message}",
+        "notfound": "指定されたユーザーIDが見つかりませんでした。初めてドロップをアップロードすると、ユーザーIDを自動的に取得できます。"
+      },
+      "loggedOut": "ログアウトしました",
+      "login": "ログイン",
+      "logout": "ログアウト",
+      "logoutPrompt": "本当にログアウトしますか？",
+      "notice": "ユーザーIDはアップロードの際にのみ使用します。このIDを使用し各機器を登録することでデータを1つのアカウントに統合することが可能となり、アップロードの管理や個人のドロップデータを調べることが可能となります。",
+      "success": "ログイン成功",
+      "userId": "ユーザーID",
+      "details": "アカウント",
+      "loggedAs": "Logged in as"
+    }
+  },
+  "ko": {
+    "auth": {
+      "failed": {
+        "message": "로그인에 실패했습니다: {message}",
+        "notfound": "지정된 사용자 ID를 찾을 수 없습니다"
+      },
+      "loggedOut": "로그아웃 되었습니다",
+      "login": "로그인",
+      "logout": "로그아웃",
+      "logoutPrompt": "정말로 로그아웃 하시겠습니까?",
+      "notice": "사용자 ID는 당신의 보고서를 확인하는데 사용됩니다. 이 ID를 다른 기기에 입력하면 편리하게 보고서를 관리하고 검사할 수 있습니다.",
+      "success": "성공적으로 로그인 되었습니다.",
+      "userId": "사용자 ID"
+    }
+  },
+  "zh": {
+    "auth": {
+      "failed": {
+        "message": "登录失败：{message}",
+        "notfound": "未找到此用户ID。请注意这不是游戏内的ID。在本站汇报一次掉落数据即可自动获得。"
+      },
+      "loggedOut": "已退出登录",
+      "login": "登录",
+      "logout": "退出登录",
+      "logoutPrompt": "确定要退出登录吗？",
+      "notice": "此用户 ID 非游戏内的 ID ，仅供本网站使用，用来标记您的上传身份。若无用户 ID，汇报一次掉落后即可拥有用户 ID。",
+      "success": "登录成功",
+      "userId": "用户 ID",
+      "details": "账户信息",
+      "loggedAs": "已登录为"
+    }
+  }
 }
 </i18n>
 
@@ -86,19 +94,19 @@
     >
       <v-card class="py-2 px-1">
         <v-card-title class="headline">
-          {{ $t('login') }}
+          {{ $t('auth.login') }}
         </v-card-title>
         <v-card-text>
           <v-alert
             type="info"
             border="left"
             class="mt-2 mb-6"
           >
-            {{ $t('notice') }}
+            {{ $t('auth.notice') }}
           </v-alert>
           <v-text-field
             v-model="auth.username"
-            :label="`${$t('userId')} *`"
+            :label="`${$t('auth.userId')} *`"
             :error-messages="error"
             required
             clearable
@@ -162,12 +170,12 @@
       <v-card class="pa-2">
         <v-card-title>
           <span class="headline">
-            {{ $t('details') }}
+            {{ $t('auth.details') }}
           </span>
         </v-card-title>
         <v-card-text>
           <Subheader class="mb-2">
-            {{ $t('loggedAs') }}
+            {{ $t('auth.loggedAs') }}
           </Subheader>
           <span
             class="text-center monospace"
@@ -189,7 +197,7 @@
             <v-icon left>
               mdi-logout-variant
             </v-icon>
-            {{ $t('logout') }}
+            {{ $t('auth.logout') }}
           </v-btn>
         </v-card-text>
       </v-card>
@@ -250,7 +258,7 @@ export default {
       this.snackbar = {
         enabled: true,
         color: 'success',
-        text: this.$t('success')
+        text: this.$t('auth.success')
       }
       this.auth.dialog = false
       this.$ga.event('account', 'login', 'login_success', 1)
@@ -266,9 +274,9 @@ export default {
         .catch((err) => {
           Console.info('AccountManager', 'auth failed', err)
           if (err.response && err.response.status && err.response.status === 404) {
-            this.error = this.$t('failed.message', { message: this.$t('failed.notfound') })
+            this.error = this.$t('auth.failed.message', { message: this.$t('failed.notfound') })
           } else {
-            this.error = this.$t('failed.message', { message: err.errorMessage })
+            this.error = this.$t('auth.failed.message', { message: err.errorMessage })
           }
         })
         .finally(() => {
@@ -280,7 +288,7 @@ export default {
       this.snackbar = {
         enabled: true,
         color: 'success',
-        text: this.$t('loggedOut')
+        text: this.$t('auth.loggedOut')
       }
       this.auth.detailPrompt = false
       this.$store.commit('dataSource/changeSource', 'global')

diff --git a/src/components/toolbar/ForgotAccount.vue b/src/components/toolbar/ForgotAccount.vue
@@ -1,31 +1,4 @@
-<i18n>
-  {
-    "en": {
-      "failed": {
-        "message": "Failed to log in: {message}",
-        "notfound": "This User ID cannot be found. Please note that this is not the ID in the game. You will get one after your first drop report."
-      }
-    },
-    "ja": {
-      "failed": {
-        "message": "ログイン失敗：{message}",
-        "notfound": "指定されたユーザーIDが見つかりませんでした。初めてドロップをアップロードすると、ユーザーIDを自動的に取得できます。"
-      }
-    },
-    "ko": {
-      "failed": {
-        "message": "로그인에 실패했습니다: {message}",
-        "notfound": "지정된 사용자 ID를 찾을 수 없습니다"
-      }
-    },
-    "zh": {
-      "failed": {
-        "message": "登录失败：{message}",
-        "notfound": "未找到此用户ID。请注意这不是游戏内的ID。在本站汇报一次掉落数据即可自动获得。"
-      }
-    }
-  }
-</i18n>
+
 
 <template>
   <v-card>
@@ -175,9 +148,9 @@ export default {
         .catch((err) => {
           Console.info('AccountManager', 'auth failed', err)
           if (err.response && err.response.status && err.response.status === 404) {
-            this.error = this.$t('failed.message', { message: this.$t('failed.notfound') })
+            this.error = this.$t('auth.failed.message', { message: this.$t('auth.failed.notfound') })
           } else {
-            this.error = this.$t('failed.message', { message: err.errorMessage })
+            this.error = this.$t('auth.failed.message', { message: err.errorMessage })
           }
         })
         .finally(() => {

diff --git a/src/i18n.js b/src/i18n.js
@@ -1,10 +1,10 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
-import enMessages from '@/locales/en'
-import zhMessages from '@/locales/zh'
-import jaMessages from '@/locales/ja'
-import koMessages from '@/locales/ko'
+import enMessages from '@/locales/en.json'
+import zhMessages from '@/locales/zh.json'
+import jaMessages from '@/locales/ja.json'
+import koMessages from '@/locales/ko.json'
 
 Vue.use(VueI18n)
 

diff --git a/src/locales/en.js → src/locales/archived/en.js b/src/locales/en.js → src/locales/archived/en.js
@@ -1,8 +1,7 @@
 const messages = {
   app: {
     name: "Penguin Statistics",
-    name_line1: "Penguin Statistics",
-    name_line2: "",
+    name_lines: "Penguin Statistics",
   },
   server: {
     name: "Server",

diff --git a/src/locales/ja.js → src/locales/archived/ja.js b/src/locales/ja.js → src/locales/archived/ja.js
@@ -1,8 +1,7 @@
 const messages = {
   app: {
     name: "ペンギン急便データ統計処理部門",
-    name_line1: "ペンギン急便",
-    name_line2: "データ統計処理部門",
+    name_lines: "ペンギン急便\nデータ統計処理部門",
   },
   server: {
     name: "サーバー",

diff --git a/src/locales/ko.js → src/locales/archived/ko.js b/src/locales/ko.js → src/locales/archived/ko.js
@@ -1,8 +1,7 @@
 const messages = {
   app: {
     name: "펭귄 물류 데이터 분석 부서",
-    name_line1: "펭귄 물류",
-    name_line2: "데이터 분석 부서",
+    name_lines: "펭귄 물류\n데이터 분석 부서",
   },
   server: {
     name: "서버",

diff --git a/src/locales/zh.js → src/locales/archived/zh.js b/src/locales/zh.js → src/locales/archived/zh.js
@@ -1,8 +1,7 @@
 const messages = {
   app: {
     name: "企鹅物流数据统计",
-    name_line1: "企鹅物流数据统计",
-    name_line2: "",
+    name_lines: "企鹅物流数据统计",
   },
   server: {
     name: "服务器",

diff --git a/src/locales/en.json b/src/locales/en.json
diff --git a/src/locales/ja.json b/src/locales/ja.json
diff --git a/src/locales/ko.json b/src/locales/ko.json
diff --git a/src/locales/zh.json b/src/locales/zh.json
diff --git a/src/mixins/I18n.js b/src/mixins/I18n.js
@@ -13,7 +13,7 @@ const fetchWithTimeout = (url, options, timeout = 5000) => {
 
 const fetchTranslations = async (languageKey) => {
   const projectPublishableToken = "52e5ff4b225147a9b11bb63865b2ae1f";
-  const environment = "_production"; // or '_production'
+  const environment = "_latest";
   const url = `https://cdn.simplelocalize.io/${projectPublishableToken}/${environment}/${languageKey}`;
 
   return fetchWithTimeout(url, null, 10e3).then((data) => {
@@ -63,7 +63,7 @@ function transformMessages (messages) {
         if (!current[arrayName]) {
           current[arrayName] = [];
         }
-        if (i === path.length - 1) {
+        if (i === path.length - 1) { // last part of the path
           current[arrayName][arrayIndex] = messages[key] || undefined;
         } else {
           if (!current[arrayName][arrayIndex]) {
@@ -88,9 +88,6 @@ function transformMessages (messages) {
 }
 
 export function loadLanguageAsync(lang) {
-  // If the same language
-  if (i18n.locale === lang) return Promise.resolve();
-
   const mappedLang = languageMapping[lang] || lang;
 
   // If the language was already loaded
@@ -113,7 +110,7 @@ export function loadLanguageAsync(lang) {
 export default {
   methods: {
     async changeLocale (localeId, save = true) {
-      await loadLanguageAsync.bind(this)(localeId)
+      // await loadLanguageAsync.bind(this)(localeId)
 
       changeLocale.bind(this)(localeId, save);
     }