viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 0fa3b3a79123734c2f341aadfc03b78bd665d715

Authored by Neeraj Sharma
1 parent 5ddc6bb047
Exists in master and in 3 other branches amber-development, development, ui-design

add loader after sucess api in id report

Showing 1 changed file with 42 additions and 20 deletions   Show diff stats
src/pages/Report/idCard.vue
Diff comments   View file @0fa3b3a
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- **** Id Card Select options **** --> 3 <!-- **** Id Card Select options **** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg4> 8 <v-flex xs12 sm12 lg4>
9 <v-layout> 9 <v-layout>
10 <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4"> 10 <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4">
11 <label class="right">Id Card For:</label> 11 <label class="right">Id Card For:</label>
12 </v-flex>--> 12 </v-flex>-->
13 <v-flex xs12 sm12 lg10 class="ml-2"> 13 <v-flex xs12 sm12 lg10 class="ml-2">
14 <v-autocomplete 14 <v-autocomplete
15 v-model="getReport.role" 15 v-model="getReport.role"
16 label="Select Type" 16 label="Select Type"
17 :items="getRoles" 17 :items="getRoles"
18 item-text="name" 18 item-text="name"
19 item-value="role" 19 item-value="role"
20 @change="getRoleInputs(getReport.role)" 20 @change="getRoleInputs(getReport.role)"
21 required 21 required
22 ></v-autocomplete> 22 ></v-autocomplete>
23 </v-flex> 23 </v-flex>
24 </v-layout> 24 </v-layout>
25 </v-flex> 25 </v-flex>
26 <v-flex xs12 sm12 lg4 v-if="showClass"> 26 <v-flex xs12 sm12 lg4 v-if="showClass">
27 <v-layout> 27 <v-layout>
28 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 28 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
29 <label class="right">Class:</label> 29 <label class="right">Class:</label>
30 </v-flex>--> 30 </v-flex>-->
31 <v-flex xs12 sm12 lg10 class="ml-2"> 31 <v-flex xs12 sm12 lg10 class="ml-2">
32 <v-select 32 <v-select
33 v-model="getReport.classId" 33 v-model="getReport.classId"
34 label="Select Class" 34 label="Select Class"
35 :items="classList" 35 :items="classList"
36 item-text="classNum" 36 item-text="classNum"
37 item-value="_id" 37 item-value="_id"
38 @change="getSections(getReport.classId)" 38 @change="getSections(getReport.classId)"
39 required 39 required
40 ></v-select> 40 ></v-select>
41 </v-flex> 41 </v-flex>
42 </v-layout> 42 </v-layout>
43 </v-flex> 43 </v-flex>
44 <v-flex xs12 sm12 lg4 v-if="showSections"> 44 <v-flex xs12 sm12 lg4 v-if="showSections">
45 <v-layout> 45 <v-layout>
46 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 46 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
47 <label class="right">Section:</label> 47 <label class="right">Section:</label>
48 </v-flex>--> 48 </v-flex>-->
49 <v-flex xs12 sm12 lg10 class="ml-2"> 49 <v-flex xs12 sm12 lg10 class="ml-2">
50 <v-select 50 <v-select
51 :items="addSection" 51 :items="addSection"
52 label="Select Section" 52 label="Select Section"
53 v-model="getReport.sectionId" 53 v-model="getReport.sectionId"
54 item-text="name" 54 item-text="name"
55 item-value="_id" 55 item-value="_id"
56 name="Select Section" 56 name="Select Section"
57 @change="getStudents" 57 @change="getStudents"
58 required 58 required
59 ></v-select> 59 ></v-select>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 </v-flex> 62 </v-flex>
63 <v-flex xs12 sm12 lg4 v-if="showStudents"> 63 <v-flex xs12 sm12 lg4 v-if="showStudents">
64 <v-layout> 64 <v-layout>
65 <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4"> 65 <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4">
66 <label class="right">Student:</label> 66 <label class="right">Student:</label>
67 </v-flex>--> 67 </v-flex>-->
68 <v-flex xs12 sm12 lg10 class="ml-2"> 68 <v-flex xs12 sm12 lg10 class="ml-2">
69 <v-select 69 <v-select
70 :items="getStudentsList" 70 :items="getStudentsList"
71 label="Select Student" 71 label="Select Student"
72 v-model="getReport._id" 72 v-model="getReport._id"
73 item-text="name" 73 item-text="name"
74 item-value="_id" 74 item-value="_id"
75 required 75 required
76 ></v-select> 76 ></v-select>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 </v-flex> 79 </v-flex>
80 <v-flex xs12 sm12 lg4 v-if="showTeacher"> 80 <v-flex xs12 sm12 lg4 v-if="showTeacher">
81 <v-layout> 81 <v-layout>
82 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 82 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
83 <label class="right">Teacher:</label> 83 <label class="right">Teacher:</label>
84 </v-flex>--> 84 </v-flex>-->
85 <v-flex xs12 sm12 lg10 class="ml-2"> 85 <v-flex xs12 sm12 lg10 class="ml-2">
86 <v-select 86 <v-select
87 v-model="getReport._id" 87 v-model="getReport._id"
88 label="Select Teacher" 88 label="Select Teacher"
89 :items="teacherList" 89 :items="teacherList"
90 item-text="name" 90 item-text="name"
91 item-value="_id" 91 item-value="_id"
92 required 92 required
93 ></v-select> 93 ></v-select>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 </v-flex> 96 </v-flex>
97 <v-flex xs12 sm12 lg4 v-if="showAdmin"> 97 <v-flex xs12 sm12 lg4 v-if="showAdmin">
98 <v-layout> 98 <v-layout>
99 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 99 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
100 <label class="right">Admin:</label> 100 <label class="right">Admin:</label>
101 </v-flex>--> 101 </v-flex>-->
102 <v-flex xs12 sm12 lg10 class="ml-2"> 102 <v-flex xs12 sm12 lg10 class="ml-2">
103 <v-select 103 <v-select
104 v-model="getReport._id" 104 v-model="getReport._id"
105 label="Select Admin" 105 label="Select Admin"
106 :items="userData" 106 :items="userData"
107 item-text="name" 107 item-text="name"
108 item-value="_id" 108 item-value="_id"
109 required 109 required
110 ></v-select> 110 ></v-select>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 </v-flex> 113 </v-flex>
114 <v-flex xs12 sm12 lg4 v-if="showAccountant"> 114 <v-flex xs12 sm12 lg4 v-if="showAccountant">
115 <v-layout> 115 <v-layout>
116 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 116 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
117 <label class="right">Accountant:</label> 117 <label class="right">Accountant:</label>
118 </v-flex>--> 118 </v-flex>-->
119 <v-flex xs12 sm12 lg10 class="ml-2"> 119 <v-flex xs12 sm12 lg10 class="ml-2">
120 <v-select 120 <v-select
121 v-model="getReport._id" 121 v-model="getReport._id"
122 label="Select Accountant" 122 label="Select Accountant"
123 :items="Users" 123 :items="Users"
124 item-text="name" 124 item-text="name"
125 item-value="_id" 125 item-value="_id"
126 required 126 required
127 ></v-select> 127 ></v-select>
128 </v-flex> 128 </v-flex>
129 </v-layout> 129 </v-layout>
130 </v-flex> 130 </v-flex>
131 <v-flex xs12 sm12 lg4 v-if="showLibrarian"> 131 <v-flex xs12 sm12 lg4 v-if="showLibrarian">
132 <v-layout> 132 <v-layout>
133 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4"> 133 <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
134 <label class="right">Librarian:</label> 134 <label class="right">Librarian:</label>
135 </v-flex>--> 135 </v-flex>-->
136 <v-flex xs12 sm12 lg10 class="ml-2"> 136 <v-flex xs12 sm12 lg10 class="ml-2">
137 <v-select 137 <v-select
138 v-model="getReport._id" 138 v-model="getReport._id"
139 label="Select Librarian" 139 label="Select Librarian"
140 :items="Users" 140 :items="Users"
141 item-text="name" 141 item-text="name"
142 item-value="_id" 142 item-value="_id"
143 required 143 required
144 ></v-select> 144 ></v-select>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 </v-flex> 147 </v-flex>
148 <v-flex xs12 sm12 lg4> 148 <v-flex xs12 sm12 lg4>
149 <v-layout> 149 <v-layout>
150 <!-- <v-flex xs4 sm4 lg2 class="subheading mt-4"> 150 <!-- <v-flex xs4 sm4 lg2 class="subheading mt-4">
151 <label class="right">Type:</label> 151 <label class="right">Type:</label>
152 </v-flex>--> 152 </v-flex>-->
153 <v-flex xs12 sm12 lg10 class="ml-2"> 153 <v-flex xs12 sm12 lg10 class="ml-2">
154 <v-autocomplete 154 <v-autocomplete
155 label="Select View Type" 155 label="Select View Type"
156 type="text" 156 type="text"
157 :items="typeList" 157 :items="typeList"
158 v-model="getReport.form" 158 v-model="getReport.form"
159 item-text="name" 159 item-text="name"
160 item-value="value" 160 item-value="value"
161 :rules="typeRules" 161 :rules="typeRules"
162 @change="getReportType(getReport.form)" 162 @change="getReportType(getReport.form)"
163 required 163 required
164 ></v-autocomplete> 164 ></v-autocomplete>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-flex> 167 </v-flex>
168 <v-flex xs12 sm12 lg4> 168 <v-flex xs12 sm12 lg4>
169 <v-btn 169 <v-btn
170 @click="getCards" 170 @click="getCards"
171 round 171 round
172 dark 172 dark
173 :loading="loading" 173 :loading="loading"
174 class="open-dialog-button mt-3 " 174 class="open-dialog-button mt-3"
175 >Get Report</v-btn> 175 >Get Report</v-btn>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 </v-flex> 178 </v-flex>
179 </v-form> 179 </v-form>
180 </v-card> 180 </v-card>
181 <div> 181 <div>
182 <v-layout v-show="showReport"> 182 <v-layout v-show="showReport">
183 <v-flex xs12> 183 <v-flex xs12>
184 <v-card class="transparent elevation-0"> 184 <v-card class="transparent elevation-0">
185 <v-layout> 185 <v-layout>
186 <v-flex xs12> 186 <v-flex xs12>
187 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()"> 187 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
188 Print 188 Print
189 <v-icon right dark>print</v-icon> 189 <v-icon right dark>print</v-icon>
190 </v-btn> 190 </v-btn>
191 </v-flex> 191 </v-flex>
192 </v-layout> 192 </v-layout>
193 </v-card> 193 </v-card>
194 <v-container grid-list-md id="printMe"> 194 <v-container grid-list-md id="printMe">
195 <v-layout class="col-sm-12"> 195 <v-layout class="col-sm-12">
196 <div 196 <div
197 style="font-family: arial; 197 style="font-family: arial;
198 max-width: 794px; 198 max-width: 794px;
199 max-height: 1123px; 199 max-height: 1123px;
200 margin-left: auto; 200 margin-left: auto;
201 margin-right: auto; 201 margin-right: auto;
202 -webkit-print-color-adjust: exact;" 202 -webkit-print-color-adjust: exact;"
203 > 203 >
204 <div 204 <div
205 style=" 205 style="
206 float: left; 206 float: left;
207 height: 520px; 207 height: 520px;
208 width: 520px; 208 width: 520px;
209 background: #fff; 209 background: #fff;
210 border: 1px solid lightgray; 210 border: 1px solid lightgray;
211 position:relative;" 211 position:relative;"
212 > 212 >
213 <!-- bottom-right-side-image --> 213 <!-- bottom-right-side-image -->
214 <img 214 <img
215 src="/static/icon/shape1.png" 215 src="/static/icon/shape1.png"
216 alt="shape" 216 alt="shape"
217 style="position:absolute;width: 90px;" 217 style="position:absolute;width: 90px;"
218 /> 218 />
219 <!-- Front Side --> 219 <!-- Front Side -->
220 <v-layout 220 <v-layout
221 style=" 221 style="
222 text-align: center; 222 text-align: center;
223 margin-top: 50px;" 223 margin-top: 50px;"
224 v-if="frontPart" 224 v-if="frontPart"
225 > 225 >
226 <v-flex xs12> 226 <v-flex xs12>
227 <!-- school Logo Url --> 227 <!-- school Logo Url -->
228 <img 228 <img
229 v-if="getCard.schoolLogoUrl" 229 v-if="getCard.schoolLogoUrl"
230 :src="getCard.schoolLogoUrl" 230 :src="getCard.schoolLogoUrl"
231 alt="schoollogo" 231 alt="schoollogo"
232 style=" 232 style="
233 width: 110px; 233 width: 110px;
234 margin-top:10px; 234 margin-top:10px;
235 overflow:hidden" 235 overflow:hidden"
236 /> 236 />
237 <v-layout style="margin:auto"> 237 <v-layout style="margin:auto">
238 <!-- profile url --> 238 <!-- profile url -->
239 <img 239 <img
240 v-if="getCard.profilePicUrl" 240 v-if="getCard.profilePicUrl"
241 :src="getCard.profilePicUrl" 241 :src="getCard.profilePicUrl"
242 alt="profileImage" 242 alt="profileImage"
243 style="; 243 style=";
244 width: 110px; 244 width: 110px;
245 margin:10px auto; 245 margin:10px auto;
246 width: 110px; 246 width: 110px;
247 margin: 10px auto; 247 margin: 10px auto;
248 border: 3px solid #323232; 248 border: 3px solid #323232;
249 border-radius: 12px;" 249 border-radius: 12px;"
250 /> 250 />
251 <img 251 <img
252 style="; 252 style=";
253 width: 110px; 253 width: 110px;
254 margin:10px auto; 254 margin:10px auto;
255 width: 110px; 255 width: 110px;
256 margin: 10px auto;" 256 margin: 10px auto;"
257 alt="dummy" 257 alt="dummy"
258 src="/static/icon/user.png" 258 src="/static/icon/user.png"
259 v-if="!getCard.profilePicUrl && getCard.role != '2'" 259 v-if="!getCard.profilePicUrl && getCard.role != '2'"
260 /> 260 />
261 </v-layout> 261 </v-layout>
262 262
263 <p 263 <p
264 style="color: #302653;font-size:24px; 264 style="color: #302653;font-size:24px;
265 letter-spacing: 4px;" 265 letter-spacing: 4px;
266 margin-bottom:14px;"
266 > 267 >
267 <b>{{ getCard.name}}</b> 268 <b>{{ getCard.name}}</b>
268 </p> 269 </p>
269 <p 270 <p
270 style="color: #302653;font-size:14px; 271 style="color: #302653;
271 letter-spacing: 4px;" 272 font-size:14px;
273 letter-spacing: 4px;
274 margin-bottom:14px;"
272 > 275 >
273 <b>{{ getCard.gender}}</b> 276 <b>{{ getCard.gender}}</b>
274 </p> 277 </p>
275 <p 278 <p
276 v-if="getCard.classId" 279 v-if="getCard.classId"
277 style="color: #302653;font-size:24px; 280 style="color: #302653;
278 letter-spacing: 4px;" 281 font-size:24px;
282 letter-spacing: 4px;
283 margin-bottom:14px;"
279 >{{ getCard.classId.classNum }}</p> 284 >{{ getCard.classId.classNum }}</p>
280 <p 285 <p
281 v-if="getCard.classId" 286 v-if="getCard.classId"
282 style="color: #302653;font-size:24px; 287 style="color: #302653;
283 letter-spacing: 4px;" 288 font-size:24px;
289 letter-spacing: 4px;
290 margin-bottom:14px;"
284 >{{ getCard.sectionId.name }}</p> 291 >{{ getCard.sectionId.name }}</p>
285 <p 292 <p
286 v-if="getCard.rollNo" 293 v-if="getCard.rollNo"
287 style="color: #302653;font-size:24px; 294 style="color: #302653;
288 letter-spacing: 2px;" 295 font-size:24px;
296 letter-spacing: 2px;
297 margin-bottom:10px;"
289 >Roll: {{ getCard.rollNo }}</p> 298 >Roll: {{ getCard.rollNo }}</p>
290 <p 299 <p
291 v-if="getCard.joinDate" 300 v-if="getCard.joinDate"
292 style="color: #302653;font-size:16px; 301 style="color: #302653;
302 margin-bottom:10px;
303 font-size:16px;
293 letter-spacing: 2px;" 304 letter-spacing: 2px;"
294 >{{ dates(getCard.joinDate) }}</p> 305 >{{ dates(getCard.joinDate) }}</p>
295 <p 306 <p
296 v-if="getCard.joiningDate" 307 v-if="getCard.joiningDate"
297 style="color: #302653;font-size:16px; 308 style="color: #302653;
309 margin-bottom:10px;
310 font-size:16px;
298 letter-spacing: 2px;" 311 letter-spacing: 2px;"
299 >{{ dates(getCard.joiningDate) }}</p> 312 >{{ dates(getCard.joiningDate) }}</p>
300 <p 313 <p
301 v-if="getCard.phone" 314 v-if="getCard.phone"
302 style="color: #302653;font-size:16px; 315 style="color: #302653;
316 margin-bottom:10px;
317 font-size:16px;
303 letter-spacing: 2px;" 318 letter-spacing: 2px;"
304 >{{ getCard.phone }}</p> 319 >{{ getCard.phone }}</p>
305 <p 320 <p
306 style=" 321 style="
307 font-size: 19px; 322 font-size: 19px;
308 font-weight: 100; 323 font-weight: 100;
309 color: rgb(48, 38, 83); 324 color: rgb(48, 38, 83);
310 letter-spacing: 5px;" 325 letter-spacing: 5px;
326 margin-bottom:10px;"
311 > 327 >
312 <span v-if="getCard.mobile">{{ getCard.mobile}}</span> 328 <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
313 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span> 329 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
314 </p> 330 </p>
315 <!-- <p 331 <!-- <p
316 style=" 332 style="
317 font-size: 17px; 333 font-size: 17px;
318 font-weight: 100; 334 font-weight: 100;
319 color: rgb(48, 38, 83); 335 color: rgb(48, 38, 83);
320 letter-spacing: 4px;" 336 letter-spacing: 4px;"
321 >{{ getCard.address}}</p>--> 337 >{{ getCard.address}}</p>-->
322 <p 338 <p
323 style=" 339 style="
324 font-size: 17px; 340 font-size: 17px;
325 font-weight: 100; 341 font-weight: 100;
326 color: rgb(48, 38, 83); 342 color: rgb(48, 38, 83);
327 letter-spacing: 4px;" 343 letter-spacing: 4px;
344 margin-bottom:14px;"
328 >{{ getCard.email}}</p> 345 >{{ getCard.email}}</p>
329 </v-flex> 346 </v-flex>
330 </v-layout> 347 </v-layout>
331 <!-- back side --> 348 <!-- back side -->
332 <v-layout style=" 349 <v-layout style="
333 text-align: center;" v-if="backPart"> 350 text-align: center;" v-if="backPart">
334 <v-flex xs12> 351 <v-flex xs12>
335 <!-- school Logo Url --> 352 <!-- school Logo Url -->
336 <img 353 <img
337 v-if="getCard.schoolLogoUrl" 354 v-if="getCard.schoolLogoUrl"
338 :src="getCard.schoolLogoUrl" 355 :src="getCard.schoolLogoUrl"
339 alt="schoollogo" 356 alt="schoollogo"
340 style=" 357 style="
341 width: 110px; 358 width: 110px;
342 margin-top:10px; 359 margin-top:10px;
343 overflow:hidden" 360 overflow:hidden"
344 /> 361 />
345 <img 362 <img
346 v-if="getCard.schoolId" 363 v-if="getCard.schoolId"
347 :src="getCard.schoolId.schoolLogoUrl" 364 :src="getCard.schoolId.schoolLogoUrl"
348 alt="schoollogo" 365 alt="schoollogo"
349 style=" 366 style="
350 width: 110px; 367 width: 110px;
351 margin-top:10px; 368 margin-top:10px;
352 overflow:hidden" 369 overflow:hidden"
353 /> 370 />
354 <!-- <v-layout style="margin:auto"> 371 <!-- <v-layout style="margin:auto">
355 <img 372 <img
356 v-if="getCard.profilePicUrl" 373 v-if="getCard.profilePicUrl"
357 :src="getCard.profilePicUrl" 374 :src="getCard.profilePicUrl"
358 alt="profileImage" 375 alt="profileImage"
359 style="; 376 style=";
360 width: 110px; 377 width: 110px;
361 margin:10px auto; 378 margin:10px auto;
362 width: 110px; 379 width: 110px;
363 margin: 10px auto; 380 margin: 10px auto;
364 border: 3px solid #323232; 381 border: 3px solid #323232;
365 border-radius: 12px;" 382 border-radius: 12px;"
366 /> 383 />
367 </v-layout>--> 384 </v-layout>-->
368 <p 385 <p
369 v-if="getCard.schoolLogoUrl" 386 v-if="getCard.schoolLogoUrl"
370 style="color: #302653;font-size:24px; 387 style="color: #302653;
371 letter-spacing: 4px;" 388 font-size:24px;
389 letter-spacing: 4px;
390 margin-bottom:14px;"
372 > 391 >
373 <b>{{ getCard.name}}</b> 392 <b>{{ getCard.name}}</b>
374 </p> 393 </p>
375 394
376 <p 395 <p
377 v-if="getCard.city" 396 v-if="getCard.city"
378 style=" 397 style="
379 font-size: 17px; 398 font-size: 17px;
380 font-weight: 100; 399 font-weight: 100;
381 color: rgb(48, 38, 83); 400 color: rgb(48, 38, 83);
382 letter-spacing: 4px;" 401 letter-spacing: 4px;
402 margin-bottom:14px;"
383 >{{ getCard.city}}</p> 403 >{{ getCard.city}}</p>
384 <p 404 <p
385 style=" 405 style="
386 font-size: 17px; 406 font-size: 17px;
387 font-weight: 100; 407 font-weight: 100;
388 color: rgb(48, 38, 83); 408 color: rgb(48, 38, 83);
389 letter-spacing: 4px;" 409 letter-spacing: 4px;
410 margin-bottom:14px;"
390 > 411 >
391 {{ getCard.address }} 412 {{ getCard.address }}
392 {{ getCard.presentAddress }} 413 {{ getCard.presentAddress }}
393 <span 414 <span
394 v-if="getCard.state" 415 v-if="getCard.state"
395 >({{ getCard.state }})</span> 416 >({{ getCard.state }})</span>
396 </p> 417 </p>
397 <p 418 <p
398 v-if="getCard.establishmentYear" 419 v-if="getCard.establishmentYear"
399 style=" 420 style="
400 font-size: 17px; 421 font-size: 17px;
401 font-weight: 100; 422 font-weight: 100;
402 color: rgb(48, 38, 83); 423 color: rgb(48, 38, 83);
403 letter-spacing: 4px;" 424 letter-spacing: 4px;
425 margin-bottom:14px;"
404 >{{ getCard.establishmentYear }}</p> 426 >{{ getCard.establishmentYear }}</p>
405 </v-flex> 427 </v-flex>
406 </v-layout> 428 </v-layout>
407 <!-- bottom-right-side-image --> 429 <!-- bottom-right-side-image -->
408 <img 430 <img
409 src="static/icon/shape2.png" 431 src="static/icon/shape2.png"
410 alt="shape2" 432 alt="shape2"
411 style="bottom: 0; 433 style="bottom: 0;
412 position: absolute; 434 position: absolute;
413 right: 0; 435 right: 0;
414 width: 110px;" 436 width: 110px;"
415 /> 437 />
416 </div> 438 </div>
417 </div> 439 </div>
418 </v-layout> 440 </v-layout>
419 </v-container> 441 </v-container>
420 </v-flex> 442 </v-flex>
421 </v-layout> 443 </v-layout>
422 </div> 444 </div>
423 <v-snackbar 445 <v-snackbar
424 :timeout="timeout" 446 :timeout="timeout"
425 :top="y === 'top'" 447 :top="y === 'top'"
426 :right="x === 'right'" 448 :right="x === 'right'"
427 :vertical="mode === 'vertical'" 449 :vertical="mode === 'vertical'"
428 v-model="snackbar" 450 v-model="snackbar"
429 :color="color" 451 :color="color"
430 >{{ text }}</v-snackbar> 452 >{{ text }}</v-snackbar>
431 <div class="loader" v-if="showLoader"> 453 <div class="loader" v-if="showLoader">
432 <v-progress-circular indeterminate color="white"></v-progress-circular> 454 <v-progress-circular indeterminate color="white"></v-progress-circular>
433 </div> 455 </div>
434 </v-container> 456 </v-container>
435 </template> 457 </template>
436 458
437 <script> 459 <script>
438 import http from "@/Services/http.js"; 460 import http from "@/Services/http.js";
439 import moment from "moment"; 461 import moment from "moment";
440 462
441 export default { 463 export default {
442 data: () => ({ 464 data: () => ({
443 showLoader: false, 465 showLoader: false,
444 valid: true, 466 valid: true,
445 report: {}, 467 report: {},
446 userData: {}, 468 userData: {},
447 snackbar: false, 469 snackbar: false,
448 color: "", 470 color: "",
449 y: "top", 471 y: "top",
450 x: "right", 472 x: "right",
451 mode: "", 473 mode: "",
452 timeout: 10000, 474 timeout: 10000,
453 text: "", 475 text: "",
454 loading: false, 476 loading: false,
455 showReport: false, 477 showReport: false,
456 frontPart: false, 478 frontPart: false,
457 backPart: false, 479 backPart: false,
458 showClass: false, 480 showClass: false,
459 showTeacher: false, 481 showTeacher: false,
460 showAdmin: false, 482 showAdmin: false,
461 showAccountant: false, 483 showAccountant: false,
462 showLibrarian: false, 484 showLibrarian: false,
463 hideprintIdCard: false, 485 hideprintIdCard: false,
464 hidebackprintIdCard: false, 486 hidebackprintIdCard: false,
465 showStudents: false, 487 showStudents: false,
466 showSections: false, 488 showSections: false,
467 getRoles: [], 489 getRoles: [],
468 classList: [], 490 classList: [],
469 getCard: [], 491 getCard: [],
470 addSection: [], 492 addSection: [],
471 getStudentsList: [], 493 getStudentsList: [],
472 teacherList: [], 494 teacherList: [],
473 userData: [], 495 userData: [],
474 Users: [], 496 Users: [],
475 getReport: {}, 497 getReport: {},
476 // cardRules: [v => !!v || "Id-Card Field is required"], 498 // cardRules: [v => !!v || "Id-Card Field is required"],
477 // classRules: [v => !!v || "Class Field is required"], 499 // classRules: [v => !!v || "Class Field is required"],
478 // sectionRules: [v => !!v || "Section Field is required"], 500 // sectionRules: [v => !!v || "Section Field is required"],
479 // studentRules: [v => !!v || "Student Field is required"], 501 // studentRules: [v => !!v || "Student Field is required"],
480 // teacherRules: [v => !!v || "Teacher Field is required"], 502 // teacherRules: [v => !!v || "Teacher Field is required"],
481 // adminRules: [v => !!v || "Admin Field is required"], 503 // adminRules: [v => !!v || "Admin Field is required"],
482 // accountantRules: [v => !!v || "Accountant Field is required"], 504 // accountantRules: [v => !!v || "Accountant Field is required"],
483 // librarianRules: [v => !!v || "Librarian Field is required"], 505 // librarianRules: [v => !!v || "Librarian Field is required"],
484 506
485 typeRules: [v => !!v || "Type is required"], 507 typeRules: [v => !!v || "Type is required"],
486 // backgroundRules: [v => !!v || "Background is required"], 508 // backgroundRules: [v => !!v || "Background is required"],
487 typeList: [ 509 typeList: [
488 { 510 {
489 name: "Front Part", 511 name: "Front Part",
490 value: "frontPart" 512 value: "frontPart"
491 }, 513 },
492 { 514 {
493 name: "Back Part", 515 name: "Back Part",
494 value: "backPart" 516 value: "backPart"
495 } 517 }
496 ], 518 ],
497 backgroundList: ["Yes", "No"] 519 backgroundList: ["Yes", "No"]
498 }), 520 }),
499 521
500 mounted() { 522 mounted() {
501 this.token = this.$store.state.token; 523 this.token = this.$store.state.token;
502 this.getUserData(); 524 this.getUserData();
503 this.getRole(); 525 this.getRole();
504 }, 526 },
505 527
506 methods: { 528 methods: {
507 dates: function(date) { 529 dates: function(date) {
508 return moment(date).format("MMMM DD, YYYY"); 530 return moment(date).format("MMMM DD, YYYY");
509 return date; 531 return date;
510 }, 532 },
511 getReportType() { 533 getReportType() {
512 if (this.getReport.form === "frontPart") { 534 if (this.getReport.form === "frontPart") {
513 this.frontPart = true; 535 this.frontPart = true;
514 this.backPart = false; 536 this.backPart = false;
515 } 537 }
516 if (this.getReport.form === "backPart") { 538 if (this.getReport.form === "backPart") {
517 this.frontPart = false; 539 this.frontPart = false;
518 this.backPart = true; 540 this.backPart = true;
519 } 541 }
520 }, 542 },
521 getRoleInputs(role) { 543 getRoleInputs(role) {
522 console.log("role", role); 544 console.log("role", role);
523 this.showReport = false; 545 this.showReport = false;
524 this.getReport._id = ""; 546 this.getReport._id = "";
525 this.getCard = ""; 547 this.getCard = "";
526 if (role === 4) { 548 if (role === 4) {
527 // console.log("role", role); 549 // console.log("role", role);
528 this.showClass = true; 550 this.showClass = true;
529 this.showTeacher = false; 551 this.showTeacher = false;
530 this.showAdmin = false; 552 this.showAdmin = false;
531 this.showAccountant = false; 553 this.showAccountant = false;
532 this.showLibrarian = false; 554 this.showLibrarian = false;
533 this.showStudents = false; 555 this.showStudents = false;
534 this.showSections = false; 556 this.showSections = false;
535 this.getClass(); 557 this.getClass();
536 } 558 }
537 if (role === 3) { 559 if (role === 3) {
538 this.showTeacher = true; 560 this.showTeacher = true;
539 this.showClass = false; 561 this.showClass = false;
540 this.showAdmin = false; 562 this.showAdmin = false;
541 this.showAccountant = false; 563 this.showAccountant = false;
542 this.showLibrarian = false; 564 this.showLibrarian = false;
543 this.showStudents = false; 565 this.showStudents = false;
544 this.showSections = false; 566 this.showSections = false;
545 this.getTeacherList(); 567 this.getTeacherList();
546 } 568 }
547 if (role === 2) { 569 if (role === 2) {
548 this.showAdmin = true; 570 this.showAdmin = true;
549 this.showTeacher = false; 571 this.showTeacher = false;
550 this.showClass = false; 572 this.showClass = false;
551 this.showAccountant = false; 573 this.showAccountant = false;
552 this.showLibrarian = false; 574 this.showLibrarian = false;
553 this.showStudents = false; 575 this.showStudents = false;
554 this.showSections = false; 576 this.showSections = false;
555 this.getUserData(); 577 this.getUserData();
556 } 578 }
557 if (role === 6) { 579 if (role === 6) {
558 this.showAccountant = true; 580 this.showAccountant = true;
559 this.showAdmin = false; 581 this.showAdmin = false;
560 this.showTeacher = false; 582 this.showTeacher = false;
561 this.showClass = false; 583 this.showClass = false;
562 this.showLibrarian = false; 584 this.showLibrarian = false;
563 this.showStudents = false; 585 this.showStudents = false;
564 this.showSections = false; 586 this.showSections = false;
565 this.getUsersList(role); 587 this.getUsersList(role);
566 } 588 }
567 if (role === 7) { 589 if (role === 7) {
568 this.showLibrarian = true; 590 this.showLibrarian = true;
569 this.showAccountant = false; 591 this.showAccountant = false;
570 this.showAdmin = false; 592 this.showAdmin = false;
571 this.showTeacher = false; 593 this.showTeacher = false;
572 this.showClass = false; 594 this.showClass = false;
573 this.showStudents = false; 595 this.showStudents = false;
574 this.showSections = false; 596 this.showSections = false;
575 this.getUsersList(role); 597 this.getUsersList(role);
576 } 598 }
577 }, 599 },
578 600
579 prindIDCardReport() { 601 prindIDCardReport() {
580 // Pass the element id here 602 // Pass the element id here
581 this.$htmlToPaper("printMe"); 603 this.$htmlToPaper("printMe");
582 }, 604 },
583 getUserData() { 605 getUserData() {
584 this.showLoader = true; 606 this.showLoader = true;
585 http() 607 http()
586 .get("/getParticularUserDetail") 608 .get("/getParticularUserDetail")
587 .then(response => { 609 .then(response => {
588 this.userData = response.data.data; 610 this.userData = response.data.data;
589 this.showLoader = false; 611 this.showLoader = false;
590 // this.adminList = response.data.data; 612 // this.adminList = response.data.data;
591 }) 613 })
592 .catch(error => { 614 .catch(error => {
593 this.showLoader = false; 615 this.showLoader = false;
594 if (error.response.status === 401) { 616 if (error.response.status === 401) {
595 this.$router.replace({ path: "/" }); 617 this.$router.replace({ path: "/" });
596 this.$store.dispatch("setToken", null); 618 this.$store.dispatch("setToken", null);
597 this.$store.dispatch("Id", null); 619 this.$store.dispatch("Id", null);
598 } 620 }
599 }); 621 });
600 }, 622 },
601 getRole() { 623 getRole() {
602 this.showLoader = true; 624 this.showLoader = true;
603 http() 625 http()
604 .get("/getRolesList", { 626 .get("/getRolesList", {
605 headers: { Authorization: "Bearer " + this.token } 627 headers: { Authorization: "Bearer " + this.token }
606 }) 628 })
607 .then(response => { 629 .then(response => {
608 var getRoles = []; 630 var getRoles = [];
609 getRoles = response.data.data; 631 getRoles = response.data.data;
610 // if (getRoles[0].role !== 1) { 632 // if (getRoles[0].role !== 1) {
611 // getRoles = response.data.data; 633 // getRoles = response.data.data;
612 // } 634 // }
613 for (let i = 0; i < getRoles.length; i++) { 635 for (let i = 0; i < getRoles.length; i++) {
614 if (getRoles[i].role != "1" && getRoles[i].role != "5") { 636 if (getRoles[i].role != "1" && getRoles[i].role != "5") {
615 this.getRoles.push(getRoles[i]); 637 this.getRoles.push(getRoles[i]);
616 } 638 }
617 } 639 }
618 this.showLoader = false; 640 this.showLoader = false;
619 }) 641 })
620 .catch(error => { 642 .catch(error => {
621 this.showLoader = false; 643 this.showLoader = false;
622 if (error.response.status === 401) { 644 if (error.response.status === 401) {
623 this.$router.replace({ path: "/" }); 645 this.$router.replace({ path: "/" });
624 this.$store.dispatch("setToken", null); 646 this.$store.dispatch("setToken", null);
625 this.$store.dispatch("Id", null); 647 this.$store.dispatch("Id", null);
626 this.$store.dispatch("Role", null); 648 this.$store.dispatch("Role", null);
627 } 649 }
628 }); 650 });
629 }, 651 },
630 getClass() { 652 getClass() {
631 console.log("get classes"); 653 console.log("get classes");
632 this.showLoader = true; 654 this.showLoader = true;
633 http() 655 http()
634 .get("/getClassesList", { 656 .get("/getClassesList", {
635 headers: { Authorization: "Bearer " + this.token } 657 headers: { Authorization: "Bearer " + this.token }
636 }) 658 })
637 .then(response => { 659 .then(response => {
638 this.classList = response.data.data; 660 this.classList = response.data.data;
639 this.showLoader = false; 661 this.showLoader = false;
640 }) 662 })
641 .catch(error => { 663 .catch(error => {
642 this.showLoader = false; 664 this.showLoader = false;
643 // console.log("err====>", err); 665 // console.log("err====>", err);
644 }); 666 });
645 }, 667 },
646 getSections(_id) { 668 getSections(_id) {
647 this.showLoader = true; 669 this.showLoader = true;
648 http() 670 http()
649 .get( 671 .get(
650 "/getSectionsList", 672 "/getSectionsList",
651 { params: { classId: _id } }, 673 { params: { classId: _id } },
652 { 674 {
653 headers: { Authorization: "Bearer " + this.token } 675 headers: { Authorization: "Bearer " + this.token }
654 } 676 }
655 ) 677 )
656 .then(response => { 678 .then(response => {
657 this.addSection = response.data.data; 679 this.addSection = response.data.data;
658 this.showSections = true; 680 this.showSections = true;
659 this.showLoader = false; 681 this.showLoader = false;
660 }) 682 })
661 .catch(err => { 683 .catch(err => {
662 this.showLoader = false; 684 this.showLoader = false;
663 // console.log("err====>", err); 685 // console.log("err====>", err);
664 }); 686 });
665 }, 687 },
666 getStudents() { 688 getStudents() {
667 this.showLoader = true; 689 this.showLoader = true;
668 http() 690 http()
669 .get("/getStudentWithClass", { 691 .get("/getStudentWithClass", {
670 params: { 692 params: {
671 classId: this.getReport.classId, 693 classId: this.getReport.classId,
672 sectionId: this.getReport.sectionId 694 sectionId: this.getReport.sectionId
673 } 695 }
674 }) 696 })
675 .then(response => { 697 .then(response => {
676 this.getStudentsList = response.data.data; 698 this.getStudentsList = response.data.data;
677 this.showStudents = true; 699 this.showStudents = true;
678 this.showLoader = false; 700 this.showLoader = false;
679 }) 701 })
680 .catch(error => { 702 .catch(error => {
681 console.log("err====>", error); 703 console.log("err====>", error);
682 this.showLoader = false; 704 this.showLoader = false;
683 }); 705 });
684 }, 706 },
685 getCards() { 707 getCards() {
686 this.showLoader = true; 708 this.showLoader = true;
687 if (this.$refs.form.validate()) { 709 if (this.$refs.form.validate()) {
688 http() 710 http()
689 .get("/getIdCardDetail", { 711 .get("/getIdCardDetail", {
690 headers: { 712 headers: {
691 Authorization: "Bearer " + this.token 713 Authorization: "Bearer " + this.token
692 }, 714 },
693 params: { 715 params: {
694 profileId: this.getReport._id, 716 profileId: this.getReport._id,
695 role: this.getReport.role 717 role: this.getReport.role
696 } 718 }
697 }) 719 })
698 .then(response => { 720 .then(response => {
699 this.getCard = ""; 721 this.getCard = "";
700 var data = response.data.data; 722 var data = response.data.data;
701 if ( 723 if (
702 Object.keys(data.adminData).length != 0 && 724 Object.keys(data.adminData).length != 0 &&
703 data.adminData.constructor === Object 725 data.adminData.constructor === Object
704 ) { 726 ) {
705 this.getCard = response.data.data.adminData; 727 this.getCard = response.data.data.adminData;
706 console.log("this.getCard ", this.getCard); 728 console.log("this.getCard ", this.getCard);
707 } 729 }
708 if ( 730 if (
709 Object.keys(data.teachersData).length != 0 && 731 Object.keys(data.teachersData).length != 0 &&
710 data.teachersData.constructor === Object 732 data.teachersData.constructor === Object
711 ) { 733 ) {
712 this.getCard = response.data.data.teachersData; 734 this.getCard = response.data.data.teachersData;
713 console.log("this.getCard--teachersData ", this.getCard); 735 console.log("this.getCard--teachersData ", this.getCard);
714 } 736 }
715 if ( 737 if (
716 Object.keys(data.studentData).length != 0 && 738 Object.keys(data.studentData).length != 0 &&
717 data.studentData.constructor === Object 739 data.studentData.constructor === Object
718 ) { 740 ) {
719 this.getCard = response.data.data.studentData; 741 this.getCard = response.data.data.studentData;
720 console.log("this.getCard--studentData ", this.getCard); 742 console.log("this.getCard--studentData ", this.getCard);
721 } 743 }
722 if ( 744 if (
723 Object.keys(data.usersData).length != 0 && 745 Object.keys(data.usersData).length != 0 &&
724 data.usersData.constructor === Object 746 data.usersData.constructor === Object
725 ) { 747 ) {
726 this.getCard = response.data.data.usersData; 748 this.getCard = response.data.data.usersData;
727 console.log("this.getCard--usersData ", this.getCard); 749 console.log("this.getCard--usersData ", this.getCard);
728 } 750 }
729 // console.log("this.getCard--all ", response.data.data); 751 // console.log("this.getCard--all ", response.data.data);
730 this.showLoader = false; 752 this.showLoader = false;
731 this.showReport = true; 753 this.showReport = true;
732 }) 754 })
733 .catch(error => { 755 .catch(error => {
734 this.showLoader = false; 756 this.showLoader = false;
735 console.log("error", error.response.data.errors); 757 console.log("error", error.response.data.errors);
736 if (error.response.data.errors) { 758 if (error.response.data.errors) {
737 this.snackbar = true; 759 this.snackbar = true;
738 this.text = " Field is required"; 760 this.text = " Field is required";
739 this.color = "error"; 761 this.color = "error";
740 } 762 }
741 }); 763 });
742 } 764 }
743 }, 765 },
744 getTeacherList() { 766 getTeacherList() {
745 this.showLoader = true; 767 this.showLoader = true;
746 var token = this.$store.state.token; 768 var token = this.$store.state.token;
747 http() 769 http()
748 .get("/getTeachersList", { 770 .get("/getTeachersList", {
749 headers: { Authorization: "Bearer " + token } 771 headers: { Authorization: "Bearer " + token }
750 }) 772 })
751 .then(response => { 773 .then(response => {
752 this.teacherList = response.data.data; 774 this.teacherList = response.data.data;
753 this.showLoader = false; 775 this.showLoader = false;
754 }) 776 })
755 .catch(error => { 777 .catch(error => {
756 this.showLoader = false; 778 this.showLoader = false;
757 if (error.response.status === 401) { 779 if (error.response.status === 401) {
758 this.$router.replace({ path: "/" }); 780 this.$router.replace({ path: "/" });
759 this.$store.dispatch("setToken", null); 781 this.$store.dispatch("setToken", null);
760 this.$store.dispatch("Id", null); 782 this.$store.dispatch("Id", null);
761 } 783 }
762 }); 784 });
763 }, 785 },
764 getUsersList(role) { 786 getUsersList(role) {
765 this.showLoader = true; 787 this.showLoader = true;
766 var token = this.$store.state.token; 788 var token = this.$store.state.token;
767 http() 789 http()
768 .get("/getUsersList?role=" + role, { 790 .get("/getUsersList?role=" + role, {
769 headers: { Authorization: "Bearer " + token } 791 headers: { Authorization: "Bearer " + token }
770 }) 792 })
771 .then(response => { 793 .then(response => {
772 this.Users = response.data.data; 794 this.Users = response.data.data;
773 this.showLoader = false; 795 this.showLoader = false;
774 }) 796 })
775 .catch(error => { 797 .catch(error => {
776 this.showLoader = false; 798 this.showLoader = false;
777 if (error.response.status === 401) { 799 if (error.response.status === 401) {
778 this.$router.replace({ path: "/" }); 800 this.$router.replace({ path: "/" });
779 this.$store.dispatch("setToken", null); 801 this.$store.dispatch("setToken", null);
780 this.$store.dispatch("Id", null); 802 this.$store.dispatch("Id", null);
781 } 803 }
782 }); 804 });
783 }, 805 },
784 getParentDetails() { 806 getParentDetails() {
785 http() 807 http()
786 .get("getParentsList", { 808 .get("getParentsList", {
787 headers: { 809 headers: {
788 Authorization: "Bearer " + this.$store.state.token 810 Authorization: "Bearer " + this.$store.state.token
789 } 811 }
790 }) 812 })
791 .then(response => { 813 .then(response => {
792 this.parentsList = response.data.data; 814 this.parentsList = response.data.data;
793 }) 815 })
794 .catch(error => { 816 .catch(error => {
795 // console.log("err====>", error.response.data.message); 817 // console.log("err====>", error.response.data.message);
796 this.showLoader = false; 818 this.showLoader = false;
797 if (error.response.status === 401) { 819 if (error.response.status === 401) {
798 this.$router.replace({ path: "/" }); 820 this.$router.replace({ path: "/" });
799 this.$store.dispatch("setToken", null); 821 this.$store.dispatch("setToken", null);
800 this.$store.dispatch("Id", null); 822 this.$store.dispatch("Id", null);
801 this.$store.dispatch("Role", null); 823 this.$store.dispatch("Role", null);
802 } 824 }
803 }); 825 });
804 } 826 }
805 } 827 }
806 }; 828 };
807 </script> 829 </script>
808 830
809 <style scoped> 831 <style scoped>
810 .Data { 832 .Data {
811 width: 100%; 833 width: 100%;
812 float: left; 834 float: left;
813 margin-bottom: 0px; 835 margin-bottom: 0px;
814 padding: 0 15px; 836 padding: 0 15px;
815 font-size: 14px; 837 font-size: 14px;
816 margin-top: 5px; 838 margin-top: 5px;
817 text-align: justify; 839 text-align: justify;
818 } 840 }
819 .idcardreport { 841 .idcardreport {
820 font-family: arial; 842 font-family: arial;
821 max-width: 794px; 843 max-width: 794px;
822 max-height: 1123px; 844 max-height: 1123px;
823 margin-left: auto; 845 margin-left: auto;
824 margin-right: auto; 846 margin-right: auto;
825 -webkit-print-color-adjust: exact; 847 -webkit-print-color-adjust: exact;
826 } 848 }
827 .idcardreport1 { 849 .idcardreport1 {
828 text-align: center; 850 text-align: center;
829 margin-left: 35%; 851 margin-left: 35%;
830 } 852 }
831 .icard-front { 853 .icard-front {
832 margin: 3px; 854 margin: 3px;
833 float: left; 855 float: left;
834 padding: 10px; 856 padding: 10px;
835 text-align: center; 857 text-align: center;
836 height: 520px; 858 height: 520px;
837 width: 520px; 859 width: 520px;
838 background: #fff; 860 background: #fff;
839 border: 1px solid lightgray; 861 border: 1px solid lightgray;
840 } 862 }
841 .print-data { 863 .print-data {
842 margin: 3px; 864 margin: 3px;
843 float: left; 865 float: left;
844 /* border: 1px solid #000; */ 866 /* border: 1px solid #000; */
845 padding: 10px; 867 padding: 10px;
846 /* width: 55%; */ 868 /* width: 55%; */
847 text-align: center; 869 text-align: center;
848 height: 95%; 870 height: 95%;
849 } 871 }
850 .rightside { 872 .rightside {
851 float: right !important; 873 float: right !important;
852 } 874 }
853 .icard-front h2 { 875 .icard-front h2 {
854 font-size: 30px; 876 font-size: 30px;
855 } 877 }
856 .icard-back h2 { 878 .icard-back h2 {
857 font-size: 30px; 879 font-size: 30px;
858 } 880 }
859 .print-data h2 { 881 .print-data h2 {
860 font-size: 30px; 882 font-size: 30px;
861 text-align: center; 883 text-align: center;
862 } 884 }
863 .print-data img { 885 .print-data img {
864 width: 70px; 886 width: 70px;
865 height: 70px; 887 height: 70px;
866 margin-bottom: 5px; 888 margin-bottom: 5px;
867 } 889 }
868 .icard-front img { 890 .icard-front img {
869 width: 70px; 891 width: 70px;
870 height: 70px; 892 height: 70px;
871 margin-bottom: 5px; 893 margin-bottom: 5px;
872 } 894 }
873 .icard-back img { 895 .icard-back img {
874 width: 50px; 896 width: 50px;
875 height: 50px; 897 height: 50px;
876 margin-bottom: 5px; 898 margin-bottom: 5px;
877 } 899 }
878 .icard-img { 900 .icard-img {
879 width: 50px; 901 width: 50px;
880 height: 50px; 902 height: 50px;
881 margin-bottom: 5px; 903 margin-bottom: 5px;
882 margin-top: 5px; 904 margin-top: 5px;
883 border: 1px solid #ddd; 905 border: 1px solid #ddd;
884 } 906 }
885 .icard-data { 907 .icard-data {
886 /* font-family: Arial; */ 908 /* font-family: Arial; */
887 max-width: 794px; 909 max-width: 794px;
888 max-height: 1123px; 910 max-height: 1123px;
889 margin-left: auto; 911 margin-left: auto;
890 margin-right: auto; 912 margin-right: auto;
891 -webkit-print-color-adjust: exact; 913 -webkit-print-color-adjust: exact;
892 } 914 }
893 .icard-back { 915 .icard-back {
894 margin: 3px; 916 margin: 3px;
895 /* float: left; */ 917 /* float: left; */
896 /* border: 1px solid #000; */ 918 /* border: 1px solid #000; */
897 padding: 10px; 919 padding: 10px;
898 /* width: 55%; */ 920 /* width: 55%; */
899 text-align: center; 921 text-align: center;
900 /* height: 95%; */ 922 /* height: 95%; */
901 /* margin-top: 35%; */ 923 /* margin-top: 35%; */
902 } 924 }
903 .back-icard { 925 .back-icard {
904 margin: 3px; 926 margin: 3px;
905 padding: 10px; 927 padding: 10px;
906 } 928 }
907 .icard-back h3 { 929 .icard-back h3 {
908 background-color: #000; 930 background-color: #000;
909 color: #fff; 931 color: #fff;
910 font-size: 13px; 932 font-size: 13px;
911 padding: 5px 0px; 933 padding: 5px 0px;
912 margin: 5px; 934 margin: 5px;
913 margin-top: 13px; 935 margin-top: 13px;
914 } 936 }
915 .icard-back h5 { 937 .icard-back h5 {
916 font-size: 11px; 938 font-size: 11px;
917 color: #000; 939 color: #000;
918 font-weight: bold; 940 font-weight: bold;
919 padding: 5px 0px; 941 padding: 5px 0px;
920 } 942 }
921 /* .icard-back p { 943 /* .icard-back p {
922 font-size: 15px; 944 font-size: 15px;
923 color: #000; 945 color: #000;
924 font-weight: 500px; 946 font-weight: 500px;
925 line-height: 17px; 947 line-height: 17px;
926 } */ 948 } */
927 .school-address { 949 .school-address {
928 /* width: 40%; */ 950 /* width: 40%; */
929 font-weight: 500px; 951 font-weight: 500px;
930 color: #000; 952 color: #000;
931 } 953 }
932 .address { 954 .address {
933 font-weight: 500px; 955 font-weight: 500px;
934 color: #000; 956 color: #000;
935 text-align: center; 957 text-align: center;
936 } 958 }
937 .icard-bottom { 959 .icard-bottom {
938 padding-top: 5px; 960 padding-top: 5px;
939 text-align: center; 961 text-align: center;
940 } 962 }
941 .qrcode { 963 .qrcode {
942 float: left; 964 float: left;
943 width: 50%; 965 width: 50%;
944 } 966 }
945 .qrcode img { 967 .qrcode img {
946 width: 60px; 968 width: 60px;
947 height: 60px; 969 height: 60px;
948 margin-top: 15px; 970 margin-top: 15px;
949 } 971 }
950 .session { 972 .session {
951 float: right; 973 float: right;
952 width: 70%; 974 width: 70%;
953 margin-top: 15px; 975 margin-top: 15px;
954 } 976 }
955 @media screen and (max-width: 360px) { 977 @media screen and (max-width: 360px) {
956 .icard-front { 978 .icard-front {
957 width: 316px; 979 width: 316px;
958 height: 418px; 980 height: 418px;
959 float: inherit; 981 float: inherit;
960 } 982 }
961 .icard-back { 983 .icard-back {
962 float: left; 984 float: left;
963 } 985 }
964 } 986 }
965 </style> 987 </style>