- Aggiungere numero di persone registrate, e num di competenze, e numGruppi
This commit is contained in:
paoloar77
74
src/components/CDashboard/CDashboard.scss
Executable file
74
src/components/CDashboard/CDashboard.scss
Executable file
@@ -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;
|
||||
}
|
||||
30
src/components/CDashboard/CDashboard.ts
Executable file
30
src/components/CDashboard/CDashboard.ts
Executable file
@@ -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
|
||||
}
|
||||
},
|
||||
})
|
||||
100
src/components/CDashboard/CDashboard.vue
Executable file
100
src/components/CDashboard/CDashboard.vue
Executable file
@@ -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>
|
||||
1
src/components/CDashboard/index.ts
Executable file
1
src/components/CDashboard/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export {default as CDashboard} from './CDashboard.vue'
|
||||
@@ -39,4 +39,5 @@ export * from './CMyUser'
|
||||
export * from './CVerifyTelegram'
|
||||
export * from './CMyFriends'
|
||||
export * from './CMyGroups'
|
||||
export * from './CDashboard'
|
||||
// export * from './CPreloadImages'
|
||||
|
||||
Reference in New Issue
Block a user