660 lines
17 KiB
TypeScript
Executable File
660 lines
17 KiB
TypeScript
Executable File
import { useQuasar } from 'quasar';
|
||
import {
|
||
defineComponent,
|
||
onBeforeMount,
|
||
onBeforeUnmount,
|
||
onMounted,
|
||
ref,
|
||
toRefs,
|
||
watch,
|
||
inject,
|
||
computed,
|
||
nextTick,
|
||
} from 'vue';
|
||
|
||
import { tools } from '@tools';
|
||
|
||
import { shared_consts } from '@src/common/shared_vuejs';
|
||
import { useI18n } from 'vue-i18n';
|
||
import { boot } from 'quasar/wrappers';
|
||
import { useRouter } from 'vue-router';
|
||
import { static_data } from '@src/db/static_data';
|
||
import messagePopover from '../../layouts/toolbar/messagePopover/messagePopover.vue';
|
||
import notifPopover from '../../layouts/toolbar/notifPopover/notifPopover.vue';
|
||
import coinsPopover from '../../layouts/toolbar/coinsPopover/coinsPopover.vue';
|
||
import drawer from '../../layouts/drawer/drawer.vue';
|
||
import { CMyAvatar } from '@src/components/CMyAvatar';
|
||
import { CMyFieldDb } from '@src/components/CMyFieldDb';
|
||
import { CSelectUserActive } from '@src/components/CSelectUserActive';
|
||
import { toolsext } from '@store/Modules/toolsext';
|
||
import { useGlobalStore } from '@store/globalStore';
|
||
import { useUserStore } from '@store/UserStore';
|
||
import { useProducts } from '@store/Products';
|
||
|
||
import MixinUsers from '../../mixins/mixin-users';
|
||
import { CMyCart, CSigninNoreg } from '@src/components';
|
||
import { costanti } from '@costanti';
|
||
import { useNotifStore } from '@src/store/NotifStore';
|
||
|
||
import { Platform } from 'quasar';
|
||
|
||
export default defineComponent({
|
||
name: 'MyHeader',
|
||
components: {
|
||
drawer,
|
||
messagePopover,
|
||
CMyFieldDb,
|
||
CMyAvatar,
|
||
CSigninNoreg,
|
||
CMyCart,
|
||
notifPopover,
|
||
coinsPopover,
|
||
CSelectUserActive,
|
||
},
|
||
props: {
|
||
extraContent: {
|
||
required: false,
|
||
default: '',
|
||
},
|
||
clBase: {
|
||
required: false,
|
||
default: '',
|
||
},
|
||
},
|
||
|
||
setup() {
|
||
const $q = useQuasar();
|
||
const { t } = useI18n();
|
||
const $router = useRouter();
|
||
|
||
const isUserNotAuth = ref(false);
|
||
const iconConn = ref('wifi');
|
||
const clIconConn = ref('clIconOnline');
|
||
const strConn = ref('');
|
||
const langshort = ref('');
|
||
const clCloudUpload = ref('');
|
||
const clCloudDownload = ref('');
|
||
const clCloudUp_Indexeddb = ref('');
|
||
const tabcmd = ref('');
|
||
const clCloudDown_Indexeddb = ref('clIndexeddbsend');
|
||
const photo = ref('');
|
||
const visuimg = ref(true);
|
||
|
||
const userStore = useUserStore();
|
||
const globalStore = useGlobalStore();
|
||
const products = useProducts();
|
||
const notifStore = useNotifStore();
|
||
|
||
const { getnumItemsCart } = MixinUsers();
|
||
|
||
const site = computed(() => globalStore.site);
|
||
const isfinishLoading = computed(() => globalStore.finishLoading);
|
||
|
||
const dark = ref(false);
|
||
|
||
const leftDrawerOpen = ref(globalStore.leftDrawerOpen);
|
||
|
||
const editOn = computed({
|
||
get: () => globalStore.editOn,
|
||
set: (val) => {
|
||
tools.updateEditOn(val);
|
||
},
|
||
});
|
||
|
||
const getClassColorHeader = computed(() => {
|
||
// if (tools.isTest()) return 'bg-light-blue'
|
||
// if (tools.isDebug()) return 'bg-info'
|
||
if (globalStore.site && globalStore.site.confpages?.col_toolbar)
|
||
return 'bg-' + globalStore.site.confpages?.col_toolbar;
|
||
else {
|
||
if (globalStore.homescreen) {
|
||
return 'bg-blue';
|
||
} else {
|
||
return 'bg-light-blue';
|
||
}
|
||
}
|
||
});
|
||
|
||
const getColorText = computed(() => {
|
||
if (globalStore.site && globalStore.site.confpages?.col_toolbar === 'white') return 'black';
|
||
else return 'white';
|
||
});
|
||
|
||
watch(
|
||
() => dark.value,
|
||
(value: any, oldval: any) => {
|
||
if (isfinishLoading.value) {
|
||
$q.dark.set(value);
|
||
tools.setCookie('darkmode', value ? '-1' : '0');
|
||
}
|
||
}
|
||
);
|
||
|
||
function setDarkMode() {
|
||
dark.value = tools.getCookie('darkmode', false, false, false) === '-1';
|
||
|
||
$q.dark.set(dark.value);
|
||
}
|
||
|
||
function uploadStart() {
|
||
BeforeMount();
|
||
}
|
||
|
||
watch(
|
||
() => globalStore.finishLoading,
|
||
(value: any, oldval: any) => {
|
||
if (value) {
|
||
uploadStart();
|
||
}
|
||
}
|
||
);
|
||
|
||
const data = ref({
|
||
registration: null,
|
||
updateExists: false,
|
||
} as any);
|
||
|
||
const refreshing = ref(false);
|
||
|
||
const stateconn = ref(globalStore.stateConnection);
|
||
|
||
function updateAvailable(event: any) {
|
||
console.log(event);
|
||
data.value.registration = event.detail;
|
||
data.value.updateExists = true;
|
||
RefreshApp(); // update automatically
|
||
}
|
||
|
||
function created() {
|
||
if (isfinishLoading.value) {
|
||
uploadStart();
|
||
}
|
||
|
||
try {
|
||
if (window) {
|
||
// Ascolta evento custom 'swUpdated' per notifica aggiornamento
|
||
window.addEventListener(
|
||
'swUpdated',
|
||
async (event) => {
|
||
// Chiedi conferma all’utente (qui con confirm, sostituisci con dialog Quasar se vuoi)
|
||
const doUpdate = confirm('È disponibile una nuova versione. Vuoi aggiornare ora?');
|
||
|
||
if (doUpdate) {
|
||
// Invia messaggio al service worker per skipWaiting
|
||
if (event.detail?.swWaiting) {
|
||
event.detail.swWaiting.postMessage({ action: 'skipWaiting' });
|
||
}
|
||
}
|
||
},
|
||
{ once: true }
|
||
);
|
||
|
||
if ('serviceWorker' in navigator) {
|
||
navigator.serviceWorker.addEventListener('controllerchange', () => {
|
||
if (refreshing.value) return;
|
||
refreshing.value = true;
|
||
window.location.reload();
|
||
});
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('Err', e.message);
|
||
}
|
||
}
|
||
|
||
const {
|
||
getUsernameChatByMsg,
|
||
getMyUsername,
|
||
Username,
|
||
myName,
|
||
mySurname,
|
||
myCell,
|
||
MadeGift,
|
||
Email,
|
||
getMyImg,
|
||
getMyImgforIcon,
|
||
getImgByMsg,
|
||
getUserByUsername,
|
||
getImgByUsername,
|
||
isValidUsername,
|
||
getNumMsg,
|
||
getNumMsgUnread,
|
||
getMsgText,
|
||
paotest,
|
||
} = MixinUsers();
|
||
|
||
function isonline() {
|
||
return globalStore.stateConnection === 'online';
|
||
}
|
||
|
||
function isAdmin() {
|
||
return userStore.isAdmin;
|
||
}
|
||
|
||
function isManager() {
|
||
return userStore.isManager;
|
||
}
|
||
function isEditor() {
|
||
return userStore.isEditor;
|
||
}
|
||
|
||
const isSocio = computed(() => userStore.my.profile.socio);
|
||
|
||
function isSocioResidente() {
|
||
return userStore.my.profile.socioresidente;
|
||
}
|
||
|
||
function isConsiglio() {
|
||
return userStore.my.profile.consiglio;
|
||
}
|
||
|
||
function getcolormenu() {
|
||
return isSocio.value ? 'green-7' : 'white';
|
||
}
|
||
|
||
function isFacilitatore() {
|
||
return userStore.isFacilitatore;
|
||
}
|
||
|
||
function isZoomeri() {
|
||
return userStore.isZoomeri;
|
||
}
|
||
|
||
function isTratuttrici() {
|
||
return userStore.isTratuttrici;
|
||
}
|
||
|
||
function conndata_changed() {
|
||
return globalStore.connData;
|
||
}
|
||
|
||
function snakeToCamel(str: string) {
|
||
return str.replace(/(-\w)/g, (m) => m[1].toUpperCase());
|
||
}
|
||
|
||
function setshortlang(mylang: string) {
|
||
static_data.lang_available.forEach((langavail: any) => {
|
||
if (langavail.value === mylang) {
|
||
langshort.value = langavail.short;
|
||
return langshort.value;
|
||
}
|
||
});
|
||
}
|
||
|
||
function isNewVersionAvailable() {
|
||
return globalStore.isNewVersionAvailable;
|
||
}
|
||
|
||
function closeAll() {
|
||
globalStore.rightNotifOpen = false;
|
||
globalStore.rightCartOpen = false;
|
||
globalStore.rightDrawerOpen = false;
|
||
globalStore.rightCoinsOpen = false;
|
||
}
|
||
|
||
/*const leftDrawerOpen = computed({
|
||
get: () => globalStore.leftDrawerOpen,
|
||
set: val => {
|
||
globalStore.leftDrawerOpen = val
|
||
|
||
},
|
||
})*/
|
||
|
||
const rightDrawerOpen = computed({
|
||
get: () => globalStore.rightDrawerOpen,
|
||
set: (val) => {
|
||
closeAll();
|
||
globalStore.rightDrawerOpen = val;
|
||
},
|
||
});
|
||
|
||
const rightCartOpen = computed({
|
||
get: () => globalStore.rightCartOpen,
|
||
set: (val) => {
|
||
closeAll();
|
||
globalStore.rightCartOpen = val;
|
||
},
|
||
});
|
||
|
||
const rightNotifOpen = computed({
|
||
get: () => globalStore.rightNotifOpen,
|
||
set: (val) => {
|
||
closeAll();
|
||
globalStore.rightNotifOpen = val;
|
||
},
|
||
});
|
||
|
||
const rightCoinsOpen = computed({
|
||
get: () => globalStore.rightCoinsOpen,
|
||
set: (val) => {
|
||
closeAll();
|
||
globalStore.rightCoinsOpen = val;
|
||
},
|
||
});
|
||
|
||
const lang = computed({
|
||
get: () => $q.lang.isoName,
|
||
set: (mylang) => {
|
||
// console.log('set lang', $q.lang.getLocale(), 'passato', mylang)
|
||
$q.lang.set(snakeToCamel(mylang));
|
||
// tools.showNotif($q, 'IMPOSTA LANG= ' + $i18n.locale)
|
||
// console.log('IMPOSTA LANG= ' + $i18n.locale)
|
||
|
||
let mylangtopass = mylang;
|
||
|
||
mylangtopass = toolsext.checkLangPassed($q, $router, mylangtopass);
|
||
|
||
userStore.setlang($q, $router, mylangtopass);
|
||
|
||
setshortlang(mylangtopass);
|
||
|
||
tools.setLangAtt($q, $router, mylangtopass);
|
||
|
||
userStore.setLangServer();
|
||
},
|
||
});
|
||
|
||
watch(
|
||
() => stateconn,
|
||
// @ts-ignore
|
||
(value: string, oldValue: string) => {
|
||
globalStore.stateConnection = value;
|
||
}
|
||
);
|
||
|
||
watch(conndata_changed, (value, oldValue) => {
|
||
clCloudUpload.value = value.uploading_server === 1 ? 'clCloudUpload send' : 'clCloudUpload';
|
||
clCloudUpload.value = value.downloading_server === 1 ? 'clCloudUpload receive' : 'clCloudUpload';
|
||
clCloudUp_Indexeddb.value = value.uploading_indexeddb === 1 ? 'clIndexeddb send' : 'clIndexeddb';
|
||
clCloudUp_Indexeddb.value = value.downloading_indexeddb === 1 ? 'clIndexeddb receive' : 'clIndexeddb';
|
||
|
||
/* clCloudUpload.value = (value.uploading_server === -1) ? 'clCloudUpload error' : clCloudUpload
|
||
clCloudUpload.value = (value.downloading_server === -1) ? 'clCloudUpload error' : clCloudDownload
|
||
clCloudUp_Indexeddb.value = (value.uploading_indexeddb === -1) ? 'clIndexeddb error' : clCloudUp_Indexeddb
|
||
clCloudUp_Indexeddb.value = (value.downloading_indexeddb === -1) ? 'clIndexeddb error' : clCloudDown_Indexeddb
|
||
|
||
*/
|
||
});
|
||
|
||
/*
|
||
@Watch('conn_changed', { immediate: true, deep: true })
|
||
function changeconn_changed(value: string, oldValue: string) {
|
||
if (value !== oldValue) {
|
||
|
||
// console.log('SSSSSSSS: ', value, oldValue)
|
||
|
||
const color = (value === 'online') ? 'positive' : 'warning'
|
||
const statoconn = t('connection.conn') + ' ' + ((value === 'online') ? t('connection.online') : t('connection.offline'))
|
||
|
||
if (site.confpages?.showConnected) {
|
||
|
||
if (!!oldValue) {
|
||
tools.showNotif($q, statoconn, {
|
||
color,
|
||
icon: 'wifi'
|
||
})
|
||
}
|
||
|
||
changeIconConn()
|
||
}
|
||
}
|
||
}
|
||
|
||
*/
|
||
|
||
function RefreshApp() {
|
||
if (Platform.is.ios) {
|
||
// Unregister Service Worker
|
||
if ('serviceWorker' in navigator) {
|
||
navigator.serviceWorker.getRegistrations().then((registrations) => {
|
||
for (const registration of registrations) {
|
||
registration.unregister();
|
||
}
|
||
});
|
||
}
|
||
|
||
// window.location.reload()
|
||
} else {
|
||
data.value.updateExists = false;
|
||
// Make sure we only send a 'skip waiting' message if the SW is waiting
|
||
if (!data.value.registration || !data.value.registration.waiting) return;
|
||
// Send message to SW to skip the waiting and activate the new SW
|
||
data.value.registration.waiting.postMessage({ type: 'SKIP_WAITING' });
|
||
}
|
||
}
|
||
|
||
function changeIconConn() {
|
||
iconConn.value = globalStore.stateConnection === 'online' ? 'wifi' : 'wifi_off';
|
||
clIconConn.value = globalStore.stateConnection === 'online' ? 'clIconOnline' : 'clIconOffline';
|
||
}
|
||
|
||
function getAppVersion() {
|
||
// return "AA"
|
||
let strv = '';
|
||
if (import.meta.env.DEV) {
|
||
strv = 'DEV ';
|
||
} else if (tools.isTest()) {
|
||
strv = 'TEST ';
|
||
}
|
||
return `${strv}v. ${import.meta.env.VITE_APP_VERSION}`;
|
||
}
|
||
|
||
function getLangAtt() {
|
||
return $q.lang.isoName;
|
||
}
|
||
|
||
function BeforeMount() {
|
||
setDarkMode();
|
||
|
||
// Estrai la Lang dal Localstorage
|
||
if (!globalStore.finishLoading) return;
|
||
|
||
// console.log('$q.i18n=', $q.i18n, '$q.getLocale()=', $q.lang.isoName)
|
||
const mybrowserLang = getLangAtt();
|
||
// tools.showNotif($q, 'prima: ' + String(my))
|
||
|
||
let mylang = tools.getItemLS(toolsext.localStorage.lang);
|
||
if (mylang === '') {
|
||
if (navigator) {
|
||
mylang = navigator.language;
|
||
// console.log(`LANG2 NAVIGATOR ${mylang}`)
|
||
} else {
|
||
mylang = $q.lang.isoName;
|
||
}
|
||
|
||
// console.log('IMPOSTA LANGMY', mylang)
|
||
}
|
||
|
||
mylang = toolsext.checkLangPassed($q, $router, mylang);
|
||
|
||
tools.setLangAtt($q, $router, mylang);
|
||
setshortlang(mylang);
|
||
}
|
||
|
||
function mounted() {
|
||
// Test this by running the code snippet below and then
|
||
// use the "TableOnlyView" checkbox in DevTools Network panel
|
||
|
||
// console.log('Event LOAD')
|
||
if (window) {
|
||
window.addEventListener('load', () => {
|
||
// console.log('2) ENTERING Event LOAD')
|
||
|
||
function updateOnlineStatus(event: any) {
|
||
if (navigator.onLine) {
|
||
console.log('EVENT ONLINE!');
|
||
// handle online status
|
||
globalStore.setStateConnection('online');
|
||
// mychangeIconConn()
|
||
} else {
|
||
console.log('EVENT OFFLINE!');
|
||
// handle offline status
|
||
globalStore.setStateConnection('offline');
|
||
// mychangeIconConn()
|
||
}
|
||
}
|
||
|
||
window.addEventListener('online', updateOnlineStatus);
|
||
window.addEventListener('offline', updateOnlineStatus);
|
||
});
|
||
}
|
||
|
||
nextTick(() => {
|
||
if (tools.getCookie('menu3oriz') === '1') {
|
||
if ($q.screen.width < 800) {
|
||
leftDrawerOpen.value = false;
|
||
// globalStore.leftDrawerOpen = false
|
||
} else {
|
||
leftDrawerOpen.value = true;
|
||
globalStore.leftDrawerOpen = true;
|
||
}
|
||
} else if (tools.getCookie('menu3oriz') === '0') {
|
||
leftDrawerOpen.value = false;
|
||
globalStore.leftDrawerOpen = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
function imglogo() {
|
||
return `${tools.getimglogo()}`;
|
||
}
|
||
|
||
function getappname() {
|
||
return tools.getappname(tools.isMobile());
|
||
}
|
||
|
||
function toggleanimation() {
|
||
console.log('toggleanimation');
|
||
visuimg.value = false;
|
||
setTimeout(() => {
|
||
visuimg.value = true;
|
||
}, 100);
|
||
}
|
||
|
||
function logoutHandler() {
|
||
userStore.logout().then(() => {
|
||
// $router.replace('/logout')
|
||
//
|
||
// setTimeout(() => {
|
||
// $router.replace('/')
|
||
// }, 1000)
|
||
|
||
tools.showNotif($q, t('logout.uscito'), { icon: 'exit_to_app' });
|
||
});
|
||
}
|
||
|
||
function clickregister() {
|
||
rightDrawerOpen.value = false;
|
||
|
||
$router.replace('/signup');
|
||
}
|
||
|
||
function getnumOrdersCart() {
|
||
/* const arrorderscart = Products.orders.filter((rec) => rec.status < shared_consts.OrderStatus.COMPLETED)
|
||
// const arrorderscart = Products.orders
|
||
if (!!arrorderscart) {
|
||
return arrorderscart.length
|
||
}
|
||
|
||
*/
|
||
return 0;
|
||
}
|
||
|
||
function getcart() {
|
||
// return Products.cart
|
||
return null;
|
||
}
|
||
|
||
function toHome() {
|
||
$router.push('/');
|
||
}
|
||
|
||
function changecmd(value: any) {
|
||
console.log('changecmd', value);
|
||
globalStore.changeCmdClick(value);
|
||
}
|
||
|
||
function clickMenu3Orizz() {
|
||
leftDrawerOpen.value = !leftDrawerOpen.value;
|
||
globalStore.leftDrawerOpen = leftDrawerOpen.value;
|
||
|
||
tools.setCookie('menu3oriz', globalStore.leftDrawerOpen ? '1' : '0');
|
||
}
|
||
|
||
|
||
onBeforeMount(BeforeMount);
|
||
onMounted(mounted);
|
||
|
||
created();
|
||
|
||
return {
|
||
static_data,
|
||
globalStore,
|
||
leftDrawerOpen,
|
||
rightDrawerOpen,
|
||
rightCartOpen,
|
||
rightNotifOpen,
|
||
rightCoinsOpen,
|
||
lang,
|
||
langshort,
|
||
getnumOrdersCart,
|
||
t,
|
||
isonline,
|
||
isAdmin,
|
||
isManager,
|
||
isSocio,
|
||
isSocioResidente,
|
||
isConsiglio,
|
||
getcolormenu,
|
||
isNewVersionAvailable,
|
||
getAppVersion,
|
||
RefreshApp,
|
||
changecmd,
|
||
imglogo,
|
||
getappname,
|
||
toggleanimation,
|
||
getClassColorHeader,
|
||
getcart,
|
||
getnumItemsCart,
|
||
isFacilitatore,
|
||
isZoomeri,
|
||
isTratuttrici,
|
||
getUsernameChatByMsg,
|
||
getMyUsername,
|
||
Username,
|
||
myName,
|
||
mySurname,
|
||
myCell,
|
||
MadeGift,
|
||
Email,
|
||
getMyImg,
|
||
getMyImgforIcon,
|
||
getImgByMsg,
|
||
getUserByUsername,
|
||
getImgByUsername,
|
||
isValidUsername,
|
||
getNumMsg,
|
||
getNumMsgUnread,
|
||
getMsgText,
|
||
paotest,
|
||
logoutHandler,
|
||
isUserNotAuth,
|
||
tools,
|
||
data,
|
||
site,
|
||
isfinishLoading,
|
||
getColorText,
|
||
costanti,
|
||
dark,
|
||
iconConn,
|
||
clIconConn,
|
||
toHome,
|
||
products,
|
||
userStore,
|
||
clickMenu3Orizz,
|
||
isEditor,
|
||
editOn,
|
||
};
|
||
},
|
||
});
|