++ diffusori

fixed user chip

src/components/CStatusReg/CStatusReg.scss

@@ -0,0 +1,3 @@
+.index_diffusore {
+    font-size: 1rem;
+}

src/components/CStatusReg/CStatusReg.ts

@@ -60,6 +60,7 @@ export default defineComponent({
       num_teleg_pending: 0,
       lastsreg: [],
       lastsonline: [],
+      diffusorilist: [],
       checkuser: { verified_email: false }
     })
 
@@ -81,6 +82,9 @@ export default defineComponent({
     const lastsonline = computed(() => {
       return datastat.value.lastsonline
     })
+    const diffusorilist = computed(() => {
+      return datastat.value.diffusorilist
+    })
 
     watch(() => $q.appVisible, (value: any, oldval: any) => {
       // console.log('visible', value)
@@ -197,6 +201,7 @@ export default defineComponent({
       emailnonverif,
       lastsreg,
       lastsonline,
+      diffusorilist,
       datastat,
       tools,
       costanti,

src/components/CStatusReg/CStatusReg.vue

@@ -54,8 +54,21 @@
 
           <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-tab
+                name="reg"
+                :label="$t('pages.statusreg.newreg')"
+                icon="fas fa-user-plus"
+              />
+              <q-tab
+                name="online"
+                :label="$t('pages.statusreg.onlineusers')"
+                icon="fas fa-wifi"
+              />
+              <q-tab
+                name="diffusori"
+                :label="$t('pages.statusreg.diffusori')"
+                icon="fas fa-medal"
+              />
             </q-tabs>
 
             <q-tab-panels v-model="mytab" animated>
@@ -142,6 +155,60 @@
                   </q-list>
                 </div>
               </q-tab-panel>
+              <q-tab-panel name="diffusori">
+                <div class="q-pa-md" style="max-width: 300px">
+                <div class="text-center text-bold text-h6">I Migliori Invitanti su RISO:</div>
+                <div class="text-center"> Indica il numero di persone registrate tramite il link d'invito personale.
+                </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-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
+                          ><span class="text-h6 q-mr-sm">{{
+                            user.count
+                          }}</span></q-item-section
+                        >
+                      </q-item>
+                    </transition-group>
+                  </q-list>
+                </div>
+              </q-tab-panel>
             </q-tab-panels>
           </div>