strette di mano

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">