viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit a690a86fb95089591233c907b0f171637d9ac301

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

implement meet functinlaity and id card issues

Showing 5 changed files with 199 additions and 174 deletions   Show diff stats
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 3
4 <head> 4 <head>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> --> 7 <!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> -->
8 <!-- <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800|Material+Icons&display=swap" rel="stylesheet"> --> 8 <!-- <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800|Material+Icons&display=swap" rel="stylesheet"> -->
9 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800|Material+Icons&display=swap" rel="stylesheet"> 9 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800|Material+Icons&display=swap" rel="stylesheet">
10 <title>School Management</title> 10 <title>School Management</title>
11 <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon"> 11 <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon">
12 <meta name="description" content="School Management"> 12 <meta name="description" content="School Management">
13 <script src='https://meet.intrack.in/external_api.js'></script> 13 <!-- <script src='https://meet.intrack.in/external_api.js'></script> -->
14 <script src='https://meet.jit.si/external_api.js'></script>
14 <link href="./static/css/custom.css" rel="stylesheet" /> 15 <link href="./static/css/custom.css" rel="stylesheet" />
15 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 16 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
16 <!-- <style> 17 <!-- <style>
17 [v-cloak] { 18 [v-cloak] {
18 display: none; 19 display: none;
19 } 20 }
20 </style> --> 21 </style> -->
21 </head> 22 </head>
22 23
23 <body > 24 <body>
24 <div id="app"> 25 <div id="app">
25 </div> 26 </div>
26 <!-- built files will be auto injected --> 27 <!-- built files will be auto injected -->
27 <!-- Global site tag (gtag.js) - Google Analytics --> 28 <!-- Global site tag (gtag.js) - Google Analytics -->
28 <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> --> 29 <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> -->
29 <!-- <script> 30 <!-- <script>
30 window.dataLayer = window.dataLayer || []; 31 window.dataLayer = window.dataLayer || [];
31 32
32 function gtag() { 33 function gtag() {
33 dataLayer.push(arguments); 34 dataLayer.push(arguments);
34 } 35 }
35 gtag('js', new Date()); 36 gtag('js', new Date());
36 gtag('config', 'UA-3881136-11'); 37 gtag('config', 'UA-3881136-11');
37 </script> --> 38 </script> -->
38 </body> 39 </body>
39 40
40 </html> 41 </html>
1 export default [{ 1 export default [{
2 name: 'APP_LOGIN_SUCCESS', 2 name: 'APP_LOGIN_SUCCESS',
3 callback: function(e) { 3 callback: function(e) {
4 this.$router.push({ path: 'dashboard' }); 4 this.$router.push({ path: 'dashboard' });
5 } 5 }
6 }, 6 },
7 { 7 {
8 name: 'APP_LOGOUT', 8 name: 'APP_LOGOUT',
9 callback: function(e) { 9 callback: function(e) {
10 this.snackbar = { 10 this.snackbar = {
11 show: true, 11 show: true,
12 color: 'green', 12 color: 'green',
13 text: 'Logout successfully.' 13 text: 'Logout successfully.'
14 }; 14 };
15 // console.log("roteeeeeeeeeeeeeee", this.$store.state.isUserLoggedIn) 15 // console.log("roteeeeeeeeeeeeeee", this.$store.state.isUserLoggedIn)
16 if (this.$store.state.role === "ADMIN") { 16 if (this.$store.state.role === "ADMIN") {
17 this.$store.dispatch('setToken', null) 17 this.$store.dispatch('setToken', null)
18 this.$store.dispatch('Id', null) 18 this.$store.dispatch('Id', null)
19 this.$store.dispatch('Role', null) 19 this.$store.dispatch('Role', null)
20 this.$store.dispatch('setSchoolToken', null) 20 this.$store.dispatch('setSchoolToken', null)
21 this.$store.dispatch('setSchoolRole', null) 21 this.$store.dispatch('setSchoolRole', null)
22 this.$router.replace({ path: '/' }); 22 this.$router.replace({ path: '/' });
23 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 23 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
24 this.$store.dispatch('setSchoolToken', null) 24 this.$store.dispatch('setSchoolToken', null)
25 this.$store.dispatch('setSchoolRole', null) 25 this.$store.dispatch('setSchoolRole', null)
26 this.$router.replace({ path: '/' }); 26 this.$router.replace({ path: '/' });
27 } else if (this.$store.state.role === "TEACHER") { 27 } else if (this.$store.state.role === "TEACHER") {
28 this.$store.dispatch('setToken', null) 28 this.$store.dispatch('setToken', null)
29 this.$store.dispatch('Id', null) 29 this.$store.dispatch('Id', null)
30 this.$store.dispatch('Role', null) 30 this.$store.dispatch('Role', null)
31 this.$store.dispatch('setSchoolToken', null) 31 this.$store.dispatch('setSchoolToken', null)
32 this.$store.dispatch('setSchoolRole', null) 32 this.$store.dispatch('setSchoolRole', null)
33 localStorage.removeItem("teacherName")
33 this.$router.replace({ path: '/' }); 34 this.$router.replace({ path: '/' });
34 } else if (this.$store.state.role === "ACCOUNTANT") { 35 } else if (this.$store.state.role === "ACCOUNTANT") {
35 this.$store.dispatch('setToken', null) 36 this.$store.dispatch('setToken', null)
36 this.$store.dispatch('Id', null) 37 this.$store.dispatch('Id', null)
37 this.$store.dispatch('Role', null) 38 this.$store.dispatch('Role', null)
38 this.$store.dispatch('setSchoolToken', null) 39 this.$store.dispatch('setSchoolToken', null)
39 this.$store.dispatch('setSchoolRole', null) 40 this.$store.dispatch('setSchoolRole', null)
40 this.$router.replace({ path: '/' }); 41 this.$router.replace({ path: '/' });
41 } else if (this.$store.state.role === "LIBRARIAN") { 42 } else if (this.$store.state.role === "LIBRARIAN") {
42 this.$store.dispatch('setToken', null) 43 this.$store.dispatch('setToken', null)
43 this.$store.dispatch('Id', null) 44 this.$store.dispatch('Id', null)
44 this.$store.dispatch('Role', null) 45 this.$store.dispatch('Role', null)
45 this.$store.dispatch('setSchoolToken', null) 46 this.$store.dispatch('setSchoolToken', null)
46 this.$store.dispatch('setSchoolRole', null) 47 this.$store.dispatch('setSchoolRole', null)
47 this.$router.replace({ path: '/' }); 48 this.$router.replace({ path: '/' });
48 } else if (this.$store.state.role === "PARENT") { 49 } else if (this.$store.state.role === "PARENT") {
49 this.$store.dispatch('setToken', null) 50 this.$store.dispatch('setToken', null)
50 this.$store.dispatch('Id', null) 51 this.$store.dispatch('Id', null)
51 this.$store.dispatch('Role', null) 52 this.$store.dispatch('Role', null)
52 this.$store.dispatch('setSchoolToken', null) 53 this.$store.dispatch('setSchoolToken', null)
53 this.$store.dispatch('setSchoolRole', null) 54 this.$store.dispatch('setSchoolRole', null)
55 localStorage.removeItem("studentName")
54 this.$router.replace({ path: '/' }); 56 this.$router.replace({ path: '/' });
55 } 57 }
56 } 58 }
57 }, 59 },
58 { 60 {
59 name: 'APP_CHANGE', 61 name: 'APP_CHANGE',
60 callback: function(e) { 62 callback: function(e) {
61 this.snackbar = { 63 this.snackbar = {
62 show: true, 64 show: true,
63 color: 'green', 65 color: 'green',
64 text: 'Logout successfully.' 66 text: 'Logout successfully.'
65 }; 67 };
66 this.$router.replace({ 68 this.$router.replace({
67 path: '/' 69 path: '/'
68 }); 70 });
69 } 71 }
70 }, 72 },
71 { 73 {
72 name: 'APP_PAGE_LOADED', 74 name: 'APP_PAGE_LOADED',
73 callback: function(e) {} 75 callback: function(e) {}
74 }, 76 },
75 { 77 {
76 name: 'APP_AUTH_FAILED', 78 name: 'APP_AUTH_FAILED',
77 callback: function(e) { 79 callback: function(e) {
78 this.$router.push('/login'); 80 this.$router.push('/login');
79 this.$message.error('Token has expired'); 81 this.$message.error('Token has expired');
80 } 82 }
81 }, 83 },
82 { 84 {
83 name: 'APP_BAD_REQUEST', 85 name: 'APP_BAD_REQUEST',
84 // @error api response data 86 // @error api response data
85 callback: function(msg) { 87 callback: function(msg) {
86 this.$message.error(msg); 88 this.$message.error(msg);
87 } 89 }
88 }, 90 },
89 { 91 {
90 name: 'APP_ACCESS_DENIED', 92 name: 'APP_ACCESS_DENIED',
91 // @error api response data 93 // @error api response data
92 callback: function(msg) { 94 callback: function(msg) {
93 this.$message.error(msg); 95 this.$message.error(msg);
94 this.$router.push('/forbidden'); 96 this.$router.push('/forbidden');
95 } 97 }
96 }, 98 },
97 { 99 {
98 name: 'APP_RESOURCE_DELETED', 100 name: 'APP_RESOURCE_DELETED',
99 // @error api response data 101 // @error api response data
100 callback: function(msg) { 102 callback: function(msg) {
101 this.$message.success(msg); 103 this.$message.success(msg);
102 } 104 }
103 }, 105 },
104 { 106 {
105 name: 'APP_RESOURCE_UPDATED', 107 name: 'APP_RESOURCE_UPDATED',
106 // @error api response data 108 // @error api response data
107 callback: function(msg) { 109 callback: function(msg) {
108 this.$message.success(msg); 110 this.$message.success(msg);
109 } 111 }
110 }, 112 },
111 113
112 ]; 114 ];
src/pages/Authentication/Login.vue
Diff comments   View file @a690a86
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-content> 3 <v-content>
4 <v-container fluid fill-height> 4 <v-container fluid fill-height>
5 <!-- SNACKBAR --> 5 <!-- SNACKBAR -->
6 <v-snackbar 6 <v-snackbar
7 :timeout="timeout" 7 :timeout="timeout"
8 :top="y === 'top'" 8 :top="y === 'top'"
9 :right="x === 'right'" 9 :right="x === 'right'"
10 :vertical="mode === 'vertical'" 10 :vertical="mode === 'vertical'"
11 v-model="snackbar" 11 v-model="snackbar"
12 :color="snackbarColor" 12 :color="snackbarColor"
13 > 13 >
14 {{ text }} 14 {{ text }}
15 <v-spacer></v-spacer> 15 <v-spacer></v-spacer>
16 <v-btn flat text @click="snackbar = false">X</v-btn> 16 <v-btn flat text @click="snackbar = false">X</v-btn>
17 </v-snackbar> 17 </v-snackbar>
18 <v-layout align-center justify-center> 18 <v-layout align-center justify-center>
19 <v-flex xs12 sm10 md5 lg4> 19 <v-flex xs12 sm10 md5 lg4>
20 <img 20 <img
21 src="/static/icon.png" 21 src="/static/icon.png"
22 height="40" 22 height="40"
23 width="140" 23 width="140"
24 alt="logo" 24 alt="logo"
25 class="logo mx-auto mb-2" 25 class="logo mx-auto mb-2"
26 /> 26 />
27 <v-card class="elevation-1 px-2 py-3 card" style="background-color: #7852cc" dark> 27 <v-card class="elevation-1 px-2 py-3 card" style="background-color: #7852cc" dark>
28 <img 28 <img
29 src="/static/intrackIllustration.png" 29 src="/static/intrackIllustration.png"
30 class="mx-auto logoSchool" 30 class="mx-auto logoSchool"
31 style="display:block" 31 style="display:block"
32 width="280" 32 width="280"
33 /> 33 />
34 <v-card-text align-center justify-center> 34 <v-card-text align-center justify-center>
35 <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title> 35 <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title>
36 <v-flex xs12 sm12 md12 lg12> 36 <v-flex xs12 sm12 md12 lg12>
37 <v-form ref="form" v-model="valid" lazy-validation> 37 <v-form ref="form" v-model="valid" lazy-validation>
38 <label class="title">Email / PhoneNo</label> 38 <label class="title">Email / PhoneNo</label>
39 <v-text-field 39 <v-text-field
40 style="padding: 0px; margin: 0px;" 40 style="padding: 0px; margin: 0px;"
41 v-model.trim="userLogincredentials.email" 41 v-model.trim="userLogincredentials.email"
42 :rules="nameRules" 42 :rules="nameRules"
43 placeholder="Enter your email / phoneNo" 43 placeholder="Enter your email / phoneNo"
44 required 44 required
45 ></v-text-field> 45 ></v-text-field>
46 <label class="title">Password</label> 46 <label class="title">Password</label>
47 <v-text-field 47 <v-text-field
48 style="padding: 0px; margin: 0px;" 48 style="padding: 0px; margin: 0px;"
49 :rules="[rules.required]" 49 :rules="[rules.required]"
50 v-model.trim="userLogincredentials.password" 50 v-model.trim="userLogincredentials.password"
51 :append-icon="e1 ? 'visibility_off' : 'visibility'" 51 :append-icon="e1 ? 'visibility_off' : 'visibility'"
52 :append-icon-cb="() => (e1 = !e1)" 52 :append-icon-cb="() => (e1 = !e1)"
53 :type="e1 ? 'password' : 'text'" 53 :type="e1 ? 'password' : 'text'"
54 name="input-10-1" 54 name="input-10-1"
55 placeholder="Enter Your password" 55 placeholder="Enter Your password"
56 @keyup.enter="login" 56 @keyup.enter="login"
57 ></v-text-field> 57 ></v-text-field>
58 </v-form> 58 </v-form>
59 <v-layout> 59 <v-layout>
60 <v-flex xs12 class="pa-0 ma-0"> 60 <v-flex xs12 class="pa-0 ma-0">
61 <h5 class="right mt-4"> 61 <h5 class="right mt-4">
62 <router-link class="link" to="/forgetpassword">Forgot password</router-link> 62 <router-link class="link" to="/forgetpassword">Forgot password</router-link>
63 </h5> 63 </h5>
64 </v-flex> 64 </v-flex>
65 </v-layout> 65 </v-layout>
66 </v-flex> 66 </v-flex>
67 </v-card-text> 67 </v-card-text>
68 <v-layout> 68 <v-layout>
69 <v-flex sm12> 69 <v-flex sm12>
70 <v-btn 70 <v-btn
71 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;" 71 style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;"
72 dark 72 dark
73 flat 73 flat
74 @click="login" 74 @click="login"
75 :loading="loading" 75 :loading="loading"
76 >Login</v-btn> 76 >Login</v-btn>
77 </v-flex> 77 </v-flex>
78 </v-layout> 78 </v-layout>
79 <v-layout></v-layout> 79 <v-layout></v-layout>
80 </v-card> 80 </v-card>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 </v-container> 83 </v-container>
84 </v-content> 84 </v-content>
85 </v-app> 85 </v-app>
86 </template> 86 </template>
87 87
88 <script> 88 <script>
89 import http from "@/Services/http.js"; 89 import http from "@/Services/http.js";
90 import AllApiCalls from "@/Services/AllApiCalls.js"; 90 import AllApiCalls from "@/Services/AllApiCalls.js";
91 export default { 91 export default {
92 mixins: [AllApiCalls], 92 mixins: [AllApiCalls],
93 data() { 93 data() {
94 return { 94 return {
95 //SNACKBAR 95 //SNACKBAR
96 y: "top", 96 y: "top",
97 x: "right", 97 x: "right",
98 mode: "", 98 mode: "",
99 timeout: 10000, 99 timeout: 10000,
100 text: "", 100 text: "",
101 snackbarColor: "", 101 snackbarColor: "",
102 102
103 snackbar: false, 103 snackbar: false,
104 append: "", 104 append: "",
105 e1: true, 105 e1: true,
106 loading: false, 106 loading: false,
107 remember: false, 107 remember: false,
108 valid: false, 108 valid: false,
109 userLogincredentials: {}, 109 userLogincredentials: {},
110 nameRules: [(v) => !!v || "Field is required"], 110 nameRules: [(v) => !!v || "Field is required"],
111 password: "", 111 password: "",
112 email: "", 112 email: "",
113 rules: { 113 rules: {
114 required: (value) => !!value || "password is Required.", 114 required: (value) => !!value || "password is Required.",
115 }, 115 },
116 selectedStudent: {}, 116 selectedStudent: {},
117 }; 117 };
118 }, 118 },
119 methods: { 119 methods: {
120 async login() { 120 async login() {
121 if (this.$refs.form.validate()) { 121 if (this.$refs.form.validate()) {
122 this.loading = true; 122 this.loading = true;
123 var userdata = { 123 var userdata = {
124 email: this.userLogincredentials.email, 124 email: this.userLogincredentials.email,
125 password: this.userLogincredentials.password, 125 password: this.userLogincredentials.password,
126 }; 126 };
127 if (/^[0-9]{10}$/.test(this.userLogincredentials.email)) { 127 if (/^[0-9]{10}$/.test(this.userLogincredentials.email)) {
128 userdata.fatherCellNo = this.userLogincredentials.email; 128 userdata.fatherCellNo = this.userLogincredentials.email;
129 delete userdata.email; 129 delete userdata.email;
130 } 130 }
131 http() 131 http()
132 .post("/schoolLogin", userdata) 132 .post("/schoolLogin", userdata)
133 .then((response) => { 133 .then((response) => {
134 // console.log("token",response.data.data); 134 // console.log("token",response.data.data);
135 this.loading = false; 135 this.loading = false;
136 if (response.data.data.role === "ADMIN") { 136 if (response.data.data.role === "ADMIN") {
137 this.$store.dispatch("setToken", response.data.data.token); 137 this.$store.dispatch("setToken", response.data.data.token);
138 this.$store.dispatch("Id", response.data.data.id); 138 this.$store.dispatch("Id", response.data.data.id);
139 this.$store.dispatch("Role", response.data.data.role); 139 this.$store.dispatch("Role", response.data.data.role);
140 this.$router.push("/dashboard"); 140 this.$router.push("/dashboard");
141 } else if (response.data.data.role === "SUPERADMIN") { 141 } else if (response.data.data.role === "SUPERADMIN") {
142 this.$store.dispatch("setSchoolRole", response.data.data.role); 142 this.$store.dispatch("setSchoolRole", response.data.data.role);
143 this.$store.dispatch("setSchoolToken", response.data.data.token); 143 this.$store.dispatch("setSchoolToken", response.data.data.token);
144 this.$router.push("/schooldashboard"); 144 this.$router.push("/schooldashboard");
145 } else if (response.data.data.role === "TEACHER") { 145 } else if (response.data.data.role === "TEACHER") {
146 // console.log("teacher", response.data.data.role); 146 // console.log("teacher", response.data.data.role);
147 this.$store.dispatch("setToken", response.data.data.token); 147 this.$store.dispatch("setToken", response.data.data.token);
148 this.$store.dispatch("Id", response.data.data.id); 148 this.$store.dispatch("Id", response.data.data.id);
149 this.$store.dispatch("Role", response.data.data.role); 149 this.$store.dispatch("Role", response.data.data.role);
150 localStorage.setItem("teacherName", response.data.data.name);
150 this.$router.push("/dashboard"); 151 this.$router.push("/dashboard");
151 } else if (response.data.data.role === "LIBRARIAN") { 152 } else if (response.data.data.role === "LIBRARIAN") {
152 this.$store.dispatch("setToken", response.data.data.token); 153 this.$store.dispatch("setToken", response.data.data.token);
153 this.$store.dispatch("Id", response.data.data.id); 154 this.$store.dispatch("Id", response.data.data.id);
154 this.$store.dispatch("Role", response.data.data.role); 155 this.$store.dispatch("Role", response.data.data.role);
155 this.$router.push("/dashboard"); 156 this.$router.push("/dashboard");
156 } else if (response.data.data.role === "ACCOUNTANT") { 157 } else if (response.data.data.role === "ACCOUNTANT") {
157 this.$store.dispatch("setToken", response.data.data.token); 158 this.$store.dispatch("setToken", response.data.data.token);
158 this.$store.dispatch("Id", response.data.data.id); 159 this.$store.dispatch("Id", response.data.data.id);
159 this.$store.dispatch("Role", response.data.data.role); 160 this.$store.dispatch("Role", response.data.data.role);
160 this.$router.push("/dashboard"); 161 this.$router.push("/dashboard");
161 } else if (response.data.data.role === "PARENT") { 162 } else if (response.data.data.role === "PARENT") {
162 this.$store.dispatch("setToken", response.data.data.token); 163 this.$store.dispatch("setToken", response.data.data.token);
163 this.$store.dispatch("Id", response.data.data.id); 164 this.$store.dispatch("Id", response.data.data.id);
164 this.$store.dispatch("Role", response.data.data.role); 165 this.$store.dispatch("Role", response.data.data.role);
165 localStorage.setItem("parentStudentId", response.data.data.id); 166 localStorage.setItem("parentStudentId", response.data.data.id);
166 167
167 http() 168 http()
168 .get("/parentStudentsList") 169 .get("/parentStudentsList")
169 .then((response) => { 170 .then((response) => {
170 /* set disabled students values */ 171 /* set disabled students values */
171 console.log("students - ", response.data.data.students); 172 console.log("students - ", response.data.data.students);
172 /* prepare an array of false status students */ 173 /* prepare an array of false status students */
173 var indexStatusFalse = []; 174 var indexStatusFalse = [];
174 for (var i = 0; i < response.data.data.students.length; i++) { 175 for (var i = 0; i < response.data.data.students.length; i++) {
175 if (response.data.data.students[i].status == false) { 176 if (response.data.data.students[i].status == false) {
176 indexStatusFalse.push(i); 177 indexStatusFalse.push(i);
177 } 178 }
178 } 179 }
179 /* introduce a property named disabled in response to make false staus students disbled */ 180 /* introduce a property named disabled in response to make false staus students disbled */
180 for (var i = 0; i < indexStatusFalse.length; i++) { 181 for (var i = 0; i < indexStatusFalse.length; i++) {
181 response.data.data.students[ 182 response.data.data.students[
182 indexStatusFalse[i] 183 indexStatusFalse[i]
183 ].disabled = true; 184 ].disabled = true;
184 } 185 }
185 /* make an array of students */ 186 /* make an array of students */
186 this.$store.dispatch( 187 this.$store.dispatch(
187 "SET_STUDENTS_DATA", 188 "SET_STUDENTS_DATA",
188 response.data.data.students 189 response.data.data.students
189 ); 190 );
190 191
191 /* counter to keep a track of number of students that are disabled or false */ 192 /* counter to keep a track of number of students that are disabled or false */
192 var counter = 0; 193 var counter = 0;
193 /* if zero element of false students list is > 0 then make first student as defalut selected */ 194 /* if zero element of false students list is > 0 then make first student as defalut selected */
194 if (indexStatusFalse[0] > 0) { 195 if (indexStatusFalse[0] > 0) {
195 this.selectedStudent = response.data.data.students[0]._id; 196 this.selectedStudent = response.data.data.students[0]._id;
196 } 197 }
197 console.log("indexStatusFalse - ", indexStatusFalse); 198 console.log("indexStatusFalse - ", indexStatusFalse);
198 /* if false student is the first one in the list then see if the next is also false */ 199 /* if false student is the first one in the list then see if the next is also false */
199 if (indexStatusFalse[0] == 0) { 200 if (indexStatusFalse[0] == 0) {
200 if (indexStatusFalse.length > 1) { 201 if (indexStatusFalse.length > 1) {
201 for (var i = 1; i < indexStatusFalse.length; i++) { 202 for (var i = 1; i < indexStatusFalse.length; i++) {
202 if (indexStatusFalse[i] == i) { 203 if (indexStatusFalse[i] == i) {
203 if (indexStatusFalse[i - 1] == i - 1) { 204 if (indexStatusFalse[i - 1] == i - 1) {
204 counter = i + 1; 205 counter = i + 1;
205 continue; 206 continue;
206 } 207 }
207 } else { 208 } else {
208 counter = i; 209 counter = i;
209 break; 210 break;
210 } 211 }
211 } 212 }
212 } else { 213 } else {
213 counter = 1; 214 counter = 1;
214 } 215 }
215 } 216 }
216 console.log("counter - ", counter); 217 console.log("counter - ", counter);
217 if (counter == response.data.data.students.length) { 218 if (counter == response.data.data.students.length) {
218 this.seeSnackbar( 219 this.seeSnackbar(
219 "Your wards have been removed ", 220 "Your wards have been removed ",
220 "warning" 221 "warning"
221 ); 222 );
222 223
223 this.$store.dispatch("setToken", null); 224 this.$store.dispatch("setToken", null);
224 this.$store.dispatch("Id", null); 225 this.$store.dispatch("Id", null);
225 } else { 226 } else {
226 this.selectedStudent = 227 this.selectedStudent =
227 response.data.data.students[counter]._id; 228 response.data.data.students[counter]._id;
228 229 var studentName = response.data.data.students[counter].name;
230 localStorage.setItem("studentName", studentName);
229 localStorage.setItem( 231 localStorage.setItem(
230 "parentStudentId", 232 "parentStudentId",
231 this.selectedStudent 233 this.selectedStudent
232 ); 234 );
233 localStorage.setItem( 235 localStorage.setItem(
234 "parentClassId", 236 "parentClassId",
235 response.data.data.students[counter].classId 237 response.data.data.students[counter].classId
236 ); 238 );
237 this.$router.push("/dashboard"); 239 this.$router.push("/dashboard");
238 } 240 }
239 this.showLoader = false; 241 this.showLoader = false;
240 }) 242 })
241 .catch((err) => { 243 .catch((err) => {
242 console.log("err====>", err); 244 console.log("err====>", err);
243 this.showLoader = false; 245 this.showLoader = false;
244 }); 246 });
245 } 247 }
246 }) 248 })
247 .catch((error) => { 249 .catch((error) => {
248 if (error.response.data.message) { 250 if (error.response.data.message) {
249 this.text = error.response.data.message; 251 this.text = error.response.data.message;
250 this.snackbar = true; 252 this.snackbar = true;
251 this.snackbarColor = "error"; 253 this.snackbarColor = "error";
252 this.loading = false; 254 this.loading = false;
253 } else { 255 } else {
254 this.text = "Server appears to be offline"; 256 this.text = "Server appears to be offline";
255 this.snackbar = true; 257 this.snackbar = true;
256 this.snackbarColor = "error"; 258 this.snackbarColor = "error";
257 this.loading = false; 259 this.loading = false;
258 } 260 }
259 }); 261 });
260 } 262 }
261 }, 263 },
262 }, 264 },
263 mounted() { 265 mounted() {
264 if (this.$store.state.isUserLoggedIn == true) { 266 if (this.$store.state.isUserLoggedIn == true) {
265 this.$router.push("/dashboard"); 267 this.$router.push("/dashboard");
266 } else if (this.$store.state.isSchoolLoggedIn == true) { 268 } else if (this.$store.state.isSchoolLoggedIn == true) {
267 this.$router.push("/dashboard"); 269 this.$router.push("/dashboard");
268 } 270 }
269 }, 271 },
270 computed: { 272 computed: {
271 color() { 273 color() {
272 return this.loading ? "success" : "error"; 274 return this.loading ? "success" : "error";
273 }, 275 },
274 }, 276 },
275 }; 277 };
276 </script> 278 </script>
277 279
278 <style scoped lang="css"> 280 <style scoped lang="css">
279 #login { 281 #login {
280 width: 100%; 282 width: 100%;
281 position: absolute; 283 position: absolute;
282 top: 0; 284 top: 0;
283 left: 0; 285 left: 0;
284 content: ""; 286 content: "";
285 z-index: 0; 287 z-index: 0;
286 } 288 }
287 </style> 289 </style>
288 <style scoped> 290 <style scoped>
289 .schoolLogo { 291 .schoolLogo {
290 height: 60%; 292 height: 60%;
291 padding-left: 31%; 293 padding-left: 31%;
292 } 294 }
293 /* img { 295 /* img {
294 position: absolute; 296 position: absolute;
295 top: 13px; 297 top: 13px;
296 left: 8px; 298 left: 8px;
297 } */ 299 } */
298 .v-btn--large { 300 .v-btn--large {
299 padding: 0px 84px; 301 padding: 0px 84px;
300 } 302 }
301 .link { 303 .link {
302 text-decoration: none; 304 text-decoration: none;
303 } 305 }
304 a { 306 a {
305 color: #fff; 307 color: #fff;
306 } 308 }
307 .mt-4 { 309 .mt-4 {
308 margin-top: 21px !important; 310 margin-top: 21px !important;
309 } 311 }
310 .logo { 312 .logo {
311 display: block; 313 display: block;
312 } 314 }
313 @media screen and (max-width: 600px) { 315 @media screen and (max-width: 600px) {
314 img { 316 img {
315 left: 10px; 317 left: 10px;
316 height: 34px; 318 height: 34px;
317 width: 120px; 319 width: 120px;
318 } 320 }
319 .logo { 321 .logo {
320 height: 56px; 322 height: 56px;
321 left: 10px; 323 left: 10px;
322 width: 120px; 324 width: 120px;
323 display: block; 325 display: block;
324 } 326 }
325 .logoSchool { 327 .logoSchool {
326 height: 87px; 328 height: 87px;
327 left: 10px; 329 left: 10px;
328 width: 120px; 330 width: 120px;
329 } 331 }
330 } 332 }
331 </style> 333 </style>
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @a690a86
1 <template> 1 <template>
2 <div class="body-color"> 2 <div class="body-color">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container grid-list-xl class="pt-0"> 22 <v-container grid-list-xl class="pt-0">
23 <v-layout row wrap class="mt-1"> 23 <v-layout row wrap class="mt-1">
24 <!-- if logged in user is parent --> 24 <!-- if logged in user is parent -->
25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' "> 25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
26 <v-layout column> 26 <v-layout column>
27 <!-- HEADING --> 27 <!-- HEADING -->
28 <v-flex> 28 <v-flex>
29 <div 29 <div
30 class="title side-bar-color font-weight-bold" 30 class="title side-bar-color font-weight-bold"
31 >Live Online Classes - {{$route.query.chapterName}}</div> 31 >Live Online Classes - {{$route.query.chapterName}}</div>
32 <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> --> 32 <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> -->
33 <!-- <div 33 <!-- <div
34 class="subheading grey--text lighten-1" 34 class="subheading grey--text lighten-1"
35 >The session started at 1:00 there is 1 moderator</div>--> 35 >The session started at 1:00 there is 1 moderator</div>-->
36 </v-flex> 36 </v-flex>
37 37
38 <!-- JOIN OR END SESSION --> 38 <!-- JOIN OR END SESSION -->
39 <v-flex> 39 <v-flex>
40 <div> 40 <div>
41 <v-btn 41 <v-btn
42 round 42 round
43 class="open-dialog-button" 43 class="open-dialog-button"
44 dark 44 dark
45 v-if="studentBtn" 45 v-if="studentBtn"
46 @click="startChat();" 46 @click="startChat();"
47 >{{studentBtn}}</v-btn> 47 >{{studentBtn}}</v-btn>
48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span> 48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>
49 </div> 49 </div>
50 </v-flex> 50 </v-flex>
51 <v-flex id="studentClone"> 51 <v-flex id="studentClone">
52 <div id="jitsi-container"></div> 52 <div id="jitsi-container"></div>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 56
57 <!-- if logged in user is teacher --> 57 <!-- if logged in user is teacher -->
58 <v-flex xs12 sm12 md12 v-else> 58 <v-flex xs12 sm12 md12 v-else>
59 <v-layout column> 59 <v-layout column>
60 <!-- HEADING --> 60 <!-- HEADING -->
61 <v-flex> 61 <v-flex>
62 <div 62 <div
63 class="title side-bar-color font-weight-bold" 63 class="title side-bar-color font-weight-bold"
64 >Live Online Classes - {{$route.query.chapterName}}</div> 64 >Live Online Classes - {{$route.query.chapterName}}</div>
65 <!-- <div class="subheading grey--text lighten-1"></div> --> 65 <!-- <div class="subheading grey--text lighten-1"></div> -->
66 <!-- <div 66 <!-- <div
67 class="subheading grey--text lighten-1" 67 class="subheading grey--text lighten-1"
68 >The session started at 1:00 there is 1 moderator</div>--> 68 >The session started at 1:00 there is 1 moderator</div>-->
69 </v-flex> 69 </v-flex>
70 70
71 <!-- JOIN OR END SESSION --> 71 <!-- JOIN OR END SESSION -->
72 <v-flex> 72 <v-flex>
73 <div> 73 <div>
74 <v-btn round class="open-dialog-button" dark @click="startChat()">Start Session</v-btn> 74 <v-btn round class="open-dialog-button" dark @click="startChat()">Start Session</v-btn>
75 </div> 75 </div>
76 </v-flex> 76 </v-flex>
77 <v-flex id="teacherClone"> 77 <v-flex id="teacherClone">
78 <div id="jitsi-container"></div> 78 <div id="jitsi-container"></div>
79 </v-flex> 79 </v-flex>
80 </v-layout> 80 </v-layout>
81 </v-flex> 81 </v-flex>
82 82
83 <v-spacer></v-spacer> 83 <v-spacer></v-spacer>
84 84
85 <!-- COURSES SIDE BAR- positioned to the right of the page --> 85 <!-- COURSES SIDE BAR- positioned to the right of the page -->
86 <!-- <v-flex xs3> 86 <!-- <v-flex xs3>
87 <v-card class="elevation-0 card-border" height="100%"> 87 <v-card class="elevation-0 card-border" height="100%">
88 <CoursesSideBar></CoursesSideBar> 88 <CoursesSideBar></CoursesSideBar>
89 </v-card> 89 </v-card>
90 </v-flex>--> 90 </v-flex>-->
91 </v-layout> 91 </v-layout>
92 </v-container> 92 </v-container>
93 </div> 93 </div>
94 </template> 94 </template>
95 <script> 95 <script>
96 import AllApiCalls from "@/Services/AllApiCalls.js"; 96 import AllApiCalls from "@/Services/AllApiCalls.js";
97 import http from "@/Services/http.js"; 97 import http from "@/Services/http.js";
98 import moment from "moment"; 98 import moment from "moment";
99 import Meet from "@/pages/Meet/meet.vue"; 99 import Meet from "@/pages/Meet/meet.vue";
100 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; 100 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
101 export default { 101 export default {
102 mixins: [AllApiCalls], 102 mixins: [AllApiCalls],
103 components: { 103 components: {
104 CoursesSideBar, 104 CoursesSideBar,
105 }, 105 },
106 data() { 106 data() {
107 return { 107 return {
108 startLiveSession: "", 108 startLiveSession: "",
109 studentBtn: "", 109 studentBtn: "",
110 110
111 // DATA TABLE 111 // DATA TABLE
112 search: "", 112 search: "",
113 pagination: { 113 pagination: {
114 rowsPerPage: 10, 114 rowsPerPage: 10,
115 }, 115 },
116 liveOnlineHeaders: [ 116 liveOnlineHeaders: [
117 { 117 {
118 text: "Playback", 118 text: "Playback",
119 value: "attachementUrl", 119 value: "attachementUrl",
120 sortable: false, 120 sortable: false,
121 align: "center", 121 align: "center",
122 }, 122 },
123 { 123 {
124 text: "Meeting", 124 text: "Meeting",
125 align: "center", 125 align: "center",
126 sortable: false, 126 sortable: false,
127 value: "", 127 value: "",
128 }, 128 },
129 { 129 {
130 text: "Recording", 130 text: "Recording",
131 value: "", 131 value: "",
132 sortable: false, 132 sortable: false,
133 align: "center", 133 align: "center",
134 }, 134 },
135 { 135 {
136 text: "Description Preview", 136 text: "Description Preview",
137 value: "", 137 value: "",
138 sortable: false, 138 sortable: false,
139 align: "center", 139 align: "center",
140 }, 140 },
141 { text: "Date", value: "", sortable: false, align: "center" }, 141 { text: "Date", value: "", sortable: false, align: "center" },
142 { text: "Duration", value: "", sortable: false, align: "center" }, 142 { text: "Duration", value: "", sortable: false, align: "center" },
143 { text: "Toolbar", value: "", sortable: false, align: "center" }, 143 { text: "Toolbar", value: "", sortable: false, align: "center" },
144 ], 144 ],
145 liveOnlineItems: [], 145 liveOnlineItems: [],
146 146
147 // JITSI CONTAINER 147 // JITSI CONTAINER
148 liveLink: "", 148 liveLink: "",
149 token: "", 149 token: "",
150 selectStudents: {}, 150 selectStudents: {},
151 classRules: [(v) => !!v || " Class Name is required"], 151 classRules: [(v) => !!v || " Class Name is required"],
152 sectionRules: [(v) => !!v || " Section Name is required"], 152 sectionRules: [(v) => !!v || " Section Name is required"],
153 addclass: [], 153 addclass: [],
154 addSection: [], 154 addSection: [],
155 loading: false, 155 loading: false,
156 room: "", 156 room: "",
157 username: "", 157 username: "",
158 roomPassword: "", 158 roomPassword: "",
159 counter: 0, 159 counter: 0,
160 }; 160 };
161 }, 161 },
162 methods: { 162 methods: {
163 async startChat() { 163 async startChat() {
164 if (this.$store.state.role === "PARENT") { 164 if (this.$store.state.role === "PARENT") {
165 if (this.counter == 0) { 165 if (this.counter == 0) {
166 console.log("enter start chat");
166 this.startConference(); 167 this.startConference();
167 this.counter += 1; 168 this.counter += 1;
168 } 169 }
169 } 170 }
170 if (this.$store.state.role === "TEACHER") { 171 if (this.$store.state.role === "TEACHER") {
171 if (this.counter == 0) { 172 if (this.counter == 0) {
172 this.createRoom(); 173 this.createRoom();
173 this.counter += 1; 174 this.counter += 1;
174 } 175 }
175 } 176 }
176 }, 177 },
177 // JITSI CONTAINER 178 // JITSI CONTAINER
178 startConference() { 179 startConference() {
179 console.log("yes session started"); 180 console.log("yes session started");
180 var _this = this; 181 var _this = this;
181 try { 182 try {
182 const domain = "meet.intrack.in"; 183 const domain = "meet.intrack.in";
183 const options = { 184 const options = {
184 audioInput: "<deviceLabel>", 185 audioInput: "<deviceLabel>",
185 audioOutput: "<deviceLabel>", 186 audioOutput: "<deviceLabel>",
186 videoInput: "<deviceLabel>", 187 videoInput: "<deviceLabel>",
187 prejoinPageEnabled: false, 188 prejoinPageEnabled: false,
188 roomName: this.room, 189 roomName: this.room,
189 height: 500, 190 height: 500,
190 parentNode: document.getElementById("jitsi-container"), 191 parentNode: document.getElementById("jitsi-container"),
191 interfaceConfigOverwrite: { 192 interfaceConfigOverwrite: {
192 filmStripOnly: false, 193 filmStripOnly: false,
193 SHOW_PROMOTIONAL_CLOSE_PAGE: false, 194 SHOW_PROMOTIONAL_CLOSE_PAGE: false,
194 SHOW_POWERED_BY: false, 195 SHOW_POWERED_BY: false,
195 SHOW_JITSI_WATERMARK: false, 196 SHOW_JITSI_WATERMARK: false,
196 TOOLBAR_BUTTONS: [ 197 TOOLBAR_BUTTONS: [
197 "microphone", 198 "microphone",
198 "camera", 199 "camera",
199 "closedcaptions", 200 "closedcaptions",
200 "desktop", 201 "desktop",
201 "fullscreen", 202 "fullscreen",
202 "fodeviceselection", 203 "fodeviceselection",
203 "hangup", 204 "hangup",
204 "profile", 205 "profile",
205 "info", 206 "info",
206 "chat", 207 "chat",
207 "recording", 208 "recording",
208 "livestreaming", 209 "livestreaming",
209 "etherpad", 210 "etherpad",
210 "sharedvideo", 211 "sharedvideo",
211 "settings", 212 "settings",
212 "raisehand", 213 "raisehand",
213 "videoquality", 214 "videoquality",
214 "filmstrip", 215 "filmstrip",
215 "invite", 216 "invite",
216 "feedback", 217 "feedback",
217 "stats", 218 "stats",
218 "shortcuts", 219 "shortcuts",
219 "tileview", 220 "tileview",
220 ], 221 ],
221 }, 222 },
222 configOverwrite: { 223 configOverwrite: {
223 disableSimulcast: false, 224 disableSimulcast: false,
224 }, 225 },
225 teacherName: "", 226 teacherName: "",
226 romm: "", 227 romm: "",
227 }; 228 };
228 229 _this.api = new JitsiMeetExternalAPI(domain, options);
229 this.api = new JitsiMeetExternalAPI(domain, options); 230 console.log("this.api ", this.api);
230 this.api.addEventListener("videoConferenceJoined", () => { 231 _this.api.addEventListener("videoConferenceJoined", () => {
231 console.log("Local User Joined"); 232 console.log("Local User Joined");
232 233
233 _this.api.executeCommand("displayName", _this.username); 234 _this.api.executeCommand("displayName", _this.username);
234 _this.api.executeCommand("password", _this.roomPassword); 235 _this.api.executeCommand("password", this_.roomPassword);
235 }); 236 });
236 this.api.on("readyToClose", () => { 237 _this.api.on("readyToClose", () => {
237 this.$router.push({name:"Refresh"}) 238 this.$router.push({ name: "Refresh" });
238 }); 239 });
239 } catch (error) { 240 } catch (error) {
240 console.error("Failed to load Jitsi API", error); 241 console.error("Failed to load Jitsi API", error);
241 } 242 }
242 }, 243 },
243 openRoom() { 244 openRoom() {
244 // verify the JitsiMeetExternalAPI constructor is added to the global.. 245 // verify the JitsiMeetExternalAPI constructor is added to the global..
245 // if (this.teacherName != "" || this.room != "") { 246 // if (this.teacherName != "" || this.room != "") {
246 // if (window.JitsiMeetExternalAPI) { 247 // if (window.JitsiMeetExternalAPI) {
247 // // var person = prompt("Please enter your name:", "Rabie"); 248 // // var person = prompt("Please enter your name:", "Rabie");
248 // if (person != null || person != "") this.username = this.teacherName; 249 // if (person != null || person != "") this.username = this.teacherName;
249 // var room = prompt("Please enter your room:", "Test Room"); 250 // var room = prompt("Please enter your room:", "Test Room");
250 // if (room != null || room != "") this.room = this.room; 251 // if (room != null || room != "") this.room = this.room;
251 // this.startConference(); 252 // this.startConference();
252 // } else alert("Jitsi Meet API script not loaded"); 253 // } else alert("Jitsi Meet API script not loaded");
253 // } 254 // }
254 }, 255 },
255 256
256 createRoom(classId) { 257 createRoom(classId) {
257 this.showLoader = true; 258 this.showLoader = true;
258 var classId = { 259 var classId = {
259 classId: classId, 260 classId: classId,
260 }; 261 };
261 http() 262 http()
262 .post("/createLiveClasses", { 263 .post("/createLiveClasses", {
263 classId: this.$route.query.classId, 264 classId: this.$route.query.classId,
264 courseId: this.$route.query.courseId, 265 courseId: this.$route.query.courseId,
265 chapterId: this.$route.query.chapterId, 266 chapterId: this.$route.query.chapterId,
266 }) 267 })
267 .then((response) => { 268 .then((response) => {
268 // this.addSection = response.data.data; 269 // this.addSection = response.data.data;
269 console.log("CREATE___ROOOM", response.data); 270 console.log("CREATE___ROOOM", response.data);
270 this.room = response.data.data.roomName; 271 var room = response.data.data.roomName;
271 272 var username = localStorage.getItem("teacherName")
272 // this.username = response.data.data.LiveClasses.teacherName; 273 var roomPassword = response.data.data.password;
273 this.roomPassword = response.data.data.password; 274 console.log(
274 275 "room",
276 room,
277 "username",
278 username,
279 "roomPassword",
280 roomPassword
281 );
275 var this_ = this; 282 var this_ = this;
276 if (this.username != "" || this.room != "") { 283 if (username != "" || room != "") {
277 if (window.JitsiMeetExternalAPI) { 284 if (window.JitsiMeetExternalAPI) {
278 // var person = prompt("Please enter your name:", "Rabie"); 285 // var person = prompt("Please enter your name:", "Rabie");
279 if (this_.username != null || this_.username != "") { 286 if (username != null || username != "") {
280 this.username = this.username; 287 this_.username = username;
281 } 288 }
282 // var room = prompt("Please enter your room:", "Test Room"); 289 // var room = prompt("Please enter your room:", "Test Room");
283 if (this_.room != null || this_.room != "") { 290 if (room != null || room != "") {
284 this.room = this.room; 291 this_.room = room;
292 }
293 if (roomPassword != null || roomPassword != "") {
294 this_.password = roomPassword;
285 } 295 }
286 this.startConference();
287 } else alert("Jitsi Meet API script not loaded"); 296 } else alert("Jitsi Meet API script not loaded");
297 this_.startConference();
288 } 298 }
289 this.showLoader = false; 299 this.showLoader = false;
290 }) 300 })
291 .catch((err) => { 301 .catch((err) => {
292 this.showLoader = false; 302 this.showLoader = false;
293 }); 303 });
294 }, 304 },
295 async studentClasses() { 305 async studentClasses() {
296 this.liveLink = ""; 306 this.liveLink = "";
297 this.room = ""; 307 this.room = "";
298 this.username = ""; 308 this.username = "";
299 this.roomPassword = ""; 309 this.roomPassword = "";
300 /* getLiveClassesesList - To up date line under heading*/ 310 /* getLiveClassesesList - To up date line under heading*/
301 let response = await this.getLiveClassesesList({ 311 let response = await this.getLiveClassesesList({
302 classId: this.$route.query.classId, 312 classId: this.$route.query.classId,
303 courseId: this.$route.query.courseId, 313 courseId: this.$route.query.courseId,
304 chapterId: this.$route.query.chapterId, 314 chapterId: this.$route.query.chapterId,
305 }); 315 });
306 console.log("response getLiveClassesesList- ", response); 316 console.log("response getLiveClassesesList- ", response);
307 317
308 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ 318 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
309 if (response.data.data[0].sessionStatus == "ENDED") { 319 if (response.data.data[0].sessionStatus == "ENDED") {
310 // this.startLiveSession = "Start Session"; 320 // this.startLiveSession = "Start Session";
311 this.studentBtn = ""; 321 this.studentBtn = "";
312 } 322 }
313 if (response.data.data[0].sessionStatus == "STARTED") { 323 if (response.data.data[0].sessionStatus == "STARTED") {
314 // this.startLiveSession = "Join Session"; 324 // this.startLiveSession = "Join Session";
315 this.studentBtn = "Join Session"; 325 this.studentBtn = "Join Session";
316 } 326 }
317 if (response.data.data.length == 0) { 327 if (response.data.data.length == 0) {
318 this.startLiveSession = "Start Session"; 328 this.startLiveSession = "Start Session";
319 this.studentBtn = ""; 329 this.studentBtn = "";
320 } else { 330 } else {
321 this.liveLink = response.data.data[0].link; 331 this.liveLink = response.data.data[0].link;
322 var room = response.data.data[0].roomName; 332 var room = response.data.data[0].roomName;
323 var username = response.data.data[0].teacherId.name; 333 var username = this.currentUser;
324 this.roomPassword = response.data.data[0].password; 334 var roomPassword = response.data.data[0].password;
325 var this_ = this; 335 var this_ = this;
326 console.log(this.room, this.roomPassword, this.username); 336 // console.log(this.room, this.roomPassword, this.username);
327 337
328 if (username != "" || room != "") { 338 if (username != "" || room != "") {
329 if (window.JitsiMeetExternalAPI) { 339 if (window.JitsiMeetExternalAPI) {
330 // var person = prompt("Please enter your name:", "Rabie"); 340 // var person = prompt("Please enter your name:", "Rabie");
331 if (username != null || username != "") { 341 if (username != null || username != "") {
332 this.username = username; 342 this_.username = username;
343 }
344 if (roomPassword != null || roomPassword != "") {
345 this_.roomPassword = roomPassword;
333 } 346 }
334 // var room = prompt("Please enter your room:", "Test Room"); 347 // var room = prompt("Please enter your room:", "Test Room");
335 if (room != null || room != "") { 348 if (room != null || room != "") {
336 this.room = room; 349 this_.room = room;
337 } 350 }
338 // this.startConference(); 351 // this.startConference();
339 } 352 }
340 } 353 }
341 } 354 }
342 }, 355 },
343 }, 356 },
344 357
345 async created() { 358 async created() {
359 console.log(
360 "this.$store.state.studentsData",
361 this.$store.state.studentsData[0].name
362 );
363 this.currentUser = localStorage.getItem("studentName");
346 this.token = this.$store.state.token; 364 this.token = this.$store.state.token;
347 if (this.$store.state.role === "PARENT") { 365 if (this.$store.state.role === "PARENT") {
348 await this.studentClasses(); 366 await this.studentClasses();
349 } 367 }
350 368
351 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 369 /* getStudentCourses - to get courseData - defined in GetApis.js*/
352 if (this.$store.state.role === "PARENT") { 370 if (this.$store.state.role === "PARENT") {
353 await this.getStudentCourses({ 371 await this.getStudentCourses({
354 classId: localStorage.getItem("parentClassId"), 372 classId: localStorage.getItem("parentClassId"),
355 studentId: localStorage.getItem("parentStudentId"), 373 studentId: localStorage.getItem("parentStudentId"),
356 }); 374 });
357 } 375 }
358 }, 376 },
359 }; 377 };
360 </script> 378 </script>
361 <style scoped> 379 <style scoped>
362 .side-bar-color { 380 .side-bar-color {
363 color: #827bfa !important; 381 color: #827bfa !important;
364 /* border-top-right-radius: 74px !important; */ 382 /* border-top-right-radius: 74px !important; */
365 } 383 }
366 .card-border { 384 .card-border {
367 border: 1px #bdbdbd solid; 385 border: 1px #bdbdbd solid;
368 border-radius: 3px; 386 border-radius: 3px;
369 } 387 }
370 .reply-desc { 388 .reply-desc {
371 border: 1px solid #f2f2f2; 389 border: 1px solid #f2f2f2;
372 } 390 }
373 .open-dialog-button { 391 .open-dialog-button {
374 background: #827bfa !important; 392 background: #827bfa !important;
375 border-color: #827bfa !important; 393 border-color: #827bfa !important;
376 text-transform: none !important; 394 text-transform: none !important;
377 } 395 }
378 396
379 .reply-btn { 397 .reply-btn {
380 background: #feb83c !important; 398 background: #feb83c !important;
381 border-color: #feb83c !important; 399 border-color: #feb83c !important;
382 text-transform: none !important; 400 text-transform: none !important;
383 -webkit-box-shadow: none !important; 401 -webkit-box-shadow: none !important;
384 box-shadow: none !important; 402 box-shadow: none !important;
385 } 403 }
386 #jitsi-container { 404 #jitsi-container {
387 height: 100vh; 405 height: 100vh;
388 } 406 }
src/pages/Report/idCard.vue
Diff comments   View file @a690a86
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 xs12 sm12 lg10 class="ml-2"> 10 <v-flex xs12 sm12 lg10 class="ml-2">
11 <v-autocomplete 11 <v-autocomplete
12 v-model="getReport.role" 12 v-model="getReport.role"
13 label="Select Type" 13 label="Select Type"
14 :items="getRoles" 14 :items="getRoles"
15 item-text="name" 15 item-text="name"
16 return-object 16 return-object
17 @change="getRoleInputs(getReport.role)" 17 @change="getRoleInputs(getReport.role)"
18 required 18 required
19 ></v-autocomplete> 19 ></v-autocomplete>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 </v-flex> 22 </v-flex>
23 <!-- SELECT CLASS --> 23 <!-- SELECT CLASS -->
24 <v-flex xs12 sm12 lg4 v-if="showClass"> 24 <v-flex xs12 sm12 lg4 v-if="showClass">
25 <v-layout> 25 <v-layout>
26 <v-flex xs12 sm12 lg10 class="ml-2"> 26 <v-flex xs12 sm12 lg10 class="ml-2">
27 <v-select 27 <v-select
28 v-model="getReport.classId" 28 v-model="getReport.classId"
29 label="Select Class" 29 label="Select Class"
30 :items="classList" 30 :items="classList"
31 item-text="classNum" 31 item-text="classNum"
32 item-value="_id" 32 item-value="_id"
33 @change="getSections(getReport.classId)" 33 @change="getSections(getReport.classId)"
34 required 34 required
35 ></v-select> 35 ></v-select>
36 </v-flex> 36 </v-flex>
37 </v-layout> 37 </v-layout>
38 </v-flex> 38 </v-flex>
39 <!-- SELECT SECTION --> 39 <!-- SELECT SECTION -->
40 <v-flex xs12 sm12 lg4 v-if="showSections"> 40 <v-flex xs12 sm12 lg4 v-if="showSections">
41 <v-layout> 41 <v-layout>
42 <v-flex xs12 sm12 lg10 class="ml-2"> 42 <v-flex xs12 sm12 lg10 class="ml-2">
43 <v-select 43 <v-select
44 :items="addSection" 44 :items="addSection"
45 label="Select Section" 45 label="Select Section"
46 v-model="getReport.sectionId" 46 v-model="getReport.sectionId"
47 item-text="name" 47 item-text="name"
48 item-value="_id" 48 item-value="_id"
49 name="Select Section" 49 name="Select Section"
50 @change="getStudents" 50 @change="getStudents"
51 required 51 required
52 ></v-select> 52 ></v-select>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 <!-- SELECT STUDENT --> 56 <!-- SELECT STUDENT -->
57 <v-flex xs12 sm12 lg4 v-if="showStudents"> 57 <v-flex xs12 sm12 lg4 v-if="showStudents">
58 <v-layout> 58 <v-layout>
59 <v-flex xs12 sm12 lg10 class="ml-2"> 59 <v-flex xs12 sm12 lg10 class="ml-2">
60 <v-select 60 <v-select
61 :items="getSelectUserData" 61 :items="getSelectUserData"
62 label="Select Student" 62 label="Select Student"
63 v-model="getReport._id" 63 v-model="getReport._id"
64 item-text="name" 64 item-text="name"
65 item-value="_id" 65 item-value="_id"
66 required 66 required
67 ></v-select> 67 ></v-select>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 </v-flex> 70 </v-flex>
71 <v-flex xs12 sm12 lg4 v-if="showTeacher"> 71 <v-flex xs12 sm12 lg4 v-if="showTeacher">
72 <v-layout> 72 <v-layout>
73 <v-flex xs12 sm12 lg10 class="ml-2"> 73 <v-flex xs12 sm12 lg10 class="ml-2">
74 <v-select 74 <v-select
75 v-model="getReport._id" 75 v-model="getReport._id"
76 label="Select Teacher" 76 label="Select Teacher"
77 :items="getSelectUserData" 77 :items="getSelectUserData"
78 item-text="name" 78 item-text="name"
79 item-value="_id" 79 item-value="_id"
80 required 80 required
81 ></v-select> 81 ></v-select>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-flex> 84 </v-flex>
85 <v-flex xs12 sm12 lg4 v-if="showAdmin"> 85 <v-flex xs12 sm12 lg4 v-if="showAdmin">
86 <v-layout> 86 <v-layout>
87 <v-flex xs12 sm12 lg10 class="ml-2"> 87 <v-flex xs12 sm12 lg10 class="ml-2">
88 <v-select 88 <v-select
89 v-model="getReport._id" 89 v-model="getReport._id"
90 label="Select Admin" 90 label="Select Admin"
91 :items="getSelectUserData" 91 :items="getSelectUserData"
92 item-text="name" 92 item-text="name"
93 item-value="_id" 93 item-value="_id"
94 required 94 required
95 ></v-select> 95 ></v-select>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 </v-flex> 98 </v-flex>
99 <v-flex xs12 sm12 lg4 v-if="showAccountant"> 99 <v-flex xs12 sm12 lg4 v-if="showAccountant">
100 <v-layout> 100 <v-layout>
101 <v-flex xs12 sm12 lg10 class="ml-2"> 101 <v-flex xs12 sm12 lg10 class="ml-2">
102 <v-select 102 <v-select
103 v-model="getReport._id" 103 v-model="getReport._id"
104 label="Select Accountant" 104 label="Select Accountant"
105 :items="getSelectUserData" 105 :items="getSelectUserData"
106 item-text="name" 106 item-text="name"
107 item-value="_id" 107 item-value="_id"
108 required 108 required
109 ></v-select> 109 ></v-select>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 </v-flex> 112 </v-flex>
113 <v-flex xs12 sm12 lg4 v-if="showLibrarian"> 113 <v-flex xs12 sm12 lg4 v-if="showLibrarian">
114 <v-layout> 114 <v-layout>
115 <v-flex xs12 sm12 lg10 class="ml-2"> 115 <v-flex xs12 sm12 lg10 class="ml-2">
116 <v-select 116 <v-select
117 v-model="getReport._id" 117 v-model="getReport._id"
118 label="Select Librarian" 118 label="Select Librarian"
119 :items="getSelectUserData " 119 :items="getSelectUserData "
120 item-text="name" 120 item-text="name"
121 item-value="_id" 121 item-value="_id"
122 required 122 required
123 ></v-select> 123 ></v-select>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-flex> 126 </v-flex>
127 <v-flex xs12 sm12 lg4> 127 <v-flex xs12 sm12 lg4>
128 <v-layout> 128 <v-layout>
129 <v-flex xs12 sm12 lg10 class="ml-2"> 129 <v-flex xs12 sm12 lg10 class="ml-2">
130 <v-autocomplete 130 <v-autocomplete
131 label="Select View Type" 131 label="Select View Type"
132 type="text" 132 type="text"
133 :items="typeList" 133 :items="typeList"
134 v-model="getReport.form" 134 v-model="getReport.form"
135 item-text="name" 135 item-text="name"
136 item-value="value" 136 item-value="value"
137 :rules="typeRules" 137 :rules="typeRules"
138 @change="getReportType(getReport.form)" 138 @change="getReportType(getReport.form)"
139 required 139 required
140 ></v-autocomplete> 140 ></v-autocomplete>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 </v-flex> 143 </v-flex>
144 <v-flex xs12 sm12 lg4> 144 <v-flex xs12 sm12 lg4>
145 <v-btn 145 <v-btn
146 @click="getCards" 146 @click="getCards"
147 round 147 round
148 dark 148 dark
149 :loading="loading" 149 :loading="loading"
150 class="open-dialog-button mt-3" 150 class="open-dialog-button mt-3"
151 >Get Report</v-btn> 151 >Get Report</v-btn>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 </v-flex> 154 </v-flex>
155 </v-form> 155 </v-form>
156 </v-card> 156 </v-card>
157 <div> 157 <div>
158 <v-layout v-show="showReport"> 158 <v-layout v-show="showReport">
159 <v-flex xs12> 159 <v-flex xs12>
160 <v-card class="transparent elevation-0"> 160 <v-card class="transparent elevation-0">
161 <!-- print button --> 161 <!-- print button -->
162 <v-layout> 162 <v-layout>
163 <v-flex xs12> 163 <v-flex xs12>
164 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()"> 164 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
165 Print 165 Print
166 <v-icon right dark>print</v-icon> 166 <v-icon right dark>print</v-icon>
167 </v-btn> 167 </v-btn>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 </v-card> 170 </v-card>
171 <v-layout row wrap id='printMe' justify-center> 171 <v-layout row wrap id="printMe" justify-center>
172 <v-card v-for="(getCard,index) in getCard" :key="index" style="page-break-after: always;"> 172 <div
173 <v-container grid-list-md> 173 v-for="(getCard,index) in getCard"
174 <v-layout class="col-sm-12"> 174 :key="index"
175 <div 175 style="page-break-after: always; width:100%;margin:14px auto;background:transparent;"
176 style="font-family: arial; 176 >
177 <v-container grid-list-md>
178 <v-layout class="col-sm-12">
179 <div
180 style="font-family: arial;
177 max-width: 794px; 181 max-width: 794px;
178 max-height: 1123px; 182 max-height: 1123px;
179 margin-left: auto; 183 margin-left: auto;
180 margin-right: auto; 184 margin-right: auto;
181 -webkit-print-color-adjust: exact;" 185 -webkit-print-color-adjust: exact;"
182 > 186 >
183 <div 187 <div
184 style=" 188 style="
185 float: left; 189 float: left;
186 height: 520px; 190 height: 520px;
187 width: 520px; 191 width: 520px;
188 background: #fff; 192 background: #fff;
189 border: 1px solid lightgray; 193 border: 1px solid lightgray;
190 position:relative;" 194 position:relative;"
191 > 195 >
192 <!-- bottom-right-side-image --> 196 <!-- bottom-right-side-image -->
193 <img 197 <img
194 src="/static/icon/shape1.png" 198 src="/static/icon/shape1.png"
195 alt="shape" 199 alt="shape"
196 style="position:absolute;width: 90px;" 200 style="position:absolute;width: 90px;"
197 /> 201 />
198 <!-- Front Side --> 202 <!-- Front Side -->
199 <v-layout 203 <v-layout
200 style=" 204 style="
201 text-align: center; 205 text-align: center;
202 margin-top: 50px;" 206 margin-top: 50px;"
203 v-if="frontPart" 207 v-if="frontPart"
204 > 208 >
205 <v-flex xs12> 209 <v-flex xs12>
206 <!-- school Logo Url --> 210 <!-- school Logo Url -->
207 <img 211 <img
208 v-if="getCard.schoolLogoUrl" 212 v-if="getCard.schoolLogoUrl"
209 :src="getCard.schoolLogoUrl" 213 :src="getCard.schoolLogoUrl"
210 alt="schoollogo" 214 alt="schoollogo"
211 style=" 215 style="
212 width: 110px; 216 width: 110px;
213 margin-top:10px; 217 margin-top:10px;
214 overflow:hidden" 218 overflow:hidden"
215 /> 219 />
216 <img 220 <img
217 src="/static/default_thumb.png" 221 src="/static/default_thumb.png"
218 v-if="!getCard.schoolLogoUrl" 222 v-if="!getCard.schoolLogoUrl"
219 alt="schoollogo" 223 alt="schoollogo"
220 style=" 224 style="
221 width: 110px; 225 width: 110px;
222 margin-top:10px; 226 margin-top:10px;
223 overflow:hidden" 227 overflow:hidden"
224 /> 228 />
225 <v-layout style="margin:auto"> 229 <v-layout style="margin:auto">
226 <!-- profile url --> 230 <!-- profile url -->
227 <img 231 <img
228 v-if="getCard.profilePicUrl" 232 v-if="getCard.profilePicUrl"
229 :src="getCard.profilePicUrl" 233 :src="getCard.profilePicUrl"
230 alt="profileImage" 234 alt="profileImage"
231 style="; 235 style=";
232 width: 110px; 236 width: 110px;
233 margin:10px auto; 237 margin:10px auto;
234 width: 110px; 238 width: 110px;
235 margin: 10px auto; 239 margin: 10px auto;
236 border: 3px solid #323232; 240 border: 3px solid #323232;
237 border-radius: 12px;" 241 border-radius: 12px;"
238 /> 242 />
239 <img 243 <img
240 style=" 244 style="
241 width: 110px; 245 width: 110px;
242 margin:10px auto; 246 margin:10px auto;
243 width: 110px; 247 width: 110px;
244 margin: 10px auto;" 248 margin: 10px auto;"
245 alt="dummy" 249 alt="dummy"
246 src="/static/icon/user.png" 250 src="/static/icon/user.png"
247 v-if="!getCard.profilePicUrl && getCard.role != '2'" 251 v-if="!getCard.profilePicUrl && getCard.role != '2'"
248 /> 252 />
249 </v-layout> 253 </v-layout>
250 254
251 <p 255 <p
252 style="color: #302653;font-size:24px; 256 style="color: #302653;font-size:24px;
253 letter-spacing: 4px; 257 letter-spacing: 4px;
254 margin-bottom:14px;" 258 margin-bottom:14px;"
255 > 259 >
256 <b>{{ getCard.name}}</b> 260 <b>{{ getCard.name}}</b>
257 </p> 261 </p>
258 <p 262 <p
259 style="color: #302653; 263 style="color: #302653;
260 font-size:14px; 264 font-size:14px;
261 letter-spacing: 4px; 265 letter-spacing: 4px;
262 margin-bottom:14px;" 266 margin-bottom:14px;"
263 > 267 >
264 <b>{{ getCard.gender}}</b> 268 <b>{{ getCard.gender}}</b>
265 </p> 269 </p>
266 <p 270 <p
267 v-if="getCard.classId" 271 v-if="getCard.classId"
268 style="color: #302653; 272 style="color: #302653;
269 font-size:24px; 273 font-size:24px;
270 letter-spacing: 4px; 274 letter-spacing: 4px;
271 margin-bottom:14px;" 275 margin-bottom:14px;"
272 >{{ getCard.classId.classNum }}</p> 276 >{{ getCard.classId.classNum }}</p>
273 <p 277 <p
274 v-if="getCard.classId" 278 v-if="getCard.classId"
275 style="color: #302653; 279 style="color: #302653;
276 font-size:24px; 280 font-size:24px;
277 letter-spacing: 4px; 281 letter-spacing: 4px;
278 margin-bottom:14px;" 282 margin-bottom:14px;"
279 >{{ getCard.sectionId.name }}</p> 283 >{{ getCard.sectionId.name }}</p>
280 <p 284 <p
281 v-if="getCard.rollNo" 285 v-if="getCard.rollNo"
282 style="color: #302653; 286 style="color: #302653;
283 font-size:24px; 287 font-size:24px;
284 letter-spacing: 2px; 288 letter-spacing: 2px;
285 margin-bottom:10px;" 289 margin-bottom:10px;"
286 >Roll: {{ getCard.rollNo }}</p> 290 >Roll: {{ getCard.rollNo }}</p>
287 <p 291 <p
288 v-if="getCard.joinDate" 292 v-if="getCard.joinDate"
289 style="color: #302653; 293 style="color: #302653;
290 margin-bottom:10px; 294 margin-bottom:10px;
291 font-size:16px; 295 font-size:16px;
292 letter-spacing: 2px;" 296 letter-spacing: 2px;"
293 >{{ dates(getCard.joinDate) }}</p> 297 >{{ dates(getCard.joinDate) }}</p>
294 <p 298 <p
295 v-if="getCard.joiningDate" 299 v-if="getCard.joiningDate"
296 style="color: #302653; 300 style="color: #302653;
297 margin-bottom:10px; 301 margin-bottom:10px;
298 font-size:16px; 302 font-size:16px;
299 letter-spacing: 2px;" 303 letter-spacing: 2px;"
300 >{{ dates(getCard.joiningDate) }}</p> 304 >{{ dates(getCard.joiningDate) }}</p>
301 <p 305 <p
302 v-if="getCard.phone" 306 v-if="getCard.phone"
303 style="color: #302653; 307 style="color: #302653;
304 margin-bottom:10px; 308 margin-bottom:10px;
305 font-size:16px; 309 font-size:16px;
306 letter-spacing: 2px;" 310 letter-spacing: 2px;"
307 >{{ getCard.phone }}</p> 311 >{{ getCard.phone }}</p>
308 <p 312 <p
309 style=" 313 style="
310 font-size: 19px; 314 font-size: 19px;
311 font-weight: 100; 315 font-weight: 100;
312 color: rgb(48, 38, 83); 316 color: rgb(48, 38, 83);
313 letter-spacing: 5px; 317 letter-spacing: 5px;
314 margin-bottom:10px;" 318 margin-bottom:10px;"
315 > 319 >
316 <span v-if="getCard.mobile">{{ getCard.mobile}}</span> 320 <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
317 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span> 321 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
318 </p> 322 </p>
319 <p 323 <p
320 style=" 324 style="
321 font-size: 17px; 325 font-size: 17px;
322 font-weight: 100; 326 font-weight: 100;
323 color: rgb(48, 38, 83); 327 color: rgb(48, 38, 83);
324 letter-spacing: 4px; 328 letter-spacing: 4px;
325 margin-bottom:14px;" 329 margin-bottom:14px;"
326 >{{ getCard.email}}</p> 330 >{{ getCard.email}}</p>
327 </v-flex> 331 </v-flex>
328 </v-layout> 332 </v-layout>
329 <!-- back side --> 333 <!-- back side -->
330 <v-layout style=" 334 <v-layout style="
331 text-align: center;" v-if="backPart"> 335 text-align: center;" v-if="backPart">
332 <v-flex xs12> 336 <v-flex xs12>
333 <!-- school Logo Url --> 337 <!-- school Logo Url -->
334 <img 338 <img
335 v-if="getCard.schoolLogoUrl" 339 v-if="getCard.schoolLogoUrl"
336 :src="getCard.schoolLogoUrl" 340 :src="getCard.schoolLogoUrl"
337 alt="schoollogo" 341 alt="schoollogo"
338 style=" 342 style="
339 width: 110px; 343 width: 110px;
340 margin-top:10px; 344 margin-top:10px;
341 overflow:hidden" 345 overflow:hidden"
342 /> 346 />
343 <img 347 <img
344 v-if="getCard.schoolId" 348 v-if="getCard.schoolId"
345 :src="getCard.schoolId.schoolLogoUrl" 349 :src="getCard.schoolId.schoolLogoUrl"
346 alt="schoollogo" 350 alt="schoollogo"
347 style=" 351 style="
348 width: 110px; 352 width: 110px;
349 margin-top:10px; 353 margin-top:10px;
350 overflow:hidden" 354 overflow:hidden"
351 /> 355 />
352 <p 356 <p
353 v-if="getCard.schoolLogoUrl" 357 v-if="getCard.schoolLogoUrl"
354 style="color: #302653; 358 style="color: #302653;
355 font-size:24px; 359 font-size:24px;
356 letter-spacing: 4px; 360 letter-spacing: 4px;
357 margin-bottom:14px;" 361 margin-bottom:14px;"
358 > 362 >
359 <b>{{ getCard.name}}</b> 363 <b>{{ getCard.name}}</b>
360 </p> 364 </p>
361 365
362 <p 366 <p
363 v-if="getCard.city" 367 v-if="getCard.city"
364 style=" 368 style="
365 font-size: 17px; 369 font-size: 17px;
366 font-weight: 100; 370 font-weight: 100;
367 color: rgb(48, 38, 83); 371 color: rgb(48, 38, 83);
368 letter-spacing: 4px; 372 letter-spacing: 4px;
369 margin-bottom:14px;" 373 margin-bottom:14px;"
370 >{{ getCard.city}}</p> 374 >{{ getCard.city}}</p>
371 <p 375 <p
372 style=" 376 style="
373 font-size: 17px; 377 font-size: 17px;
374 font-weight: 100; 378 font-weight: 100;
375 color: rgb(48, 38, 83); 379 color: rgb(48, 38, 83);
376 letter-spacing: 4px; 380 letter-spacing: 4px;
377 margin-bottom:14px;" 381 margin-bottom:14px;"
378 > 382 >
379 {{ getCard.address }} 383 {{ getCard.address }}
380 {{ getCard.presentAddress }} 384 {{ getCard.presentAddress }}
381 <span 385 <span
382 v-if="getCard.state" 386 v-if="getCard.state"
383 >({{ getCard.state }})</span> 387 >({{ getCard.state }})</span>
384 </p> 388 </p>
385 <p 389 <p
386 v-if="getCard.establishmentYear" 390 v-if="getCard.establishmentYear"
387 style=" 391 style="
388 font-size: 17px; 392 font-size: 17px;
389 font-weight: 100; 393 font-weight: 100;
390 color: rgb(48, 38, 83); 394 color: rgb(48, 38, 83);
391 letter-spacing: 4px; 395 letter-spacing: 4px;
392 margin-bottom:14px;" 396 margin-bottom:14px;"
393 >{{ getCard.establishmentYear }}</p> 397 >{{ getCard.establishmentYear }}</p>
394 </v-flex> 398 </v-flex>
395 </v-layout> 399 </v-layout>
396 <!-- bottom-right-side-image --> 400 <!-- bottom-right-side-image -->
397 <img 401 <img
398 src="static/icon/shape2.png" 402 src="static/icon/shape2.png"
399 alt="shape2" 403 alt="shape2"
400 style="bottom: 0; 404 style="bottom: 0;
401 position: absolute; 405 position: absolute;
402 right: 0; 406 right: 0;
403 width: 110px;" 407 width: 110px;"
404 /> 408 />
409 </div>
405 </div> 410 </div>
406 </div> 411 </v-layout>
407 </v-layout> 412 </v-container>
408 </v-container> 413 </div>
409 </v-card>
410 </v-layout> 414 </v-layout>
411 </v-flex> 415 </v-flex>
412 </v-layout> 416 </v-layout>
413 </div> 417 </div>
414 <v-snackbar 418 <v-snackbar
415 :timeout="timeout" 419 :timeout="timeout"
416 :top="y === 'top'" 420 :top="y === 'top'"
417 :right="x === 'right'" 421 :right="x === 'right'"
418 :vertical="mode === 'vertical'" 422 :vertical="mode === 'vertical'"
419 v-model="snackbar" 423 v-model="snackbar"
420 :color="color" 424 :color="color"
421 >{{ text }}</v-snackbar> 425 >{{ text }}</v-snackbar>
422 <div class="loader" v-if="showLoader"> 426 <div class="loader" v-if="showLoader">
423 <v-progress-circular indeterminate color="white"></v-progress-circular> 427 <v-progress-circular indeterminate color="white"></v-progress-circular>
424 </div> 428 </div>
425 </v-container> 429 </v-container>
426 </template> 430 </template>
427 431
428 <script> 432 <script>
429 import http from "@/Services/http.js"; 433 import http from "@/Services/http.js";
430 import moment from "moment"; 434 import moment from "moment";
431 var qs = require("qs"); 435 var qs = require("qs");
432 436
433 export default { 437 export default {
434 data: () => ({ 438 data: () => ({
435 showLoader: false, 439 showLoader: false,
436 valid: true, 440 valid: true,
437 report: {}, 441 report: {},
438 userData: {}, 442 userData: {},
439 snackbar: false, 443 snackbar: false,
440 color: "", 444 color: "",
441 y: "top", 445 y: "top",
442 x: "right", 446 x: "right",
443 mode: "", 447 mode: "",
444 timeout: 10000, 448 timeout: 10000,
445 text: "", 449 text: "",
446 loading: false, 450 loading: false,
447 showReport: false, 451 showReport: false,
448 frontPart: false, 452 frontPart: false,
449 backPart: false, 453 backPart: false,
450 showClass: false, 454 showClass: false,
451 showTeacher: false, 455 showTeacher: false,
452 showAdmin: false, 456 showAdmin: false,
453 showAccountant: false, 457 showAccountant: false,
454 showLibrarian: false, 458 showLibrarian: false,
455 hideprintIdCard: false, 459 hideprintIdCard: false,
456 hidebackprintIdCard: false, 460 hidebackprintIdCard: false,
457 showStudents: false, 461 showStudents: false,
458 showSections: false, 462 showSections: false,
459 getRoles: [], 463 getRoles: [],
460 classList: [], 464 classList: [],
461 getCard: [], 465 getCard: [],
462 addSection: [], 466 addSection: [],
463 // getStudentsList: 467 // getStudentsList:
464 // teacherList: [], 468 // teacherList: [],
465 getSelectUserData: [], 469 getSelectUserData: [],
466 // Users: [], 470 // Users: [],
467 getReport: {}, 471 getReport: {},
468 typeRules: [(v) => !!v || "Type is required"], 472 typeRules: [(v) => !!v || "Type is required"],
469 typeList: [ 473 typeList: [
470 { 474 {
471 name: "Front Part", 475 name: "Front Part",
472 value: "frontPart", 476 value: "frontPart",
473 }, 477 },
474 { 478 {
475 name: "Back Part", 479 name: "Back Part",
476 value: "backPart", 480 value: "backPart",
477 }, 481 },
478 ], 482 ],
479 backgroundList: ["Yes", "No"], 483 backgroundList: ["Yes", "No"],
480 }), 484 }),
481 485
482 mounted() { 486 mounted() {
483 this.token = this.$store.state.token; 487 this.token = this.$store.state.token;
484 this.getUserData(); 488 this.getUserData();
485 this.getRole(); 489 this.getRole();
486 }, 490 },
487 491
488 methods: { 492 methods: {
489 dates: function (date) { 493 dates: function (date) {
490 return moment(date).format("MMMM DD, YYYY"); 494 return moment(date).format("MMMM DD, YYYY");
491 return date; 495 return date;
492 }, 496 },
493 getReportType() { 497 getReportType() {
494 if (this.getReport.form === "frontPart") { 498 if (this.getReport.form === "frontPart") {
495 this.frontPart = true; 499 this.frontPart = true;
496 this.backPart = false; 500 this.backPart = false;
497 } 501 }
498 if (this.getReport.form === "backPart") { 502 if (this.getReport.form === "backPart") {
499 this.frontPart = false; 503 this.frontPart = false;
500 this.backPart = true; 504 this.backPart = true;
501 } 505 }
502 }, 506 },
503 getRoleInputs(role) { 507 getRoleInputs(role) {
504 // console.log("role", role); 508 // console.log("role", role);
505 this.showReport = false; 509 this.showReport = false;
506 this.getReport._id = ""; 510 this.getReport._id = "";
507 this.getCard = ""; 511 this.getCard = "";
508 if (role.name === "STUDENT") { 512 if (role.name === "STUDENT") {
509 // console.log("role", role); 513 // console.log("role", role);
510 this.showClass = true; 514 this.showClass = true;
511 this.showTeacher = false; 515 this.showTeacher = false;
512 this.showAdmin = false; 516 this.showAdmin = false;
513 this.showAccountant = false; 517 this.showAccountant = false;
514 this.showLibrarian = false; 518 this.showLibrarian = false;
515 this.showStudents = false; 519 this.showStudents = false;
516 this.showSections = false; 520 this.showSections = false;
517 this.getClass(); 521 this.getClass();
518 } 522 }
519 if (role.name === "TEACHER") { 523 if (role.name === "TEACHER") {
520 this.showTeacher = true; 524 this.showTeacher = true;
521 this.showClass = false; 525 this.showClass = false;
522 this.showAdmin = false; 526 this.showAdmin = false;
523 this.showAccountant = false; 527 this.showAccountant = false;
524 this.showLibrarian = false; 528 this.showLibrarian = false;
525 this.showStudents = false; 529 this.showStudents = false;
526 this.showSections = false; 530 this.showSections = false;
527 this.getTeacherList(); 531 this.getTeacherList();
528 } 532 }
529 if (role.name === "ADMIN") { 533 if (role.name === "ADMIN") {
530 this.showAdmin = true; 534 this.showAdmin = true;
531 this.showTeacher = false; 535 this.showTeacher = false;
532 this.showClass = false; 536 this.showClass = false;
533 this.showAccountant = false; 537 this.showAccountant = false;
534 this.showLibrarian = false; 538 this.showLibrarian = false;
535 this.showStudents = false; 539 this.showStudents = false;
536 this.showSections = false; 540 this.showSections = false;
537 this.getUsersList(role.role); 541 this.getUsersList(role.role);
538 } 542 }
539 if (role.name === "ACCOUNTANT") { 543 if (role.name === "ACCOUNTANT") {
540 this.showAccountant = true; 544 this.showAccountant = true;
541 this.showAdmin = false; 545 this.showAdmin = false;
542 this.showTeacher = false; 546 this.showTeacher = false;
543 this.showClass = false; 547 this.showClass = false;
544 this.showLibrarian = false; 548 this.showLibrarian = false;
545 this.showStudents = false; 549 this.showStudents = false;
546 this.showSections = false; 550 this.showSections = false;
547 this.getUsersList(role.role); 551 this.getUsersList(role.role);
548 } 552 }
549 if (role.name === "LIBRARIAN") { 553 if (role.name === "LIBRARIAN") {
550 this.showLibrarian = true; 554 this.showLibrarian = true;
551 this.showAccountant = false; 555 this.showAccountant = false;
552 this.showAdmin = false; 556 this.showAdmin = false;
553 this.showTeacher = false; 557 this.showTeacher = false;
554 this.showClass = false; 558 this.showClass = false;
555 this.showStudents = false; 559 this.showStudents = false;
556 this.showSections = false; 560 this.showSections = false;
557 this.getUsersList(role.role); 561 this.getUsersList(role.role);
558 } 562 }
559 }, 563 },
560 564
561 prindIDCardReport() { 565 prindIDCardReport() {
562 // Pass the element id here 566 // Pass the element id here
563 this.$htmlToPaper("printMe"); 567 this.$htmlToPaper("printMe");
564
565
566 }, 568 },
567 getUserData() { 569 getUserData() {
568 this.getSelectUserData = []; 570 this.getSelectUserData = [];
569 this.showLoader = true; 571 this.showLoader = true;
570 http() 572 http()
571 .get("/getParticularUserDetail") 573 .get("/getParticularUserDetail")
572 .then((response) => { 574 .then((response) => {
573 let mergeObj = { 575 let mergeObj = {
574 name: "Select All", 576 name: "Select All",
575 id: "Select All", 577 id: "Select All",
576 }; 578 };
577 this.getSelectUserData.push(mergeObj); 579 this.getSelectUserData.push(mergeObj);
578 let getUserDetails = response.data.data; 580 let getUserDetails = response.data.data;
579 this.getSelectUserData.push(getUserDetails); 581 this.getSelectUserData.push(getUserDetails);
580 this.showLoader = false; 582 this.showLoader = false;
581 // this.adminList = response.data.data; 583 // this.adminList = response.data.data;
582 }) 584 })
583 .catch((error) => { 585 .catch((error) => {
584 this.showLoader = false; 586 this.showLoader = false;
585 if (error.response.status === 401) { 587 if (error.response.status === 401) {
586 this.$router.replace({ path: "/" }); 588 this.$router.replace({ path: "/" });
587 this.$store.dispatch("setToken", null); 589 this.$store.dispatch("setToken", null);
588 this.$store.dispatch("Id", null); 590 this.$store.dispatch("Id", null);
589 } 591 }
590 }); 592 });
591 }, 593 },
592 getRole() { 594 getRole() {
593 this.showLoader = true; 595 this.showLoader = true;
594 http() 596 http()
595 .get("/getRolesList", { 597 .get("/getRolesList", {
596 headers: { Authorization: "Bearer " + this.token }, 598 headers: { Authorization: "Bearer " + this.token },
597 }) 599 })
598 .then((response) => { 600 .then((response) => {
599 var getRoles = []; 601 var getRoles = [];
600 getRoles = response.data.data; 602 getRoles = response.data.data;
601 for (let i = 0; i < getRoles.length; i++) { 603 for (let i = 0; i < getRoles.length; i++) {
602 if ( 604 if (
603 getRoles[i].name != "SUPERADMIN" && 605 getRoles[i].name != "SUPERADMIN" &&
604 getRoles[i].name != "PARENT" 606 getRoles[i].name != "PARENT"
605 ) { 607 ) {
606 this.getRoles.push(getRoles[i]); 608 this.getRoles.push(getRoles[i]);
607 } 609 }
608 } 610 }
609 this.showLoader = false; 611 this.showLoader = false;
610 }) 612 })
611 .catch((error) => { 613 .catch((error) => {
612 this.showLoader = false; 614 this.showLoader = false;
613 if (error.response.status === 401) { 615 if (error.response.status === 401) {
614 this.$router.replace({ path: "/" }); 616 this.$router.replace({ path: "/" });
615 this.$store.dispatch("setToken", null); 617 this.$store.dispatch("setToken", null);
616 this.$store.dispatch("Id", null); 618 this.$store.dispatch("Id", null);
617 this.$store.dispatch("Role", null); 619 this.$store.dispatch("Role", null);
618 } 620 }
619 }); 621 });
620 }, 622 },
621 getClass() { 623 getClass() {
622 // console.log("get classes"); 624 // console.log("get classes");
623 this.showLoader = true; 625 this.showLoader = true;
624 http() 626 http()
625 .get("/getClassesList", { 627 .get("/getClassesList", {
626 headers: { Authorization: "Bearer " + this.token }, 628 headers: { Authorization: "Bearer " + this.token },
627 }) 629 })
628 .then((response) => { 630 .then((response) => {
629 this.classList = response.data.data; 631 this.classList = response.data.data;
630 this.showLoader = false; 632 this.showLoader = false;
631 }) 633 })
632 .catch((error) => { 634 .catch((error) => {
633 this.showLoader = false; 635 this.showLoader = false;
634 // console.log("err====>", err); 636 // console.log("err====>", err);
635 }); 637 });
636 }, 638 },
637 getSections(_id) { 639 getSections(_id) {
638 this.showLoader = true; 640 this.showLoader = true;
639 http() 641 http()
640 .get( 642 .get(
641 "/getSectionsList", 643 "/getSectionsList",
642 { params: { classId: _id } }, 644 { params: { classId: _id } },
643 { 645 {
644 headers: { Authorization: "Bearer " + this.token }, 646 headers: { Authorization: "Bearer " + this.token },
645 } 647 }
646 ) 648 )
647 .then((response) => { 649 .then((response) => {
648 this.addSection = response.data.data; 650 this.addSection = response.data.data;
649 this.showSections = true; 651 this.showSections = true;
650 this.showLoader = false; 652 this.showLoader = false;
651 }) 653 })
652 .catch((err) => { 654 .catch((err) => {
653 this.showLoader = false; 655 this.showLoader = false;
654 // console.log("err====>", err); 656 // console.log("err====>", err);
655 }); 657 });
656 }, 658 },
657 getStudents() { 659 getStudents() {
658 this.getSelectUserData = []; 660 this.getSelectUserData = [];
659 this.showLoader = true; 661 this.showLoader = true;
660 http() 662 http()
661 .get("/getStudentWithClass", { 663 .get("/getStudentWithClass", {
662 params: { 664 params: {
663 classId: this.getReport.classId, 665 classId: this.getReport.classId,
664 sectionId: this.getReport.sectionId, 666 sectionId: this.getReport.sectionId,
665 }, 667 },
666 }) 668 })
667 .then((response) => { 669 .then((response) => {
668 response.data.data.unshift({ 670 response.data.data.unshift({
669 name: "Select All", 671 name: "Select All",
670 _id: "Select All", 672 _id: "Select All",
671 }); 673 });
672 this.getSelectUserData = response.data.data; 674 this.getSelectUserData = response.data.data;
673 this.showStudents = true; 675 this.showStudents = true;
674 this.showLoader = false; 676 this.showLoader = false;
675 }) 677 })
676 .catch((error) => { 678 .catch((error) => {
677 console.log("err====>", error); 679 console.log("err====>", error);
678 this.showLoader = false; 680 this.showLoader = false;
679 }); 681 });
680 }, 682 },
681 getCards() { 683 getCards() {
682 var getSelectUserId = []; 684 var getSelectUserId = [];
683 for (let i = 0; i < this.getSelectUserData.length; i++) { 685 for (let i = 0; i < this.getSelectUserData.length; i++) {
684 /* if the selected user id mathches any id in the original user data then push it in 686 /* if the selected user id mathches any id in the original user data then push it in
685 array, this way only one id will be pushed */ 687 array, this way only one id will be pushed */
686 if (this.getReport._id === this.getSelectUserData[i]._id) { 688 if (this.getReport._id === this.getSelectUserData[i]._id) {
687 getSelectUserId.push(this.getSelectUserData[i]._id); 689 getSelectUserId.push(this.getSelectUserData[i]._id);
688 } /* else if select all option is selected then all ids will be pushed */ else if ( 690 } /* else if select all option is selected then all ids will be pushed */ else if (
689 this.getReport._id == "Select All" 691 this.getReport._id == "Select All"
690 ) { 692 ) {
691 getSelectUserId.push(this.getSelectUserData[i]._id); 693 getSelectUserId.push(this.getSelectUserData[i]._id);
692 if ( 694 if (
693 getSelectUserId[0] == undefined || 695 getSelectUserId[0] == undefined ||
694 getSelectUserId[0] == "Select All" 696 getSelectUserId[0] == "Select All"
695 ) { 697 ) {
696 getSelectUserId.shift(); 698 getSelectUserId.shift();
697 } 699 }
698 } 700 }
699 } 701 }
700 702
701 if (this.$refs.form.validate()) { 703 if (this.$refs.form.validate()) {
702 this.showLoader = true; 704 this.showLoader = true;
703 // var strigified = JSON.stringify(getSelectUserId) 705 // var strigified = JSON.stringify(getSelectUserId)
704 // var profileId = []; 706 // var profileId = [];
705 // profileId = getSelectUserId; 707 // profileId = getSelectUserId;
706 http() 708 http()
707 .get("/getIdCardDetail", { 709 .get("/getIdCardDetail", {
708 headers: { 710 headers: {
709 Authorization: "Bearer " + this.token, 711 Authorization: "Bearer " + this.token,
710 }, 712 },
711 params: { 713 params: {
712 profileId: getSelectUserId, 714 profileId: getSelectUserId,
713 role: this.getReport.role.role, 715 role: this.getReport.role.role,
714 }, 716 },
715 paramsSerializer: (params) => { 717 paramsSerializer: (params) => {
716 return qs.stringify(params); 718 return qs.stringify(params);
717 }, 719 },
718 // params: { 720 // params: {
719 // profileId: strigified, 721 // profileId: strigified,
720 // role: this.getReport.role.role, 722 // role: this.getReport.role.role,
721 // }, 723 // },
722 }) 724 })
723 .then((response) => { 725 .then((response) => {
724 this.getCard = ""; 726 this.getCard = "";
725 727
726 var data = response.data.data; 728 var data = response.data.data;
727 729
728 if (data.adminData && data.adminData.length != 0) { 730 if (data.adminData && data.adminData.length != 0) {
729 this.getCard = response.data.data.adminData; 731 this.getCard = response.data.data.adminData;
730 // console.log("this.getCard ", this.getCard); 732 // console.log("this.getCard ", this.getCard);
731 } 733 }
732 if (data.teachersData && data.teachersData.length != 0) { 734 if (data.teachersData && data.teachersData.length != 0) {
733 this.getCard = response.data.data.teachersData; 735 this.getCard = response.data.data.teachersData;
734 } 736 }
735 if (data.studentData && data.studentData.length != 0) { 737 if (data.studentData && data.studentData.length != 0) {
736 this.getCard = response.data.data.studentData; 738 this.getCard = response.data.data.studentData;
737 // console.log("this.getCard--studentData ", this.getCard); 739 // console.log("this.getCard--studentData ", this.getCard);
738 } 740 }
739 if (data.usersData && data.usersData.length != 0) { 741 if (data.usersData && data.usersData.length != 0) {
740 this.getCard = response.data.data.usersData; 742 this.getCard = response.data.data.usersData;
741 // console.log("this.getCard--usersData ", this.getCard); 743 // console.log("this.getCard--usersData ", this.getCard);
742 } 744 }
743 // console.log("this.getCard--all ", response.data.data); 745 // console.log("this.getCard--all ", response.data.data);
744 this.showLoader = false; 746 this.showLoader = false;
745 this.showReport = true; 747 this.showReport = true;
746 }) 748 })
747 .catch((error) => { 749 .catch((error) => {
748 this.showLoader = false; 750 this.showLoader = false;
749 // console.log("error", error.response.data.errors); 751 // console.log("error", error.response.data.errors);
750 // if (error.response.data.errors) { 752 // if (error.response.data.errors) {
751 // this.snackbar = true; 753 // this.snackbar = true;
752 // this.text = " Field is required"; 754 // this.text = " Field is required";
753 // this.color = "error"; 755 // this.color = "error";
754 // } 756 // }
755 }); 757 });
756 } 758 }
757 }, 759 },
758 getTeacherList() { 760 getTeacherList() {
759 this.getSelectUserData = []; 761 this.getSelectUserData = [];
760 this.showLoader = true; 762 this.showLoader = true;
761 var token = this.$store.state.token; 763 var token = this.$store.state.token;
762 http() 764 http()
763 .get("/getTeachersList", { 765 .get("/getTeachersList", {
764 headers: { Authorization: "Bearer " + token }, 766 headers: { Authorization: "Bearer " + token },
765 }) 767 })
766 .then((response) => { 768 .then((response) => {
767 response.data.data.unshift({ 769 response.data.data.unshift({
768 name: "Select All", 770 name: "Select All",
769 _id: "Select All", 771 _id: "Select All",
770 }); 772 });
771 this.getSelectUserData = response.data.data; 773 this.getSelectUserData = response.data.data;
772 this.showLoader = false; 774 this.showLoader = false;
773 }) 775 })
774 .catch((error) => { 776 .catch((error) => {
775 this.showLoader = false; 777 this.showLoader = false;
776 if (error.response.status === 401) { 778 if (error.response.status === 401) {
777 this.$router.replace({ path: "/" }); 779 this.$router.replace({ path: "/" });
778 this.$store.dispatch("setToken", null); 780 this.$store.dispatch("setToken", null);
779 this.$store.dispatch("Id", null); 781 this.$store.dispatch("Id", null);
780 } 782 }
781 }); 783 });
782 }, 784 },
783 getUsersList(role) { 785 getUsersList(role) {
784 this.getSelectUserData = []; 786 this.getSelectUserData = [];
785 this.showLoader = true; 787 this.showLoader = true;
786 var token = this.$store.state.token; 788 var token = this.$store.state.token;
787 http() 789 http()
788 .get("/getUsersList?role=" + role, { 790 .get("/getUsersList?role=" + role, {
789 headers: { Authorization: "Bearer " + token }, 791 headers: { Authorization: "Bearer " + token },
790 }) 792 })
791 .then((response) => { 793 .then((response) => {
792 response.data.data.unshift({ 794 response.data.data.unshift({
793 name: "Select All", 795 name: "Select All",
794 _id: "Select All", 796 _id: "Select All",
795 }); 797 });
796 this.getSelectUserData = response.data.data; 798 this.getSelectUserData = response.data.data;
797 this.showLoader = false; 799 this.showLoader = false;
798 }) 800 })
799 .catch((error) => { 801 .catch((error) => {
800 this.showLoader = false; 802 this.showLoader = false;
801 if (error.response.status === 401) { 803 if (error.response.status === 401) {
802 this.$router.replace({ path: "/" }); 804 this.$router.replace({ path: "/" });
803 this.$store.dispatch("setToken", null); 805 this.$store.dispatch("setToken", null);
804 this.$store.dispatch("Id", null); 806 this.$store.dispatch("Id", null);
805 } 807 }
806 }); 808 });
807 }, 809 },
808 getParentDetails() { 810 getParentDetails() {
809 http() 811 http()
810 .get("getParentsList", { 812 .get("getParentsList", {
811 headers: { 813 headers: {
812 Authorization: "Bearer " + this.$store.state.token, 814 Authorization: "Bearer " + this.$store.state.token,
813 }, 815 },
814 }) 816 })
815 .then((response) => { 817 .then((response) => {
816 this.parentsList = response.data.data; 818 this.parentsList = response.data.data;
817 }) 819 })
818 .catch((error) => { 820 .catch((error) => {
819 // console.log("err====>", error.response.data.message); 821 // console.log("err====>", error.response.data.message);
820 this.showLoader = false; 822 this.showLoader = false;
821 if (error.response.status === 401) { 823 if (error.response.status === 401) {
822 this.$router.replace({ path: "/" }); 824 this.$router.replace({ path: "/" });
823 this.$store.dispatch("setToken", null); 825 this.$store.dispatch("setToken", null);
824 this.$store.dispatch("Id", null); 826 this.$store.dispatch("Id", null);
825 this.$store.dispatch("Role", null); 827 this.$store.dispatch("Role", null);
826 } 828 }
827 }); 829 });
828 }, 830 },
829 }, 831 },
830 }; 832 };
831 </script> 833 </script>
832 834
833 <style scoped> 835 <style scoped>
834 .Data { 836 .Data {
835 width: 100%; 837 width: 100%;
836 float: left; 838 float: left;
837 margin-bottom: 0px; 839 margin-bottom: 0px;
838 padding: 0 15px; 840 padding: 0 15px;
839 font-size: 14px; 841 font-size: 14px;
840 margin-top: 5px; 842 margin-top: 5px;
841 text-align: justify; 843 text-align: justify;
842 } 844 }
843 .idcardreport { 845 .idcardreport {
844 font-family: arial; 846 font-family: arial;
845 max-width: 794px; 847 max-width: 794px;
846 max-height: 1123px; 848 max-height: 1123px;
847 margin-left: auto; 849 margin-left: auto;
848 margin-right: auto; 850 margin-right: auto;
849 -webkit-print-color-adjust: exact; 851 -webkit-print-color-adjust: exact;
850 } 852 }
851 .idcardreport1 { 853 .idcardreport1 {
852 text-align: center; 854 text-align: center;
853 margin-left: 35%; 855 margin-left: 35%;
854 } 856 }
855 .icard-front { 857 .icard-front {
856 margin: 3px; 858 margin: 3px;
857 float: left; 859 float: left;
858 padding: 10px; 860 padding: 10px;
859 text-align: center; 861 text-align: center;
860 height: 520px; 862 height: 520px;
861 width: 520px; 863 width: 520px;
862 background: #fff; 864 background: #fff;
863 border: 1px solid lightgray; 865 border: 1px solid lightgray;
864 } 866 }
865 .print-data { 867 .print-data {
866 margin: 3px; 868 margin: 3px;
867 float: left; 869 float: left;
868 /* border: 1px solid #000; */ 870 /* border: 1px solid #000; */
869 padding: 10px; 871 padding: 10px;
870 /* width: 55%; */ 872 /* width: 55%; */
871 text-align: center; 873 text-align: center;
872 height: 95%; 874 height: 95%;
873 } 875 }
874 .rightside { 876 .rightside {
875 float: right !important; 877 float: right !important;
876 } 878 }
877 .icard-front h2 { 879 .icard-front h2 {
878 font-size: 30px; 880 font-size: 30px;
879 } 881 }
880 .icard-back h2 { 882 .icard-back h2 {
881 font-size: 30px; 883 font-size: 30px;
882 } 884 }
883 .print-data h2 { 885 .print-data h2 {
884 font-size: 30px; 886 font-size: 30px;
885 text-align: center; 887 text-align: center;
886 } 888 }
887 .print-data img { 889 .print-data img {
888 width: 70px; 890 width: 70px;
889 height: 70px; 891 height: 70px;
890 margin-bottom: 5px; 892 margin-bottom: 5px;
891 } 893 }
892 .icard-front img { 894 .icard-front img {
893 width: 70px; 895 width: 70px;
894 height: 70px; 896 height: 70px;
895 margin-bottom: 5px; 897 margin-bottom: 5px;
896 } 898 }
897 .icard-back img { 899 .icard-back img {
898 width: 50px; 900 width: 50px;
899 height: 50px; 901 height: 50px;
900 margin-bottom: 5px; 902 margin-bottom: 5px;
901 } 903 }
902 .icard-img { 904 .icard-img {
903 width: 50px; 905 width: 50px;
904 height: 50px; 906 height: 50px;
905 margin-bottom: 5px; 907 margin-bottom: 5px;
906 margin-top: 5px; 908 margin-top: 5px;
907 border: 1px solid #ddd; 909 border: 1px solid #ddd;
908 } 910 }
909 .icard-data { 911 .icard-data {
910 /* font-family: Arial; */ 912 /* font-family: Arial; */
911 max-width: 794px; 913 max-width: 794px;
912 max-height: 1123px; 914 max-height: 1123px;
913 margin-left: auto; 915 margin-left: auto;
914 margin-right: auto; 916 margin-right: auto;
915 -webkit-print-color-adjust: exact; 917 -webkit-print-color-adjust: exact;
916 } 918 }
917 .icard-back { 919 .icard-back {
918 margin: 3px; 920 margin: 3px;
919 /* float: left; */ 921 /* float: left; */
920 /* border: 1px solid #000; */ 922 /* border: 1px solid #000; */
921 padding: 10px; 923 padding: 10px;
922 /* width: 55%; */ 924 /* width: 55%; */
923 text-align: center; 925 text-align: center;
924 /* height: 95%; */ 926 /* height: 95%; */
925 /* margin-top: 35%; */ 927 /* margin-top: 35%; */
926 } 928 }
927 .back-icard { 929 .back-icard {
928 margin: 3px; 930 margin: 3px;
929 padding: 10px; 931 padding: 10px;
930 } 932 }
931 .icard-back h3 { 933 .icard-back h3 {
932 background-color: #000; 934 background-color: #000;
933 color: #fff; 935 color: #fff;
934 font-size: 13px; 936 font-size: 13px;
935 padding: 5px 0px; 937 padding: 5px 0px;
936 margin: 5px; 938 margin: 5px;
937 margin-top: 13px; 939 margin-top: 13px;
938 } 940 }
939 .icard-back h5 { 941 .icard-back h5 {
940 font-size: 11px; 942 font-size: 11px;
941 color: #000; 943 color: #000;
942 font-weight: bold; 944 font-weight: bold;
943 padding: 5px 0px; 945 padding: 5px 0px;
944 } 946 }
945 /* .icard-back p { 947 /* .icard-back p {
946 font-size: 15px; 948 font-size: 15px;
947 color: #000; 949 color: #000;
948 font-weight: 500px; 950 font-weight: 500px;
949 line-height: 17px; 951 line-height: 17px;
950 } */ 952 } */
951 .school-address { 953 .school-address {
952 /* width: 40%; */ 954 /* width: 40%; */
953 font-weight: 500px; 955 font-weight: 500px;
954 color: #000; 956 color: #000;
955 } 957 }
956 .address { 958 .address {
957 font-weight: 500px; 959 font-weight: 500px;
958 color: #000; 960 color: #000;
959 text-align: center; 961 text-align: center;
960 } 962 }
961 .icard-bottom { 963 .icard-bottom {
962 padding-top: 5px; 964 padding-top: 5px;
963 text-align: center; 965 text-align: center;
964 } 966 }
965 .qrcode { 967 .qrcode {
966 float: left; 968 float: left;
967 width: 50%; 969 width: 50%;
968 } 970 }
969 .qrcode img { 971 .qrcode img {
970 width: 60px; 972 width: 60px;
971 height: 60px; 973 height: 60px;
972 margin-top: 15px; 974 margin-top: 15px;
973 } 975 }
974 .session { 976 .session {
975 float: right; 977 float: right;
976 width: 70%; 978 width: 70%;
977 margin-top: 15px; 979 margin-top: 15px;
978 } 980 }
979 981
980 @media screen and (max-width: 360px) { 982 @media screen and (max-width: 360px) {
981 .icard-front { 983 .icard-front {
982 width: 316px; 984 width: 316px;
983 height: 418px; 985 height: 418px;
984 float: inherit; 986 float: inherit;
985 } 987 }
986 .icard-back { 988 .icard-back {
987 float: left; 989 float: left;