160 lines
5.8 KiB
Vue
160 lines
5.8 KiB
Vue
<template>
|
|
<div>
|
|
<q-header reveal elevated class="bg-primary">
|
|
<q-toolbar
|
|
color="primary"
|
|
:glossy="$q.theme === 'mat'"
|
|
:inverted="$q.theme === 'ios'"
|
|
class="toolbar">
|
|
|
|
<q-btn
|
|
flat
|
|
dense
|
|
round
|
|
@click="leftDrawerOpen = !leftDrawerOpen"
|
|
aria-label="Menu">
|
|
<q-icon name="menu"/>
|
|
</q-btn>
|
|
|
|
|
|
<div v-if="$q.platform.is.desktop">
|
|
<!--I'm only rendered on desktop!-->
|
|
</div>
|
|
|
|
<div v-if="$q.platform.is.mobile">
|
|
<!--I'm only rendered on mobile!-->
|
|
</div>
|
|
|
|
<div v-if="$q.platform.is.electron">
|
|
<!--I'm only rendered on Electron!-->
|
|
</div>
|
|
|
|
<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>
|
|
{{getappname}}
|
|
<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" nametranslate="cloud_upload"></q-icon>
|
|
</q-btn>
|
|
|
|
<q-btn flat dense round aria-label="">
|
|
<q-icon :class="clCloudUp_Indexeddb" nametranslate="arrow_upward"></q-icon>
|
|
</q-btn>
|
|
|
|
</div>
|
|
-->
|
|
|
|
<q-btn
|
|
v-if="!isonline && static_data.functionality.SHOW_IF_IS_SERVER_CONNECTION"
|
|
flat
|
|
dense
|
|
round
|
|
@click=""
|
|
aria-label="Connection"
|
|
>
|
|
<q-icon :name="iconConn" :class="clIconConn"></q-icon>
|
|
<q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
|
|
</q-btn>
|
|
|
|
|
|
<q-btn-dropdown
|
|
stretch
|
|
v-if="static_data.lang_available.length > 1"
|
|
flat
|
|
:label="langshort"
|
|
auto-close
|
|
>
|
|
<q-list bordered>
|
|
<q-item clickable v-ripple
|
|
|
|
v-for="langrec in static_data.lang_available" :key="langrec.value"
|
|
@click="lang = langrec.value">
|
|
<q-item-section avatar>
|
|
<img :src="langrec.image" class="flagimg">
|
|
</q-item-section>
|
|
<q-item-section>
|
|
{{langrec.label}}
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
|
|
|
|
<!--
|
|
<message-popover></message-popover>
|
|
-->
|
|
|
|
<!--
|
|
<div class="right-itens">
|
|
<label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
|
|
</div>-->
|
|
|
|
<q-btn v-if="static_data.functionality.SHOW_USER_MENU" dense flat round icon="menu" @click="right = !right">
|
|
</q-btn>
|
|
|
|
</q-toolbar>
|
|
|
|
</q-header>
|
|
|
|
<q-drawer side="left"
|
|
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-if="static_data.functionality.SHOW_USER_MENU" v-model="right" side="right" overlay bordered>
|
|
<div id="profile">
|
|
<q-img class="absolute-top" src="../../statics/images/landing_first_section.png"
|
|
style="height: 150px">
|
|
<div class="absolute-bottom bg-transparent text-black">
|
|
|
|
<q-avatar class="q-mb-sm">
|
|
<img src="../../statics/images/avatar-1.svg">
|
|
</q-avatar>
|
|
<div v-if="Username" class="text-weight-bold">{{ Username }}</div>
|
|
<div v-else class="text-italic">{{ $t('user.loggati') }}</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 v-if="Username" 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>
|
|
|
|
<script lang="ts" src="./Header.ts">
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './Header.scss';
|
|
</style>
|
|
|