viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 5ddc6bb0474a5cd9758e251c9ccf32f59b7092cc

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

complete design and functionality of idCard

Showing 1 changed file with 36 additions and 28 deletions   Show diff stats
src/pages/Report/idCard.vue
Diff comments   View file @5ddc6bb
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 sm6 lg4> 8 <v-flex xs12 sm12 lg4>
9 <v-layout> 9 <v-layout>
10 <!-- <v-flex xs3 sm6 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 xs7 sm6 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 sm6 lg4 v-if="showClass"> 26 <v-flex xs12 sm12 lg4 v-if="showClass">
27 <v-layout> 27 <v-layout>
28 <!-- <v-flex xs3 sm6 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 xs9 sm6 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 sm6 lg4 v-if="showSections"> 44 <v-flex xs12 sm12 lg4 v-if="showSections">
45 <v-layout> 45 <v-layout>
46 <!-- <v-flex xs3 sm6 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 xs9 sm6 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 sm6 lg4 v-if="showStudents"> 63 <v-flex xs12 sm12 lg4 v-if="showStudents">
64 <v-layout> 64 <v-layout>
65 <!-- <v-flex xs3 sm6 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 xs9 sm6 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 sm6 lg4 v-if="showTeacher"> 80 <v-flex xs12 sm12 lg4 v-if="showTeacher">
81 <v-layout> 81 <v-layout>
82 <!-- <v-flex xs3 sm6 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 xs9 sm6 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 sm6 lg4 v-if="showAdmin"> 97 <v-flex xs12 sm12 lg4 v-if="showAdmin">
98 <v-layout> 98 <v-layout>
99 <!-- <v-flex xs3 sm6 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 xs9 sm6 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 sm6 lg4 v-if="showAccountant"> 114 <v-flex xs12 sm12 lg4 v-if="showAccountant">
115 <v-layout> 115 <v-layout>
116 <!-- <v-flex xs3 sm6 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 xs9 sm6 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 sm6 lg4 v-if="showLibrarian"> 131 <v-flex xs12 sm12 lg4 v-if="showLibrarian">
132 <v-layout> 132 <v-layout>
133 <!-- <v-flex xs3 sm6 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 xs9 sm6 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 sm6 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 xs7 sm6 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 sm6 lg4 class="pl-5"> 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 ml-5" 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 > 266 >
267 <b>{{ getCard.name}}</b> 267 <b>{{ getCard.name}}</b>
268 </p> 268 </p>
269 <p 269 <p
270 style="color: #302653;font-size:14px; 270 style="color: #302653;font-size:14px;
271 letter-spacing: 4px;" 271 letter-spacing: 4px;"
272 > 272 >
273 <b>{{ getCard.gender}}</b> 273 <b>{{ getCard.gender}}</b>
274 </p> 274 </p>
275 <p 275 <p
276 v-if="getCard.classId" 276 v-if="getCard.classId"
277 style="color: #302653;font-size:24px; 277 style="color: #302653;font-size:24px;
278 letter-spacing: 4px;" 278 letter-spacing: 4px;"
279 >{{ getCard.classId.classNum }}</p> 279 >{{ getCard.classId.classNum }}</p>
280 <p 280 <p
281 v-if="getCard.classId" 281 v-if="getCard.classId"
282 style="color: #302653;font-size:24px; 282 style="color: #302653;font-size:24px;
283 letter-spacing: 4px;" 283 letter-spacing: 4px;"
284 >{{ getCard.sectionId.name }}</p> 284 >{{ getCard.sectionId.name }}</p>
285 <p 285 <p
286 v-if="getCard.rollNo" 286 v-if="getCard.rollNo"
287 style="color: #302653;font-size:24px; 287 style="color: #302653;font-size:24px;
288 letter-spacing: 2px;" 288 letter-spacing: 2px;"
289 >Roll: {{ getCard.rollNo }}</p> 289 >Roll: {{ getCard.rollNo }}</p>
290 <p 290 <p
291 v-if="getCard.joinDate" 291 v-if="getCard.joinDate"
292 style="color: #302653;font-size:16px; 292 style="color: #302653;font-size:16px;
293 letter-spacing: 2px;" 293 letter-spacing: 2px;"
294 >{{ dates(getCard.joinDate) }}</p> 294 >{{ dates(getCard.joinDate) }}</p>
295 <p 295 <p
296 v-if="getCard.joiningDate" 296 v-if="getCard.joiningDate"
297 style="color: #302653;font-size:16px; 297 style="color: #302653;font-size:16px;
298 letter-spacing: 2px;" 298 letter-spacing: 2px;"
299 >{{ dates(getCard.joiningDate) }}</p> 299 >{{ dates(getCard.joiningDate) }}</p>
300 <p 300 <p
301 v-if="getCard.phone" 301 v-if="getCard.phone"
302 style="color: #302653;font-size:16px; 302 style="color: #302653;font-size:16px;
303 letter-spacing: 2px;" 303 letter-spacing: 2px;"
304 >{{ getCard.phone }}</p> 304 >{{ getCard.phone }}</p>
305 <p 305 <p
306 style=" 306 style="
307 font-size: 19px; 307 font-size: 19px;
308 font-weight: 100; 308 font-weight: 100;
309 color: rgb(48, 38, 83); 309 color: rgb(48, 38, 83);
310 letter-spacing: 5px;" 310 letter-spacing: 5px;"
311 > 311 >
312 <span v-if="getCard.mobile">{{ getCard.mobile}}</span> 312 <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
313 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span> 313 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
314 </p> 314 </p>
315 <!-- <p 315 <!-- <p
316 style=" 316 style="
317 font-size: 17px; 317 font-size: 17px;
318 font-weight: 100; 318 font-weight: 100;
319 color: rgb(48, 38, 83); 319 color: rgb(48, 38, 83);
320 letter-spacing: 4px;" 320 letter-spacing: 4px;"
321 >{{ getCard.address}}</p>--> 321 >{{ getCard.address}}</p>-->
322 <p 322 <p
323 style=" 323 style="
324 font-size: 17px; 324 font-size: 17px;
325 font-weight: 100; 325 font-weight: 100;
326 color: rgb(48, 38, 83); 326 color: rgb(48, 38, 83);
327 letter-spacing: 4px;" 327 letter-spacing: 4px;"
328 >{{ getCard.email}}</p> 328 >{{ getCard.email}}</p>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 <!-- back side --> 331 <!-- back side -->
332 <v-layout style=" 332 <v-layout style="
333 text-align: center;" v-if="backPart"> 333 text-align: center;" v-if="backPart">
334 <v-flex xs12> 334 <v-flex xs12>
335 <!-- school Logo Url --> 335 <!-- school Logo Url -->
336 <img 336 <img
337 v-if="getCard.schoolLogoUrl" 337 v-if="getCard.schoolLogoUrl"
338 :src="getCard.schoolLogoUrl" 338 :src="getCard.schoolLogoUrl"
339 alt="schoollogo" 339 alt="schoollogo"
340 style=" 340 style="
341 width: 110px; 341 width: 110px;
342 margin-top:10px; 342 margin-top:10px;
343 overflow:hidden" 343 overflow:hidden"
344 /> 344 />
345 <img 345 <img
346 v-if="getCard.schoolId" 346 v-if="getCard.schoolId"
347 :src="getCard.schoolId.schoolLogoUrl" 347 :src="getCard.schoolId.schoolLogoUrl"
348 alt="schoollogo" 348 alt="schoollogo"
349 style=" 349 style="
350 width: 110px; 350 width: 110px;
351 margin-top:10px; 351 margin-top:10px;
352 overflow:hidden" 352 overflow:hidden"
353 /> 353 />
354 <!-- <v-layout style="margin:auto"> 354 <!-- <v-layout style="margin:auto">
355 <img 355 <img
356 v-if="getCard.profilePicUrl" 356 v-if="getCard.profilePicUrl"
357 :src="getCard.profilePicUrl" 357 :src="getCard.profilePicUrl"
358 alt="profileImage" 358 alt="profileImage"
359 style="; 359 style=";
360 width: 110px; 360 width: 110px;
361 margin:10px auto; 361 margin:10px auto;
362 width: 110px; 362 width: 110px;
363 margin: 10px auto; 363 margin: 10px auto;
364 border: 3px solid #323232; 364 border: 3px solid #323232;
365 border-radius: 12px;" 365 border-radius: 12px;"
366 /> 366 />
367 </v-layout>--> 367 </v-layout>-->
368 <p 368 <p
369 v-if="getCard.schoolLogoUrl" 369 v-if="getCard.schoolLogoUrl"
370 style="color: #302653;font-size:24px; 370 style="color: #302653;font-size:24px;
371 letter-spacing: 4px;" 371 letter-spacing: 4px;"
372 > 372 >
373 <b>{{ getCard.name}}</b> 373 <b>{{ getCard.name}}</b>
374 </p> 374 </p>
375 375
376 <p 376 <p
377 v-if="getCard.city" 377 v-if="getCard.city"
378 style=" 378 style="
379 font-size: 17px; 379 font-size: 17px;
380 font-weight: 100; 380 font-weight: 100;
381 color: rgb(48, 38, 83); 381 color: rgb(48, 38, 83);
382 letter-spacing: 4px;" 382 letter-spacing: 4px;"
383 >{{ getCard.city}}</p> 383 >{{ getCard.city}}</p>
384 <p 384 <p
385 style=" 385 style="
386 font-size: 17px; 386 font-size: 17px;
387 font-weight: 100; 387 font-weight: 100;
388 color: rgb(48, 38, 83); 388 color: rgb(48, 38, 83);
389 letter-spacing: 4px;" 389 letter-spacing: 4px;"
390 > 390 >
391 {{ getCard.address }} 391 {{ getCard.address }}
392 {{ getCard.presentAddress }} 392 {{ getCard.presentAddress }}
393 <span 393 <span
394 v-if="getCard.state" 394 v-if="getCard.state"
395 >({{ getCard.state }})</span> 395 >({{ getCard.state }})</span>
396 </p> 396 </p>
397 <p 397 <p
398 v-if="getCard.establishmentYear" 398 v-if="getCard.establishmentYear"
399 style=" 399 style="
400 font-size: 17px; 400 font-size: 17px;
401 font-weight: 100; 401 font-weight: 100;
402 color: rgb(48, 38, 83); 402 color: rgb(48, 38, 83);
403 letter-spacing: 4px;" 403 letter-spacing: 4px;"
404 >{{ getCard.establishmentYear }}</p> 404 >{{ getCard.establishmentYear }}</p>
405 </v-flex> 405 </v-flex>
406 </v-layout> 406 </v-layout>
407 <!-- bottom-right-side-image --> 407 <!-- bottom-right-side-image -->
408 <img 408 <img
409 src="static/icon/shape2.png" 409 src="static/icon/shape2.png"
410 alt="shape2" 410 alt="shape2"
411 style="bottom: 0; 411 style="bottom: 0;
412 position: absolute; 412 position: absolute;
413 right: 0; 413 right: 0;
414 width: 110px;" 414 width: 110px;"
415 /> 415 />
416 </div> 416 </div>
417 </div> 417 </div>
418 </v-layout> 418 </v-layout>
419 </v-container> 419 </v-container>
420 </v-flex> 420 </v-flex>
421 </v-layout> 421 </v-layout>
422 </div> 422 </div>
423 <v-snackbar 423 <v-snackbar
424 :timeout="timeout" 424 :timeout="timeout"
425 :top="y === 'top'" 425 :top="y === 'top'"
426 :right="x === 'right'" 426 :right="x === 'right'"
427 :vertical="mode === 'vertical'" 427 :vertical="mode === 'vertical'"
428 v-model="snackbar" 428 v-model="snackbar"
429 :color="color" 429 :color="color"
430 >{{ text }}</v-snackbar> 430 >{{ text }}</v-snackbar>
431 <div class="loader" v-if="showLoader">
432 <v-progress-circular indeterminate color="white"></v-progress-circular>
433 </div>
431 </v-container> 434 </v-container>
432 </template> 435 </template>
433 436
434 <script> 437 <script>
435 import http from "@/Services/http.js"; 438 import http from "@/Services/http.js";
436 import moment from "moment"; 439 import moment from "moment";
437 440
438 export default { 441 export default {
439 data: () => ({ 442 data: () => ({
443 showLoader: false,
440 valid: true, 444 valid: true,
441 report: {}, 445 report: {},
442 userData: {}, 446 userData: {},
443 snackbar: false, 447 snackbar: false,
444 color: "", 448 color: "",
445 y: "top", 449 y: "top",
446 x: "right", 450 x: "right",
447 mode: "", 451 mode: "",
448 timeout: 10000, 452 timeout: 10000,
449 text: "", 453 text: "",
450 loading: false, 454 loading: false,
451 showReport: false, 455 showReport: false,
452 frontPart: false, 456 frontPart: false,
453 backPart: false, 457 backPart: false,
454 showClass: false, 458 showClass: false,
455 showTeacher: false, 459 showTeacher: false,
456 showAdmin: false, 460 showAdmin: false,
457 showAccountant: false, 461 showAccountant: false,
458 showLibrarian: false, 462 showLibrarian: false,
459 hideprintIdCard: false, 463 hideprintIdCard: false,
460 hidebackprintIdCard: false, 464 hidebackprintIdCard: false,
461 showStudents: false, 465 showStudents: false,
462 showSections: false, 466 showSections: false,
463 getRoles: [], 467 getRoles: [],
464 classList: [], 468 classList: [],
465 getCard: [], 469 getCard: [],
466 addSection: [], 470 addSection: [],
467 getStudentsList: [], 471 getStudentsList: [],
468 teacherList: [], 472 teacherList: [],
469 userData: [], 473 userData: [],
470 Users: [], 474 Users: [],
471 getReport: {}, 475 getReport: {},
472 // cardRules: [v => !!v || "Id-Card Field is required"], 476 // cardRules: [v => !!v || "Id-Card Field is required"],
473 // classRules: [v => !!v || "Class Field is required"], 477 // classRules: [v => !!v || "Class Field is required"],
474 // sectionRules: [v => !!v || "Section Field is required"], 478 // sectionRules: [v => !!v || "Section Field is required"],
475 // studentRules: [v => !!v || "Student Field is required"], 479 // studentRules: [v => !!v || "Student Field is required"],
476 // teacherRules: [v => !!v || "Teacher Field is required"], 480 // teacherRules: [v => !!v || "Teacher Field is required"],
477 // adminRules: [v => !!v || "Admin Field is required"], 481 // adminRules: [v => !!v || "Admin Field is required"],
478 // accountantRules: [v => !!v || "Accountant Field is required"], 482 // accountantRules: [v => !!v || "Accountant Field is required"],
479 // librarianRules: [v => !!v || "Librarian Field is required"], 483 // librarianRules: [v => !!v || "Librarian Field is required"],
480 484
481 typeRules: [v => !!v || "Type is required"], 485 typeRules: [v => !!v || "Type is required"],
482 // backgroundRules: [v => !!v || "Background is required"], 486 // backgroundRules: [v => !!v || "Background is required"],
483 typeList: [ 487 typeList: [
484 { 488 {
485 name: "Front Part", 489 name: "Front Part",
486 value: "frontPart" 490 value: "frontPart"
487 }, 491 },
488 { 492 {
489 name: "Back Part", 493 name: "Back Part",
490 value: "backPart" 494 value: "backPart"
491 } 495 }
492 ], 496 ],
493 backgroundList: ["Yes", "No"] 497 backgroundList: ["Yes", "No"]
494 }), 498 }),
495 499
496 mounted() { 500 mounted() {
497 this.token = this.$store.state.token; 501 this.token = this.$store.state.token;
498 this.getUserData(); 502 this.getUserData();
499 this.getRole(); 503 this.getRole();
500 }, 504 },
501 505
502 methods: { 506 methods: {
503 dates: function(date) { 507 dates: function(date) {
504 return moment(date).format("MMMM DD, YYYY"); 508 return moment(date).format("MMMM DD, YYYY");
505 return date; 509 return date;
506 }, 510 },
507 getReportType() { 511 getReportType() {
508 if (this.getReport.form === "frontPart") { 512 if (this.getReport.form === "frontPart") {
509 this.frontPart = true; 513 this.frontPart = true;
510 this.backPart = false; 514 this.backPart = false;
511 } 515 }
512 if (this.getReport.form === "backPart") { 516 if (this.getReport.form === "backPart") {
513 this.frontPart = false; 517 this.frontPart = false;
514 this.backPart = true; 518 this.backPart = true;
515 } 519 }
516 }, 520 },
517 getRoleInputs(role) { 521 getRoleInputs(role) {
518 console.log("role", role); 522 console.log("role", role);
519 this.showReport = false; 523 this.showReport = false;
520 this.getReport._id = ""; 524 this.getReport._id = "";
521 this.getCard = ""; 525 this.getCard = "";
522 if (role === 4) { 526 if (role === 4) {
523 // console.log("role", role); 527 // console.log("role", role);
524 this.showClass = true; 528 this.showClass = true;
525 this.showTeacher = false; 529 this.showTeacher = false;
526 this.showAdmin = false; 530 this.showAdmin = false;
527 this.showAccountant = false; 531 this.showAccountant = false;
528 this.showLibrarian = false; 532 this.showLibrarian = false;
529 this.showStudents = false; 533 this.showStudents = false;
530 this.showSections = false; 534 this.showSections = false;
531 this.getClass(); 535 this.getClass();
532 } 536 }
533 if (role === 3) { 537 if (role === 3) {
534 this.showTeacher = true; 538 this.showTeacher = true;
535 this.showClass = false; 539 this.showClass = false;
536 this.showAdmin = false; 540 this.showAdmin = false;
537 this.showAccountant = false; 541 this.showAccountant = false;
538 this.showLibrarian = false; 542 this.showLibrarian = false;
539 this.showStudents = false; 543 this.showStudents = false;
540 this.showSections = false; 544 this.showSections = false;
541 this.getTeacherList(); 545 this.getTeacherList();
542 } 546 }
543 if (role === 2) { 547 if (role === 2) {
544 this.showAdmin = true; 548 this.showAdmin = true;
545 this.showTeacher = false; 549 this.showTeacher = false;
546 this.showClass = false; 550 this.showClass = false;
547 this.showAccountant = false; 551 this.showAccountant = false;
548 this.showLibrarian = false; 552 this.showLibrarian = false;
549 this.showStudents = false; 553 this.showStudents = false;
550 this.showSections = false; 554 this.showSections = false;
551 this.getUserData(); 555 this.getUserData();
552 } 556 }
553 if (role === 6) { 557 if (role === 6) {
554 this.showAccountant = true; 558 this.showAccountant = true;
555 this.showAdmin = false; 559 this.showAdmin = false;
556 this.showTeacher = false; 560 this.showTeacher = false;
557 this.showClass = false; 561 this.showClass = false;
558 this.showLibrarian = false; 562 this.showLibrarian = false;
559 this.showStudents = false; 563 this.showStudents = false;
560 this.showSections = false; 564 this.showSections = false;
561 this.getUsersList(role); 565 this.getUsersList(role);
562 } 566 }
563 if (role === 7) { 567 if (role === 7) {
564 this.showLibrarian = true; 568 this.showLibrarian = true;
565 this.showAccountant = false; 569 this.showAccountant = false;
566 this.showAdmin = false; 570 this.showAdmin = false;
567 this.showTeacher = false; 571 this.showTeacher = false;
568 this.showClass = false; 572 this.showClass = false;
569 this.showStudents = false; 573 this.showStudents = false;
570 this.showSections = false; 574 this.showSections = false;
571 this.getUsersList(role); 575 this.getUsersList(role);
572 } 576 }
573 }, 577 },
574 578
575 prindIDCardReport() { 579 prindIDCardReport() {
576 // Pass the element id here 580 // Pass the element id here
577 this.$htmlToPaper("printMe"); 581 this.$htmlToPaper("printMe");
578 }, 582 },
579 getUserData() { 583 getUserData() {
584 this.showLoader = true;
580 http() 585 http()
581 .get("/getParticularUserDetail") 586 .get("/getParticularUserDetail")
582 .then(response => { 587 .then(response => {
583 this.userData = response.data.data; 588 this.userData = response.data.data;
589 this.showLoader = false;
584 // this.adminList = response.data.data; 590 // this.adminList = response.data.data;
585 }) 591 })
586 .catch(error => { 592 .catch(error => {
593 this.showLoader = false;
587 if (error.response.status === 401) { 594 if (error.response.status === 401) {
588 this.$router.replace({ path: "/" }); 595 this.$router.replace({ path: "/" });
589 this.$store.dispatch("setToken", null); 596 this.$store.dispatch("setToken", null);
590 this.$store.dispatch("Id", null); 597 this.$store.dispatch("Id", null);
591 } 598 }
592 }); 599 });
593 }, 600 },
594 getRole() { 601 getRole() {
595 this.showLoader = true; 602 this.showLoader = true;
596 http() 603 http()
597 .get("/getRolesList", { 604 .get("/getRolesList", {
598 headers: { Authorization: "Bearer " + this.token } 605 headers: { Authorization: "Bearer " + this.token }
599 }) 606 })
600 .then(response => { 607 .then(response => {
601 var getRoles = []; 608 var getRoles = [];
602 getRoles = response.data.data; 609 getRoles = response.data.data;
603 // if (getRoles[0].role !== 1) { 610 // if (getRoles[0].role !== 1) {
604 // getRoles = response.data.data; 611 // getRoles = response.data.data;
605 // } 612 // }
606 for (let i = 0; i < getRoles.length; i++) { 613 for (let i = 0; i < getRoles.length; i++) {
607 if (getRoles[i].role != "1" && getRoles[i].role != "5") { 614 if (getRoles[i].role != "1" && getRoles[i].role != "5") {
608 this.getRoles.push(getRoles[i]); 615 this.getRoles.push(getRoles[i]);
609 } 616 }
610 } 617 }
611 this.showLoader = false; 618 this.showLoader = false;
612 }) 619 })
613 .catch(error => { 620 .catch(error => {
614 this.showLoader = false; 621 this.showLoader = false;
615 if (error.response.status === 401) { 622 if (error.response.status === 401) {
616 this.$router.replace({ path: "/" }); 623 this.$router.replace({ path: "/" });
617 this.$store.dispatch("setToken", null); 624 this.$store.dispatch("setToken", null);
618 this.$store.dispatch("Id", null); 625 this.$store.dispatch("Id", null);
619 this.$store.dispatch("Role", null); 626 this.$store.dispatch("Role", null);
620 } 627 }
621 }); 628 });
622 }, 629 },
623 getClass() { 630 getClass() {
624 console.log("get classes"); 631 console.log("get classes");
625 this.showLoader = true; 632 this.showLoader = true;
626 http() 633 http()
627 .get("/getClassesList", { 634 .get("/getClassesList", {
628 headers: { Authorization: "Bearer " + this.token } 635 headers: { Authorization: "Bearer " + this.token }
629 }) 636 })
630 .then(response => { 637 .then(response => {
631 this.classList = response.data.data; 638 this.classList = response.data.data;
632 this.showLoader = false; 639 this.showLoader = false;
633 }) 640 })
634 .catch(error => { 641 .catch(error => {
635 this.showLoader = false; 642 this.showLoader = false;
636 // console.log("err====>", err); 643 // console.log("err====>", err);
637 }); 644 });
638 }, 645 },
639 getSections(_id) { 646 getSections(_id) {
640 this.showLoader = true; 647 this.showLoader = true;
641 http() 648 http()
642 .get( 649 .get(
643 "/getSectionsList", 650 "/getSectionsList",
644 { params: { classId: _id } }, 651 { params: { classId: _id } },
645 { 652 {
646 headers: { Authorization: "Bearer " + this.token } 653 headers: { Authorization: "Bearer " + this.token }
647 } 654 }
648 ) 655 )
649 .then(response => { 656 .then(response => {
650 this.addSection = response.data.data; 657 this.addSection = response.data.data;
651 this.showSections = true; 658 this.showSections = true;
652 this.showLoader = false; 659 this.showLoader = false;
653 }) 660 })
654 .catch(err => { 661 .catch(err => {
655 this.showLoader = false; 662 this.showLoader = false;
656 // console.log("err====>", err); 663 // console.log("err====>", err);
657 }); 664 });
658 }, 665 },
659 getStudents() { 666 getStudents() {
660 this.showLoader = true; 667 this.showLoader = true;
661 http() 668 http()
662 .get("/getStudentWithClass", { 669 .get("/getStudentWithClass", {
663 params: { 670 params: {
664 classId: this.getReport.classId, 671 classId: this.getReport.classId,
665 sectionId: this.getReport.sectionId 672 sectionId: this.getReport.sectionId
666 } 673 }
667 }) 674 })
668 .then(response => { 675 .then(response => {
669 this.getStudentsList = response.data.data; 676 this.getStudentsList = response.data.data;
670 this.showStudents = true; 677 this.showStudents = true;
671 this.showLoader = false; 678 this.showLoader = false;
672 }) 679 })
673 .catch(error => { 680 .catch(error => {
674 console.log("err====>", error); 681 console.log("err====>", error);
675 this.showLoader = false; 682 this.showLoader = false;
676 }); 683 });
677 }, 684 },
678 getCards() { 685 getCards() {
686 this.showLoader = true;
679 if (this.$refs.form.validate()) { 687 if (this.$refs.form.validate()) {
680 http() 688 http()
681 .get("/getIdCardDetail", { 689 .get("/getIdCardDetail", {
682 headers: { 690 headers: {
683 Authorization: "Bearer " + this.token 691 Authorization: "Bearer " + this.token
684 }, 692 },
685 params: { 693 params: {
686 profileId: this.getReport._id, 694 profileId: this.getReport._id,
687 role: this.getReport.role 695 role: this.getReport.role
688 } 696 }
689 }) 697 })
690 .then(response => { 698 .then(response => {
691 this.getCard = ""; 699 this.getCard = "";
692 var data = response.data.data; 700 var data = response.data.data;
693 if ( 701 if (
694 Object.keys(data.adminData).length != 0 && 702 Object.keys(data.adminData).length != 0 &&
695 data.adminData.constructor === Object 703 data.adminData.constructor === Object
696 ) { 704 ) {
697 this.getCard = response.data.data.adminData; 705 this.getCard = response.data.data.adminData;
698 console.log("this.getCard ", this.getCard); 706 console.log("this.getCard ", this.getCard);
699 } 707 }
700 if ( 708 if (
701 Object.keys(data.teachersData).length != 0 && 709 Object.keys(data.teachersData).length != 0 &&
702 data.teachersData.constructor === Object 710 data.teachersData.constructor === Object
703 ) { 711 ) {
704 this.getCard = response.data.data.teachersData; 712 this.getCard = response.data.data.teachersData;
705 console.log("this.getCard--teachersData ", this.getCard); 713 console.log("this.getCard--teachersData ", this.getCard);
706 } 714 }
707 if ( 715 if (
708 Object.keys(data.studentData).length != 0 && 716 Object.keys(data.studentData).length != 0 &&
709 data.studentData.constructor === Object 717 data.studentData.constructor === Object
710 ) { 718 ) {
711 this.getCard = response.data.data.studentData; 719 this.getCard = response.data.data.studentData;
712 console.log("this.getCard--studentData ", this.getCard); 720 console.log("this.getCard--studentData ", this.getCard);
713 } 721 }
714 if ( 722 if (
715 Object.keys(data.usersData).length != 0 && 723 Object.keys(data.usersData).length != 0 &&
716 data.usersData.constructor === Object 724 data.usersData.constructor === Object
717 ) { 725 ) {
718 this.getCard = response.data.data.usersData; 726 this.getCard = response.data.data.usersData;
719 console.log("this.getCard--usersData ", this.getCard); 727 console.log("this.getCard--usersData ", this.getCard);
720 } 728 }
721 // console.log("this.getCard--all ", response.data.data); 729 // console.log("this.getCard--all ", response.data.data);
722 this.showLoader = false; 730 this.showLoader = false;
723 this.showReport = true; 731 this.showReport = true;
724 }) 732 })
725 .catch(error => { 733 .catch(error => {
726 this.showLoader = false; 734 this.showLoader = false;
727 console.log("error", error.response.data.errors); 735 console.log("error", error.response.data.errors);
728 if (error.response.data.errors) { 736 if (error.response.data.errors) {
729 this.snackbar = true; 737 this.snackbar = true;
730 this.text = " Field is required"; 738 this.text = " Field is required";
731 this.color = "error"; 739 this.color = "error";
732 } 740 }
733 }); 741 });
734 } 742 }
735 }, 743 },
736 getTeacherList() { 744 getTeacherList() {
737 this.showLoader = true; 745 this.showLoader = true;
738 var token = this.$store.state.token; 746 var token = this.$store.state.token;
739 http() 747 http()
740 .get("/getTeachersList", { 748 .get("/getTeachersList", {
741 headers: { Authorization: "Bearer " + token } 749 headers: { Authorization: "Bearer " + token }
742 }) 750 })
743 .then(response => { 751 .then(response => {
744 this.teacherList = response.data.data; 752 this.teacherList = response.data.data;
745 this.showLoader = false; 753 this.showLoader = false;
746 }) 754 })
747 .catch(error => { 755 .catch(error => {
748 this.showLoader = false; 756 this.showLoader = false;
749 if (error.response.status === 401) { 757 if (error.response.status === 401) {
750 this.$router.replace({ path: "/" }); 758 this.$router.replace({ path: "/" });
751 this.$store.dispatch("setToken", null); 759 this.$store.dispatch("setToken", null);
752 this.$store.dispatch("Id", null); 760 this.$store.dispatch("Id", null);
753 } 761 }
754 }); 762 });
755 }, 763 },
756 getUsersList(role) { 764 getUsersList(role) {
757 this.showLoader = true; 765 this.showLoader = true;
758 var token = this.$store.state.token; 766 var token = this.$store.state.token;
759 http() 767 http()
760 .get("/getUsersList?role=" + role, { 768 .get("/getUsersList?role=" + role, {
761 headers: { Authorization: "Bearer " + token } 769 headers: { Authorization: "Bearer " + token }
762 }) 770 })
763 .then(response => { 771 .then(response => {
764 this.Users = response.data.data; 772 this.Users = response.data.data;
765 this.showLoader = false; 773 this.showLoader = false;
766 }) 774 })
767 .catch(error => { 775 .catch(error => {
768 this.showLoader = false; 776 this.showLoader = false;
769 if (error.response.status === 401) { 777 if (error.response.status === 401) {
770 this.$router.replace({ path: "/" }); 778 this.$router.replace({ path: "/" });
771 this.$store.dispatch("setToken", null); 779 this.$store.dispatch("setToken", null);
772 this.$store.dispatch("Id", null); 780 this.$store.dispatch("Id", null);
773 } 781 }
774 }); 782 });
775 }, 783 },
776 getParentDetails() { 784 getParentDetails() {
777 http() 785 http()
778 .get("getParentsList", { 786 .get("getParentsList", {
779 headers: { 787 headers: {
780 Authorization: "Bearer " + this.$store.state.token 788 Authorization: "Bearer " + this.$store.state.token
781 } 789 }
782 }) 790 })
783 .then(response => { 791 .then(response => {
784 this.parentsList = response.data.data; 792 this.parentsList = response.data.data;
785 }) 793 })
786 .catch(error => { 794 .catch(error => {
787 // console.log("err====>", error.response.data.message); 795 // console.log("err====>", error.response.data.message);
788 this.showLoader = false; 796 this.showLoader = false;
789 if (error.response.status === 401) { 797 if (error.response.status === 401) {
790 this.$router.replace({ path: "/" }); 798 this.$router.replace({ path: "/" });
791 this.$store.dispatch("setToken", null); 799 this.$store.dispatch("setToken", null);
792 this.$store.dispatch("Id", null); 800 this.$store.dispatch("Id", null);
793 this.$store.dispatch("Role", null); 801 this.$store.dispatch("Role", null);
794 } 802 }
795 }); 803 });
796 } 804 }
797 } 805 }
798 }; 806 };
799 </script> 807 </script>
800 808
801 <style scoped> 809 <style scoped>
802 .Data { 810 .Data {
803 width: 100%; 811 width: 100%;
804 float: left; 812 float: left;
805 margin-bottom: 0px; 813 margin-bottom: 0px;
806 padding: 0 15px; 814 padding: 0 15px;
807 font-size: 14px; 815 font-size: 14px;
808 margin-top: 5px; 816 margin-top: 5px;
809 text-align: justify; 817 text-align: justify;
810 } 818 }
811 .idcardreport { 819 .idcardreport {
812 font-family: arial; 820 font-family: arial;
813 max-width: 794px; 821 max-width: 794px;
814 max-height: 1123px; 822 max-height: 1123px;
815 margin-left: auto; 823 margin-left: auto;
816 margin-right: auto; 824 margin-right: auto;
817 -webkit-print-color-adjust: exact; 825 -webkit-print-color-adjust: exact;
818 } 826 }
819 .idcardreport1 { 827 .idcardreport1 {
820 text-align: center; 828 text-align: center;
821 margin-left: 35%; 829 margin-left: 35%;
822 } 830 }
823 .icard-front { 831 .icard-front {
824 margin: 3px; 832 margin: 3px;
825 float: left; 833 float: left;
826 padding: 10px; 834 padding: 10px;
827 text-align: center; 835 text-align: center;
828 height: 520px; 836 height: 520px;
829 width: 520px; 837 width: 520px;
830 background: #fff; 838 background: #fff;
831 border: 1px solid lightgray; 839 border: 1px solid lightgray;
832 } 840 }
833 .print-data { 841 .print-data {
834 margin: 3px; 842 margin: 3px;
835 float: left; 843 float: left;
836 /* border: 1px solid #000; */ 844 /* border: 1px solid #000; */
837 padding: 10px; 845 padding: 10px;
838 /* width: 55%; */ 846 /* width: 55%; */
839 text-align: center; 847 text-align: center;
840 height: 95%; 848 height: 95%;
841 } 849 }
842 .rightside { 850 .rightside {
843 float: right !important; 851 float: right !important;
844 } 852 }
845 .icard-front h2 { 853 .icard-front h2 {
846 font-size: 30px; 854 font-size: 30px;
847 } 855 }
848 .icard-back h2 { 856 .icard-back h2 {
849 font-size: 30px; 857 font-size: 30px;
850 } 858 }
851 .print-data h2 { 859 .print-data h2 {
852 font-size: 30px; 860 font-size: 30px;
853 text-align: center; 861 text-align: center;
854 } 862 }
855 .print-data img { 863 .print-data img {
856 width: 70px; 864 width: 70px;
857 height: 70px; 865 height: 70px;
858 margin-bottom: 5px; 866 margin-bottom: 5px;
859 } 867 }
860 .icard-front img { 868 .icard-front img {
861 width: 70px; 869 width: 70px;
862 height: 70px; 870 height: 70px;
863 margin-bottom: 5px; 871 margin-bottom: 5px;
864 } 872 }
865 .icard-back img { 873 .icard-back img {
866 width: 50px; 874 width: 50px;
867 height: 50px; 875 height: 50px;
868 margin-bottom: 5px; 876 margin-bottom: 5px;
869 } 877 }
870 .icard-img { 878 .icard-img {
871 width: 50px; 879 width: 50px;
872 height: 50px; 880 height: 50px;
873 margin-bottom: 5px; 881 margin-bottom: 5px;
874 margin-top: 5px; 882 margin-top: 5px;
875 border: 1px solid #ddd; 883 border: 1px solid #ddd;
876 } 884 }
877 .icard-data { 885 .icard-data {
878 /* font-family: Arial; */ 886 /* font-family: Arial; */
879 max-width: 794px; 887 max-width: 794px;
880 max-height: 1123px; 888 max-height: 1123px;
881 margin-left: auto; 889 margin-left: auto;
882 margin-right: auto; 890 margin-right: auto;
883 -webkit-print-color-adjust: exact; 891 -webkit-print-color-adjust: exact;
884 } 892 }
885 .icard-back { 893 .icard-back {
886 margin: 3px; 894 margin: 3px;
887 /* float: left; */ 895 /* float: left; */
888 /* border: 1px solid #000; */ 896 /* border: 1px solid #000; */
889 padding: 10px; 897 padding: 10px;
890 /* width: 55%; */ 898 /* width: 55%; */
891 text-align: center; 899 text-align: center;
892 /* height: 95%; */ 900 /* height: 95%; */
893 /* margin-top: 35%; */ 901 /* margin-top: 35%; */
894 } 902 }
895 .back-icard { 903 .back-icard {
896 margin: 3px; 904 margin: 3px;
897 padding: 10px; 905 padding: 10px;
898 } 906 }
899 .icard-back h3 { 907 .icard-back h3 {
900 background-color: #000; 908 background-color: #000;
901 color: #fff; 909 color: #fff;
902 font-size: 13px; 910 font-size: 13px;
903 padding: 5px 0px; 911 padding: 5px 0px;
904 margin: 5px; 912 margin: 5px;
905 margin-top: 13px; 913 margin-top: 13px;
906 } 914 }
907 .icard-back h5 { 915 .icard-back h5 {
908 font-size: 11px; 916 font-size: 11px;
909 color: #000; 917 color: #000;
910 font-weight: bold; 918 font-weight: bold;
911 padding: 5px 0px; 919 padding: 5px 0px;
912 } 920 }
913 /* .icard-back p { 921 /* .icard-back p {
914 font-size: 15px; 922 font-size: 15px;
915 color: #000; 923 color: #000;
916 font-weight: 500px; 924 font-weight: 500px;
917 line-height: 17px; 925 line-height: 17px;
918 } */ 926 } */
919 .school-address { 927 .school-address {
920 /* width: 40%; */ 928 /* width: 40%; */
921 font-weight: 500px; 929 font-weight: 500px;
922 color: #000; 930 color: #000;
923 } 931 }
924 .address { 932 .address {
925 font-weight: 500px; 933 font-weight: 500px;
926 color: #000; 934 color: #000;
927 text-align: center; 935 text-align: center;
928 } 936 }
929 .icard-bottom { 937 .icard-bottom {
930 padding-top: 5px; 938 padding-top: 5px;
931 text-align: center; 939 text-align: center;
932 } 940 }
933 .qrcode { 941 .qrcode {
934 float: left; 942 float: left;
935 width: 50%; 943 width: 50%;
936 } 944 }
937 .qrcode img { 945 .qrcode img {
938 width: 60px; 946 width: 60px;
939 height: 60px; 947 height: 60px;
940 margin-top: 15px; 948 margin-top: 15px;
941 } 949 }
942 .session { 950 .session {
943 float: right; 951 float: right;
944 width: 70%; 952 width: 70%;
945 margin-top: 15px; 953 margin-top: 15px;
946 } 954 }
947 @media screen and (max-width: 360px) { 955 @media screen and (max-width: 360px) {
948 .icard-front { 956 .icard-front {
949 width: 316px; 957 width: 316px;
950 height: 418px; 958 height: 418px;
951 float: inherit; 959 float: inherit;
952 } 960 }
953 .icard-back { 961 .icard-back {
954 float: left; 962 float: left;
955 } 963 }
956 } 964 }
957 </style> 965 </style>