geer-builder 1.2.836 → 1.2.837
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/assets/statics/cert.png +0 -0
- package/assets/statics/info.png +0 -0
- package/assets/statics/lock.png +0 -0
- package/components/OnlineSeminar/Agreement.vue +191 -0
- package/components/OnlineSeminar/FillupPrompt.vue +90 -0
- package/components/OnlineSeminar/FillupSuccess.vue +83 -0
- package/components/OnlineSeminar/GOnlineSeminar.vue +310 -0
- package/components/OnlineSeminar/MembershipForm.vue +338 -0
- package/components/OnlineSeminar/VideoCertificate.vue +97 -0
- package/package.json +3 -2
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<q-card class="agreement-form">
|
|
3
|
+
<q-card-section>
|
|
4
|
+
<div class="agreement-form__title">MEMBERSHIP SUBSCRIPTION AGREEMENT</div>
|
|
5
|
+
</q-card-section>
|
|
6
|
+
<q-card-section>
|
|
7
|
+
<div class="agreement-form__subtitle">
|
|
8
|
+
BOARD OF DIRECTORS <br>
|
|
9
|
+
SRT ALCALA MPC OF PANGASINAN
|
|
10
|
+
</div>
|
|
11
|
+
</q-card-section>
|
|
12
|
+
<q-card-section>
|
|
13
|
+
<div class="agreement-form__paragraph">
|
|
14
|
+
<p>Gentlemen: </p>
|
|
15
|
+
|
|
16
|
+
<p>
|
|
17
|
+
I, <b>{{ member_data.last_name.toUpperCase() }} {{ member_data.first_name.toUpperCase() }} {{ member_data.middle_name.toUpperCase() }}</b>, a permanent
|
|
18
|
+
resident of
|
|
19
|
+
<b>{{ member_data.barangay.toUpperCase() }}</b>, <b>{{ member_data.city.toUpperCase() }}</b>, hereby agree to be a member of SRT ALCALA MULTI-PURPOSE
|
|
20
|
+
COOPERATIVE OF PANGASINAN. I have completed the PMES prescribed for prospective members and I understand the
|
|
21
|
+
rationale of this Cooperative.
|
|
22
|
+
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
<p>1. To comply with the provision of the Articles of Cooperation, the By-Laws and policies set by the Board,
|
|
26
|
+
the
|
|
27
|
+
General Assembly as well as Acts of duly constituted authorities and failure on my part to do so, SRT-MPC, at
|
|
28
|
+
its option may:<br>
|
|
29
|
+
<ul>
|
|
30
|
+
<li>Fine</li>
|
|
31
|
+
<li>Suspend, or</li>
|
|
32
|
+
<li>Expel me from membership, whereupon all my shareholding in, shall be answerable for my liabilities to
|
|
33
|
+
SRT-MPC.</li>
|
|
34
|
+
</ul>
|
|
35
|
+
</p>
|
|
36
|
+
|
|
37
|
+
<p>
|
|
38
|
+
2. To attend and actively involved in the Annual General Assembly and all meetings, conference, and seminars
|
|
39
|
+
as
|
|
40
|
+
required by the Board of Directors and failure on my part to do so, unless previously excused by the Board.
|
|
41
|
+
|
|
42
|
+
</p>
|
|
43
|
+
<p>
|
|
44
|
+
3. To participate in the planned CAPITAL BUILD-UP (CBU), thrift and savings program and abide as follows: <br>
|
|
45
|
+
<br>
|
|
46
|
+
A) I pledge to subscribe at least Two Hundred [200] shares with a total value of Twenty Thousand Pesos
|
|
47
|
+
(P20,000.00) of which a minimum of Fifty [50] shares equivalent to Five Thousand Pesos (P5,000.00) and
|
|
48
|
+
membership fee of Two Hundred Fifty Pesos (P250.00) shall be paid upon submission of the application for
|
|
49
|
+
membership (Art.II, Membership) through lump sum. <br><br>
|
|
50
|
+
B) In case when unpaid subscribed share is not paid in specified due date, I pledge and authorize SRT MPC to
|
|
51
|
+
deduct from my dividend and patronage refund as my payment for share capital contribution until the two
|
|
52
|
+
hundred [200] shares is paid in full in the amount of Twenty Thousand Pesos (P20,000.00), for which I am
|
|
53
|
+
entitled to receive SRT SHARE CERTIFICATE and/or continue to invest in the Cooperative. <br><br>
|
|
54
|
+
|
|
55
|
+
C) I pledge to continue to invest in the form of Capital Build-up through the following:<br>
|
|
56
|
+
<ul>
|
|
57
|
+
<li>At least One Hundred Pesos (P100.00) per month or P600.00 every semi-annual budget.</li>
|
|
58
|
+
<li>At least fifty percent (50%) of my Annual Interest on Capital and Patronage Refund.</li>
|
|
59
|
+
<li>At least 5% of each goods/product procured or total cost of services acquired from the cooperative.</li>
|
|
60
|
+
</ul>
|
|
61
|
+
|
|
62
|
+
D) Failure on my part to comply with the financial obligation, unless excused by the Board, shall make me
|
|
63
|
+
consider as member not in good standing.
|
|
64
|
+
</p>
|
|
65
|
+
|
|
66
|
+
<p>
|
|
67
|
+
4. To comply with the directives of duly constituted authorities as well as the decision of the Board
|
|
68
|
+
regarding
|
|
69
|
+
the Operating Policies or other conditions that may be considered by the Board depending upon the nature of
|
|
70
|
+
the business of the Cooperative.
|
|
71
|
+
|
|
72
|
+
</p>
|
|
73
|
+
<p>
|
|
74
|
+
The provisions of this Agreement, the Articles of Cooperation and By-Laws have been explained, understand and
|
|
75
|
+
agreed to abide them. In all of the above undertakings, I am fully aware that the Board of Directors and the
|
|
76
|
+
Cooperative may impose sanctions against me or perform any acts necessary to make the sanction(s) effective
|
|
77
|
+
without going to Court.
|
|
78
|
+
|
|
79
|
+
</p>
|
|
80
|
+
<p>
|
|
81
|
+
In witness hereof, I have hereunto affixed my digital signature mark this <b>{{ formattedDay }}</b> day of
|
|
82
|
+
<b>{{ formattedMonth.toUpperCase() }}</b>, <b>{{ currentYear }}</b>.
|
|
83
|
+
</p>
|
|
84
|
+
</div>
|
|
85
|
+
</q-card-section>
|
|
86
|
+
<q-card-actions class="agreement-form__actions" align="right">
|
|
87
|
+
<q-btn flat class="close-button" v-close-popup>Close</q-btn>
|
|
88
|
+
<q-btn flat class="download-button" @click="submitAgreement" >Submit</q-btn>
|
|
89
|
+
</q-card-actions>
|
|
90
|
+
<q-dialog v-model="is_success_dialog_open">
|
|
91
|
+
<fillup-success ></fillup-success>
|
|
92
|
+
</q-dialog>
|
|
93
|
+
</q-card>
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
</template>
|
|
97
|
+
|
|
98
|
+
<style lang="scss">
|
|
99
|
+
.agreement-form {
|
|
100
|
+
max-width: 800px !important;
|
|
101
|
+
|
|
102
|
+
&__title {
|
|
103
|
+
font-weight: 600;
|
|
104
|
+
text-align: center;
|
|
105
|
+
font-size: 18px;
|
|
106
|
+
color: #296117;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&__subtitle {
|
|
110
|
+
font-weight: 600;
|
|
111
|
+
text-align: left;
|
|
112
|
+
font-size: 13px;
|
|
113
|
+
color: #121212;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&__actions {
|
|
117
|
+
.close-button {
|
|
118
|
+
background-color: #f3f3f3;
|
|
119
|
+
color: #121212;
|
|
120
|
+
box-shadow: none;
|
|
121
|
+
padding: 0px 15px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.download-button {
|
|
125
|
+
background-color: #296117;
|
|
126
|
+
color: #fff;
|
|
127
|
+
padding: 0px 15px;
|
|
128
|
+
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
</style>
|
|
133
|
+
|
|
134
|
+
<script>
|
|
135
|
+
|
|
136
|
+
import DB_USER from '../../models/DB_USER';
|
|
137
|
+
import FillupSuccess from './FillupSuccess';
|
|
138
|
+
export default
|
|
139
|
+
{
|
|
140
|
+
components: {
|
|
141
|
+
FillupSuccess
|
|
142
|
+
},
|
|
143
|
+
data: () =>
|
|
144
|
+
({
|
|
145
|
+
currentDate: new Date(),
|
|
146
|
+
is_success_dialog_open : false
|
|
147
|
+
}),
|
|
148
|
+
props:
|
|
149
|
+
{
|
|
150
|
+
member_data: Object
|
|
151
|
+
},
|
|
152
|
+
computed: {
|
|
153
|
+
formattedDay()
|
|
154
|
+
{
|
|
155
|
+
const day = this.currentDate.getDate();
|
|
156
|
+
const suffixes = ['th', 'st', 'nd', 'rd'];
|
|
157
|
+
const relevantSuffix =
|
|
158
|
+
(day % 10 <= 3 && (day % 100 < 10 || day % 100 >= 20))
|
|
159
|
+
? suffixes[day % 10]
|
|
160
|
+
: suffixes[0];
|
|
161
|
+
return `${day}${relevantSuffix}`;
|
|
162
|
+
},
|
|
163
|
+
formattedMonth()
|
|
164
|
+
{
|
|
165
|
+
const months = [
|
|
166
|
+
'January', 'February', 'March', 'April', 'May', 'June',
|
|
167
|
+
'July', 'August', 'September', 'October', 'November', 'December'
|
|
168
|
+
];
|
|
169
|
+
return months[this.currentDate.getMonth()];
|
|
170
|
+
},
|
|
171
|
+
currentYear()
|
|
172
|
+
{
|
|
173
|
+
return this.currentDate.getFullYear();
|
|
174
|
+
},
|
|
175
|
+
},
|
|
176
|
+
mounted()
|
|
177
|
+
{
|
|
178
|
+
|
|
179
|
+
},
|
|
180
|
+
methods:
|
|
181
|
+
{
|
|
182
|
+
async submitAgreement()
|
|
183
|
+
{
|
|
184
|
+
let res = await new DB_USER().update(this.user_info.uid, {membership_subscription_data: this.member_data,srt_form_filled_up:true});
|
|
185
|
+
this.is_success_dialog_open = true
|
|
186
|
+
// console.log(this.user_info.uid)
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
}
|
|
190
|
+
</script>
|
|
191
|
+
<style lang="scss"></style>
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<q-card class="fillup-form">
|
|
3
|
+
<q-card-section>
|
|
4
|
+
<div class="fillup-form__icon">
|
|
5
|
+
<img src="../../assets/statics/info.png" alt="">
|
|
6
|
+
</div>
|
|
7
|
+
</q-card-section>
|
|
8
|
+
<q-card-section>
|
|
9
|
+
<div class="fillup-form__body">
|
|
10
|
+
Please fill up and submit a membership form to download your certificate.
|
|
11
|
+
</div>
|
|
12
|
+
</q-card-section>
|
|
13
|
+
<q-card-actions class="fillup-form__actions" align="right">
|
|
14
|
+
<q-btn flat class="close-button" v-close-popup>Close</q-btn>
|
|
15
|
+
<q-btn flat class="download-button" @click="checkUserForm" >Proceed</q-btn>
|
|
16
|
+
</q-card-actions>
|
|
17
|
+
|
|
18
|
+
<q-dialog v-model="is_membership_form_dialog_open">
|
|
19
|
+
<membership-form></membership-form>
|
|
20
|
+
</q-dialog>
|
|
21
|
+
</q-card>
|
|
22
|
+
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<style lang="scss">
|
|
26
|
+
.fillup-form
|
|
27
|
+
{
|
|
28
|
+
&__icon{
|
|
29
|
+
font-weight: 600;
|
|
30
|
+
text-align: center;
|
|
31
|
+
font-size: 15px;
|
|
32
|
+
color:#121212;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&__body{
|
|
36
|
+
font-size: 18;
|
|
37
|
+
color:#121212;
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&__actions{
|
|
42
|
+
.close-button{
|
|
43
|
+
background-color: #f3f3f3;
|
|
44
|
+
color: #121212;
|
|
45
|
+
box-shadow: none;
|
|
46
|
+
padding:0px 15px;
|
|
47
|
+
}
|
|
48
|
+
.download-button{
|
|
49
|
+
background-color: #296117;
|
|
50
|
+
color: #fff;
|
|
51
|
+
padding:0px 15px;
|
|
52
|
+
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
57
|
+
|
|
58
|
+
<script>
|
|
59
|
+
|
|
60
|
+
import MembershipForm from './MembershipForm'
|
|
61
|
+
export default
|
|
62
|
+
{
|
|
63
|
+
components:{
|
|
64
|
+
MembershipForm
|
|
65
|
+
},
|
|
66
|
+
data: () =>
|
|
67
|
+
({
|
|
68
|
+
is_membership_form_dialog_open :false
|
|
69
|
+
}),
|
|
70
|
+
props:
|
|
71
|
+
{
|
|
72
|
+
|
|
73
|
+
},
|
|
74
|
+
mounted()
|
|
75
|
+
{
|
|
76
|
+
|
|
77
|
+
},
|
|
78
|
+
methods:
|
|
79
|
+
{
|
|
80
|
+
checkUserForm()
|
|
81
|
+
{
|
|
82
|
+
this.is_membership_form_dialog_open = true;
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
}
|
|
87
|
+
</script>
|
|
88
|
+
<style lang="scss">
|
|
89
|
+
|
|
90
|
+
</style>
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<q-card class="fillup-form">
|
|
3
|
+
<q-card-section>
|
|
4
|
+
<div class="fillup-form__icon">
|
|
5
|
+
<img src="../../assets/statics/success.png" alt="">
|
|
6
|
+
</div>
|
|
7
|
+
</q-card-section>
|
|
8
|
+
<q-card-section>
|
|
9
|
+
<div class="fillup-form__body">
|
|
10
|
+
Your membership form has been successfully submitted.
|
|
11
|
+
</div>
|
|
12
|
+
</q-card-section>
|
|
13
|
+
<q-card-actions class="fillup-form__actions" align="right">
|
|
14
|
+
<q-btn flat class="download-button" v-close-popup>Proceed</q-btn>
|
|
15
|
+
</q-card-actions>
|
|
16
|
+
|
|
17
|
+
<q-dialog v-model="is_membership_form_dialog_open">
|
|
18
|
+
<membership-form></membership-form>
|
|
19
|
+
</q-dialog>
|
|
20
|
+
</q-card>
|
|
21
|
+
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<style lang="scss">
|
|
25
|
+
.fillup-form
|
|
26
|
+
{
|
|
27
|
+
&__icon{
|
|
28
|
+
font-weight: 600;
|
|
29
|
+
text-align: center;
|
|
30
|
+
font-size: 15px;
|
|
31
|
+
color:#121212;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&__body{
|
|
35
|
+
font-size: 18;
|
|
36
|
+
color:#121212;
|
|
37
|
+
font-weight: 600;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&__actions{
|
|
41
|
+
.close-button{
|
|
42
|
+
background-color: #f3f3f3;
|
|
43
|
+
color: #121212;
|
|
44
|
+
box-shadow: none;
|
|
45
|
+
padding:0px 15px;
|
|
46
|
+
}
|
|
47
|
+
.download-button{
|
|
48
|
+
background-color: #296117;
|
|
49
|
+
color: #fff;
|
|
50
|
+
padding:0px 15px;
|
|
51
|
+
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
</style>
|
|
56
|
+
|
|
57
|
+
<script>
|
|
58
|
+
|
|
59
|
+
export default
|
|
60
|
+
{
|
|
61
|
+
components:{
|
|
62
|
+
},
|
|
63
|
+
data: () =>
|
|
64
|
+
({
|
|
65
|
+
|
|
66
|
+
}),
|
|
67
|
+
props:
|
|
68
|
+
{
|
|
69
|
+
|
|
70
|
+
},
|
|
71
|
+
mounted()
|
|
72
|
+
{
|
|
73
|
+
|
|
74
|
+
},
|
|
75
|
+
methods:
|
|
76
|
+
{
|
|
77
|
+
|
|
78
|
+
},
|
|
79
|
+
}
|
|
80
|
+
</script>
|
|
81
|
+
<style lang="scss">
|
|
82
|
+
|
|
83
|
+
</style>
|
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="online-seminar">
|
|
3
|
+
<template v-if="user_info">
|
|
4
|
+
<q-tabs v-model="active_tab" @input="loadData" dense class="text-grey seminar-tabs" active-color="primary"
|
|
5
|
+
indicator-color="primary" align="justify" narrow-indicator>
|
|
6
|
+
<q-tab class="videos-tab-label" name="videos" :label="`Videos (${video_data.length})`" />
|
|
7
|
+
<q-tab class="cert-tab-label" name="certs" label="Certificates" />
|
|
8
|
+
</q-tabs>
|
|
9
|
+
|
|
10
|
+
<q-separator />
|
|
11
|
+
|
|
12
|
+
<q-tab-panels v-model="active_tab" animated>
|
|
13
|
+
<q-tab-panel name="videos" class="videos-tab">
|
|
14
|
+
<div class="video-items">
|
|
15
|
+
<div class="video-item" v-for="(data, index) in video_data" :key="data.id">
|
|
16
|
+
<div class="video-player" :id="`player-${index}`"></div>
|
|
17
|
+
<div class="video-title">{{ data.title }}</div>
|
|
18
|
+
<div class="video-desc">{{ data.description }}</div>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</q-tab-panel>
|
|
22
|
+
|
|
23
|
+
<q-tab-panel name="certs" class="cert-tab">
|
|
24
|
+
<div class="cert-items">
|
|
25
|
+
<div class="cert-item" v-for="(data, index) in cert_data" :key="data.id" @click="openCertificateDialog(data)">
|
|
26
|
+
<div class="cert-image" >
|
|
27
|
+
<img class="bg" :style="{ filter: data.unlock === false ? 'brightness(50%)' : '' }" :src="data.url" alt="">
|
|
28
|
+
<img v-if="data.unlock == false" class="lock" src="../../assets/statics/lock.png" alt="">
|
|
29
|
+
</div>
|
|
30
|
+
<div class="cert-title">{{ data.title }}</div>
|
|
31
|
+
<div class="cert-desc">{{data.desc}}</div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</q-tab-panel>
|
|
35
|
+
</q-tab-panels>
|
|
36
|
+
</template>
|
|
37
|
+
<template v-else>
|
|
38
|
+
<span>You are not allowed to access this component.</span>
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<q-dialog v-model="is_video_certificate_dialog_open">
|
|
42
|
+
<video-certificate :selectedCertificate="selectedCertificate"></video-certificate>
|
|
43
|
+
</q-dialog>
|
|
44
|
+
</div>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<style lang="scss" >
|
|
48
|
+
.online-seminar{
|
|
49
|
+
.seminar-tabs{
|
|
50
|
+
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.videos-tab
|
|
54
|
+
{
|
|
55
|
+
.video-items
|
|
56
|
+
{
|
|
57
|
+
.video-item
|
|
58
|
+
{
|
|
59
|
+
.video-player
|
|
60
|
+
{
|
|
61
|
+
width: 100%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.video-title
|
|
65
|
+
{
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
text-align: left;
|
|
68
|
+
font-size: 15px;
|
|
69
|
+
color:#121212;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.video-desc
|
|
73
|
+
{
|
|
74
|
+
font-size: 13px;
|
|
75
|
+
color:#8E8E8E;
|
|
76
|
+
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.cert-tab
|
|
83
|
+
{
|
|
84
|
+
.cert-items
|
|
85
|
+
{
|
|
86
|
+
.cert-item
|
|
87
|
+
{
|
|
88
|
+
display: grid;
|
|
89
|
+
justify-content: center;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
.cert-image
|
|
92
|
+
{
|
|
93
|
+
width: 350px;
|
|
94
|
+
position: relative;
|
|
95
|
+
.bg
|
|
96
|
+
{
|
|
97
|
+
width: 100%;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.lock
|
|
101
|
+
{
|
|
102
|
+
position: absolute;
|
|
103
|
+
top: 50%;
|
|
104
|
+
left: 50%;
|
|
105
|
+
transform: translate(-50%, -50%);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.cert-title
|
|
110
|
+
{
|
|
111
|
+
font-weight: 600;
|
|
112
|
+
font-size: 15px;
|
|
113
|
+
color:#296117;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.cert-desc
|
|
117
|
+
{
|
|
118
|
+
font-size: 11px;
|
|
119
|
+
color:#121212;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
</style>
|
|
126
|
+
|
|
127
|
+
<script>
|
|
128
|
+
import GlobalMixins from '../../mixins/global_mixins';
|
|
129
|
+
import GContentManagement from '../ContentManagement/GContentManagement.vue';
|
|
130
|
+
import DB_CONTENT_MANAGEMENT from '../../models/DB_CONTENT_MANAGEMENT';
|
|
131
|
+
import DB_SLOT from '../../models/DB_SLOT';
|
|
132
|
+
import YouTubeIframeLoader from "youtube-iframe";
|
|
133
|
+
import VideoCertificate from './VideoCertificate';
|
|
134
|
+
|
|
135
|
+
export default
|
|
136
|
+
{
|
|
137
|
+
mixins: [GlobalMixins],
|
|
138
|
+
components: { GContentManagement,VideoCertificate },
|
|
139
|
+
data: () =>
|
|
140
|
+
({
|
|
141
|
+
db_content_management: new DB_CONTENT_MANAGEMENT(),
|
|
142
|
+
is_video_certificate_dialog_open: false,
|
|
143
|
+
video_data: [],
|
|
144
|
+
cert_data: [],
|
|
145
|
+
active_tab: 'videos',
|
|
146
|
+
players: {},
|
|
147
|
+
completedVideos: {},
|
|
148
|
+
playbackStatus: {},
|
|
149
|
+
lastValidTime: {},
|
|
150
|
+
slot_info:{},
|
|
151
|
+
selectedCertificate:{}
|
|
152
|
+
}),
|
|
153
|
+
mounted()
|
|
154
|
+
{
|
|
155
|
+
this.loadData();
|
|
156
|
+
|
|
157
|
+
},
|
|
158
|
+
computed:
|
|
159
|
+
{
|
|
160
|
+
},
|
|
161
|
+
watch: {
|
|
162
|
+
'cert_data': function(newVal, oldVal) {
|
|
163
|
+
|
|
164
|
+
this.cert_data.forEach(cert => {
|
|
165
|
+
if(this.slot_info.hasOwnProperty('seminar'))
|
|
166
|
+
{
|
|
167
|
+
cert.unlock = cert.requirements.every(id => this.slot_info.seminar.includes(id));
|
|
168
|
+
}
|
|
169
|
+
else
|
|
170
|
+
{
|
|
171
|
+
cert.unlock = false;
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
methods:
|
|
178
|
+
{
|
|
179
|
+
openCertificateDialog(data)
|
|
180
|
+
{
|
|
181
|
+
if(data.unlock == true)
|
|
182
|
+
{
|
|
183
|
+
this.selectedCertificate = data;
|
|
184
|
+
this.is_video_certificate_dialog_open = true;
|
|
185
|
+
}
|
|
186
|
+
else
|
|
187
|
+
{
|
|
188
|
+
this.$q.dialog({
|
|
189
|
+
title: 'Error',
|
|
190
|
+
message: `Seminar videos are not yet finished.`,
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
async loadData()
|
|
195
|
+
{
|
|
196
|
+
await this.$bind('slot_info', new DB_SLOT().doc(this.user_info.active_slot));
|
|
197
|
+
await this.$bind('video_data', this.db_content_management.collection().where("type", "==", "Seminar").where("show", "==", true).where("archive", "==", false).orderBy('created_date', 'desc'));
|
|
198
|
+
await this.$bind('cert_data', this.db_content_management.collection().where("type", "==", "Seminar Certificate").where("show", "==", true).where("archive", "==", false).orderBy('created_date', 'desc'));
|
|
199
|
+
|
|
200
|
+
this.cert_data.forEach(cert => {
|
|
201
|
+
if(this.slot_info.hasOwnProperty('seminar'))
|
|
202
|
+
{
|
|
203
|
+
cert.unlock = cert.requirements.every(id => this.slot_info.seminar.includes(id));
|
|
204
|
+
}
|
|
205
|
+
else
|
|
206
|
+
{
|
|
207
|
+
cert.unlock = false;
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
YouTubeIframeLoader.load((YT) => {
|
|
214
|
+
this.video_data.forEach((data, index) => {
|
|
215
|
+
this.createPlayer(data, index);
|
|
216
|
+
});
|
|
217
|
+
});
|
|
218
|
+
},
|
|
219
|
+
|
|
220
|
+
getId(url)
|
|
221
|
+
{
|
|
222
|
+
const urlObj = new URL(url);
|
|
223
|
+
return urlObj.searchParams.get("v");
|
|
224
|
+
},
|
|
225
|
+
async onPlayerStateChange(event, index)
|
|
226
|
+
{
|
|
227
|
+
const player = this.players[index];
|
|
228
|
+
const videoId = player.getVideoData().video_id;
|
|
229
|
+
switch (event.data)
|
|
230
|
+
{
|
|
231
|
+
case YT.PlayerState.PLAYING:
|
|
232
|
+
if (!this.playbackStatus[index])
|
|
233
|
+
{
|
|
234
|
+
this.playbackStatus[index] = setInterval(() =>
|
|
235
|
+
{
|
|
236
|
+
const currentTime = player.getCurrentTime();
|
|
237
|
+
const duration = player.getDuration();
|
|
238
|
+
const progress = (currentTime / duration) * 100;
|
|
239
|
+
if (currentTime > this.lastValidTime[videoId] + 2) {
|
|
240
|
+
player.seekTo(this.lastValidTime[videoId]);
|
|
241
|
+
} else {
|
|
242
|
+
this.lastValidTime[videoId] = currentTime;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
// if (progress >= 99)
|
|
246
|
+
// {
|
|
247
|
+
// clearInterval(this.playbackStatus[index]);
|
|
248
|
+
// this.completedVideos[index] = true;
|
|
249
|
+
// console.log(`Video ${index} finished successfully!`);
|
|
250
|
+
|
|
251
|
+
// }
|
|
252
|
+
}, 500);
|
|
253
|
+
}
|
|
254
|
+
break;
|
|
255
|
+
|
|
256
|
+
case YT.PlayerState.PAUSED:
|
|
257
|
+
if (this.playbackStatus[index])
|
|
258
|
+
{
|
|
259
|
+
clearInterval(this.playbackStatus[index]);
|
|
260
|
+
this.playbackStatus[index] = null;
|
|
261
|
+
}
|
|
262
|
+
break;
|
|
263
|
+
|
|
264
|
+
case YT.PlayerState.BUFFERING:
|
|
265
|
+
case YT.PlayerState.ENDED:
|
|
266
|
+
if (this.playbackStatus[index])
|
|
267
|
+
{
|
|
268
|
+
const currentTime = player.getCurrentTime();
|
|
269
|
+
const duration = player.getDuration();
|
|
270
|
+
const progress = (currentTime / duration) * 100;
|
|
271
|
+
if (progress >= 90)
|
|
272
|
+
{
|
|
273
|
+
clearInterval(this.playbackStatus[index]);
|
|
274
|
+
this.completedVideos[index] = true;
|
|
275
|
+
await this.$_fbCall('memberFinishSeminar', {slot_code: this.slot_info.slot_code, seminar: this.video_data[index].id});
|
|
276
|
+
this.loadData();
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
break;
|
|
280
|
+
|
|
281
|
+
case YT.PlayerState.CUED:
|
|
282
|
+
break;
|
|
283
|
+
}
|
|
284
|
+
},
|
|
285
|
+
createPlayer(data, index)
|
|
286
|
+
{
|
|
287
|
+
const videoId = this.getId(data.url);
|
|
288
|
+
|
|
289
|
+
this.players[index] = new YT.Player(`player-${index}`, {
|
|
290
|
+
videoId,
|
|
291
|
+
playerVars: {
|
|
292
|
+
modestbranding: 1,
|
|
293
|
+
rel: 0,
|
|
294
|
+
playsinline: 1,
|
|
295
|
+
},
|
|
296
|
+
events: {
|
|
297
|
+
onStateChange: (event) => this.onPlayerStateChange(event, index),
|
|
298
|
+
},
|
|
299
|
+
});
|
|
300
|
+
},
|
|
301
|
+
},
|
|
302
|
+
|
|
303
|
+
beforeDestroy() {
|
|
304
|
+
Object.keys(this.playbackStatus).forEach((index) => {
|
|
305
|
+
if (this.playbackStatus[index]) clearInterval(this.playbackStatus[index]);
|
|
306
|
+
});
|
|
307
|
+
Object.values(this.players).forEach((player) => player.destroy());
|
|
308
|
+
},
|
|
309
|
+
}
|
|
310
|
+
</script>
|
|
@@ -0,0 +1,338 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<q-card class="membership-form">
|
|
3
|
+
<q-card-section>
|
|
4
|
+
<div class="membership-form__title">SRT ALCALA MULTI-PURPOSE COOPERATIVE OF PANGASINAN</div>
|
|
5
|
+
<div class="membership-form__subtitle">Brgy. Laoac, Alcala, Pangasinan Tel. No. 08-864-34-16</div>
|
|
6
|
+
</q-card-section>
|
|
7
|
+
<q-card-section>
|
|
8
|
+
<div class="membership-form__input">
|
|
9
|
+
<div class="membership-form__input-title">
|
|
10
|
+
MEMBERSHIP FORM
|
|
11
|
+
</div>
|
|
12
|
+
<div class="membership-form__input-body row q-col-gutter-sm">
|
|
13
|
+
<div class="col-3">
|
|
14
|
+
<div class="label">Last Name</div>
|
|
15
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.last_name" />
|
|
16
|
+
</div>
|
|
17
|
+
<div class="col-3">
|
|
18
|
+
<div class="label">First Name</div>
|
|
19
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.first_name" />
|
|
20
|
+
</div>
|
|
21
|
+
<div class="col-3">
|
|
22
|
+
<div class="label">Middle Name</div>
|
|
23
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.middle_name" />
|
|
24
|
+
</div>
|
|
25
|
+
<div class="col-3">
|
|
26
|
+
<div class="label">Nickname</div>
|
|
27
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.nickname" />
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="body-subtitle col-12">
|
|
31
|
+
Permanent Residence Address:
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="col-3">
|
|
35
|
+
<div class="label">No./Street/Village</div>
|
|
36
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.perm_street_address" />
|
|
37
|
+
</div>
|
|
38
|
+
<div class="col-3">
|
|
39
|
+
<div class="label">Barangay</div>
|
|
40
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.barangay" />
|
|
41
|
+
</div>
|
|
42
|
+
<div class="col-3">
|
|
43
|
+
<div class="label">City/ Municipality</div>
|
|
44
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.city" />
|
|
45
|
+
</div>
|
|
46
|
+
<div class="col-3">
|
|
47
|
+
<div class="label">Zipcode</div>
|
|
48
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.perm_zipcode" />
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div class="col-9">
|
|
52
|
+
<div class="label">Present Address</div>
|
|
53
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.present_street_address" />
|
|
54
|
+
|
|
55
|
+
</div>
|
|
56
|
+
<div class="col-3">
|
|
57
|
+
<div class="label">Zipcode</div>
|
|
58
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.present_zipcode" />
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="col-4">
|
|
62
|
+
<div class="label">Date of Birth</div>
|
|
63
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.birth_date" />
|
|
64
|
+
</div>
|
|
65
|
+
<div class="col-8">
|
|
66
|
+
<div class="label">Place of Birth</div>
|
|
67
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.birth_place" />
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div class="col-4">
|
|
71
|
+
<div class="label">Age</div>
|
|
72
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.age" />
|
|
73
|
+
</div>
|
|
74
|
+
<div class="col-8">
|
|
75
|
+
<div class="label">Contact Number</div>
|
|
76
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.contact_number" />
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div class="col-6">
|
|
80
|
+
<div class="label">Civil Status</div>
|
|
81
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.civil_status" />
|
|
82
|
+
</div>
|
|
83
|
+
<div class="col-6">
|
|
84
|
+
<div class="label">Sex</div>
|
|
85
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.sex" />
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="body-subtitle col-12">
|
|
89
|
+
Beneficiaries:
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div class="beneficaries-list row q-col-gutter-sm" v-for="(beneficiary,index) in member_data.beneficiaries">
|
|
93
|
+
<div class="col-12 row justify-between">
|
|
94
|
+
<div class="beneficary-title">
|
|
95
|
+
Beneficiary {{ index + 1 }}
|
|
96
|
+
</div>
|
|
97
|
+
<q-icon @click="removeBeneficiary(index)" v-if="index > 0" color="red" name="fa fa-trash" size="14px" class="q-mr-sm cursor-pointer"></q-icon>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="col-8">
|
|
100
|
+
<div class="label">Full Name</div>
|
|
101
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="beneficiary.full_name" />
|
|
102
|
+
</div>
|
|
103
|
+
<div class="col-1">
|
|
104
|
+
<div class="label">Age</div>
|
|
105
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="beneficiary.age" />
|
|
106
|
+
</div>
|
|
107
|
+
<div class="col-3">
|
|
108
|
+
<div class="label">Relationship</div>
|
|
109
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="beneficiary.relationship" />
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div class="col-12">
|
|
113
|
+
<div class="label">Address</div>
|
|
114
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="beneficiary.address" />
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="col-12">
|
|
118
|
+
<q-btn flat class="add-beneficiaries-button" @click="addBeneficiary">Add More</q-btn>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</q-card-section>
|
|
123
|
+
<q-card-section>
|
|
124
|
+
<div class="membership-form__confirm">
|
|
125
|
+
<p>I apply voluntarily for membership to SRT ALCALA MPC OF PANGASINAN and hereby certify that all information I have provided in this application are true and correct to the best of my knowledge. Any false information, emission, concealment or misrepresentation will be sufficient cause for denial of my membership.</p>
|
|
126
|
+
<div class="row q-col-gutter-sm">
|
|
127
|
+
<div class="col-6">
|
|
128
|
+
<div class="label">GSIS/SSS No.</div>
|
|
129
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.sss_no" />
|
|
130
|
+
</div>
|
|
131
|
+
<div class="col-6">
|
|
132
|
+
<div class="label">TIN No.</div>
|
|
133
|
+
<q-input outlined dense :rules="[val => !!val || 'Field is required']" v-model="member_data.tin_no" />
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
</q-card-section>
|
|
139
|
+
<q-card-actions class="membership-form__actions" align="right">
|
|
140
|
+
<q-btn flat class="close-button" v-close-popup>Close</q-btn>
|
|
141
|
+
<q-btn flat class="download-button" @click="submitMembershipForm" >Proceed</q-btn>
|
|
142
|
+
</q-card-actions>
|
|
143
|
+
|
|
144
|
+
<q-dialog v-model="is_agreement_form_dialog_open">
|
|
145
|
+
<agreement-form :member_data="member_data"></agreement-form>
|
|
146
|
+
</q-dialog>
|
|
147
|
+
</q-card>
|
|
148
|
+
|
|
149
|
+
</template>
|
|
150
|
+
|
|
151
|
+
<style lang="scss">
|
|
152
|
+
.membership-form
|
|
153
|
+
{
|
|
154
|
+
max-width: 800px !important;
|
|
155
|
+
&__title{
|
|
156
|
+
text-align: center;
|
|
157
|
+
font-weight: 600;
|
|
158
|
+
font-size: 15px;
|
|
159
|
+
color:#121212;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&__subtitle{
|
|
163
|
+
text-align: center;
|
|
164
|
+
font-weight: 400;
|
|
165
|
+
font-size: 11px;
|
|
166
|
+
color:#121212;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&__input{
|
|
170
|
+
&-title{
|
|
171
|
+
text-align: center;
|
|
172
|
+
font-weight: 600;
|
|
173
|
+
font-size: 15px;
|
|
174
|
+
color:#121212;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
&-body{
|
|
178
|
+
.body-subtitle
|
|
179
|
+
{
|
|
180
|
+
font-weight: 600;
|
|
181
|
+
font-size: 15px;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.label{
|
|
185
|
+
font-weight: 500;
|
|
186
|
+
font-size: 13px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.beneficaries-list
|
|
190
|
+
{
|
|
191
|
+
.beneficiary-title
|
|
192
|
+
{
|
|
193
|
+
font-size:13px;
|
|
194
|
+
font-weight: 600;
|
|
195
|
+
}
|
|
196
|
+
padding:10px;
|
|
197
|
+
.q-field__inner
|
|
198
|
+
{
|
|
199
|
+
background-color: #f4f4f4;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.add-beneficiaries-button{
|
|
204
|
+
background-color: #1557FF;
|
|
205
|
+
color: #fff;
|
|
206
|
+
padding:0px 15px;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.q-field__inner
|
|
210
|
+
{
|
|
211
|
+
background-color: #f4f4f4;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
&__confirm{
|
|
217
|
+
.q-field__inner
|
|
218
|
+
{
|
|
219
|
+
background-color: #f4f4f4;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
&__actions{
|
|
224
|
+
.close-button{
|
|
225
|
+
background-color: #f3f3f3;
|
|
226
|
+
color: #121212;
|
|
227
|
+
box-shadow: none;
|
|
228
|
+
padding:0px 15px;
|
|
229
|
+
}
|
|
230
|
+
.download-button{
|
|
231
|
+
background-color: #296117;
|
|
232
|
+
color: #fff;
|
|
233
|
+
padding:0px 15px;
|
|
234
|
+
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
</style>
|
|
239
|
+
|
|
240
|
+
<script>
|
|
241
|
+
import AgreementForm from './Agreement'
|
|
242
|
+
export default
|
|
243
|
+
{
|
|
244
|
+
components:{
|
|
245
|
+
AgreementForm
|
|
246
|
+
},
|
|
247
|
+
data: () =>
|
|
248
|
+
({
|
|
249
|
+
is_agreement_form_dialog_open : false,
|
|
250
|
+
member_data :{
|
|
251
|
+
last_name : '',
|
|
252
|
+
first_name : '',
|
|
253
|
+
middle_name : '',
|
|
254
|
+
nickname : '',
|
|
255
|
+
perm_street_address : '',
|
|
256
|
+
barangay : '',
|
|
257
|
+
city : '',
|
|
258
|
+
perm_zipcode : '',
|
|
259
|
+
present_street_address : '',
|
|
260
|
+
present_zipcode : '',
|
|
261
|
+
birth_date : '',
|
|
262
|
+
birth_place : '',
|
|
263
|
+
age : '',
|
|
264
|
+
contact_number : '',
|
|
265
|
+
civil_status : '',
|
|
266
|
+
sex : '',
|
|
267
|
+
beneficiaries : [{
|
|
268
|
+
full_name : '',
|
|
269
|
+
age : '',
|
|
270
|
+
relationship : '',
|
|
271
|
+
address : '',
|
|
272
|
+
}],
|
|
273
|
+
sss_no : '',
|
|
274
|
+
tin_no : '',
|
|
275
|
+
}
|
|
276
|
+
}),
|
|
277
|
+
props:
|
|
278
|
+
{
|
|
279
|
+
|
|
280
|
+
},
|
|
281
|
+
mounted()
|
|
282
|
+
{
|
|
283
|
+
|
|
284
|
+
},
|
|
285
|
+
methods:
|
|
286
|
+
{
|
|
287
|
+
addBeneficiary()
|
|
288
|
+
{
|
|
289
|
+
this.member_data.beneficiaries.push({
|
|
290
|
+
full_name : '',
|
|
291
|
+
age : '',
|
|
292
|
+
relationship : '',
|
|
293
|
+
address : '',
|
|
294
|
+
})
|
|
295
|
+
},
|
|
296
|
+
removeBeneficiary(index)
|
|
297
|
+
{
|
|
298
|
+
this.member_data.beneficiaries.splice(index,1)
|
|
299
|
+
},
|
|
300
|
+
areFieldsValid() {
|
|
301
|
+
// Check main fields
|
|
302
|
+
for (const key in this.member_data) {
|
|
303
|
+
const value = this.member_data[key];
|
|
304
|
+
|
|
305
|
+
if (Array.isArray(value)) {
|
|
306
|
+
// Check array fields (beneficiaries)
|
|
307
|
+
for (let i = 0; i < value.length; i++) {
|
|
308
|
+
const beneficiary = value[i];
|
|
309
|
+
for (const subKey in beneficiary) {
|
|
310
|
+
if (!beneficiary[subKey]) {
|
|
311
|
+
this.$q.dialog({
|
|
312
|
+
title: 'Error',
|
|
313
|
+
message: `Beneficiary ${i + 1}'s ${subKey.replace('_', ' ')} is required.`,
|
|
314
|
+
});
|
|
315
|
+
return false;
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
} else if (!value) {
|
|
320
|
+
this.$q.dialog({
|
|
321
|
+
title: 'Error',
|
|
322
|
+
message: `${key.replace('_', ' ')} is required.`,
|
|
323
|
+
});
|
|
324
|
+
return false;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
return true; // All fields are valid
|
|
328
|
+
},
|
|
329
|
+
submitMembershipForm()
|
|
330
|
+
{
|
|
331
|
+
if(this.areFieldsValid())
|
|
332
|
+
{
|
|
333
|
+
this.is_agreement_form_dialog_open = true;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
},
|
|
337
|
+
}
|
|
338
|
+
</script>
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<q-card class="video-certificate">
|
|
3
|
+
<q-card-section>
|
|
4
|
+
<div class="video-certificate__title">Video Certificate</div>
|
|
5
|
+
</q-card-section>
|
|
6
|
+
<q-card-section>
|
|
7
|
+
<div class="video-certificate__image">
|
|
8
|
+
<img :src="selectedCertificate.url" alt="">
|
|
9
|
+
</div>
|
|
10
|
+
</q-card-section>
|
|
11
|
+
<q-card-actions class="video-certificate__actions" align="right">
|
|
12
|
+
<q-btn flat class="close-button" v-close-popup>Close</q-btn>
|
|
13
|
+
<q-btn flat class="download-button" @click="checkUserForm" >Download</q-btn>
|
|
14
|
+
</q-card-actions>
|
|
15
|
+
|
|
16
|
+
<q-dialog v-model="is_user_form_dialog_open">
|
|
17
|
+
<fillup-prompt></fillup-prompt>
|
|
18
|
+
</q-dialog>
|
|
19
|
+
</q-card>
|
|
20
|
+
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<style lang="scss">
|
|
24
|
+
.video-certificate
|
|
25
|
+
{
|
|
26
|
+
&__title{
|
|
27
|
+
font-weight: 600;
|
|
28
|
+
text-align: left;
|
|
29
|
+
font-size: 15px;
|
|
30
|
+
color:#121212;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&__image{
|
|
34
|
+
width: 100%;
|
|
35
|
+
height: 300px;
|
|
36
|
+
background-color: #000;
|
|
37
|
+
img{
|
|
38
|
+
width: 100%;
|
|
39
|
+
height: 100%;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&__actions{
|
|
44
|
+
.close-button{
|
|
45
|
+
background-color: #f3f3f3;
|
|
46
|
+
color: #121212;
|
|
47
|
+
box-shadow: none;
|
|
48
|
+
padding:0px 15px;
|
|
49
|
+
}
|
|
50
|
+
.download-button{
|
|
51
|
+
background-color: #296117;
|
|
52
|
+
color: #fff;
|
|
53
|
+
padding:0px 15px;
|
|
54
|
+
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
</style>
|
|
59
|
+
|
|
60
|
+
<script>
|
|
61
|
+
|
|
62
|
+
import FillupPrompt from './FillupPrompt.vue';
|
|
63
|
+
export default
|
|
64
|
+
{
|
|
65
|
+
components:{
|
|
66
|
+
FillupPrompt
|
|
67
|
+
},
|
|
68
|
+
data: () =>
|
|
69
|
+
({
|
|
70
|
+
is_user_form_dialog_open : false
|
|
71
|
+
}),
|
|
72
|
+
props:
|
|
73
|
+
{
|
|
74
|
+
selectedCertificate : Object
|
|
75
|
+
},
|
|
76
|
+
mounted()
|
|
77
|
+
{
|
|
78
|
+
|
|
79
|
+
},
|
|
80
|
+
methods:
|
|
81
|
+
{
|
|
82
|
+
checkUserForm()
|
|
83
|
+
{
|
|
84
|
+
if(!this.user_info.hasOwnProperty('srt_form_filled_up') )
|
|
85
|
+
{
|
|
86
|
+
this.is_user_form_dialog_open = true;
|
|
87
|
+
}
|
|
88
|
+
else{
|
|
89
|
+
window.open(this.selectedCertificate.url);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
}
|
|
94
|
+
</script>
|
|
95
|
+
<style lang="scss">
|
|
96
|
+
|
|
97
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "geer-builder",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.837",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
"validator": "^13.5.2",
|
|
25
25
|
"vue-socialmedia-share": "^1.0.1",
|
|
26
26
|
"vue-youtube": "^1.4.0",
|
|
27
|
-
"xlsx": "^0.16.9"
|
|
27
|
+
"xlsx": "^0.16.9",
|
|
28
|
+
"youtube-iframe": "^1.0.3"
|
|
28
29
|
},
|
|
29
30
|
"devDependencies": {
|
|
30
31
|
"grunt-bump": "^0.8.0",
|