Stringi la mano (fase prima)

src/components/CStatusReg/CStatusReg.ts

@@ -63,6 +63,7 @@ export default defineComponent({
       lastsonline: [],
       lastssharedlink: [],
       diffusorilist: [],
+      strettelist: [],
       checkuser: { verified_email: false }
     })
 
@@ -90,6 +91,9 @@ export default defineComponent({
     const diffusorilist = computed(() => {
       return datastat.value.diffusorilist
     })
+    const strettelist = computed(() => {
+      return datastat.value.strettelist
+    })
 
     watch(() => $q.appVisible, (value: any, oldval: any) => {
       // console.log('visible', value)
@@ -208,6 +212,7 @@ export default defineComponent({
       lastsonline,
       lastssharedlink,
       diffusorilist,
+      strettelist,
       datastat,
       tools,
       costanti,

src/components/CStatusReg/CStatusReg.vue

@@ -69,6 +69,11 @@
                 :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>
@@ -224,6 +229,66 @@
                   </q-list>
                 </div>
               </q-tab-panel>
+              <q-tab-panel name="strettelist">
+                <div class="q-pa-md" style="max-width: 300px">
+                  <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-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>
+                    </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">