[add] : i18n

mirumirumi · Jan 19, 2022 · 8623aae · 8623aae
1 parent f2cecf2
commit 8623aae
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
         "typescript": "~4.1.5",
         "vue": "^3.0.0",
         "vue-axios": "^3.4.0",
+        "vue-i18n": "^9.2.0-beta.26",
         "vue-jest": "^5.0.0-0",
         "vue-router": "^4.0.0-0",
         "vuex": "^4.0.0-0"

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/src/main.ts b/src/main.ts
@@ -4,11 +4,21 @@ import router from './router'
 import { key, store } from './store/index'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import { createI18n } from 'vue-i18n'
+import { messages } from "@/utils/i18n"
 import Toaster from "@/components/modules/vue-toaster"
 
+const i18n = createI18n({
+  legacy: false,  // for Composition API
+  locale: "ja",
+  fallbackLocale: "en",
+  messages,
+})
+
 const app = createApp(App)
   .use(store, key)
   .use(router)
+  .use(i18n)
   .use(VueAxios, axios)
 
 app.use(Toaster, {

diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
@@ -0,0 +1,24 @@
+export const messages = {
+  ja: {
+    toast: {
+      limit: "現在、1分あたりのリクエスト数は10回に制限されています。",
+      failedGetLocation: "現在地の取得に失敗しました。",
+      reason0: "原因は不明です。",
+      reason1: "位置情報の取得が許可されていませんでした。",
+      reason2: "電波状況が悪かったようです。",
+      reason3: "タイムアウトエラーです。",
+      notSupportGetLocation: "お使いのデバイスでは現在地の取得ができませんでした。",
+    }
+  },
+  en: {
+    toast: {
+      limit: "Currently, the number of requests per minute is limited to 10.",
+      failedGetLocation: "Failed to get current location.",
+      reason0: "The cause is unknown.",
+      reason1: "The cause is that location info acquisition was not allowed.",
+      reason2: "The cause is due to signal conditions.",
+      reason3: "This is a timeout error.",
+      notSupportGetLocation: "Your device was not able to obtain information about your current location.",
+    }
+  },
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -6,7 +6,6 @@ export const shouldDarkMode = ((): boolean => {
 })
 
 export const getCountryDefaultPosition = ((): LatLng => {
-  // [TODO] : ...?
   return {
     // Tokyo Sta.
     lat: 35.6809591,

diff --git a/src/views/MapView.vue b/src/views/MapView.vue
@@ -134,6 +134,7 @@
 <script setup lang="ts">
 import { computed, inject, onMounted, ref, watch } from "vue"
 import { useStore } from "@/store"
+import { useI18n } from "vue-i18n"
 import { Loader } from "@googlemaps/js-api-loader"
 import { LatLng } from "@/utils/defines"
 import { darkStyle } from "@/utils/darkStyle"
@@ -148,10 +149,12 @@ import LoadingBack from "@/components/modules/LoadingBack.vue"
 import TransparentBack from "@/components/modules/TransparentBack.vue"
 
 const store = useStore()
+const { t, locale } = useI18n({ useScope: "global" })
 const toast: any = inject("toast")
 
 onMounted(() => {
   (document.querySelector("#search") as HTMLElement).focus()
+  locale.value = navigator.language
 })
 
 /**
@@ -268,7 +271,7 @@ loader.load().then(async (google) => {
 })
 
 function getUserCurrentPosition(): Promise<LatLng> {
-  let msg = "Your device was not able to obtain information about your current location."
+  let msg = t("toast.notSupportGetLocation")
   if (!navigator.geolocation) toast.error(msg)
 
   return new Promise<any>((resolve) => {  // eslint-disable-line
@@ -278,20 +281,20 @@ function getUserCurrentPosition(): Promise<LatLng> {
         lng: location.coords.longitude,
       })
     }, (e) => {
-      msg = "Failed to get information about the current location."
+      msg = t("toast.failedGetLocation")
       console.log(e.code)
       switch (e.code) {
         case 0:
-          msg += "\nThe cause is unknown."
+          msg += `${ t("toast.reason0") }`
           break
         case 1:
-          msg += "\nThe caluse is that location info acquisition was not allowed."
+          msg += `${ t("toast.reason1") }`
           break
         case 2:
-          msg += "\nThe cause of this is due to signal conditions."
+          msg += `${ t("toast.reason2") }`
           break
         case 3:
-          msg += "\nThis is a timeout error."
+          msg += `${ t("toast.reason3") }`
           break
       }
       toast.error(msg)
@@ -402,7 +405,7 @@ const geocode = (async () => {
   } catch (e) {
     console.log(e)
   }
-  console.log(res?.data)
+  // console.log(res?.data)
   selectingGeocode.value = true
   isOpenBackForGeo.value = true
   res?.data.results.forEach((r: any) => {
@@ -456,7 +459,7 @@ const isGettingTimeMap = ref(false)
 const getTimeMap = (async () => {
   if (query.value === "") return
   if (10 <= requestCount.value) {
-    toast.error("Currently, the number of requests per minute is limited to 10.")
+    toast.error(t("toast.limit"))
     return
   }
   addQueryParameter("coords", `${ center.lat } ${ center.lng }`)
@@ -477,7 +480,7 @@ const getTimeMap = (async () => {
   } catch (e) {
     console.log(e)
   }
-  console.log(res)
+  // console.log(res)
   paths = res?.data.results[0].shapes[0].shell
   requestCount.value += 1
   isGettingTimeMap.value = false