strette di mano

src/views/user/myprofile/myprofile.ts

@@ -10,6 +10,7 @@ import { CMyGroup } from '@/components/CMyGroup'
 import { CMyCircuit } from '@/components/CMyCircuit'
 import { CNotifAtTop } from '@src/components/CNotifAtTop'
 import { CSendCoins } from '@/components/CSendCoins'
+import { CTimeAgo } from '@/components/CTimeAgo'
 import { CMyUser } from '@/components/CMyUser'
 import { CUserNonVerif } from '@/components/CUserNonVerif'
 import { CCheckIfIsLogged } from '@/components/CCheckIfIsLogged'
@@ -35,7 +36,7 @@ export default defineComponent({
   components: {
     CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime, CCopyBtn, CUserNonVerif, CMyFieldRec, CMyUser,
     CMyGroup, CLabel, CMyCircuit, CSendCoins, CNotifAtTop,
-    CCheckIfIsLogged
+    CCheckIfIsLogged, CTimeAgo
   },
   props: {},
   setup() {
@@ -50,6 +51,8 @@ export default defineComponent({
     const { getRefLink } = MixinUsers()
 
     const animation = ref('fade')
+    const quantiHandShake = ref('')
+    const usersList = ref({show: false, title: '', list: []})
 
     const username = computed(() => $route.params.username ? $route.params.username.toString() : userStore.my.username)
     const idnotif = computed(() => $route.query.idnotif ? $route.query.idnotif.toString() : '')
@@ -59,6 +62,7 @@ export default defineComponent({
     const showPic = ref(false)
     const caricato = ref(false)
     const showsendCoinTo = ref(false)
+    const showinghand = ref(false)
 
     const myuser = ref(<IUserFields | null>null)
 
@@ -94,6 +98,8 @@ export default defineComponent({
               filtroutente.value = [{ userId: myuser.value._id }]
               notifStore.setAsRead(idnotif.value)
 
+              quantiHandShake.value = (myuser.value.profile.handshake ? myuser.value.profile.handshake.length : 0) + ' ' + t('handshake.received')
+
               try {
                 listgroupsfiltered.value = globalStore.mygroups.filter((grp: IMyGroup) => myuser.value!.profile.mygroups.findIndex((rec: IMyGroup) => rec.groupname === grp.groupname) >= 0)
               } catch (e) {
@@ -175,6 +181,7 @@ export default defineComponent({
       username,
       profile,
       tools,
+      toolsext,
       costanti,
       myuser,
       shared_consts,
@@ -201,6 +208,9 @@ export default defineComponent({
       site,
       listcircuitsfiltered,
       isDebugOn,
+      showinghand,
+      quantiHandShake,
+      usersList,
     }
   }
 })

src/views/user/myprofile/myprofile.vue

@@ -51,11 +51,19 @@
               color="green"
               >online</q-badge
             >
+            <q-badge
+              v-if="userStore.IsHandShakeByUsername(myuser.username)"
+              align="bottom"
+              floating
+              color="red"
+              ><q-icon name="fas fa-handshake"></q-icon
+            ></q-badge>
           </q-avatar>
         </div>
 
         <div class="last_access">
-          OnLine: {{ tools.timeAgo(myuser.lasttimeonline) }}
+          OnLine:
+          <CTimeAgo :datetime="myuser.lasttimeonline" />
         </div>
 
         <div v-if="myuser.reported">
@@ -147,7 +155,7 @@
           </div>
 
           <div class="last_access">
-            OnLine: {{ tools.timeAgo(myuser.lasttimeonline) }}
+            OnLine: <CTimeAgo :datetime="myuser.lasttimeonline" />
           </div>
 
           <div v-if="myuser.reported">
@@ -210,6 +218,100 @@
           <div v-if="myuser._id" class="col-12 text-h8 q-mt-sm">
             {{ myuser.profile.biografia }}
           </div>
+          <q-banner
+            rounded
+            dense
+            size="lg"
+            class="bg-grey-1 shadow-5 q-my-sm"
+            color="primary q-title"
+            style="text-align: center"
+          >
+            <div class="mybanner bg-blue text-white">{{ $t('handshake.strettedimano')}}:</div>
+            <div v-if="userStore.IsHandShakeByUsername(myuser.username)">
+              {{ $t('db.addtohandshake', { username: myuser.username }) }}
+            </div>
+
+            <q-btn
+              :label="quantiHandShake"
+              class="q-my-sm"
+              rounded
+              icon="fas fa-handshake"
+              @click="
+                usersList.show = true;
+                usersList.title = 'Lista Strette di mano';
+                usersList.list = myuser.profile.handshake;
+              "
+            >
+            </q-btn>
+
+            <!--HANDSHAKE-->
+            <div v-if="!isMyRecord(myuser.username)">
+              <div
+                class="row centeritems q-ma-sm q-pa-sm"
+                v-if="userStore.IsReqHandShakeByUsername(myuser.username)"
+              >
+                <q-btn
+                  icon="fas fa-handshake"
+                  color="positive"
+                  :label="$t('handshake.accept_handshake')"
+                  @click="
+                    tools.addToMyHandShake(
+                      $q,
+                      userStore.my.username,
+                      myuser.username
+                    )
+                  "
+                />
+                <q-btn
+                  icon="fas fa-handshake-alt-slash"
+                  color="negative"
+                  :label="$t('handshake.reject_ask_handshake')"
+                  @click="
+                    tools.refuseReqHandShake(
+                      $q,
+                      userStore.my.username,
+                      myuser.username
+                    )
+                  "
+                />
+              </div>
+              <div v-else>
+                <q-btn
+                  v-if="
+                    !userStore.IsHandShakeByUsername(myuser.username) &&
+                    !userStore.IsAskedHandShakeByUsername(myuser.username)
+                  "
+                  icon="fas fa-handshake"
+                  color="primary"
+                  :label="$t('handshake.ask_handshake')"
+                  @click="
+                    tools.setRequestHandShake(
+                      $q,
+                      userStore.my.username,
+                      myuser.username,
+                      true
+                    )
+                  "
+                />
+              </div>
+
+              <q-btn
+                v-if="
+                  userStore.IsAskedHandShakeByUsername(myuser.username) &&
+                  !userStore.IsHandShakeByUsername(myuser.username)
+                "
+                icon="fas fa-handshake-alt-slash"
+                :label="$t('handshake.cancel_ask_handshake_short')"
+                @click="
+                  tools.cancelReqHandShake(
+                    $q,
+                    userStore.my.username,
+                    myuser.username
+                  )
+                "
+              />
+            </div>
+          </q-banner>
 
           <div v-if="!isMyRecord(myuser.username)">
             <div
@@ -539,6 +641,27 @@
   <div v-else>
     <CUserNonVerif></CUserNonVerif>
   </div>
+  <q-dialog v-model="usersList.show">
+    <q-card class="dialog_card">
+      <q-toolbar class="bg-primary text-white">
+        <q-toolbar-title>
+          {{ usersList.title }}
+        </q-toolbar-title>
+        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+      </q-toolbar>
+
+      <q-card-section class="inset-shadow">
+        <div v-for="(rec, i) in usersList.list" :key="i">
+          <CMyUser
+            :mycontact="rec"
+            :visu="costanti.FIND_PEOPLE"
+            @setCmd="tools.setCmd"
+          >
+          </CMyUser>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script lang="ts" src="./myprofile.ts">