- Aggiungere numero di persone registrate, e num di competenze, e numGruppi

quasar.conf.js

@@ -57,6 +57,7 @@ module.exports = configure((ctx) => ({
     'fontawesome-v5',
     'roboto-font', // optional, you are not bound to it
     'material-icons', // optional, you are not bound to it
+    'material-icons-outlined'
   ],
 
   aliases: {
@@ -154,7 +155,6 @@ module.exports = configure((ctx) => ({
   framework: {
     config: {},
 
-    // iconSet: 'material-icons', // Quasar icon set
     // lang: 'en-US', // Quasar language pack
 
     // For special cases outside of where the auto-import strategy can have an impact

src/components/CDashboard/CDashboard.scss

@@ -0,0 +1,74 @@
+.box_1 {
+  color: #0dceec;
+}
+
+.box_2 {
+  color: #fe434f;
+}
+
+.box_3 {
+  color: #15ca20;
+}
+
+.box_4 {
+  color: #ff9700;
+}
+
+.shadow {
+  -webkit-box-shadow: 0 0 10px #bfbfbf !important;
+  box-shadow: 0 0 10px #bfbfbf !important;
+}
+
+.progress-base {
+  height: 8px;
+  border-radius: 3px;
+  background-color: #e9ecef;
+}
+
+.progress-bar-1 {
+  height: 8px;
+  border-radius: 3px;
+  background: #17ead9;
+  background: -webkit-linear-gradient(45deg, #17ead9, #6078ea) !important;
+  background: linear-gradient(45deg, #17ead9, #6078ea) !important;
+}
+
+.progress-bar-2 {
+  height: 8px;
+  border-radius: 3px;
+  background: #f54ea2;
+  background: -webkit-linear-gradient(45deg, #f54ea2, #ff7676) !important;
+  background: linear-gradient(45deg, #f54ea2, #ff7676) !important;
+}
+
+.progress-bar-3 {
+  height: 8px;
+  border-radius: 3px;
+  background: #42e695;
+  background: -webkit-linear-gradient(45deg, #42e695, #3bb2b8) !important;
+  background: linear-gradient(45deg, #42e695, #3bb2b8) !important;
+}
+
+.progress-bar-4 {
+  height: 8px;
+  border-radius: 3px;
+  background: #ffdf40;
+  background: -webkit-linear-gradient(45deg, #ffdf40, #ff8359) !important;
+  background: linear-gradient(45deg, #ffdf40, #ff8359) !important;
+}
+
+.border-top {
+  border-top: 1px solid #efefef;
+}
+
+.chip_pending {
+  background: #ffdf40;
+  background: -webkit-linear-gradient(45deg, #ffdf40, #ff8359) !important;
+  background: linear-gradient(45deg, #ffdf40, #ff8359) !important;
+}
+
+.chip_completed {
+  background: #42e695;
+  background: -webkit-linear-gradient(45deg, #42e695, #3bb2b8) !important;
+  background: linear-gradient(45deg, #42e695, #3bb2b8) !important;
+}

src/components/CDashboard/CDashboard.ts

@@ -0,0 +1,30 @@
+import { computed, defineComponent, PropType, ref } from 'vue'
+
+import { ICalcStat, IOperators } from '../../model'
+import { useUserStore } from '../../store/UserStore'
+import { useRouter } from 'vue-router'
+import { useGlobalStore } from '../../store/globalStore'
+import { useI18n } from '../../boot/i18n'
+
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CDashboard',
+  props: {
+  },
+  setup(props) {
+
+    const userStore = useUserStore()
+    const $router = useRouter()
+    const globalStore = useGlobalStore()
+    const { t } = useI18n();
+
+    const calcstat = computed(() => userStore.my.calcstat ? userStore.my.calcstat : {numUsersReg: 0, numMySkills: 0} )
+
+    return {
+      userStore,
+      tools,
+      calcstat
+    }
+  },
+})

src/components/CDashboard/CDashboard.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="q-ma-md">
+    <div class="row q-my-md shadow" style="border-radius: 4px;border: 1px solid rgba(0, 0, 0, 0.12);">
+      <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12 box_4" style="border-left: 1px solid #efefef;"
+           v-bind:class="{'border-top': $q.platform.is.mobile}">
+        <q-card class="no-shadow q-pa-sm">
+          <q-item class="q-pb-none q-pt-xs">
+            <q-item-section>
+              <q-item-label class="text-h4" style="font-weight: 500;letter-spacing: 3px;">{{ calcstat.numUsersReg }}</q-item-label>
+              <q-item-label :class="!$q.dark.isActive? 'text-grey-7':'text-white'" style="letter-spacing: 1px;">Persone Iscritte</q-item-label>
+            </q-item-section>
+
+            <q-item-section side>
+              <q-icon name="o_people" class="box_4" size="60px"></q-icon>
+            </q-item-section>
+          </q-item>
+          <q-item class="q-py-xs" style="min-height: unset">
+            <q-item-section>
+              <div class="progress-base q-my-sm">
+                <div class="progress-bar-4" style="width:100%"></div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-card>
+      </div>
+      <div class="col-md-3 col-lg-3 col-sm-12 col-xs-12 box_3" style="border-left: 1px solid #efefef;"
+           v-bind:class="{'border-top': $q.platform.is.mobile}">
+        <q-card class="no-shadow q-pa-sm">
+          <q-item class="q-pb-none q-pt-xs">
+            <q-item-section>
+              <q-item-label class="text-h4" style="font-weight: 500;letter-spacing: 3px;">{{ calcstat.numMySkills }}</q-item-label>
+              <q-item-label :class="!$q.dark.isActive? 'text-grey-7':'text-white'" style="letter-spacing: 1px;">Competenze Aggiunte</q-item-label>
+            </q-item-section>
+
+            <q-item-section side>
+              <q-icon name="engineering" class="box_3" size="60px"></q-icon>
+            </q-item-section>
+          </q-item>
+          <q-item class="q-py-xs" style="min-height: unset">
+            <q-item-section>
+              <div class="progress-base q-my-sm">
+                <div class="progress-bar-3" style="width:100%"></div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-card>
+      </div>
+      <div v-if="true" class="col-md-3 col-lg-3 col-sm-12 col-xs-12 box_1">
+        <q-card class="no-shadow q-pa-sm">
+          <q-item class="q-pb-none q-pt-xs">
+            <q-item-section>
+              <q-item-label class="text-h4" style="font-weight: 500;letter-spacing: 3px;">{{ calcstat.numGroups }}</q-item-label>
+              <q-item-label :class="!$q.dark.isActive? 'text-grey-7':'text-white'" style="letter-spacing: 1px;">Gruppi Creati</q-item-label>
+            </q-item-section>
+
+            <q-item-section side>
+              <q-icon name="fas fa-users" class="box_1" size="60px"></q-icon>
+            </q-item-section>
+          </q-item>
+          <q-item class="q-py-xs" style="min-height: unset">
+            <q-item-section>
+              <div class="progress-base q-my-sm">
+                <div class="progress-bar-1" style="width:100%"></div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-card>
+      </div>
+      <div v-if="false" class="col-md-3 col-lg-3 col-sm-12 col-xs-12 box_2" style="border-left: 1px solid #efefef;"
+           v-bind:class="{'border-top': $q.platform.is.mobile}">
+        <q-card class="no-shadow q-pa-sm">
+          <q-item class="q-pb-none q-pt-xs">
+            <q-item-section>
+              <q-item-label class="text-h4" style="font-weight: 500;letter-spacing: 3px;">0</q-item-label>
+              <q-item-label :class="!$q.dark.isActive? 'text-grey-7':'text-white'" style="letter-spacing: 1px;">Uscite</q-item-label>
+            </q-item-section>
+
+            <q-item-section side>
+              <q-icon name="o_account_balance_wallet" class="box_2" size="60px"></q-icon>
+            </q-item-section>
+          </q-item>
+          <q-item class="q-py-xs" style="min-height: unset">
+            <q-item-section>
+              <div class="progress-base q-my-sm">
+                <div class="progress-bar-2" style="width:100%"></div>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CDashboard.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CDashboard.scss';
+</style>

src/components/CDashboard/index.ts

@@ -0,0 +1 @@
+export {default as CDashboard} from './CDashboard.vue'

src/components/index.ts

@@ -39,4 +39,5 @@ export * from './CMyUser'
 export * from './CVerifyTelegram'
 export * from './CMyFriends'
 export * from './CMyGroups'
+export * from './CDashboard'
 // export * from './CPreloadImages'

src/model/UserStore.ts

@@ -30,6 +30,12 @@ export interface IMyGroup {
   date_blocked?: Date
 }
 
+export interface ICalcStat {
+  numUsersReg: number
+  numMySkills: number
+  numGroups: number
+}
+
 export interface IUserProfile {
   img?: string
   nationality?: string
@@ -110,6 +116,7 @@ export interface IUserFields {
   numinvitatiattivi?: number
   cart?: ICart
   ordercart?: IOrderCart
+  calcstat?: ICalcStat|null
 }
 
 /*

src/root/home_freeplanet/home_freeplanet.ts

@@ -5,6 +5,7 @@ import {
 import { tools } from '@src/store/Modules/tools'
 import { CSkill } from '@/components/CSkill'
 import { CFinder } from '@/components/CFinder'
+import { CDashboard } from '@/components/CDashboard'
 import { CChartMap } from '@src/components/CChartMap'
 import { CMapsEsempio } from '@src/components/CMapsEsempio'
 import { CVerifyEmail } from '@src/components/CVerifyEmail'
@@ -17,7 +18,7 @@ import MixinBase from '@/mixins/mixin-base'
 
 export default defineComponent({
   name: 'Home',
-  components: { CSkill, CChartMap, CMapsEsempio, CFinder, CVerifyEmail, CVerifyTelegram },
+  components: { CSkill, CChartMap, CMapsEsempio, CFinder, CVerifyEmail, CVerifyTelegram, CDashboard },
   setup() {
     const globalStore = useGlobalStore()
     const userStore = useUserStore()

src/root/home_freeplanet/home_freeplanet.vue

@@ -27,6 +27,8 @@
 
         </CFinder>
 
+        <CDashboard></CDashboard>
+
       </div>
 
     </div>

src/root/home_insiemesipuo/home_insiemesipuo.ts

@@ -6,6 +6,7 @@ import { tools } from '@src/store/Modules/tools'
 import { CSkill } from '@/components/CSkill'
 import { CFinder } from '@/components/CFinder'
 import { CChartMap } from '@src/components/CChartMap'
+import { CDashboard } from '@/components/CDashboard'
 import { CMapsEsempio } from '@src/components/CMapsEsempio'
 import { CVerifyEmail } from '@src/components/CVerifyEmail'
 import { CVerifyTelegram } from '@src/components/CVerifyTelegram'
@@ -17,7 +18,7 @@ import MixinBase from '@/mixins/mixin-base'
 
 export default defineComponent({
   name: 'Home',
-  components: { CSkill, CChartMap, CMapsEsempio, CFinder, CVerifyEmail, CVerifyTelegram },
+  components: { CSkill, CChartMap, CMapsEsempio, CFinder, CVerifyEmail, CVerifyTelegram, CDashboard },
   setup() {
     const globalStore = useGlobalStore()
     const userStore = useUserStore()

src/root/home_insiemesipuo/home_insiemesipuo.vue

@@ -28,6 +28,8 @@
 
           </CFinder>
 
+          <CDashboard></CDashboard>
+
         </div>
       </div>
 

src/root/home_pdnm/home_pdnm.ts

@@ -6,6 +6,7 @@ import { tools } from '@src/store/Modules/tools'
 import { CSkill } from '@/components/CSkill'
 import { CFinder } from '@/components/CFinder'
 import { CChartMap } from '@src/components/CChartMap'
+import { CDashboard } from '@/components/CDashboard'
 import { CMapsEsempio } from '@src/components/CMapsEsempio'
 import { CVerifyEmail } from '@src/components/CVerifyEmail'
 import { CVerifyTelegram } from '@src/components/CVerifyTelegram'
@@ -17,7 +18,7 @@ import MixinBase from '@/mixins/mixin-base'
 
 export default defineComponent({
   name: 'Home',
-  components: { CSkill, CChartMap, CMapsEsempio, CFinder, CVerifyEmail, CVerifyTelegram },
+  components: { CSkill, CChartMap, CMapsEsempio, CFinder, CVerifyEmail, CVerifyTelegram, CDashboard },
   setup() {
     const globalStore = useGlobalStore()
     const userStore = useUserStore()

src/root/home_pdnm/home_pdnm.vue

@@ -27,6 +27,8 @@
 
         </CFinder>
 
+        <CDashboard></CDashboard>
+
         <q-banner rounded class="bg-primary text-white">
           <div class="text-h6 text-center">
             Accedi al Bot Telegram <br>

src/views/user/myprofile/myprofile.vue

@@ -1,13 +1,41 @@
 <template>
-  <div class="q-gutter-sm q-pa-sm q-pb-md">
-    <div v-if="myuser.date_reg" class="fit column no-wrap justify-evenly items-center content-start">
+  <div class="row q-col-gutter-sm q-ma-xs">
+    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+      <q-card v-if="myuser.date_reg" class="my-card" flat bordered>
+        <q-card-section>
+          <div class="text-overline" v-if="myuser.profile.qualifica"><em><span
+            class="qualifica">{{ myuser.profile.qualifica }}</span></em></div>
+          <div class="text-overline"><span
+            v-if="myuser.profile && myuser.profile.born_city">{{ myuser.profile.born_city }}</span>
+            <span
+              v-if="myuser.profile && myuser.profile.nationality && myuser.profile.nationality !== 'Italia'">({{
+                myuser.profile.nationality
+              }})</span>
+          </div>
+        </q-card-section>
 
-      <div class="">
-        <q-avatar size="140px">
+        <q-card-section horizontal>
+          <q-card-section class="q-pt-xs">
+            <div class="text-h5 q-mt-sm q-mb-xs">{{ myuser.username }}</div>
+            <div class="text-caption text-blue-grey-10">
+              {{ myuser.profile.biografia }}
+            </div>
+          </q-card-section>
+
+          <q-card-section class="col-5 flex flex-center">
+            <q-avatar size="140px" class="rounded-borders">
               <q-img :src="getImgUser()" :alt="username" img-class="imgprofile" height="140px" @click="showPic = true"/>
             </q-avatar>
-      </div>
+          </q-card-section>
+        </q-card-section>
 
+        <q-separator/>
+
+      </q-card>
+    </div>
+    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+      <q-card>
+        <q-card-section>
           <div v-if="static_data.functionality.SHOW_NAMESURNAME">
             <div class="text-h6">
               <span v-if="checkifShow('name')"> {{ myuser.name }}</span> <span v-if="checkifShow('surname')">{{
@@ -15,24 +43,21 @@
               }}</span>
             </div>
           </div>
-      <div class="col-12 text-h7 text-blue text-shadow-2">
-        {{ myuser.username }}
-      </div>
-      <div class="col-12 text-h7">
-        <span v-if="myuser.profile && myuser.profile.born_city">{{ myuser.profile.born_city }}</span> <span
-        v-if="myuser.profile && myuser.profile.nationality && myuser.profile.nationality !== 'Italia'">({{
-          myuser.profile.nationality
-        }})</span>
-      </div>
-      <div v-if="myuser._id" class="col-12 text-h8 q-mt-sm">
-        <span v-if="myuser.profile.qualifica">
-          <em><span class="qualifica">{{ myuser.profile.qualifica }}</span></em>
-        </span>
-      </div>
-      <div v-if="myuser._id" class="col-12 text-h8 q-mt-sm">
-        {{ myuser.profile.biografia }}
-      </div>
 
+          <div class="col-6 text-h6">
+            <CTitleBanner
+              class="" title="Info" bgcolor="bg-primary" clcolor="text-white"
+              myclass="myshad" :canopen="true">
+
+              <CDateTime
+                v-if="checkifShow('profile.dateofbirth') && !!myuser.profile.dateofbirth"
+                v-model:value="myuser.profile.dateofbirth"
+                :label="$t('reg.dateofbirth')"
+                :canEdit="false">
+              </CDateTime>
+
+              <q-card-section class="col-md-6 col-sm-6 q-ma-xs col-xs-12 flex flex-center">
+                <div>
                   <div v-if="myuser.username !== userStore.my.username">
                     <q-btn
                       v-if="!userStore.IsMyFriendByUsername(myuser.username) && !userStore.IsAskedFriendByUsername(myuser.username)"
@@ -49,7 +74,6 @@
 
                   </div>
 
-
                   <q-btn
                     v-if="myuser.username === myusername()" icon="fas fa-pencil-alt"
                     color="blue"
@@ -57,10 +81,10 @@
                     :label="$t('otherpages.modifprof')"
                     to="/editprofile">
                   </q-btn>
+                </div>
 
-      <div v-if="myuser._id" class="myrow justify-evenly items-center q-pa-sm q-ma-sm">
-
-        <div class="col-6 q-ma-xs">
+                <div v-if="myuser._id" class="myrow justify-evenly items-center q-pa-xs q-ma-xs">
+                  <div class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
                     <q-btn
                       v-if="getLinkUserTelegram()" icon="fab fa-telegram"
                       color="blue" type="a"
@@ -71,7 +95,7 @@
                     </q-btn>
 
                   </div>
-        <div class="col-6 q-ma-xs">
+                  <div class="col-md-6 col-sm-6 q-ma-xs col-xs-12">
                     <q-btn
                       v-if="getLinkWebSite()" icon="fas fa-globe"
                       color="blue" type="a"
@@ -82,6 +106,20 @@
                     </q-btn>
                   </div>
                 </div>
+              </q-card-section>
+
+            </CTitleBanner>
+
+          </div>
+
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+
+  <div class="q-gutter-sm q-pa-sm q-pb-md">
+    <div v-if="myuser.date_reg" class="fit column no-wrap justify-evenly items-center content-start">
+
     </div>
     <div v-else class="fit column no-wrap justify-evenly items-center content-start">
       <q-skeleton type="QAvatar" size="140px" height="140px" animation="fade"/>
@@ -120,28 +158,6 @@
 
     </CTitleBanner>
 
-    <div v-if="myuser._id">
-      <CTitleBanner
-        class="" :title="$t('dashboard.info')" bgcolor="bg-primary" clcolor="text-white"
-        myclass="myshad" :canopen="true">
-
-        <div v-if="myuser.profile" class="fit column no-wrap justify-evenly content-start">
-
-          <div class="col-6 text-h6">
-            <CDateTime
-              v-if="checkifShow('profile.dateofbirth') && !!myuser.profile.dateofbirth"
-              v-model:value="myuser.profile.dateofbirth"
-              :label="$t('reg.dateofbirth')"
-              :canEdit="false">
-            </CDateTime>
-
-          </div>
-
-        </div>
-
-      </CTitleBanner>
-    </div>
-
 
   </div>
   <q-dialog