- Downline User

- Not registered if already exists.
- Forgot Password

src/components/CMyDashboard/CMyDashboard.ts

@@ -0,0 +1,73 @@
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { UserStore } from '../../store/Modules'
+import { DefaultUser } from '@src/store/Modules/UserStore'
+
+import MixinUsers from '../../mixins/mixin-users'
+import { CProfile } from '../CProfile'
+import { CTitleBanner } from '../CTitleBanner'
+import { CMyFieldDb } from '../CMyFieldDb'
+import { CCopyBtn } from '../CCopyBtn'
+import { CUserBadge } from '../CUserBadge'
+
+@Component({
+  components: { CProfile, CTitleBanner, CMyFieldDb, CCopyBtn, CUserBadge }
+})
+
+export default class CMyDashboard extends MixinUsers {
+  @Prop({ required: true }) public username
+
+  public $v
+  public $q
+  public dashboard = { aportador: DefaultUser, numpeople_aportador: 0, downline: [], downbyuser: [] }
+
+  public mythis() {
+    return this
+  }
+
+  public created() {
+    this.update_username()
+  }
+
+  @Watch('this.username')
+  public changeusername() {
+    this.update_username()
+
+  }
+  public update_username() {
+    if (this.username === '')
+      this.username = this.getMyUsername()
+
+    UserStore.actions.getDashboard({ username: this.username }).then((ris) => {
+      // console.log('getDashboard', ris)
+      if (ris.aportador === undefined) {
+        this.dashboard.aportador = DefaultUser
+      } else {
+        this.dashboard.aportador = ris.aportador
+      }
+      if (ris.numpeople_aportador === undefined) {
+        this.dashboard.numpeople_aportador = 0
+      } else {
+        this.dashboard.numpeople_aportador = ris.numpeople_aportador
+      }
+      if (ris.downline === undefined) {
+        this.dashboard.downline = []
+      } else {
+        this.dashboard.downline = ris.downline
+      }
+
+      if (ris.downbyuser === undefined) {
+        this.dashboard.downbyuser = []
+      } else {
+        this.dashboard.downbyuser = ris.downbyuser
+      }
+
+      // console.log('this.dashboard', this.dashboard)
+    })
+  }
+
+  get getRefLink() {
+    return UserStore.getters.getRefLink(this.username)
+  }
+
+}

src/components/CMyDashboard/CMyDashboard.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="q-ma-xs q-gutter-xs q-pa-xs" v-if="username !== ''">
+    <CTitleBanner class="q-pa-xs" :title="$t('pages.dashboard') +` (`+ username + `)`" bgcolor="bg-info" clcolor="text-white"
+                  mystyle=" " myclass="myshad">
+
+      <CCopyBtn :title="$t('reg.reflink')" :texttocopy="getRefLink">
+
+      </CCopyBtn>
+
+      <CTitleBanner class="shadow-2" :title="$t('reg.aportador_solidario')" bgcolor="bg-accent"
+                    clcolor="text-white"
+                    mystyle=" " myclass="myshad" :canopen="true">
+
+        <CUserBadge v-if="!!dashboard.aportador.name" :user="dashboard.aportador" :index="0" :numpeople="dashboard.numpeople_aportador"
+                    mycolor="accent">
+
+        </CUserBadge>
+        <div v-else class="q-pa-sm text-center">
+          Nessun Invitante
+        </div>
+      </CTitleBanner>
+
+      <CTitleBanner class="shadow-2 rounded-borders" :title="$t('dashboard.downline')" bgcolor="bg-positive"
+                    clcolor="text-white"
+                    mystyle=" " myclass="myshad" :canopen="true">
+
+        <q-list bordered v-if="!!dashboard.downline && dashboard.downline.length > 0" class="rounded-borders">
+          <div v-for="(user, index) in dashboard.downline" :key="index">
+            <CUserBadge :yourinvite="true" :user="user" mycolor="primary" :index="index" :numpeople="dashboard.downbyuser[user.username].length">
+
+            </CUserBadge>
+            <div style="margin-left:10px;" v-for="(user2, index2) in dashboard.downbyuser[user.username]" :key="index2">
+              <CUserBadge :yourinvite="false" :user="user2" mycolor="orange" :index="index2" :numpeople="dashboard.downbyuser[user2.username].length">
+
+              </CUserBadge>
+            </div>
+          </div>
+        </q-list>
+        <div v-else class="q-pa-sm text-center">
+          Nessun Invitato
+        </div>
+      </CTitleBanner>
+
+    </CTitleBanner>
+
+    <!--
+        <CTitleBanner class="q-pa-xs" :title="$t('text.dashboard.madegift')" bgcolor="bg-info" clcolor="text-white"
+                      mystyle=" " myclass="myshad">
+          <div class="q-pa-sm text-center">
+
+            <div v-if="madegift" class="q-gutter-md">
+              <q-icon name="fas fa-gift" size="lg" color="green"></q-icon>
+              <q-icon name="fas fa-thumbs-up" size="lg" color="green"></q-icon>
+            </div>
+            <div v-else class="q-gutter-md">
+              <q-icon name="fas fa-gift" size="lg" color="grey"></q-icon>
+              <q-icon name="fas fa-exclamation-triangle" size="lg" color="orange"></q-icon>
+            </div>
+
+          </div>
+        </CTitleBanner>
+    -->
+  </div>
+</template>
+
+<script lang="ts" src="./CMyDashboard.ts">
+</script>
+<style lang="scss" scoped>
+  @import './CMyDashboard.scss';
+</style>

src/components/CMyDashboard/index.ts

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

src/components/CRequisiti/CRequisiti.scss

@@ -0,0 +1,14 @@
+.requisiti_on, .requisiti_off{
+  margin: 4px;
+  border-radius: 3rem;
+  padding: 8px;
+}
+
+.requisiti_on {
+  border: solid 3px #49b502;
+}
+
+.requisiti_off {
+  border: solid 3px #ef0901;
+}
+

src/components/CRequisiti/CRequisiti.ts

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { toolsext } from '@src/store/Modules/toolsext'
+
+@Component({})
+
+export default class CRequisiti extends Vue {
+  @Prop({ required: true }) public statebool: boolean
+  @Prop({ required: true }) public msgTrue: string
+  @Prop({ required: true }) public msgFalse: string
+
+  get getcl() {
+    if (this.statebool)
+      return 'requisiti_on'
+    else
+      return 'requisiti_off'
+  }
+}

src/components/CRequisiti/CRequisiti.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="q-ma-md">
+    <div :class="getcl">
+      <div v-if="statebool" v-html="msgTrue"></div>
+      <div v-else v-html="msgFalse"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CRequisiti.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './CRequisiti.scss';
+</style>

src/components/CRequisiti/index.ts

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

src/components/CUserBadge/CUserBadge.scss

@@ -0,0 +1,7 @@
+.myuserbadge{
+  margin-top: 8px;
+  margin-bottom: 8px;
+  border: solid 1px #4198ef;
+  border-radius: 1rem;
+  padding: 2px;
+}

src/components/CUserBadge/CUserBadge.ts

@@ -0,0 +1,58 @@
+import Vue from 'vue'
+import { GlobalStore } from '@store'
+import { UserStore } from '../../store/Modules'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import { validationMixin } from 'vuelidate'
+
+import MixinBase from '../../mixins/mixin-base'
+import { IUserFields } from '../../model'
+
+@Component({
+  name: 'CUserBadge',
+  components: {  }
+})
+
+export default class CUserBadge extends MixinBase {
+  @Prop({ required: true }) public index: number
+  @Prop({ required: false, default: false }) public yourinvite: boolean
+  @Prop({ required: true }) public user: IUserFields
+  @Prop({ required: true }) public numpeople: number
+  @Prop({ required: true }) public mycolor: string
+  public $v
+  public $t: any
+
+  public getletter(user) {
+    return user.name[0].toUpperCase()
+  }
+
+  public getnumber(user, index) {
+    return index
+  }
+
+  public getstatecolor(user) {
+    return (user.profile.teleg_id) ? 'green' : 'gray'
+  }
+
+  public getmoneycolor(user) {
+    return (user.made_gift) ? 'green' : 'gray'
+  }
+
+  get madegift() {
+    return UserStore.state.my.made_gift
+  }
+
+  public getzoomcolor(user) {
+    return (user.profile.saw_zoom_presentation) ? 'green' : 'gray'
+  }
+
+  public get2peoplecolor() {
+    return (this.getnumpeople() >= 2) ? 'green' : 'gray'
+  }
+
+  public getnumpeople() {
+    return this.numpeople
+  }
+
+}

src/components/CUserBadge/CUserBadge.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <q-item class="q-my-sm q-pa-sm myuserbadge shadow-5" clickable v-ripple>
+      <q-item-section avatar>
+        <div class="row" style="margin-left: 4px;">
+          <q-avatar v-if="yourinvite" :text-color="mycolor" size="md">
+            {{ getnumber(user, index + 1) }}°
+          </q-avatar>
+          <q-avatar :color="mycolor" text-color="white" size="md">
+            {{ getletter(user) }}
+          </q-avatar>
+        </div>
+      </q-item-section>
+
+      <q-item-section>
+        <q-item-label>{{ user.name }} {{ user.surname }}<br>
+          <span class="text-grey">({{ user.username }})</span>
+        </q-item-label>
+        <!--<q-item-label caption lines="1">{{ user.email }}</q-item-label>-->
+      </q-item-section>
+
+      <q-item-section side>
+        <div class="row q-gutter-xs justify-center items-center">
+          <q-icon size="xs" name="fab fa-telegram" :color="getstatecolor(user)"></q-icon>
+          <q-icon size="xs" name="fas fa-video" :color="getzoomcolor(user)"></q-icon>
+          <q-avatar :text-color="mycolor" size="md">
+            {{ getnumpeople() }}
+          </q-avatar>
+          <q-icon size="xs" name="fas fa-user-friends" :color="get2peoplecolor()"></q-icon>
+        </div>
+      </q-item-section>
+    </q-item>
+  </div>
+</template>
+
+<script lang="ts" src="./CUserBadge.ts">
+</script>
+
+<style lang="scss" scoped>
+  @import './CUserBadge.scss';
+</style>

src/components/CUserBadge/index.ts

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

src/components/CVideo/CVideo.ts

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { UserStore } from '@store'
+import { tools } from '../../store/Modules/tools'
+import { toolsext } from '@src/store/Modules/toolsext'
+
+import MixinBase from '../../mixins/mixin-base'
+import { CTitleBanner } from '../CTitleBanner'
+
+@Component({
+  components: {  }
+})
+
+export default class CVideo extends MixinBase {
+  @Prop({ required: true }) public myvideokey: string
+  @Prop({ required: false, default: '' }) public title: boolean
+
+  get getvideotit() {
+    return this.title
+  }
+}

src/components/CVideo/CVideo.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="row justify-evenly items-center q-gutter-sm ">
+
+      <div class="text-center">
+        <div class="subtitle_small text-blue" v-html="getvideotit"></div>
+        <div class="">
+          <iframe
+            :width="tools.getwidthscale(mythis(), getValDb('YT_W', false), 800)"
+            :height="tools.getheightbywidth(mythis(), getValDb('YT_W', false), getValDb('YT_H', false), 800)"
+            :src="tools.getvideobyidyoutube(myvideokey)"
+            frameborder="0"
+            allowfullscreen
+          ></iframe>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CVideo.ts">
+</script>
+<style lang="scss" scoped>
+  @import './CVideo.scss';
+</style>

src/components/CVideo/index.ts

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