- Fix: choose language : added flags

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",

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('/')
 

src/components/Header.vue

@@ -1,13 +1,13 @@
 <template>
     <div>
 
-<!--
+        <!--
-        <router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
+                <router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
-            <button>
+                    <button>
-                <i>arrow_back</i>
+                        <i>arrow_back</i>
-            </button>
+                    </button>
-        </router-link>
+                </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 QIcon from "quasar-framework/src/components/icon/QIcon"
-  import { StateConnection } from "../model";
+  import { StateConnection } from "../model"
-  import { Watch } from "vue-property-decorator";
+  import { Watch } from "vue-property-decorator"
-  import QField from "quasar-framework/src/components/field/QField";
+  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: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
-      { label: 'German', icon: 'fa-flag-de', value: 'de' },
+      { label: 'German', icon: 'fa-flag-de', value: 'de', image: '../statics/images/de.png', short: 'DE' },
-      { label: 'Spanish', icon: 'fa-flag-es', value: 'es' },
+      { label: 'Spanish', icon: 'fa-flag-es', value: 'es', image: '../statics/images/es.png', short: 'SP' },
-      { label: 'Italian', icon: 'fa-facebook', value: 'it' }
+      { 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('online', updateOnlineStatus)
-          window.addEventListener('offline', 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>
 

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

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 => {
+    if (arr) {
-      this.arrPrior.push(rec.value)
+      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]
+    // console.log('LANG in PRIOR', UserStore.state.lang)
-    for (let rec of arr) {
+    try {
-      if (rec.value === index)
+      const arr = rescodes.selectPriority[UserStore.state.lang]
-        return rec.label
+      for (let rec of arr) {
+        if (rec.value === index)
+          return rec.label
+      }
+    } catch (e) {
+
     }
     return ''
   }

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 () {}}]"

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'

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,
+    locale: mylang,
-    fallbackLocale: process.env.LANG_DEFAULT,
+    fallbackLocale: mylang,
     messages
   })
 }
+

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',

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 !"/>-->
 
 

src/statics/i18n.js

@@ -251,7 +251,7 @@ const messages = {
     },
     connection: 'Connection',
   },
-  enUk: {
+  'enUs': {
     dialog: {
       ok: 'Ok',
       yes: 'Yes',

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)
+      UserStore.state.lang = localStorage.getItem(rescodes.localStorage.lang)
-      // Estrai la Lang dal Localstorage
-      const lang = localStorage.getItem('lang')
-      if (lang) {
-        UserStore.mutations.setlang(lang)
-      }
 
       const token = localStorage.getItem(rescodes.localStorage.token)
       if (!token) {

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: '',

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
       })