+ Registered Users
+ UsersList Online
This commit is contained in:
Surya Paolo
@@ -8,6 +8,7 @@ import MixinBase from '@src/mixins/mixin-base'
|
||||
import { CTitleBanner } from '@/components/CTitleBanner'
|
||||
import { CCardState } from '../CCardState'
|
||||
import { CMyFieldRec } from '../CMyFieldRec'
|
||||
import { CElemStat } from '../CElemStat'
|
||||
import { CCardStat } from '../CCardStat'
|
||||
import { CLineChart } from '@/components/CLineChart'
|
||||
|
||||
@@ -21,11 +22,13 @@ import { useGlobalStore } from '@store/globalStore'
|
||||
import { useUserStore } from '@store/UserStore'
|
||||
import { useI18n } from '@/boot/i18n'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CStatusReg',
|
||||
props: {},
|
||||
components: { CTitleBanner, CCardState, CCardStat, CLineChart, CMyFieldRec },
|
||||
components: { CTitleBanner, CElemStat,
|
||||
CCardState, CCardStat, CLineChart, CMyFieldRec },
|
||||
setup(props, { attrs, slots, emit }) {
|
||||
const { t } = useI18n()
|
||||
const $q = useQuasar()
|
||||
@@ -40,8 +43,13 @@ export default defineComponent({
|
||||
const polling = ref(<any>null)
|
||||
const numpolled = ref(0)
|
||||
|
||||
const mytab = ref('reg')
|
||||
|
||||
const $router = useRouter()
|
||||
|
||||
const datastat = ref(<any>{
|
||||
num_reg: 0,
|
||||
num_reg_today: 0,
|
||||
online_today: 0,
|
||||
num_passeggeri: 0,
|
||||
num_imbarcati: 0,
|
||||
@@ -51,6 +59,7 @@ export default defineComponent({
|
||||
email_non_verif: 0,
|
||||
num_teleg_pending: 0,
|
||||
lastsreg: [],
|
||||
lastsonline: [],
|
||||
checkuser: { verified_email: false }
|
||||
})
|
||||
|
||||
@@ -69,6 +78,9 @@ export default defineComponent({
|
||||
const lastsreg = computed(() => {
|
||||
return datastat.value.lastsreg
|
||||
})
|
||||
const lastsonline = computed(() => {
|
||||
return datastat.value.lastsonline
|
||||
})
|
||||
|
||||
watch(() => $q.appVisible, (value: any, oldval: any) => {
|
||||
// console.log('visible', value)
|
||||
@@ -165,6 +177,14 @@ export default defineComponent({
|
||||
return 0
|
||||
}
|
||||
|
||||
function getImgUserByUsername(username: string) {
|
||||
return userStore.getImgUserByUsername(username)
|
||||
}
|
||||
|
||||
function gotoPage(link: string) {
|
||||
$router.push(link)
|
||||
}
|
||||
|
||||
created()
|
||||
|
||||
onBeforeUnmount(beforeDestroy)
|
||||
@@ -176,9 +196,13 @@ export default defineComponent({
|
||||
telegnonattivi,
|
||||
emailnonverif,
|
||||
lastsreg,
|
||||
lastsonline,
|
||||
datastat,
|
||||
tools,
|
||||
costanti,
|
||||
mytab,
|
||||
getImgUserByUsername,
|
||||
gotoPage,
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,25 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="visustat">
|
||||
<CTitleBanner class="q-pa-xs" :title="$t('pages.status')" bgcolor="bg-primary" clcolor="text-white"
|
||||
mystyle="" myclass="myshad" :canopen="true">
|
||||
|
||||
|
||||
<CTitleBanner
|
||||
class="q-pa-xs"
|
||||
:title="$t('pages.status')"
|
||||
bgcolor="bg-primary"
|
||||
clcolor="text-white"
|
||||
mystyle=""
|
||||
myclass="myshad"
|
||||
:canopen="true"
|
||||
>
|
||||
<div class="flex flex-center">
|
||||
<CElemStat
|
||||
:title="$t('pages.statusreg.reg')"
|
||||
icon="fas fa-users"
|
||||
:value_today="datastat.num_reg_today"
|
||||
:mytextval="datastat.num_reg"
|
||||
classColor="text-blue"
|
||||
colBack="green"
|
||||
>
|
||||
</CElemStat>
|
||||
|
||||
<CCardState :mytext="$t('pages.statusreg.reg')" :myval="datastat.num_teleg_attivo"
|
||||
mycolor="blue"
|
||||
:myperc="(datastat.num_teleg_attivo / datastat.num_reg) * 100"></CCardState>
|
||||
|
||||
<CCardState :mytext="$t('pages.statusreg.online_today')" :myval="datastat.online_today"
|
||||
mycolor="green" :myperc="(datastat.online_today / datastat.num_reg) * 100"></CCardState>
|
||||
<CElemStat
|
||||
:title="$t('pages.statusreg.online_today')"
|
||||
icon="fas fa-wifi"
|
||||
:mytextval="datastat.online_today"
|
||||
classColor="text-green"
|
||||
colBack="red"
|
||||
>
|
||||
</CElemStat>
|
||||
|
||||
<!--<CCardState :mytext="$t('pages.statusreg.autorizzare')" :myval="datastat.num_autorizzare"
|
||||
mycolor="yellow" :myperc="(datastat.num_autorizzare / datastat.num_teleg_attivo) * 100"></CCardState>
|
||||
-->
|
||||
|
||||
<div class="q-pa-xs" v-if="datastat.num_part_accepted > 1">
|
||||
<CCardStat :mytext="$t('stat.accepted')" :myval="datastat.num_part_accepted"></CCardStat>
|
||||
<CCardStat
|
||||
:mytext="$t('stat.accepted')"
|
||||
:myval="datastat.num_part_accepted"
|
||||
></CCardStat>
|
||||
<!--<CCardStat :mytext="$t('stat.modalita_pagamento')"
|
||||
:myval="datastat.num_modalita_pagamento"></CCardStat>-->
|
||||
<!--<CCardStat :mytext="$t('stat.requisiti')" :myval="datastat.num_requisiti"></CCardStat>-->
|
||||
@@ -34,49 +53,96 @@
|
||||
</div>
|
||||
|
||||
<div class="column animazione">
|
||||
<div class="text-center">{{$t('pages.statusreg.newreg')}}</div>
|
||||
<transition-group name="fade" mode="out-in"
|
||||
appear
|
||||
enter-active-class="animazione fadeIn"
|
||||
leave-active-class="animazione fadeOut">
|
||||
<q-tabs v-model="mytab" class="text-blue">
|
||||
<q-tab name="reg" :label="$t('pages.statusreg.newreg')" />
|
||||
<q-tab name="online" :label="$t('pages.statusreg.onlineusers')" />
|
||||
</q-tabs>
|
||||
|
||||
<q-item v-for="(user, index) in lastsreg" :key="index" class="q-mb-xs animated"
|
||||
v-ripple>
|
||||
<q-tab-panels v-model="mytab" animated>
|
||||
<q-tab-panel name="reg">
|
||||
<transition-group
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
appear
|
||||
enter-active-class="animazione fadeIn"
|
||||
leave-active-class="animazione fadeOut"
|
||||
>
|
||||
<q-item
|
||||
v-for="(user, index) in lastsreg"
|
||||
:key="index"
|
||||
class="animated"
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1">
|
||||
<CMyFieldRec
|
||||
table="users"
|
||||
:id="user._id"
|
||||
:rec="user"
|
||||
field="username"
|
||||
:canEdit="false"
|
||||
:canModify="false"
|
||||
:fieldtype="costanti.FieldType.username_chip"
|
||||
>
|
||||
</CMyFieldRec>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<!--
|
||||
<q-item-section avatar>
|
||||
<q-avatar v-if="tools.geticon(user.profile.nationality)"
|
||||
:class="tools.geticon(user.profile.nationality)">
|
||||
|
||||
</q-avatar>
|
||||
<q-avatar v-else color="primary" text-color="white" class="text-center">
|
||||
{{ tools.capitalize(user.profile.nationality) }}
|
||||
</q-avatar>
|
||||
</q-item-section>-->
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label lines="1">
|
||||
|
||||
<CMyFieldRec
|
||||
table="users"
|
||||
:id="user._id"
|
||||
:rec="user"
|
||||
field="username"
|
||||
:canEdit="false"
|
||||
:canModify="false"
|
||||
:fieldtype="costanti.FieldType.username_chip">
|
||||
</CMyFieldRec>
|
||||
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side>
|
||||
<q-item-label>{{ tools.getstrDateTimeShort(user.date_reg) }}</q-item-label>
|
||||
<q-chip outline color="green" text-color="white" icon-right="fas fa-user-plus"
|
||||
size="xs"></q-chip>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</transition-group>
|
||||
<q-item-section side>
|
||||
<q-item-label>{{
|
||||
tools.getstrDateTimeShort(user.date_reg)
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</transition-group>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="online">
|
||||
<div class="q-pa-md" style="max-width: 300px">
|
||||
<q-list bordered>
|
||||
<transition-group
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
appear
|
||||
enter-active-class="animazione fadeIn"
|
||||
leave-active-class="animazione fadeOut"
|
||||
>
|
||||
<q-item
|
||||
v-for="(user, index) in lastsonline"
|
||||
:key="index"
|
||||
class="animated chip_shadow q-ma-sm"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="gotoPage(`/my/${user.username}`)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="48px">
|
||||
<img :src="getImgUserByUsername(user.username)" />
|
||||
<q-badge
|
||||
v-if="tools.isUserOnline(user)"
|
||||
align="top"
|
||||
floating
|
||||
color="green"
|
||||
>online</q-badge
|
||||
>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label>{{
|
||||
tools.getNameToShow(user)
|
||||
}}</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
tools.getUserNameOnlyIfToShow(user)
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>{{
|
||||
tools.timeAgo(user.lasttimeonline)
|
||||
}}</q-item-section>
|
||||
</q-item>
|
||||
</transition-group>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
|
||||
<!--<CGeoChart :mydata="datastat.arr_nations">
|
||||
@@ -91,15 +157,19 @@
|
||||
</CListNationality>
|
||||
</div>-->
|
||||
<div class="clBorderTutor">
|
||||
<CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_daily')" color="blue" bordercolor="blue" :sum="true">
|
||||
|
||||
<CLineChart
|
||||
:mydata="datastat.reg_daily"
|
||||
:title="$t('stat.reg_daily')"
|
||||
color="blue"
|
||||
bordercolor="blue"
|
||||
:sum="true"
|
||||
>
|
||||
</CLineChart>
|
||||
|
||||
<!--<CLineChart :mydata="datastat.reg_weekly" :title="$t('stat.reg_weekly')" color="blue" bordercolor="green" :sum="true">
|
||||
|
||||
</CLineChart>-->
|
||||
|
||||
|
||||
<!--<CLineChart :mydata="datastat.reg_daily" :title="$t('stat.reg_total')"
|
||||
:offset="datastat.numreg_untilday" :sum="true"
|
||||
:mycolors="['#0b0', '#666']">
|
||||
@@ -117,5 +187,5 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CStatusReg.scss';
|
||||
@import './CStatusReg.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user