init i18n

Noboomta · Jul 7, 2024 · 43bed9b · 43bed9b
1 parent 0dc94d2
commit 43bed9b
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "k-progress-v3": "^1.0.0",
     "regenerator-runtime": "^0.14.1",
     "vue": "^3.3.9",
+    "vue-i18n": "9",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0"
   },

diff --git a/src/components/UnitSection.vue b/src/components/UnitSection.vue
@@ -3,34 +3,57 @@ import { ref, computed, onMounted } from 'vue'
 import { useStore } from 'vuex'
 import spinTableVue from './SpinTable.vue'
 import axios from '../http'
+import { useI18n } from 'vue-i18n'
 
-defineProps({
-  lang: {
-    type: Boolean,
-    default: false,
+const { t, locale } = useI18n({
+  messages: {
+    th: {
+      genEd: {
+        wellness: 'กลุ่มสาระอยู่ดีมีสุข',
+        entrepreneurship: 'กลุ่มสาระศาสตร์แห่งผู้ประกอบการ',
+        citizen: 'กลุ่มสาระพลเมืองไทยและพลเมืองโลก',
+        language: 'กลุ่มสาระภาษากับการสื่อสาร',
+        aesthetics: 'กลุ่มสาระสุนทรียศาสตร์',
+      },
+      notFound: {
+        title: '**ขออภัย ทางเรายังไม่มีข้อมูลเกี่ยวกับคณะ ({major}) ของท่าน กรุณากรอก',
+        link: 'ฟอร์มขอเพิ่มหมวด',
+      },
+      registerCondition:
+        ' **โปรดตรวจสอบข้อมูลเงื่อนไขการลงทะเบียนของท่านอีกครั้ง\nอาจมีเงื่อนไขแตกต่างกันออกไปในแต่ละสาขาและชั้นปีครับ',
+      moreInfo: 'หมายเหตุ:: ',
+    },
+    en: {
+      genEd: {
+        wellness: 'Wellness',
+        entrepreneurship: 'Entrepreneurship',
+        citizen: 'Thai Citizen and Global Citizen',
+        language: 'Language and Communication',
+        aesthetics: 'Aesthetics',
+      },
+      notFound: {
+        title: "**Sorry, we don't have information about your faculty department. you can",
+        link: 'fill form here.',
+      },
+      registerCondition:
+        '**Please check your registration conditions again. There may be different conditions for\neach department and year.',
+      moreInfo: 'More information: ',
+    },
   },
 })
 
 const loading = ref(true)
 const unitYear = ref(0)
 
 const units = ref<any[]>([])
-const unitsName = ref({
-  en: [
-    'Wellness',
-    'Entrepreneurship',
-    'Thai Citizen and Global Citizen',
-    'Language and Communication',
-    'Aesthetics',
-  ],
-  th: [
-    'กลุ่มสาระอยู่ดีมีสุข',
-    'กลุ่มสาระศาสตร์แห่งผู้ประกอบการ',
-    'กลุ่มสาระพลเมืองไทยและพลเมืองโลก',
-    'กลุ่มสาระภาษากับการสื่อสาร',
-    'กลุ่มสาระสุนทรียศาสตร์',
-  ],
-})
+const unitsName = [
+  t('genEd.wellness'),
+  t('genEd.entrepreneurship'),
+  t('genEd.citizen'),
+  t('genEd.language'),
+  t('genEd.aesthetics'),
+]
+
 const initProgress = ref([0, 0, 0, 0, 0])
 const progress = ref([
   { percent: 0, ifUp: 'true' },
@@ -77,6 +100,7 @@ function processInterval() {
 
 function setProgress() {
   units.value.forEach((item, index) => {
+    console.log(item)
     if (item.need == 0) data.value = false
     else if (item.done < item.need) {
       progress.value[index].percent = (parseInt(item.done) / parseInt(item.need)) * 100
@@ -124,31 +148,21 @@ async function getUnit() {
     </div>
     <div class="container text-sm font-bold mx-auto p-2 text-red-500">
       <div v-if="major" class="mb-2">
-        <span v-if="lang" class="text-center">
-          **Sorry, we don't have information about your faculty department. you can
-          <a class="underline" href="https://forms.gle/xPs2cc2xxWnGiTvY6">fill form here.</a>
-        </span>
-        <span v-else class="text-center">
-          **ขออภัย ทางเรายังไม่มีข้อมูลเกี่ยวกับคณะ ({{ major }}) ของท่าน กรุณากรอก
-          <a class="underline" href="https://forms.gle/xPs2cc2xxWnGiTvY6">ฟอร์มขอเพิ่มหมวด</a>
+        <span class="text-center">
+          {{ t('notFound.title', { major }) }}
+          <a class="underline" href="https://forms.gle/xPs2cc2xxWnGiTvY6">
+            {{ t('notFound.link') }}</a
+          >
         </span>
       </div>
 
-      <span v-if="!lang">
-        **โปรดตรวจสอบข้อมูลเงื่อนไขการลงทะเบียนของท่านอีกครั้ง
-        อาจมีเงื่อนไขแตกต่างกันออกไปในแต่ละสาขาและชั้นปีครับ</span
-      >
-      <span v-else>
-        **Please check your registration conditions again. There may be different conditions for
-        each department and year.</span
-      >
+      <span> {{ t('registerCondition') }}</span>
     </div>
     <spin-table-vue v-if="loading" />
     <div class="space-y-3 text-lg container mx-auto">
       <div v-for="(item, index) in units" :key="index" class="border-2 m-1 p-3 rounded-md">
         <div class="flex flex-col md:flex-row justify-between text-2xl">
-          <span v-if="lang">{{ unitsName.en[index] }}</span>
-          <span v-else>{{ unitsName.th[index] }}</span>
+          <span>{{ unitsName[index] }}</span>
           <span class="text-lg">{{ item.done }}/{{ item.need }} units</span>
         </div>
         <k-progress
@@ -166,7 +180,7 @@ async function getUnit() {
               <td class="w-1/12 pr-2">
                 {{ sub.subject_code }}
               </td>
-              <td v-if="lang" class="w-10/12">
+              <td v-if="locale === 'en'" class="w-10/12">
                 {{ sub.subject_name_en }}
               </td>
               <td v-else class="w-10/12">
@@ -180,8 +194,7 @@ async function getUnit() {
         </table>
       </div>
       <div class="container mx-auto flex text-center pl-2 text-xs md:text-lg">
-        <span v-if="lang" class="">More information: </span>
-        <span v-else class="">หมายเหตุ: </span>
+        <span class=""> {{ t('moreInfo') }} </span>
         <a
           class="text-blue-700 dark:text-gray-200 pl-1 underline"
           href="https://www.ku.ac.th/th/bachelor-degree"

diff --git a/src/main.ts b/src/main.ts
@@ -14,9 +14,16 @@ import theme from './modules/theme'
 import { createStore } from 'vuex'
 import auth from './modules/auth'
 import router from './router'
+import { createI18n } from 'vue-i18n'
 
 library.add(faDownload, faMoon, faSun)
 
+const i18n = createI18n({
+  legacy: false,
+  locale: localStorage.getItem('locale') || 'th',
+  fallbackLocale: 'th',
+})
+
 const store = createStore({
   modules: {
     theme,
@@ -31,5 +38,6 @@ app.component('KProgress', KProgress)
 
 app.use(store)
 app.use(router)
+app.use(i18n)
 
 app.mount('#app')
diff --git a/src/pages/SchedulePage.vue b/src/pages/SchedulePage.vue
@@ -2,11 +2,12 @@
 import { ref, computed, onMounted } from 'vue'
 import { useStore } from 'vuex'
 import SpinTableVue from '../components/SpinTable.vue'
-import Unit from '../components/UnitSection.vue'
+import UnitSection from '../components/UnitSection.vue'
 import axios from '../http'
 import html2canvas from 'html2canvas'
 import type { Options } from 'html2canvas'
 import appendCopyright from '@/utils/appendCopyright'
+import { useI18n } from 'vue-i18n'
 
 const store = useStore()
 const theme = computed(() => store.getters['theme/getTheme'])
@@ -32,7 +33,19 @@ const headers = ref([
   '19:00',
   '20:00',
 ])
-const isCheck = ref(true)
+
+const { locale } = useI18n()
+
+const isCheck = computed({
+  get() {
+    return locale.value === 'en'
+  },
+  set(value) {
+    const lang = value ? 'en' : 'th'
+    localStorage.setItem('locale', lang)
+    locale.value = lang
+  },
+})
 
 const orderedDate = computed(() => ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'])
 
@@ -139,7 +152,7 @@ onMounted(() => {
   <div>
     <spin-table-vue v-if="loading" />
     <div class="mx-auto container pt-7 pb-10">
-      <div id="top" class="mx-2 flex flex-wrap justify-between">
+      <div id="top" class="mx-2 flex flex-wrap justify-between align-center">
         <div>
           <h1 class="text-4xl font-bold mb-2 md:mb-0 mr-5 inline-block align-top dark:text-white">
             Schedule
@@ -222,14 +235,14 @@ onMounted(() => {
                   {{ course.subject_code }}
                 </p>
               </div>
-              <p v-if="isCheck" class="truncate">
+              <p v-if="locale === 'en'" class="truncate">
                 {{ course.subject_name_en }}
               </p>
               <p v-else class="truncate">
                 {{ course.subject_name_th }}
               </p>
               <div class="text-gray-700 text-xs">
-                <p v-if="isCheck" class="truncate">
+                <p v-if="locale === 'en'" class="truncate">
                   {{ course.room_name_en }} | {{ course.section_type_en }} {{ course.section_code }}
                 </p>
                 <p v-else class="truncate">
@@ -240,7 +253,7 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <unit class="dark:text-white" :lang="isCheck" />
+      <unit-section class="dark:text-white" />
     </div>
   </div>
 </template>

diff --git a/yarn.lock b/yarn.lock
@@ -249,6 +249,27 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.0.tgz#6d86b8cb322660f03d3f0aa94b99bdd8e172d570"
   integrity sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==
 
+"@intlify/core-base@9.13.1":
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.13.1.tgz#bd1f38e665095993ef9b67aeeb794f3cabcb515d"
+  integrity sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==
+  dependencies:
+    "@intlify/message-compiler" "9.13.1"
+    "@intlify/shared" "9.13.1"
+
+"@intlify/message-compiler@9.13.1":
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.13.1.tgz#ff8129badf77db3fb648b8d3cceee87c8033ed0a"
+  integrity sha512-SKsVa4ajYGBVm7sHMXd5qX70O2XXjm55zdZB3VeMFCvQyvLew/dLvq3MqnaIsTMF1VkkOb9Ttr6tHcMlyPDL9w==
+  dependencies:
+    "@intlify/shared" "9.13.1"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@9.13.1":
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.13.1.tgz#202741d11ece1a9c7480bfd3f27afcf9cb8f72e4"
+  integrity sha512-u3b6BKGhE6j/JeRU6C/RL2FgyJfy6LakbtfeVF8fJXURpZZTzfh3e05J0bu0XPw447Q6/WUp3C4ajv4TMS4YsQ==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -565,7 +586,7 @@
     "@vue/compiler-dom" "3.4.31"
     "@vue/shared" "3.4.31"
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.1":
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
   version "6.6.3"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
   integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
@@ -2170,7 +2191,7 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-source-map-js@^1.2.0:
+source-map-js@^1.0.2, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
@@ -2448,6 +2469,15 @@ vue-eslint-parser@^9.4.3:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-i18n@9:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.13.1.tgz#a292c8021b7be604ebfca5609ae1f8fafe5c36d7"
+  integrity sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==
+  dependencies:
+    "@intlify/core-base" "9.13.1"
+    "@intlify/shared" "9.13.1"
+    "@vue/devtools-api" "^6.5.0"
+
 vue-router@^4.2.5:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.0.tgz#128e3fc0c84421035a9bd26027245e6bd68f69ab"