Merge pull request #28 from QingdaoU/language_profile

move language setting to profile setting page
QingdaoU · Jul 16, 2018 · e1c0e9b · e1c0e9b
2 parents e0521e5 + 9c99e28
commit e1c0e9b
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 74 deletions.
diff --git a/src/i18n/index.js b/src/i18n/index.js
@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+const languages = [
+  {value: 'en-US', label: 'English'},
+  {value: 'zh-CN', label: '简体中文'},
+  {value: 'zh-TW', label: '繁體中文'}
+]
+const messages = {}
+
+// combine admin and oj
+for (let lang of languages) {
+  let locale = lang.value
+  let m = require(`./oj/${locale}`).m
+  Object.assign(m, require(`./admin/${locale}`).m)
+  messages[locale] = {m: m}
+}
+console.log(messages)
+// load language packages
+export default new VueI18n({
+  locale: 'en-US',
+  messages: messages
+})
+
+export {languages}
diff --git a/src/pages/admin/index.js b/src/pages/admin/index.js
@@ -2,6 +2,7 @@ import 'babel-polyfill'
 import Vue from 'vue'
 import App from './App.vue'
 import store from '@/store'
+import i18n from '@/i18n'
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/en'
@@ -17,8 +18,6 @@ import Save from './components/btn/Save.vue'
 import Cancel from './components/btn/Cancel.vue'
 import './style.less'
 
-import VueI18n from 'vue-i18n'
-
 // register global utility filters.
 Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
@@ -34,18 +33,6 @@ Vue.component(Panel.name, Panel)
 Vue.component(Save.name, Save)
 Vue.component(Cancel.name, Cancel)
 
-Vue.use(VueI18n)
-
-// load language packages
-const i18n = new VueI18n({
-  locale: 'en-US',
-  messages: {
-    'en-US': require('../../i18n/admin/en-US'),
-    'zh-CN': require('../../i18n/admin/zh-CN'),
-    'zh-TW': require('../../i18n/admin/zh-TW')
-  }
-})
-
 Vue.use(Element, {
   i18n: (key, value) => i18n.t(key, value)
 })

diff --git a/src/pages/admin/views/Home.vue b/src/pages/admin/views/Home.vue
@@ -17,7 +17,6 @@
         <router-view></router-view>
       </transition>
       <div class="footer">
-        <el-button type="text" class="btn btn-success" @click="changeLocale()">简体中文 / 繁體中文 / English</el-button > |
         Build Version: {{ version }}
       </div>
     </div>
@@ -61,16 +60,6 @@
             this.$router.push({name: 'login'})
           })
         }
-      },
-      changeLocale () {
-        // 通过默认locale切换语言
-        if (this.$i18n.locale === 'zh-CN') {
-          this.$i18n.locale = 'zh-TW'
-        } else if (this.$i18n.locale === 'zh-TW') {
-          this.$i18n.locale = 'en-US'
-        } else {
-          this.$i18n.locale = 'zh-CN'
-        }
       }
     },
     computed: {

diff --git a/src/pages/oj/App.vue b/src/pages/oj/App.vue
@@ -6,8 +6,7 @@
         <router-view></router-view>
       </transition>
       <div class="footer">
-        <Button type="text" class="btn btn-success" @click="changeLocale()">简体中文 / 繁體中文 / English</Button>
-        <p v-html="website.website_footer"></p>    
+        <p v-html="website.website_footer"></p>
         <p>Powered by <a href="https://github.com/QingdaoU/OnlineJudge">OnlineJudge</a>
           <span v-if="version">&nbsp; Version: {{ version }}</span>
         </p>
@@ -41,17 +40,7 @@
       this.getWebsiteConfig()
     },
     methods: {
-      ...mapActions(['getWebsiteConfig', 'changeDomTitle']),
-      changeLocale () {
-        // 通过默认locale切换语言
-        if (this.$i18n.locale === 'zh-CN') {
-          this.$i18n.locale = 'zh-TW'
-        } else if (this.$i18n.locale === 'zh-TW') {
-          this.$i18n.locale = 'en-US'
-        } else {
-          this.$i18n.locale = 'zh-CN'
-        }
-      }
+      ...mapActions(['getWebsiteConfig', 'changeDomTitle'])
     },
     computed: {
       ...mapState(['website'])

diff --git a/src/pages/oj/index.js b/src/pages/oj/index.js
@@ -3,6 +3,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from '@/store'
+import i18n from '@/i18n'
 import VueClipboard from 'vue-clipboard2'
 import VueAnalytics from 'vue-analytics'
 import { GOOGLE_ANALYTICS_ID } from '@/utils/constants'
@@ -18,7 +19,6 @@ import '@/styles/index.less'
 
 import highlight from '@/plugins/highlight'
 import katex from '@/plugins/katex'
-import VueI18n from 'vue-i18n'
 import filters from '@/utils/filters.js'
 
 import ECharts from 'vue-echarts/components/ECharts.vue'
@@ -40,7 +40,6 @@ Object.keys(filters).forEach(key => {
 
 Vue.config.productionTip = false
 Vue.use(iView, {locale})
-Vue.use(VueI18n)
 
 Vue.use(VueClipboard)
 Vue.use(highlight)
@@ -50,16 +49,6 @@ Vue.use(VueAnalytics, {
   router
 })
 
-// load language packages
-const i18n = new VueI18n({
-  locale: 'en-US',
-  messages: {
-    'en-US': require('../../i18n/oj/en-US'),
-    'zh-CN': require('../../i18n/oj/zh-CN'),
-    'zh-TW': require('../../i18n/oj/zh-TW')
-  }
-})
-
 Vue.component('ECharts', ECharts)
 Vue.component(VerticalMenu.name, VerticalMenu)
 Vue.component(VerticalMenuItem.name, VerticalMenuItem)

diff --git a/src/pages/oj/views/setting/children/ProfileSetting.vue b/src/pages/oj/views/setting/children/ProfileSetting.vue
@@ -9,7 +9,7 @@
               :before-upload="handleSelectFile">
         <div style="padding: 30px 0">
           <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
-          <p>Drop  here, or click to select manually</p>
+          <p>Drop here, or click to select manually</p>
         </div>
       </Upload>
     </template>
@@ -66,30 +66,35 @@
     <Form ref="formProfile" :model="formProfile">
       <Row type="flex" :gutter="30" justify="space-around">
         <Col :span="11">
-        <FormItem label="Real Name">
-          <Input v-model="formProfile.real_name"/>
-        </FormItem>
-        <Form-item label="School">
-          <Input v-model="formProfile.school"/>
-        </Form-item>
-        <Form-item label="Major">
-          <Input v-model="formProfile.major"/>
-        </Form-item>
-        <Form-item>
-          <Button type="primary" @click="updateProfile" :loading="loadingSaveBtn">Save All</Button>
-        </Form-item>
+          <FormItem label="Real Name">
+            <Input v-model="formProfile.real_name"/>
+          </FormItem>
+          <Form-item label="School">
+            <Input v-model="formProfile.school"/>
+          </Form-item>
+          <Form-item label="Major">
+            <Input v-model="formProfile.major"/>
+          </Form-item>
+          <FormItem label="Language">
+            <Select v-model="formProfile.language">
+              <Option v-for="lang in languages" :key="lang.value" :value="lang.value">{{lang.label}}</Option>
+            </Select>
+          </FormItem>
+          <Form-item>
+            <Button type="primary" @click="updateProfile" :loading="loadingSaveBtn">Save All</Button>
+          </Form-item>
         </Col>
 
         <Col :span="11">
-        <Form-item label="Mood">
-          <Input v-model="formProfile.mood"/>
-        </Form-item>
-        <Form-item label="Blog">
-          <Input v-model="formProfile.blog"/>
-        </Form-item>
-        <Form-item label="Github">
-          <Input v-model="formProfile.github"/>
-        </Form-item>
+          <Form-item label="Mood">
+            <Input v-model="formProfile.mood"/>
+          </Form-item>
+          <Form-item label="Blog">
+            <Input v-model="formProfile.blog"/>
+          </Form-item>
+          <Form-item label="Github">
+            <Input v-model="formProfile.github"/>
+          </Form-item>
         </Col>
       </Row>
     </Form>
@@ -100,7 +105,8 @@
   import api from '@oj/api'
   import utils from '@/utils/utils'
   import vueCropper from 'vue-cropper'
-  import {types} from '../../../../../store'
+  import {types} from '@/store'
+  import {languages} from '@/i18n'
 
   export default {
     components: {
@@ -118,13 +124,15 @@
           size: 0.8,
           outputType: 'png'
         },
+        languages: languages,
         formProfile: {
           real_name: '',
           mood: '',
           major: '',
           blog: '',
           school: '',
-          github: ''
+          github: '',
+          language: ''
         }
       }
     },

diff --git a/src/store/modules/user.js b/src/store/modules/user.js
@@ -1,6 +1,7 @@
 import types from '../types'
 import api from '@oj/api'
 import storage from '@/utils/storage'
+import i18n from '@/i18n'
 import { STORAGE_KEY, USER_TYPE, PROBLEM_PERMISSION } from '@/utils/constants'
 
 const state = {
@@ -28,6 +29,9 @@ const getters = {
 const mutations = {
   [types.CHANGE_PROFILE] (state, {profile}) {
     state.profile = profile
+    if (profile.language) {
+      i18n.locale = profile.language
+    }
     storage.set(STORAGE_KEY.AUTHED, !!profile.user)
   }
 }