geer-builder 1.2.660 → 1.2.662
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/GCheckout.vue
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="checkout" v-if="loading_done">
|
|
3
|
-
|
|
3
|
+
<div class="desktop-only2" v-if="$q.platform.is.hasOwnProperty('desktop') || checkout_fix">
|
|
4
4
|
<div v-if="product_list.length>0">
|
|
5
5
|
<div v-if="this.user_info">
|
|
6
6
|
<div class="grid-content">
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
<div v-if="(merch.voucher_deductions*-1) > 0">Voucher: {{payment_method.payment_method_id =='gc_points' ? 'GC' : main_currency}} -{{$_formatNumber(merch.voucher_deductions, { decimal: 2})}}</div>
|
|
58
58
|
<div>Shipping Fee: {{payment_method.payment_method_id =='gc_points' ? 'GC' : main_currency}} {{$_formatNumber(merch.shipping_fee, { decimal: 2})}}</div>
|
|
59
59
|
<div class="g-cash-lable" v-if="show_gcash_fee">GCash Fee: PHP {{$_formatNumber(gcash_fee, { decimal: 2})}}</div>
|
|
60
|
-
|
|
60
|
+
<div class="text-bold">Order Total ({{merch.total_quantity}} Item): {{payment_method.payment_method_id =='gc_points' ? 'GC' : main_currency}} {{show_gcash_fee ? $_formatNumber(merch.order_total + gcash_fee, { decimal: 2}) : $_formatNumber(merch.order_total, { decimal: 2}) }}</div>
|
|
61
61
|
</div>
|
|
62
62
|
</div>
|
|
63
63
|
</div>
|
|
@@ -91,20 +91,62 @@
|
|
|
91
91
|
<q-radio dense v-model="online_payment_choice" :val="onlines" :label="onlines.online_payment_label" />
|
|
92
92
|
</div>
|
|
93
93
|
</div>
|
|
94
|
-
<div class="manual-pay-method" v-if="payment_method.payment_method_id == 'dragon_pay'" >
|
|
95
|
-
<div v-for="(onlines, ind) in available_payment_channel" class="dragon-pay-list" :key="ind">
|
|
94
|
+
<div class="manual-pay-method" style="padding: 0;" v-if="payment_method.payment_method_id == 'dragon_pay'" >
|
|
95
|
+
<!-- <div v-for="(onlines, ind) in available_payment_channel" class="dragon-pay-list" :key="ind">
|
|
96
96
|
<q-item tag="label" v-ripple>
|
|
97
97
|
<q-item-section avatar>
|
|
98
|
-
<!-- <q-radio v-model="color" val="orange" color="orange" /> -->
|
|
99
98
|
<q-radio v-model="dragon_pay_choice" :val="onlines" :label="onlines.shortName" />
|
|
100
99
|
</q-item-section>
|
|
101
100
|
<q-item-section>
|
|
102
|
-
<!-- <q-item-label>Orange</q-item-label> -->
|
|
103
101
|
<q-item-label caption>{{`${onlines.longName}`}}</q-item-label>
|
|
104
102
|
</q-item-section>
|
|
105
103
|
</q-item>
|
|
106
|
-
|
|
107
|
-
|
|
104
|
+
</div> -->
|
|
105
|
+
<q-card flat>
|
|
106
|
+
<q-tabs
|
|
107
|
+
v-model="payment_channel_tab"
|
|
108
|
+
dense
|
|
109
|
+
class="text-grey"
|
|
110
|
+
active-color="primary"
|
|
111
|
+
indicator-color="primary"
|
|
112
|
+
align="justify"
|
|
113
|
+
narrow-indicator
|
|
114
|
+
>
|
|
115
|
+
<q-tab v-for="(tab, index) in payment_channel_group" :key="index" :name="tab.id" :label="tab.name" />
|
|
116
|
+
<q-tab v-if="payment_channel_uncategorized && payment_channel_uncategorized.length" name="others" label="Others" />
|
|
117
|
+
</q-tabs>
|
|
118
|
+
|
|
119
|
+
<q-separator />
|
|
120
|
+
|
|
121
|
+
<q-tab-panels v-model="payment_channel_tab" animated>
|
|
122
|
+
<q-tab-panel v-for="(tab, index) in payment_channel_group" :key="index" :name="tab.id">
|
|
123
|
+
<div v-for="(onlines, ind) in available_payment_channel.filter(data => tab.types.includes(data.type))" class="dragon-pay-list" :key="ind">
|
|
124
|
+
<q-item tag="label" v-ripple style="align-items: center;">
|
|
125
|
+
<q-item-section avatar>
|
|
126
|
+
<q-radio v-model="dragon_pay_choice" :val="onlines" />
|
|
127
|
+
</q-item-section>
|
|
128
|
+
<q-item-section style="display: block;">
|
|
129
|
+
<img style="display: inline-block; vertical-align: middle; width: 100px; margin-right: 10px;" :src="getPaymentLogo(onlines)" />
|
|
130
|
+
<q-item-label style="display: inline-block; vertical-align: middle;" caption>{{`${onlines.longName}`}}</q-item-label>
|
|
131
|
+
</q-item-section>
|
|
132
|
+
</q-item>
|
|
133
|
+
</div>
|
|
134
|
+
</q-tab-panel>
|
|
135
|
+
<q-tab-panel v-if="payment_channel_uncategorized && payment_channel_uncategorized.length" name="others">
|
|
136
|
+
<div v-for="(onlines, ind) in payment_channel_uncategorized" class="dragon-pay-list" :key="ind">
|
|
137
|
+
<q-item tag="label" v-ripple style="align-items: center;">
|
|
138
|
+
<q-item-section avatar>
|
|
139
|
+
<q-radio v-model="dragon_pay_choice" :val="onlines" />
|
|
140
|
+
</q-item-section>
|
|
141
|
+
<q-item-section style="display: block;">
|
|
142
|
+
<img style="display: inline-block; vertical-align: middle; width: 100px; margin-right: 10px;" :src="getPaymentLogo(onlines.logo)" />
|
|
143
|
+
<q-item-label style="display: inline-block; vertical-align: middle;" caption>{{`${onlines.longName}`}}</q-item-label>
|
|
144
|
+
</q-item-section>
|
|
145
|
+
</q-item>
|
|
146
|
+
</div>
|
|
147
|
+
</q-tab-panel>
|
|
148
|
+
</q-tab-panels>
|
|
149
|
+
</q-card>
|
|
108
150
|
</div>
|
|
109
151
|
</div>
|
|
110
152
|
<div class="grid-right">
|
|
@@ -112,7 +154,7 @@
|
|
|
112
154
|
<div class="border-delivery"></div>
|
|
113
155
|
<div class="header__container">
|
|
114
156
|
<div class="header">
|
|
115
|
-
|
|
157
|
+
<q-icon name="fa fa-truck" size="14px" class="q-mr-sm"></q-icon>
|
|
116
158
|
Shipping & Billing
|
|
117
159
|
</div>
|
|
118
160
|
<div v-if="shipping_address.full_name=='' || is_change_address" class="addressbtn">
|
|
@@ -135,8 +177,8 @@
|
|
|
135
177
|
</div>
|
|
136
178
|
<div v-else v-for="(addre, i) in all_address" :key="i" class="shipping">
|
|
137
179
|
<div class="shipping-left">
|
|
138
|
-
|
|
139
|
-
|
|
180
|
+
<q-radio v-model="selectedAddress" :val="i" label="" />
|
|
181
|
+
<div v-if="!addre.default" class="text-center" style="margin-top:15px;padding-right:15px;" @click="archiveAddressPrompt(addre.id)"><q-icon name="fa fa-trash" size="12px"></q-icon></div>
|
|
140
182
|
</div>
|
|
141
183
|
<div class="shipping-right">
|
|
142
184
|
<div class="name"> {{addre.full_name}}</div>
|
|
@@ -191,7 +233,7 @@
|
|
|
191
233
|
</q-dialog>
|
|
192
234
|
</div>
|
|
193
235
|
</div>
|
|
194
|
-
<div class="mobile-
|
|
236
|
+
<div class="mobile-onlyy2" v-if="$q.platform.is.hasOwnProperty('mobile') && !checkout_fix">
|
|
195
237
|
<div class="mobile-checkout-holder">
|
|
196
238
|
<div class="address-holder">
|
|
197
239
|
<div class="address-header">
|
|
@@ -373,7 +415,6 @@ import EcommerceMaintenance from './dialogs/EcommerceMaintenance';
|
|
|
373
415
|
|
|
374
416
|
|
|
375
417
|
export default {
|
|
376
|
-
|
|
377
418
|
components: { EcommerceMaintenance,SelectShippingOptions, AddNewAddressForm ,ProcessCheckoutConfirmDialog, GLoader, axios ,ChooseCourierDialog, SelectVoucherDialog},
|
|
378
419
|
mixins: [GlobalMixins],
|
|
379
420
|
props:{ checkout_list: Array, show_discount_badge: Boolean },
|
|
@@ -435,12 +476,31 @@ export default {
|
|
|
435
476
|
dragon_pay_choice:"",
|
|
436
477
|
check:{},
|
|
437
478
|
dragon_pay_amount:[],
|
|
438
|
-
filtered_payment_channel:[],
|
|
479
|
+
// filtered_payment_channel:[],
|
|
439
480
|
gcash_fee:0,
|
|
440
481
|
show_gcash_fee:false,
|
|
441
482
|
online_payment_only:false,
|
|
442
483
|
package_free_shipping:false,
|
|
443
|
-
merchant_free_shipping:false
|
|
484
|
+
merchant_free_shipping:false,
|
|
485
|
+
payment_channel_group: [
|
|
486
|
+
{
|
|
487
|
+
id: 'otc',
|
|
488
|
+
types: [ 2, 4, 256 ],
|
|
489
|
+
name: 'Over-the-Counter'
|
|
490
|
+
},
|
|
491
|
+
{
|
|
492
|
+
id: 'ewallet',
|
|
493
|
+
types: [ 8, 32, 128 ],
|
|
494
|
+
name: 'E-Wallets'
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
id: 'online_banking',
|
|
498
|
+
types: [ 1, 64, 512, 1024 ],
|
|
499
|
+
name: 'Online Banking'
|
|
500
|
+
}
|
|
501
|
+
],
|
|
502
|
+
payment_channel_tab: 'otc',
|
|
503
|
+
checkout_fix: false
|
|
444
504
|
}),
|
|
445
505
|
async mounted()
|
|
446
506
|
{
|
|
@@ -594,10 +654,20 @@ export default {
|
|
|
594
654
|
this.getPaymentChannel();
|
|
595
655
|
}
|
|
596
656
|
|
|
657
|
+
if (this.public_settings.hasOwnProperty('checkout_fix') && this.public_settings.checkout_fix)
|
|
658
|
+
{
|
|
659
|
+
this.checkout_fix = true;
|
|
660
|
+
}
|
|
597
661
|
},
|
|
598
662
|
computed:
|
|
599
663
|
{
|
|
600
|
-
|
|
664
|
+
payment_channel_uncategorized()
|
|
665
|
+
{
|
|
666
|
+
if (this.payment_channel_group && this.payment_channel_group.length && this.available_payment_channel && this.available_payment_channel.length)
|
|
667
|
+
{
|
|
668
|
+
return this.available_payment_channel.filter(data => !this.payment_channel_group.find(tab => tab.types.includes(data.type)));
|
|
669
|
+
}
|
|
670
|
+
}
|
|
601
671
|
},
|
|
602
672
|
watch:
|
|
603
673
|
{
|
|
@@ -638,6 +708,27 @@ export default {
|
|
|
638
708
|
},
|
|
639
709
|
methods:
|
|
640
710
|
{
|
|
711
|
+
getPaymentLogo(data)
|
|
712
|
+
{
|
|
713
|
+
const logos =
|
|
714
|
+
{
|
|
715
|
+
VLRC: 'https://allthebestloans.com/wp-content/uploads/2021/09/screenshot_30.jpg',
|
|
716
|
+
TBTG: 'https://upload.wikimedia.org/wikipedia/en/thumb/9/92/Tambunting_Pawnshop_brand_logo.svg/1200px-Tambunting_Pawnshop_brand_logo.svg.png',
|
|
717
|
+
CEBB: 'https://www.cebuanalhuillier.com/wp-content/uploads/2018/02/CLRB-new-logo.png',
|
|
718
|
+
DPAY: 'https://load.dragonpay.ph/images/dp-logo.png',
|
|
719
|
+
DPWL: 'https://load.dragonpay.ph/images/dp-logo.png',
|
|
720
|
+
PBCM: 'https://manilastandard.net/wp-content/uploads/2019/07/61b9c_pbcom.png'
|
|
721
|
+
};
|
|
722
|
+
|
|
723
|
+
if (logos[data.procId])
|
|
724
|
+
{
|
|
725
|
+
return logos[data.procId];
|
|
726
|
+
}
|
|
727
|
+
else if (data.logo)
|
|
728
|
+
{
|
|
729
|
+
return data.logo;
|
|
730
|
+
}
|
|
731
|
+
},
|
|
641
732
|
async getFreePackageList()
|
|
642
733
|
{
|
|
643
734
|
this.free_shipping = this.product_list.every((prod) => prod.product.hasOwnProperty('free_shipping_applied' || prod.product.free_shipping_applied === true));
|
|
@@ -678,25 +769,24 @@ export default {
|
|
|
678
769
|
{
|
|
679
770
|
if(this.public_settings.hasOwnProperty('dragonpay_details') && this.public_settings.dragonpay_details.active)
|
|
680
771
|
{
|
|
681
|
-
this.filtered_payment_channel = this.public_settings.dragonpay_details.hasOwnProperty('active_payment') ? this.public_settings.dragonpay_details.active_payment : [];
|
|
772
|
+
// this.filtered_payment_channel = this.public_settings.dragonpay_details.hasOwnProperty('active_payment') ? this.public_settings.dragonpay_details.active_payment : [];
|
|
682
773
|
try
|
|
683
774
|
{
|
|
684
775
|
let ret = await this.$_fbCall('memberGetPaymentChannel', {amount:this.dragon_pay_amount});
|
|
685
776
|
let return_payment = ret.data;
|
|
686
777
|
// console.log(return_payment, 'All Dragonpay channel');
|
|
687
778
|
let x = 0;
|
|
688
|
-
let filtered_payment = [];
|
|
689
|
-
for (const element of return_payment)
|
|
690
|
-
{
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
}
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
779
|
+
// let filtered_payment = [];
|
|
780
|
+
// for (const element of return_payment)
|
|
781
|
+
// {
|
|
782
|
+
// if(this.filtered_payment_channel.includes(element.shortName))
|
|
783
|
+
// {
|
|
784
|
+
// filtered_payment.push(element);
|
|
785
|
+
// }
|
|
786
|
+
// x++;
|
|
787
|
+
// }
|
|
788
|
+
// console.log(return_payment);
|
|
789
|
+
this.available_payment_channel = return_payment.filter(data => data.status === 'A');
|
|
700
790
|
}
|
|
701
791
|
catch (error)
|
|
702
792
|
{
|
|
@@ -2273,20 +2363,20 @@ export default {
|
|
|
2273
2363
|
width: 1200px;
|
|
2274
2364
|
|
|
2275
2365
|
}
|
|
2276
|
-
@media only screen and (max-width: 768px) {
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
}
|
|
2366
|
+
// @media only screen and (max-width: 768px) {
|
|
2367
|
+
// .desktop-only {
|
|
2368
|
+
// display: none;
|
|
2369
|
+
// }
|
|
2370
|
+
// .mobile-onlyy {
|
|
2371
|
+
// display: block !important;
|
|
2372
|
+
// }
|
|
2373
|
+
// }
|
|
2284
2374
|
|
|
2285
2375
|
.checkout{
|
|
2286
2376
|
font-size: 14px;
|
|
2287
2377
|
//mobile css
|
|
2288
|
-
.mobile-
|
|
2289
|
-
display: none;
|
|
2378
|
+
.mobile-onlyy2{
|
|
2379
|
+
// display: none;
|
|
2290
2380
|
.mobile-checkout-holder{
|
|
2291
2381
|
position: fixed;
|
|
2292
2382
|
top:70px;
|
|
@@ -2550,12 +2640,23 @@ export default {
|
|
|
2550
2640
|
}
|
|
2551
2641
|
|
|
2552
2642
|
//desktop css
|
|
2553
|
-
.desktop-
|
|
2643
|
+
.desktop-only2{
|
|
2554
2644
|
.grid-content{
|
|
2555
2645
|
display: grid;
|
|
2556
2646
|
grid-template-columns: 65% 35%;
|
|
2557
2647
|
grid-gap: 12px;
|
|
2558
2648
|
|
|
2649
|
+
@media screen and (max-width: 991px) {
|
|
2650
|
+
grid-template-columns: auto;
|
|
2651
|
+
}
|
|
2652
|
+
|
|
2653
|
+
.q-tabs__content {
|
|
2654
|
+
@media screen and (max-width: 600px) {
|
|
2655
|
+
display: grid;
|
|
2656
|
+
grid-template-columns: auto;
|
|
2657
|
+
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
|
2658
|
+
}
|
|
2659
|
+
}
|
|
2559
2660
|
|
|
2560
2661
|
.grid-left{
|
|
2561
2662
|
overflow: hidden;
|
|
@@ -2590,7 +2691,7 @@ export default {
|
|
|
2590
2691
|
|
|
2591
2692
|
&__product_ordered{
|
|
2592
2693
|
font-size: 15px;
|
|
2593
|
-
width:
|
|
2694
|
+
width: 100%;
|
|
2594
2695
|
text-align: left;
|
|
2595
2696
|
padding: 18px;
|
|
2596
2697
|
font-weight: 500;
|
|
@@ -2653,16 +2754,32 @@ export default {
|
|
|
2653
2754
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
2654
2755
|
grid-gap: 20px;
|
|
2655
2756
|
|
|
2757
|
+
@media screen and (max-width: 768px) {
|
|
2758
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
2759
|
+
> div:nth-last-child(2), > div:last-child {
|
|
2760
|
+
display: none;
|
|
2761
|
+
}
|
|
2762
|
+
}
|
|
2763
|
+
|
|
2764
|
+
@media screen and (max-width: 500px) {
|
|
2765
|
+
grid-template-columns: auto;
|
|
2766
|
+
}
|
|
2767
|
+
|
|
2656
2768
|
&__sku{
|
|
2657
2769
|
text-align: left;
|
|
2658
2770
|
font-weight: bold;
|
|
2771
|
+
@media screen and (max-width: 500px) {
|
|
2772
|
+
text-align: center;
|
|
2773
|
+
}
|
|
2659
2774
|
}
|
|
2660
2775
|
&__price{
|
|
2661
2776
|
text-align: left;
|
|
2662
2777
|
font-weight: normal;
|
|
2663
2778
|
color: #aaa;
|
|
2664
2779
|
font-size: 12px;
|
|
2665
|
-
|
|
2780
|
+
@media screen and (max-width: 500px) {
|
|
2781
|
+
text-align: center;
|
|
2782
|
+
}
|
|
2666
2783
|
}
|
|
2667
2784
|
&__quantity{
|
|
2668
2785
|
text-align: center;
|
|
@@ -2761,6 +2878,18 @@ export default {
|
|
|
2761
2878
|
min-height: 46px;
|
|
2762
2879
|
height: 76px;
|
|
2763
2880
|
}
|
|
2881
|
+
@media screen and (max-width: 768px) {
|
|
2882
|
+
> div {
|
|
2883
|
+
grid-template-columns: auto !important;
|
|
2884
|
+
> div:nth-child(2) {
|
|
2885
|
+
order: -1;
|
|
2886
|
+
margin-bottom: 10px;
|
|
2887
|
+
}
|
|
2888
|
+
> div:last-child {
|
|
2889
|
+
margin-top: 10px;
|
|
2890
|
+
}
|
|
2891
|
+
}
|
|
2892
|
+
}
|
|
2764
2893
|
}
|
|
2765
2894
|
|
|
2766
2895
|
.payment_method
|
|
@@ -2783,6 +2912,12 @@ export default {
|
|
|
2783
2912
|
display: grid;
|
|
2784
2913
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
2785
2914
|
place-items: center;
|
|
2915
|
+
@media screen and (max-width: 768px) {
|
|
2916
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
2917
|
+
}
|
|
2918
|
+
@media screen and (max-width: 500px) {
|
|
2919
|
+
grid-template-columns: auto;
|
|
2920
|
+
}
|
|
2786
2921
|
}
|
|
2787
2922
|
.btns
|
|
2788
2923
|
{
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
<div class="row text-left order-no">
|
|
13
13
|
<div class="col-7 label"><div>STATUS : REFILL/CLAIMED</div>
|
|
14
14
|
<div>EMAIL : {{customer.email}}</div>
|
|
15
|
+
<div v-if="slot_reference">SLOT CODE : {{slot_reference}}</div>
|
|
15
16
|
<div v-if="show_customer_details">CONTACT : {{customer.contact_number}}</div>
|
|
16
17
|
<div v-if="show_customer_details">ADDRESS : {{customer.address}}</div>
|
|
17
|
-
<div v-if="show_customer_details">Slot Reference : {{slot_reference}}</div>
|
|
18
18
|
</div>
|
|
19
19
|
<div class="col-5 label" style="margin-top:15px;">Order No. Receipt No. : {{ number }}</div>
|
|
20
20
|
</div>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<q-card class="search-genealogy-table" >
|
|
3
|
-
<q-table :pagination.sync="pagination" outline :data="table_data" :rows-per-page-options="[]" @request="paginate" :loading="table_loading" :columns="table_column"></q-table>
|
|
3
|
+
<q-table @row-click="zoom" :pagination.sync="pagination" outline :data="table_data" :rows-per-page-options="[]" @request="paginate" :loading="table_loading" :columns="table_column"></q-table>
|
|
4
4
|
</q-card>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
@@ -229,9 +229,13 @@ export default
|
|
|
229
229
|
// // this.query = await this.db_member_cashout.getMany(this.pagination);
|
|
230
230
|
// this.table_loading = false;
|
|
231
231
|
}
|
|
232
|
+
},
|
|
233
|
+
async zoom(evt, row, index)
|
|
234
|
+
{
|
|
235
|
+
this.$emit('zoom', row);
|
|
232
236
|
}
|
|
233
237
|
},
|
|
234
|
-
computed: { }
|
|
238
|
+
computed: { },
|
|
235
239
|
}
|
|
236
240
|
</script>
|
|
237
241
|
<style lang="scss" scoped>
|
|
@@ -9,11 +9,12 @@
|
|
|
9
9
|
<div style="width:250px;margin:auto;background:white;display:flex;align-items:center;">
|
|
10
10
|
<div class="" style="margin-right:10px;"> <q-input @keydown.enter.prevent="searchDownline" v-model="search_word" label='Search' dense outlined></q-input></div>
|
|
11
11
|
<div class=""><q-btn color='primary' @click="searchDownline" no-caps dense label="Search"></q-btn></div>
|
|
12
|
+
<div class="" v-if="hasZoomed" style="margin-left: 10px;"><q-btn color='red' @click="reset" no-caps dense label="Reset"></q-btn></div>
|
|
12
13
|
</div>
|
|
13
14
|
</div>
|
|
14
15
|
<div class="tree-container" ref="tree" v-dragscroll :style="`overflow: hidden; width: 100%; height: calc(100vh - 50px);`">
|
|
15
16
|
<div :style="`width: 999999px; height: 999999px; padding-top: 1000px; margin-top: -980px; background-image: url(${require('../../assets/statics/grey.png')})`">
|
|
16
|
-
<div class="tree"
|
|
17
|
+
<div class="tree" :style="`margin-top: 1000px; transform: scale(${ zoomFactor });`">
|
|
17
18
|
<ul v-if="upline">
|
|
18
19
|
<slot-view-dialog-genealogy-children :is_company_success="is_company_success" v-show="method == 'unilevel'" :country="country" :open_level="1" :initial="true" :slot_info="upline" :rank="rank" :membership="membership" :profile_picture="default_profile_picture" />
|
|
19
20
|
<member-genealogy-binary :hide_wallet="hide_wallet" :is_company_success="is_company_success" v-if="!hide_binary" :sponsor="slot_info" :country="country" v-show="method == 'binary'" :open_level="2" :initial="true" :rank="rank" :membership="membership" :binary_type="binary_type" :slot_info="upline" :profile_picture="default_profile_picture"/>
|
|
@@ -22,7 +23,7 @@
|
|
|
22
23
|
</div>
|
|
23
24
|
</div>
|
|
24
25
|
<q-dialog v-model="is_search_table_dialog_open">
|
|
25
|
-
<search-table :geneology_type='method' :search='search_word'></search-table>
|
|
26
|
+
<search-table @zoom="zoomInSlot" :geneology_type='method' :search='search_word'></search-table>
|
|
26
27
|
</q-dialog>
|
|
27
28
|
</div>
|
|
28
29
|
</template>
|
|
@@ -35,6 +36,8 @@
|
|
|
35
36
|
import MemberGenealogyBinary from './GenealogyBinary';
|
|
36
37
|
import GlobalMixins from '../../mixins/global_mixins';
|
|
37
38
|
import SearchTable from './Dialog/SearchTable';
|
|
39
|
+
import Hammer from 'hammerjs'
|
|
40
|
+
|
|
38
41
|
|
|
39
42
|
|
|
40
43
|
export default
|
|
@@ -54,6 +57,12 @@
|
|
|
54
57
|
multiCountry:false,
|
|
55
58
|
binary_type:'',
|
|
56
59
|
show_search:true,
|
|
60
|
+
|
|
61
|
+
// Zoom and Pinch (Both desktop and mobile)
|
|
62
|
+
zoomFactor: 1,
|
|
63
|
+
lastZoom: null,
|
|
64
|
+
mc: null,
|
|
65
|
+
hasZoomed: false
|
|
57
66
|
}),
|
|
58
67
|
directives: { dragscroll },
|
|
59
68
|
components: { SlotViewDialogGenealogyChildren, MemberGenealogyBinary, SearchTable},
|
|
@@ -91,10 +100,112 @@
|
|
|
91
100
|
}
|
|
92
101
|
this.default_profile_picture = public_settings.default_profile_picture;
|
|
93
102
|
this.multiCountry = public_settings.genealogy_multi_country;
|
|
103
|
+
this.zoom_in_out_genealogy = public_settings.zoom_in_out_genealogy;
|
|
104
|
+
|
|
105
|
+
if (this.zoom_in_out_genealogy)
|
|
106
|
+
{
|
|
107
|
+
// Zoom (Mobile)
|
|
108
|
+
this.mc = new Hammer(this.$refs.tree)
|
|
109
|
+
this.mc.get('pinch').set({ enable: true })
|
|
110
|
+
this.mc.on('pinch', (e) => {
|
|
111
|
+
let zoom = Math.min(2, Math.max(0.1, e.scale));
|
|
112
|
+
if (this.lastZoom) {
|
|
113
|
+
zoom *= this.lastZoom;
|
|
114
|
+
}
|
|
115
|
+
this.zoomFactor = Math.min(2, Math.max(0.1, zoom));
|
|
116
|
+
});
|
|
117
|
+
this.mc.on('pinchend', (e) => {
|
|
118
|
+
this.lastZoom = this.zoomFactor;
|
|
119
|
+
});
|
|
94
120
|
|
|
121
|
+
// Zoom (Desktop)
|
|
122
|
+
this.$refs.tree.addEventListener('wheel', this.zoomOnWheel);
|
|
123
|
+
window.addEventListener('keydown', this.zoomOnKeyDown);
|
|
124
|
+
}
|
|
95
125
|
},
|
|
96
126
|
methods:
|
|
97
127
|
{
|
|
128
|
+
zoomOnWheel(event)
|
|
129
|
+
{
|
|
130
|
+
event.preventDefault();
|
|
131
|
+
|
|
132
|
+
if (event.deltaY < 0)
|
|
133
|
+
{
|
|
134
|
+
this.zoomFactor += 0.1;
|
|
135
|
+
}
|
|
136
|
+
else
|
|
137
|
+
{
|
|
138
|
+
this.zoomFactor -= 0.1;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
this.zoomFactor = Math.min(2, Math.max(0.1, this.zoomFactor));
|
|
142
|
+
},
|
|
143
|
+
zoomOnKeyDown(event)
|
|
144
|
+
{
|
|
145
|
+
if (event.code === 'Equal')
|
|
146
|
+
{
|
|
147
|
+
this.zoomFactor += 0.1;
|
|
148
|
+
}
|
|
149
|
+
else if (event.code === 'Minus')
|
|
150
|
+
{
|
|
151
|
+
this.zoomFactor -= 0.1;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
this.zoomFactor = Math.min(2, Math.max(0.1, this.zoomFactor));
|
|
155
|
+
},
|
|
156
|
+
async zoomInSlot(slot)
|
|
157
|
+
{
|
|
158
|
+
if (this.zoom_in_out_genealogy)
|
|
159
|
+
{
|
|
160
|
+
/* Load slot and should zoom in */
|
|
161
|
+
console.log("Zooming on slot...");
|
|
162
|
+
|
|
163
|
+
await this.loadUpline(slot.downline_details.slot_code);
|
|
164
|
+
|
|
165
|
+
this.is_search_table_dialog_open = false;
|
|
166
|
+
|
|
167
|
+
this.$refs.tree.scroll({
|
|
168
|
+
left: (this.$refs.tree.scrollWidth - this.$refs.tree.clientWidth) / 2,
|
|
169
|
+
top: 1050,
|
|
170
|
+
behavior: 'smooth'
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
const zoomIn = () =>
|
|
174
|
+
{
|
|
175
|
+
if (this.zoomFactor < 2)
|
|
176
|
+
{
|
|
177
|
+
this.zoomFactor += 0.01;
|
|
178
|
+
setTimeout(() => zoomIn(), 1);
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
zoomIn();
|
|
183
|
+
|
|
184
|
+
this.hasZoomed = true;
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
async reset()
|
|
188
|
+
{
|
|
189
|
+
await this.loadUpline();
|
|
190
|
+
this.$refs.tree.scroll({
|
|
191
|
+
left: (this.$refs.tree.scrollWidth - this.$refs.tree.clientWidth) / 2,
|
|
192
|
+
top: 1000,
|
|
193
|
+
behavior: 'smooth'
|
|
194
|
+
});
|
|
195
|
+
|
|
196
|
+
const zoomOut = () =>
|
|
197
|
+
{
|
|
198
|
+
if (this.zoomFactor > 1)
|
|
199
|
+
{
|
|
200
|
+
this.zoomFactor -= 0.01;
|
|
201
|
+
setTimeout(() => zoomOut(), 1);
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
|
|
205
|
+
zoomOut();
|
|
206
|
+
|
|
207
|
+
this.hasZoomed = false;
|
|
208
|
+
},
|
|
98
209
|
searchDownline()
|
|
99
210
|
{
|
|
100
211
|
this.is_search_table_dialog_open = true;
|
|
@@ -107,9 +218,9 @@
|
|
|
107
218
|
this.country_options.push(data.code);
|
|
108
219
|
}
|
|
109
220
|
},
|
|
110
|
-
async loadUpline()
|
|
221
|
+
async loadUpline(slot_code = null)
|
|
111
222
|
{
|
|
112
|
-
await this.$bind('upline', new DB_SLOT().doc(this.user_info.active_slot));
|
|
223
|
+
await this.$bind('upline', new DB_SLOT().doc(slot_code || this.user_info.active_slot));
|
|
113
224
|
this.country = this.upline.country_code ? this.upline.country_code : 'PH';
|
|
114
225
|
},
|
|
115
226
|
|
|
@@ -149,5 +260,14 @@
|
|
|
149
260
|
}
|
|
150
261
|
}
|
|
151
262
|
},
|
|
263
|
+
beforeDestroy()
|
|
264
|
+
{
|
|
265
|
+
if (this.zoom_in_out_genealogy)
|
|
266
|
+
{
|
|
267
|
+
this.mc.destroy();
|
|
268
|
+
this.$refs.tree.removeEventListener('wheel', this.zoomOnWheel);
|
|
269
|
+
window.removeEventListener('keydown', this.zoomOnKeyDown);
|
|
270
|
+
}
|
|
271
|
+
}
|
|
152
272
|
}
|
|
153
273
|
</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "geer-builder",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.662",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
"axios": "^0.20.0",
|
|
14
14
|
"console": "^0.7.2",
|
|
15
15
|
"ethers": "^5.5.4",
|
|
16
|
+
"hammerjs": "^2.0.8",
|
|
16
17
|
"jquery": "^3.5.1",
|
|
17
18
|
"moment-timezone": "^0.5.33",
|
|
18
19
|
"philippine-location-json-for-geer": "^1.1.11",
|