Files
salvato.newfreeplanet/src/components/CStatusReg/CStatusReg.vue
2022-12-10 02:42:07 +01:00

192 lines
7.1 KiB
Vue
Executable File

<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"
>
<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>
<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.modalita_pagamento')"
:myval="datastat.num_modalita_pagamento"></CCardStat>-->
<!--<CCardStat :mytext="$t('stat.requisiti')" :myval="datastat.num_requisiti"></CCardStat>-->
<!--<CCardStat :mytext="$t('stat.qualificati')" :myval="datastat.num_qualificati"></CCardStat>-->
<!--<CCardStat v-if="emailnonverif" :mytext="$t('stat.email_not_verif')" :myval="emailnonverif"
mycol="negative"></CCardStat>
<CCardStat v-if="telegnonattivi" :mytext="$t('stat.telegram_non_attivi')"
:myval="telegnonattivi"
mycol="negative"></CCardStat>
<CCardStat v-if="datastat.num_teleg_pending > 0" :mytext="$t('stat.telegram_pendenti')"
:myval="datastat.num_teleg_pending" mycol="negative"></CCardStat>-->
</div>
<div class="column animazione">
<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-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 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="userStore.getImgByProfile(user)" />
<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">
</CGeoChart>-->
<div class="row q-pa-sm text-center justify-center">
<!--
<div class="clBorderZoom">
<CListNationality :mydata="datastat.arr_nations">
</CListNationality>
</div>-->
<div class="clBorderTutor">
<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']">
</CLineChart>-->
</div>
</div>
</div>
</CTitleBanner>
</div>
</div>
</template>
<script lang="ts" src="./CStatusReg.ts">
</script>
<style lang="scss" scoped>
@import './CStatusReg.scss';
</style>