- fix Header and Drawer Right

- fix Drawer Menu Left - add icon on the Header - fix lang if is different language: set to English.
2019-03-14 21:09:41 +01:00
parent 41642853d1
commit 527da316da
25 changed files with 319 additions and 303 deletions
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -284,4 +284,5 @@ canvas {

 .btnNewVersShow {
  display: inline-block;
+  padding: 4px 2px;
 }
--- a/src/components/Header/Header.ts
+++ b/src/components/Header/Header.ts
@@ -31,6 +31,8 @@ export default class Header extends Vue {
  public clCloudDownload: string = ''
  public clCloudUp_Indexeddb: string = ''
  public clCloudDown_Indexeddb: string = 'clIndexeddbsend'
+  public right: boolean = false
+  public photo = ''

  public selectOpLang = [
    { label: 'English', icon: 'fa-flag-us', value: 'enUs', image: '../statics/images/gb.png', short: 'EN' },
@@ -43,6 +45,10 @@ export default class Header extends Vue {
    return GlobalStore.state.stateConnection
  }

+  get isonline() {
+    return GlobalStore.state.stateConnection === 'online'
+  }
+
  get isAdmin() {
    return UserStore.state.isAdmin
  }
@@ -97,7 +103,7 @@ export default class Header extends Vue {
  }

  set lang(lang) {
-    console.log('set lang(' + this.$i18n.locale)
+    console.log('set lang', this.$i18n.locale)
    this.$i18n.locale = this.snakeToCamel(lang)
    // tools.showNotif(this.$q, 'IMPOSTA LANG= ' + this.$i18n.locale)
    // console.log('IMPOSTA LANG= ' + this.$i18n.locale)
@@ -106,16 +112,10 @@ export default class Header extends Vue {

    let mylangtopass = lang

+    mylangtopass = tools.checkLangPassed(mylangtopass)
+
    this.setshortlang(mylangtopass)

-    if (mylangtopass === 'enUs') {
-      mylangtopass = 'en-us'
-    }
-
-    if (mylangtopass === 'es') {
-      mylangtopass = 'es'
-    }
-
    this.setLangAtt(mylangtopass)
  }

@@ -148,7 +148,7 @@ export default class Header extends Vue {

  @Watch('conn_changed', { immediate: true, deep: true })
  public changeconn_changed(value: string, oldValue: string) {
-    if (value != oldValue) {
+    if (value !== oldValue) {

      // console.log('SSSSSSSS: ', value, oldValue)

@@ -167,7 +167,7 @@ export default class Header extends Vue {

  public RefreshApp() {
    // Unregister Service Worker
-    navigator.serviceWorker.getRegistrations().then(function(registrations) {
+    navigator.serviceWorker.getRegistrations().then((registrations) => {
      for (const registration of registrations) {
        registration.unregister()
      }
@@ -208,13 +208,13 @@ export default class Header extends Vue {

  public setLangAtt(mylang) {
    console.log('MYLL=', mylang)
-    console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName)
+    // console.log('PRIMA this.$q.lang.isoName', this.$q.lang.isoName)

    // dynamic import, so loading on demand only
    import(`quasar/lang/${mylang}`).then((lang) => {
      Quasar.lang.set(lang.default)
      import(`../../statics/i18n`).then(() => {
-        console.log('MY LANG DOPO=', this.$q.lang.isoName)
+        // console.log('MY LANG DOPO=', this.$q.lang.isoName)
      })
    })

@@ -225,36 +225,23 @@ export default class Header extends Vue {
  public beforeMount() {
    // Estrai la Lang dal Localstorage

-    console.log('this.$q.i18n=', this.$q.i18n, 'this.$q.getLocale()=', this.$q.lang.isoName)
-    const my = this.getLangAtt()
+    // console.log('this.$q.i18n=', this.$q.i18n, 'this.$q.getLocale()=', this.$q.lang.isoName)
+    const mybrowserLang = this.getLangAtt()
    // tools.showNotif(this.$q, 'prima: ' + String(my))

    let mylang = tools.getItemLS(tools.localStorage.lang)
    if (mylang === '') {
      if (navigator) {
        mylang = navigator.language
-        console.log(`LANG2 NAVIGATOR ${mylang}`)
+        // console.log(`LANG2 NAVIGATOR ${mylang}`)
      } else {
        mylang = this.$q.lang.isoName
      }

-      console.log('IMPOSTA LANGMY', mylang)
-    }
-    if (mylang !== '') {
-      if (mylang.toLowerCase() === 'enus') {
-        mylang = 'enUs'
-      }
-      if ((mylang.toLowerCase() === 'es') || (mylang.toLowerCase() === 'es-es')) {
-        mylang = 'es'
-      }
-      if ((mylang.toLowerCase() === 'enus') || (mylang.toLowerCase() === 'en-us')) {
-        mylang = 'enUs'
-      }
+      // console.log('IMPOSTA LANGMY', mylang)
    }

-    if (!mylang) {
-      mylang = process.env.LANG_DEFAULT
-    }
+    mylang = tools.checkLangPassed(mylang)

    this.setLangAtt(mylang)
    this.setshortlang(mylang)
@@ -269,7 +256,7 @@ export default class Header extends Vue {
    const mythis = this
    // console.log('Event LOAD')
    if (window) {
-      window.addEventListener('load', function() {
+      window.addEventListener('load', () => {
        // console.log('2) ENTERING Event LOAD')

        function updateOnlineStatus(event) {
@@ -297,4 +284,38 @@ export default class Header extends Vue {
      return m[1].toUpperCase()
    })
  }
+
+  get imglogo() {
+    return '../../' + tools.getimglogo()
+  }
+
+  get MenuCollapse() {
+    return GlobalStore.state.menuCollapse
+    // return true
+  }
+
+  get Username() {
+    return UserStore.state.username
+  }
+
+  get Verificato() {
+    return UserStore.state.verified_email
+  }
+
+  get Email() {
+    return UserStore.state.email
+  }
+
+  public logoutHandler() {
+    UserStore.actions.logout()
+      .then(() => {
+        this.$router.replace('/logout')
+
+        setTimeout(() => {
+          this.$router.replace('/')
+        }, 1000)
+
+        tools.showNotif(this.$q, this.$t('logout.uscito'), {icon: 'exit_to_app'})
+      })
+  }
 }
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@@ -1,28 +1,18 @@
 <template>
    <div>
-
-        <!--
-                <router-link :to="'/'" v-if="$router.currentRoute.meta.backButton">
-                    <button>
-                        <i>arrow_back</i>
-                    </button>
-                </router-link>
-        -->
-        <q-header elevated>
+        <q-header reveal elevated class="bg-primary text-white">
            <q-toolbar
                    color="primary"
                    :glossy="$q.theme === 'mat'"
                    :inverted="$q.theme === 'ios'"
-                    class="toolbar"
-            >
+                    class="toolbar">

                <q-btn
                        flat
                        dense
                        round
                        @click="leftDrawerOpen = !leftDrawerOpen"
-                        aria-label="Menu"
-                >
+                        aria-label="Menu">
                    <q-icon name="menu"/>
                </q-btn>

@@ -39,15 +29,22 @@
                    <!--I'm only rendered on Electron!-->
                </div>

-                <q-btn id="newvers" v-if="isNewVersionAvailable" color="secondary" rounded icon="refresh"
+                <q-btn ripple
+                       size="md"
+                       id="newvers" v-if="isNewVersionAvailable" color="secondary" rounded icon="refresh"
                       class="btnNewVersShow" @click="RefreshApp" :label="$t('notification.newVersionAvailable')"/>


                <q-toolbar-title>
+                    <q-avatar>
+                        <img :src="imglogo" height="27">
+                    </q-avatar>
                    {{$t('msg.myAppName')}}
                    <div slot="subtitle">{{$t('msg.myDescriz')}} {{ getAppVersion() }}</div>
                </q-toolbar-title>

+
+<!--
                <div v-if="isAdmin">
                    <q-btn flat dense round aria-label="">
                        <q-icon :class="clCloudUpload" name="cloud_upload"></q-icon>
@@ -58,8 +55,10 @@
                    </q-btn>

                </div>
+-->

                <q-btn
+                        v-if="!isonline"
                        flat
                        dense
                        round
@@ -102,19 +101,45 @@
                    <label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
                </div>-->

+                <q-btn dense flat round icon="menu" @click="right = !right" />

            </q-toolbar>

        </q-header>

        <q-drawer side="left"
-                         v-model="leftDrawerOpen"
-                         :content-class="['bg-grey-1', 'q-pa-sm']"
-                         :content-style="{padding: '0px'}"
+                  bordered
+                  show-if-above
+                  :breakpoint="500"
+                  v-model="leftDrawerOpen"
+                  :content-class="['bg-grey-1', 'q-pa-sm']"
+                  :content-style="{padding: '0px'}"
        >
            <drawer></drawer>

        </q-drawer>
+
+        <q-drawer v-model="right" side="right" overlay bordered>
+            <div id="profile" v-if="Username">
+                <q-img class="absolute-top" src="https://cdn.quasar-framework.org/img/material.png" style="height: 150px">
+                    <div class="absolute-bottom bg-transparent">
+
+                        <q-avatar class="q-mb-sm">
+                            <img src="../../statics/images/avatar-1.svg">
+                        </q-avatar>
+                        <div class="text-weight-bold">{{ Username }}</div>
+                        <!--<span class="text-white" v-if="Verificato"> {{$t('reg.verificato')}} </span>-->
+                        <!--<span class="text-white background-red" v-else> {{$t('reg.non_verificato')}} </span>-->
+                        <div id="user-actions">
+                            <q-btn round color="primary" icon="person"></q-btn>
+                            <q-btn round color="warning" icon="lock"></q-btn>
+                            <q-btn round color="secondary" icon="exit_to_app" @click='logoutHandler'></q-btn>
+                        </div>
+                    </div>
+                </q-img>
+
+            </div>
+        </q-drawer>
    </div>
 </template>