- Griglia Orizzontale a Carosello
- Aggiornato Tabella Eventi - Lista Ultimi Movimenti - Ultime strette di mano - Ultimi Invitanti alla App
This commit is contained in:
Surya Paolo
@@ -6,4 +6,18 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* Distribuisce gli elementi uniformemente */
|
||||
}
|
||||
|
||||
.clDateStrette{
|
||||
color: white;
|
||||
font-style: italic;
|
||||
}
|
||||
.iscritto_da, .iscritto_da_name{
|
||||
font-style: italic;
|
||||
font-size: 0.85rem;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.iscritto_da_name{
|
||||
color: white !important;
|
||||
}
|
||||
@@ -231,6 +231,7 @@ export default defineComponent({
|
||||
getImgUserByUsername,
|
||||
gotoPage,
|
||||
userStore,
|
||||
t,
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -102,73 +102,17 @@
|
||||
: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('statusreg.newreg')"
|
||||
icon="fas fa-user-plus"
|
||||
/>
|
||||
<q-tab
|
||||
name="online"
|
||||
:label="$t('statusreg.onlineusers')"
|
||||
icon="fas fa-wifi"
|
||||
/>
|
||||
<q-tab
|
||||
name="diffusori"
|
||||
:label="$t('statusreg.diffusori')"
|
||||
icon="fas fa-medal"
|
||||
/>
|
||||
<q-tab
|
||||
name="strettelist"
|
||||
:label="$t('statusreg.strettelist')"
|
||||
icon="fas fa-handshake"
|
||||
/>
|
||||
</q-tabs>
|
||||
|
||||
<q-tab-panels v-model="mytab" animated>
|
||||
<q-tab-panel name="reg">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<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>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="online">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<q-list bordered>
|
||||
<q-list bordered>
|
||||
<q-expansion-item
|
||||
group="somegroup"
|
||||
icon="fas fa-user-plus"
|
||||
:label="$t('statusreg.newreg')"
|
||||
default-opened
|
||||
header-class="text-primary"
|
||||
>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<transition-group
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
@@ -177,11 +121,11 @@
|
||||
leave-active-class="animazione fadeOut"
|
||||
>
|
||||
<q-item
|
||||
v-for="(user, index) in lastsonline"
|
||||
v-for="(user, index) in lastsreg"
|
||||
:key="index"
|
||||
class="animated chip_shadow q-ma-sm"
|
||||
clickable
|
||||
v-ripple
|
||||
clickable
|
||||
@click="gotoPage(`/my/${user.username}`)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
@@ -197,212 +141,326 @@
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label>{{
|
||||
tools.getNameToShow(user)
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
{{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
tools.getUserNameOnlyIfToShow(user)
|
||||
tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
|
||||
}}</q-item-label>
|
||||
<q-item-label class="iscritto_da">
|
||||
{{ t('statusreg.invite_by') }}:
|
||||
<span class="iscritto_da_name">{{
|
||||
tools.getNameToShow(user.user_aportador)
|
||||
}}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<div
|
||||
:class="
|
||||
`text-h6 q-mr-sm text-bold ` + $q.dark.isActive
|
||||
? `text-white`
|
||||
: `text-black`
|
||||
"
|
||||
>
|
||||
<CTimeAgo :datetime="user.lasttimeonline" />
|
||||
</div>
|
||||
<q-item-label style="color: white">{{
|
||||
tools.getstrshortDate(user.date_reg)
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</transition-group>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
group="somegroup"
|
||||
icon="fas fa-medal"
|
||||
:label="$t('statusreg.lastsharedlink')"
|
||||
header-class="text-purple"
|
||||
>
|
||||
<div>
|
||||
<div class="text-center text-bold text-h6">Unisciti a RISO</div>
|
||||
<div class="text-center">
|
||||
Se ancora non sei registrato a RISO, scegli un invitante che
|
||||
conosci. Questa persona dovrà ammetterti per permetterti di
|
||||
accedere alle funzionalità.
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="diffusori">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<div class="text-center text-bold text-h6">
|
||||
Aiuta RISO a crescere
|
||||
</div>
|
||||
<div class="text-center">
|
||||
Condividi il tuo link d'invito, alimentando nuovi ingressi
|
||||
alla RETE Solidale di RISO.
|
||||
</div>
|
||||
<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 diffusorilist"
|
||||
:key="index"
|
||||
class="animated chip_shadow q-ma-sm"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="gotoPage(`/my/${user.username}`)"
|
||||
</div>
|
||||
|
||||
<q-item
|
||||
v-for="(user, index) in lastssharedlink"
|
||||
:key="index"
|
||||
class="animated chip_shadow q-ma-sm"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="gotoPage(`/registrati/${user.user_aportador.username}`)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="48px">
|
||||
<img
|
||||
:src="userStore.getImgByProfile(user.user_aportador)"
|
||||
/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label>
|
||||
{{ tools.getNameToShow(user.user_aportador, null, {showprov: true, html: true}) }}
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
tools.getUserNameOnlyIfToShow(user.user_aportador, null, {showprov: true, html: true})
|
||||
}}</q-item-label>
|
||||
<q-item-label class="iscritto_da">
|
||||
{{ t('statusreg.has_invited') }}:
|
||||
<span class="iscritto_da_name">{{
|
||||
tools.getNameToShow(user)
|
||||
}}</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side
|
||||
><span class="text-h6 q-mr-sm"></span
|
||||
></q-item-section>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item
|
||||
group="somegroup"
|
||||
icon="fas fa-wifi"
|
||||
:label="
|
||||
$t('statusreg.onlineusers', { today: datastat.online_today })
|
||||
"
|
||||
header-class="text-teal"
|
||||
>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<q-list bordered>
|
||||
<transition-group
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
appear
|
||||
enter-active-class="animazione fadeIn"
|
||||
leave-active-class="animazione fadeOut"
|
||||
>
|
||||
<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 overline>
|
||||
<div class="index_diffusore">{{ index + 1 }}°</div>
|
||||
</q-item-label>
|
||||
<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
|
||||
><div
|
||||
:class="
|
||||
`text-h6 q-mx-sm q-px-sm text-bold ` +
|
||||
($q.dark.isActive ? `text-white` : `text-black`)
|
||||
"
|
||||
>
|
||||
{{ user.count }}
|
||||
</div></q-item-section
|
||||
<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>
|
||||
</transition-group>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="strettelist">
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<div class="text-center text-bold text-h6">
|
||||
Strette di Mano
|
||||
</div>
|
||||
<div class="text-center">
|
||||
Più persone conoscerai di persona e maggiore aumenterà la
|
||||
Rete di fiducia.
|
||||
</div>
|
||||
<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 strettelist"
|
||||
: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-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, null, {showprov: true, html: true}) }}
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<div
|
||||
:class="
|
||||
`text-h6 q-mr-sm text-bold ` + $q.dark.isActive
|
||||
? `text-white`
|
||||
: `text-black`
|
||||
"
|
||||
>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label overline>
|
||||
<div class="index_diffusore">{{ index + 1 }}°</div>
|
||||
</q-item-label>
|
||||
<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
|
||||
><div
|
||||
:class="
|
||||
`text-h6 q-mx-sm q-px-sm text-bold ` +
|
||||
($q.dark.isActive ? `text-white` : `text-black`)
|
||||
"
|
||||
>
|
||||
{{ user.count }}
|
||||
</div></q-item-section
|
||||
<CTimeAgo :datetime="user.lasttimeonline" />
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</transition-group>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-expansion-item
|
||||
v-if="false"
|
||||
expand-separator
|
||||
group="somegroup"
|
||||
icon="fas fa-medal"
|
||||
:label="$t('statusreg.diffusori')"
|
||||
header-class="text-purple"
|
||||
>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<div class="text-center text-bold text-h6">
|
||||
Aiuta RISO a crescere
|
||||
</div>
|
||||
<div class="text-center">
|
||||
Condividi il tuo link d'invito, alimentando nuovi ingressi
|
||||
alla RETE Solidale di RISO.
|
||||
</div>
|
||||
<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 diffusorilist"
|
||||
:key="index"
|
||||
class="animated chip_shadow q-ma-sm"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="gotoPage(`/my/${user.username}`)"
|
||||
>
|
||||
</q-item>
|
||||
</transition-group>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="sharedlink">
|
||||
<div class="q-pa-md" style="max-width: 300px">
|
||||
<div class="text-center text-bold text-h6">
|
||||
Registrati con questi invitanti:
|
||||
</div>
|
||||
<div class="text-center">
|
||||
Cliccare sulla persona per procedere alla registrazione
|
||||
</div>
|
||||
<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 lastssharedlink"
|
||||
:key="index"
|
||||
class="animated chip_shadow q-ma-sm"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="gotoPage(`/registrati/${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-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 overline>
|
||||
<div class="index_diffusore">
|
||||
{{ index + 1 }}°
|
||||
</div>
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{
|
||||
tools.getUserNameOnlyIfToShow(user, null, {showprov: true, html: true})
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side
|
||||
><div
|
||||
:class="
|
||||
`text-h6 q-mx-sm q-px-sm text-bold ` +
|
||||
($q.dark.isActive ? `text-white` : `text-black`)
|
||||
"
|
||||
>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section class="">
|
||||
<q-item-label overline>
|
||||
<div class="index_diffusore">{{ index + 1 }}°</div>
|
||||
</q-item-label>
|
||||
<q-item-label>
|
||||
{{ tools.getNameToShow(user) }}</q-item-label
|
||||
{{ user.count }}
|
||||
</div></q-item-section
|
||||
>
|
||||
<q-item-label caption>{{
|
||||
tools.getUserNameOnlyIfToShow(user)
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side
|
||||
><span class="text-h6 q-mr-sm"></span
|
||||
></q-item-section>
|
||||
</q-item>
|
||||
</transition-group>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</q-item>
|
||||
</transition-group>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-expansion-item
|
||||
group="somegroup"
|
||||
icon="fas fa-handshake"
|
||||
:label="$t('handshake.last_strettedimano')"
|
||||
header-class="bg-teal text-white"
|
||||
expand-icon-class="text-white"
|
||||
>
|
||||
<q-card class="bg-teal-2">
|
||||
<q-card-section>
|
||||
<div class="q-pa-md" style="max-width: 350px; margin: auto">
|
||||
<div class="text-center text-bold text-h6">
|
||||
Strette di Mano
|
||||
</div>
|
||||
<div class="text-center">
|
||||
Più persone conoscerai di persona e maggiore aumenterà la
|
||||
Rete di fiducia.
|
||||
</div>
|
||||
<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 strettelist"
|
||||
:key="index"
|
||||
class="animated chip_shadow q-ma-sm"
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar
|
||||
round
|
||||
size="48px"
|
||||
@click="gotoPage(`/my/${user.username}`)"
|
||||
>
|
||||
<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 class="clDateStrette">
|
||||
{{
|
||||
tools.getstrDateTimeLong(
|
||||
user.profile.handshake.date
|
||||
)
|
||||
}}</q-item-label
|
||||
>
|
||||
<q-item-label>
|
||||
{{ tools.getNameToShow(user, null, {showprov: true, html: true}) }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label style="text-align: right">
|
||||
{{ tools.getNameToShow(user.userfriend, null, {showprov: true, html: true}) }}
|
||||
</q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-avatar
|
||||
round
|
||||
size="48px"
|
||||
@click="
|
||||
gotoPage(`/my/${user.userfriend.username}`)
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
userStore.getImgByProfile(user.userfriend)
|
||||
"
|
||||
/>
|
||||
<q-badge
|
||||
v-if="tools.isUserOnline(user.userfriend)"
|
||||
align="top"
|
||||
floating
|
||||
color="green"
|
||||
>online</q-badge
|
||||
>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</transition-group>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
|
||||
<!--<CGeoChart :mydata="datastat.arr_nations">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user