- Fix: choose language : added flags

2019-02-16 02:01:17 +01:00
parent ffe3fce52b
commit ea18c4e5b9
14 changed files with 226 additions and 54 deletions
--- a/src-pwa/register-service-worker.js
+++ b/src-pwa/register-service-worker.js
@@ -33,7 +33,7 @@ register(process.env.SERVICE_WORKER_FILE, {
  }
 );

-// ServiceWorkerRegistration: https://developer.mozilla.org/en-uk/docs/Web/API/ServiceWorkerRegistration
+// ServiceWorkerRegistration: https://developer.mozilla.org/enUs/docs/Web/API/ServiceWorkerRegistration


 //    "build": "quasar build -m pwa && workbox generateSW workbox-config.js",
--- a/src/App.ts
+++ b/src/App.ts
@@ -52,6 +52,10 @@ export default class App extends Vue {
      UserStore.actions.autologin_FromLocalStorage()
        .then((loadstorage) => {
          if (loadstorage) {
+
+            this.$i18n.locale = UserStore.state.lang    // Set Lang
+            console.log('lang CARICATO:', this.$i18n.locale)
+
            globalroutines(this, 'loadapp', '')
            // this.$router.replace('/')

--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,13 +1,13 @@
 <template>
    <div>

-<!--
-        <router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
-            <button>
-                <i>arrow_back</i>
-            </button>
-        </router-link>
-->
+        <!--
+                <router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
+                    <button>
+                        <i>arrow_back</i>
+                    </button>
+                </router-link>
+        -->
        <q-layout-header>
            <q-toolbar
                    color="primary"
@@ -43,7 +43,22 @@
                    <q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
                </q-btn>

-                <q-select class="sel_lang" v-model="lang" stack-label="" :options="selectOpLang"/>
+                <q-btn-dropdown
+                        :label="langshort"
+                >
+                    <q-list link>
+                        <q-item v-for="langrec in selectOpLang" :key="langrec.value" v-close-overlay
+                                @click.native="lang = langrec.value">
+                            <q-item-side>
+                                <img :src="langrec.image" class="flagimg">
+                            </q-item-side>
+                            <q-item-main>
+                                <q-item-tile sublabel>{{langrec.label}}</q-item-tile>
+                            </q-item-main>
+                        </q-item>
+                    </q-list>
+                </q-btn-dropdown>
+

                <!--
                <message-popover></message-popover>
@@ -77,12 +92,12 @@
  import drawer from '../layouts/drawer/drawer.vue'
  import messagePopover from '../layouts/toolbar/messagePopover/messagePopover.vue'

-  import { GlobalStore } from '@modules'
+  import { GlobalStore, UserStore } from '@modules'
  import { rescodes } from '../store/Modules/rescodes'
-  import QIcon from "quasar-framework/src/components/icon/QIcon";
-  import { StateConnection } from "../model";
-  import { Watch } from "vue-property-decorator";
-  import QField from "quasar-framework/src/components/field/QField";
+  import QIcon from "quasar-framework/src/components/icon/QIcon"
+  import { StateConnection } from "../model"
+  import { Watch } from "vue-property-decorator"
+  import QField from "quasar-framework/src/components/field/QField"

  @Component({
    components: {
@@ -101,6 +116,7 @@
    public iconConn: string = 'wifi'
    public clIconConn: string = 'clIconOnline'
    public strConn: string = ''
+    public langshort: string = ''

    get conn_changed() {
      return GlobalStore.state.stateConnection
@@ -147,10 +163,10 @@
    }

    public selectOpLang = [
-      { label: 'English (UK)', icon: 'fa-flag-us', value: 'en-uk' },
-      { label: 'German', icon: 'fa-flag-de', value: 'de' },
-      { label: 'Spanish', icon: 'fa-flag-es', value: 'es' },
-      { label: 'Italian', icon: 'fa-facebook', value: 'it' }
+      { label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
+      { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
+      { label: 'Spanish', icon: 'fa-flag-es', value: 'es', image: '../statics/images/es.png', short: 'SP' },
+      { label: 'Italian', icon: 'fa-facebook', value: 'it', image: '../statics/images/it.png', short: 'IT' }
    ]

    get leftDrawerOpen() {
@@ -166,26 +182,80 @@
      // return "AA"
      return "[" + process.env.APP_VERSION + "]"
    }
+
    get lang() {
      return this.$q.i18n.lang
    }

+
+    setshortlang (lang) {
+      for (let indrec in this.selectOpLang) {
+        if (this.selectOpLang[indrec].value === lang) {
+          // console.log('this.selectOpLang[indrec].short', this.selectOpLang[indrec].short, this.selectOpLang[indrec].value)
+          this.langshort = this.selectOpLang[indrec].short
+          return
+        }
+      }
+
+    }
+
    set lang(lang) {
      this.$i18n.locale = this.snakeToCamel(lang)
+      // this.$q.notify('IMPOSTA LANG= ' + this.$i18n.locale)
+      // console.log('IMPOSTA LANG= ' + this.$i18n.locale)
+
+      UserStore.mutations.setlang(this.$i18n.locale)
+
+      let mylangtopass = lang
+
+      this.setshortlang(mylangtopass)
+
+      if (mylangtopass === 'enUs')
+        mylangtopass = 'en-us'

      // dynamic import, so loading on demand only
-      import(`quasar-framework/i18n/${lang}`).then(lang => {
+      import(`quasar-framework/i18n/${mylangtopass}`).then(lang => {
        this.$q.i18n.set(lang.default)
        import(`src/statics/i18n`).then(function () {
        })
      })
    }

+    getLangAtt() {
+      return this.$q.i18n.lang
+    }
+
+    setLangAtt(mylang) {
+      this.$q.i18n.lang = mylang
+    }
+
+    beforeMount() {
+      // Estrai la Lang dal Localstorage
+
+      let my = this.getLangAtt()
+      // this.$q.notify('prima: ' + String(my))
+
+      let mylang = localStorage.getItem(rescodes.localStorage.lang)
+      if (mylang.toLowerCase() === 'enus')
+        mylang = 'enUs'
+      if (mylang.toLowerCase() === 'enuk')
+        mylang = 'enUk'
+
+      if (!mylang)
+        mylang = process.env.LANG_DEFAULT
+
+
+      this.setLangAtt(mylang)
+      this.setshortlang(mylang)
+      // this.$q.notify('Dopo: ' + String(this.getLangAtt()))
+
+    }
+
+    mounted() {

-    mounted () {

      // Test this by running the code snippet below and then
-        // use the "Offline" checkbox in DevTools Network panel
+      // use the "Offline" checkbox in DevTools Network panel

      let mythis = this
      // console.log('Event LOAD')
@@ -207,9 +277,9 @@
            }
          }

-          window.addEventListener('online', updateOnlineStatus);
-          window.addEventListener('offline', updateOnlineStatus);
-        });
+          window.addEventListener('online', updateOnlineStatus)
+          window.addEventListener('offline', updateOnlineStatus)
+        })
      }
    }

@@ -239,7 +309,7 @@
        }
    }

-    .fixed-left:hover{
+    .fixed-left:hover {
        cursor: ew-resize;
    }

@@ -465,5 +535,10 @@
        color: red;
    }

+    .flagimg {
+        width: 30px;
+        height: 24px;
+    }
+
 </style>

--- a/src/components/todos/SingleTodo/SingleTodo.vue
+++ b/src/components/todos/SingleTodo/SingleTodo.vue
@@ -1,6 +1,10 @@
 <template>
    <div :class="getClassRow()">
-
+        <!--<div v-if="isFirst">-->
+            <!--<q-context-menu ref="contextMenu">-->
+                <!--<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>-->
+            <!--</q-context-menu>-->
+        <!--</div>-->

        <div v-if="isTodo()" class="flex-item completed-item">
            <q-btn push flat
--- a/src/components/todos/todo/todo.ts
+++ b/src/components/todos/todo/todo.ts
@@ -354,9 +354,11 @@ export default class Todo extends Vue {
  setarrPriority() {
    this.arrPrior = []
    const arr = rescodes.selectPriority[UserStore.state.lang]
-    arr.forEach(rec => {
-      this.arrPrior.push(rec.value)
-    })
+    if (arr) {
+      arr.forEach(rec => {
+        this.arrPrior.push(rec.value)
+      })
+    }
    // console.log('Array PRIOR:', this.arrPrior)
  }

@@ -424,10 +426,15 @@ export default class Todo extends Vue {
  }

  getPriorityByInd(index) {
-    const arr = rescodes.selectPriority[UserStore.state.lang]
-    for (let rec of arr) {
-      if (rec.value === index)
-        return rec.label
+    // console.log('LANG in PRIOR', UserStore.state.lang)
+    try {
+      const arr = rescodes.selectPriority[UserStore.state.lang]
+      for (let rec of arr) {
+        if (rec.value === index)
+          return rec.label
+      }
+    } catch (e) {
+
    }
    return ''
  }
--- a/src/components/todos/todo/todo.vue
+++ b/src/components/todos/todo/todo.vue
@@ -31,9 +31,8 @@
                    <!--</transition-group>-->
                </draggable>
            </div>
-            <q-context-menu ref="contextMenu">
-            <SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>
-            </q-context-menu>
+
+

            <q-input ref="insertTask" v-model="todo" inverted :float-label="$t('todo.insert')"
                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
--- a/src/myconfig/index.ts
+++ b/src/myconfig/index.ts
@@ -3,7 +3,7 @@ export default {
  i18n: {
    languages: [
      { code: 'it', name: 'Italiano', active: true },
-      { code: 'en-uk', name: 'English', active: true }
+      { code: 'enUs', name: 'English', active: true }
    ],
    default: 'it',
    fallbackTo: 'it'
--- a/src/plugins/i18n.js
+++ b/src/plugins/i18n.js
@@ -1,10 +1,15 @@
 // src/plugins/i18n.js
 import VueI18n from 'vue-i18n';
 import messages from 'src/statics/i18n';
+import { rescodes } from "../store/Modules/rescodes";

 export default ({ app, store, Vue }) => {
  Vue.use(VueI18n);
-  Vue.config.lang = process.env.LANG_DEFAULT;
+  // Vue.config.lang = process.env.LANG_DEFAULT;
+  let mylang = localStorage.getItem(rescodes.localStorage.lang)
+  if (mylang === '')
+    mylang = process.env.LANG_DEFAULT;
+  Vue.config.lang = mylang

  // console.log("PLUGINS INIT....");

@@ -13,8 +18,9 @@ export default ({ app, store, Vue }) => {

  // Set i18n instance on app
  app.i18n = new VueI18n({
-    locale: process.env.LANG_DEFAULT,
-    fallbackLocale: process.env.LANG_DEFAULT,
+    locale: mylang,
+    fallbackLocale: mylang,
    messages
  })
 }
+
--- a/src/root/home/home.ts
+++ b/src/root/home/home.ts
@@ -82,7 +82,7 @@ export default class Home extends Vue {
        icon: '/statics/icons/app-icon-96x96.png',
        image: '/src/images/sf-boat.jpg',
        dir: 'ltr',
-        lang: 'en-US', // BCP 47,
+        lang: 'enUs', // BCP 47,
        vibrate: [100, 50, 200],
        badge: '/statics/icons/app-icon-96x96.png',
        tag: 'confirm-notification',
@@ -139,7 +139,7 @@ export default class Home extends Vue {
        icon: '/statics/icons/android-chrome-192x192.png',
        image: '/statics/images/freeplanet.png',
        dir: 'ltr',
-        lang: 'en-US', // BCP 47,
+        lang: 'enUs', // BCP 47,
        vibrate: [100, 50, 200],
        badge: '/statics/icons/android-chrome-192x192.png',
        tag: 'confirm-notification',
--- a/src/root/home/home.vue
+++ b/src/root/home/home.vue
@@ -3,7 +3,7 @@
        <logo></logo>

        <q-btn v-if="getPermission() !== 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="askfornotification" :label="$t('notification.ask')"/>
-        <q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>
+        <!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="primary" rounded size="lg" icon="notifications" @click="showNotificationExample" label="Send Notification"/>-->
        <!--<q-btn v-if="getPermission() === 'granted'" class="enable-notifications" color="secondary" rounded size="lg" icon="notifications" @click="createPushSubscription" label="Create Push Subscription !"/>-->


--- a/src/statics/i18n.js
+++ b/src/statics/i18n.js
@@ -251,7 +251,7 @@ const messages = {
    },
    connection: 'Connection',
  },
-  enUk: {
+  'enUs': {
    dialog: {
      ok: 'Ok',
      yes: 'Yes',
--- a/src/store/Modules/UserStore.ts
+++ b/src/store/Modules/UserStore.ts
@@ -102,8 +102,9 @@ namespace Mutations {
  }

  function setlang(state: IUserState, newstr: string) {
+    console.log('SETLANG', newstr)
    state.lang = newstr
-    localStorage.setItem('lang', state.lang)
+    localStorage.setItem(rescodes.localStorage.lang, state.lang)
  }

  function UpdatePwd(state: IUserState, data: IIdToken) {
@@ -339,6 +340,7 @@ namespace Actions {
              const now = new Date()
              // const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
              const expirationDate = new Date(now.getTime() * 1000)
+              localStorage.setItem(rescodes.localStorage.lang, state.lang)
              localStorage.setItem(rescodes.localStorage.userId, userId)
              localStorage.setItem(rescodes.localStorage.username, username)
              localStorage.setItem(rescodes.localStorage.token, state.x_auth_token)
@@ -453,6 +455,7 @@ namespace Actions {
            const now = new Date()
            // const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
            const expirationDate = new Date(now.getTime() * 1000)
+            localStorage.setItem(rescodes.localStorage.lang, state.lang)
            localStorage.setItem(rescodes.localStorage.userId, userId)
            localStorage.setItem(rescodes.localStorage.username, username)
            localStorage.setItem(rescodes.localStorage.token, state.x_auth_token)
@@ -540,12 +543,7 @@ namespace Actions {
      // console.log('*** autologin_FromLocalStorage ***')
      // INIT

-      UserStore.mutations.setlang(process.env.LANG_DEFAULT)
-      // Estrai la Lang dal Localstorage
-      const lang = localStorage.getItem('lang')
-      if (lang) {
-        UserStore.mutations.setlang(lang)
-      }
+      UserStore.state.lang = localStorage.getItem(rescodes.localStorage.lang)

      const token = localStorage.getItem(rescodes.localStorage.token)
      if (!token) {
--- a/src/store/Modules/rescodes.ts
+++ b/src/store/Modules/rescodes.ts
@@ -20,7 +20,8 @@ export const rescodes = {
    leftDrawerOpen: 'ldo',
    userId: 'uid',
    token: 'tk',
-    username: 'uname'
+    username: 'uname',
+    lang:'lg'
  },

  Todos: {
@@ -67,7 +68,45 @@ export const rescodes = {
        value: 0,
        icon: 'expand_more'
      }],
-    'enUk': [
+    'es': [
+      {
+        id: 1,
+        label: 'Alta',
+        value: 2,
+        icon: 'expand_less'
+      },
+      {
+        id: 2,
+        label: 'Normal',
+        value: 1,
+        icon: 'remove'
+      },
+      {
+        id: 3,
+        label: 'Baja',
+        value: 0,
+        icon: 'expand_more'
+      }],
+    'enUs': [
+      {
+        id: 1,
+        label: 'High',
+        value: 2,
+        icon: 'expand_less'
+      },
+      {
+        id: 2,
+        label: 'Normal',
+        value: 1,
+        icon: 'remove'
+      },
+      {
+        id: 3,
+        label: 'Low',
+        value: 0,
+        icon: 'expand_more'
+      }],
+    'de': [
      {
        id: 1,
        label: 'High',
@@ -87,6 +126,7 @@ export const rescodes = {
        icon: 'expand_more'
      }]

+
  },

  INDEX_MENU_DELETE: 4,
@@ -129,7 +169,44 @@ export const rescodes = {
        checked: false
      }
      ],
-    'enUk': [
+    'es': [
+      {
+        id: 10,
+        label: '',
+        value: 120, // PROGRESS_BAR
+        icon: 'rowing',
+        checked: true
+      },
+      {
+        id: 20,
+        label: 'Establecer Prioridad',
+        value: 130, // PRIORITY
+        icon: 'rowing',
+        checked: false
+      },
+      {
+        id: 30,
+        label: 'Completado',
+        value: 110, // COMPLETED
+        icon: 'check_circle',
+        checked: true
+      },
+      {
+        id: 40,
+        label: 'Establecer expiración',
+        value: 101, // TOGGLE_EXPIRING
+        icon: 'date_range',
+        checked: true
+      },
+      {
+        id: 50,
+        label: 'Borrar',
+        value: 100, // DELETE
+        icon: 'delete',
+        checked: false
+      }
+    ],
+    'enUs': [
      {
        id: 10,
        label: '',
--- a/src/views/login/signin/signin.ts
+++ b/src/views/login/signin/signin.ts
@@ -142,6 +142,8 @@ export default class Signin extends Vue {
        }
        return riscode
      }).then((riscode) => {
+        this.$i18n.locale = UserStore.state.lang    // Set Lang
+
        globalroutines(this, 'loadapp', '')
        return riscode
      })