viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 8527136546cb772071058a2de88e2a1b05c9bf9f

Authored by Amber Dev
1 parent 01a388dfe9
Exists in master and in 2 other branches amber-development, ui-design

added live class message

Showing 2 changed files with 26 additions and 11 deletions   Show diff stats
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @8527136
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">{{startLiveSession}}</div> 32 <!-- <div class="subheading grey--text lighten-1">{{startLiveSession}}</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 round class="open-dialog-button" dark>Join Session</v-btn> 41 <v-btn round class="open-dialog-button" dark v-if="studentBtn">{{studentBtn}}</v-btn>
42 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>
42 </div> 43 </div>
43 </v-flex> 44 </v-flex>
44 45
45 <!-- DATA TABLE --> 46 <!-- DATA TABLE -->
46 <!-- <v-flex> 47 <!-- <v-flex>
47 <div> 48 <div>
48 <span class="subheading font-weight-bold">Recording</span> 49 <span class="subheading font-weight-bold">Recording</span>
49 </div> 50 </div>
50 <v-data-table 51 <v-data-table
51 :headers="liveOnlineHeaders" 52 :headers="liveOnlineHeaders"
52 :items="liveOnlineHeaders" 53 :items="liveOnlineHeaders"
53 :pagination.sync="pagination" 54 :pagination.sync="pagination"
54 :search="search" 55 :search="search"
55 item-key="_id" 56 item-key="_id"
56 > 57 >
57 <template slot="items" slot-scope="props"> 58 <template slot="items" slot-scope="props">
58 <tr 59 <tr
59 class="tr" 60 class="tr"
60 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)" 61 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
61 > 62 >
62 <td class="text-xs-center td td-row"> 63 <td class="text-xs-center td td-row">
63 <v-btn round class="open-dialog-button" dark>Join Session</v-btn> 64 <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
64 </td> 65 </td>
65 <td class="td td-row text-xs-center">{{ }}</td> 66 <td class="td td-row text-xs-center">{{ }}</td>
66 <td class="td td-row text-xs-center">{{ }}</td> 67 <td class="td td-row text-xs-center">{{ }}</td>
67 <td class="td td-row text-xs-center">-</td> 68 <td class="td td-row text-xs-center">-</td>
68 <td class="td td-row text-xs-center">{{ }}</td> 69 <td class="td td-row text-xs-center">{{ }}</td>
69 </tr> 70 </tr>
70 </template> 71 </template>
71 </v-data-table> 72 </v-data-table>
72 </v-flex>--> 73 </v-flex>-->
73 </v-layout> 74 </v-layout>
74 </v-flex> 75 </v-flex>
75 76
76 <!-- if logged in user is teacher --> 77 <!-- if logged in user is teacher -->
77 <v-flex xs12 sm12 md12 v-else> 78 <v-flex xs12 sm12 md12 v-else>
78 <v-layout column> 79 <v-layout column>
79 <!-- HEADING --> 80 <!-- HEADING -->
80 <v-flex> 81 <v-flex>
81 <div 82 <div
82 class="title side-bar-color font-weight-bold" 83 class="title side-bar-color font-weight-bold"
83 >Live Online Classes - {{$route.query.chapterName}}</div> 84 >Live Online Classes - {{$route.query.chapterName}}</div>
84 <div class="subheading grey--text lighten-1">{{startLiveSession}}</div> 85 <!-- <div class="subheading grey--text lighten-1"></div> -->
85 <div 86 <!-- <div
86 class="subheading grey--text lighten-1" 87 class="subheading grey--text lighten-1"
87 >The session started at 1:00 there is 1 moderator</div> 88 >The session started at 1:00 there is 1 moderator</div>-->
88 </v-flex> 89 </v-flex>
89 90
90 <!-- JOIN OR END SESSION --> 91 <!-- JOIN OR END SESSION -->
91 <v-flex> 92 <v-flex>
92 <div> 93 <div>
93 <v-btn 94 <v-btn
94 round 95 round
95 class="open-dialog-button" 96 class="open-dialog-button"
96 dark 97 dark
97 @click="createRoom($route.query.classId)" 98 @click="createRoom($route.query.classId)"
98 >Start Session</v-btn> 99 >{{startLiveSession}}</v-btn>
99 </div> 100 </div>
100 </v-flex> 101 </v-flex>
101 102
102 <!-- DATA TABLE --> 103 <!-- DATA TABLE -->
103 <!-- <v-flex> 104 <!-- <v-flex>
104 <div> 105 <div>
105 <span class="subheading font-weight-bold">Recording</span> 106 <span class="subheading font-weight-bold">Recording</span>
106 </div> 107 </div>
107 <v-data-table 108 <v-data-table
108 :headers="liveOnlineHeaders" 109 :headers="liveOnlineHeaders"
109 :items="liveOnlineHeaders" 110 :items="liveOnlineHeaders"
110 :pagination.sync="pagination" 111 :pagination.sync="pagination"
111 :search="search" 112 :search="search"
112 item-key="_id" 113 item-key="_id"
113 > 114 >
114 <template slot="items" slot-scope="props"> 115 <template slot="items" slot-scope="props">
115 <tr 116 <tr
116 class="tr" 117 class="tr"
117 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)" 118 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
118 > 119 >
119 <td class="text-xs-center td td-row"> 120 <td class="text-xs-center td td-row">
120 <v-btn round class="open-dialog-button" dark>Start Session</v-btn> 121 <v-btn round class="open-dialog-button" dark>Start Session</v-btn>
121 </td> 122 </td>
122 <td class="td td-row text-xs-center">{{ }}</td> 123 <td class="td td-row text-xs-center">{{ }}</td>
123 <td class="td td-row text-xs-center">{{ }}</td> 124 <td class="td td-row text-xs-center">{{ }}</td>
124 <td class="td td-row text-xs-center">-</td> 125 <td class="td td-row text-xs-center">-</td>
125 <td class="td td-row text-xs-center">{{ }}</td> 126 <td class="td td-row text-xs-center">{{ }}</td>
126 </tr> 127 </tr>
127 </template> 128 </template>
128 </v-data-table> 129 </v-data-table>
129 </v-flex>--> 130 </v-flex>-->
130 131
131 <v-flex> 132 <v-flex>
132 <div id="jitsi-container"></div> 133 <div id="jitsi-container"></div>
133 </v-flex> 134 </v-flex>
134 </v-layout> 135 </v-layout>
135 </v-flex> 136 </v-flex>
136 137
137 <v-spacer></v-spacer> 138 <v-spacer></v-spacer>
138 139
139 <!-- COURSES SIDE BAR- positioned to the right of the page --> 140 <!-- COURSES SIDE BAR- positioned to the right of the page -->
140 <!-- <v-flex xs3> 141 <!-- <v-flex xs3>
141 <v-card class="elevation-0 card-border" height="100%"> 142 <v-card class="elevation-0 card-border" height="100%">
142 <CoursesSideBar></CoursesSideBar> 143 <CoursesSideBar></CoursesSideBar>
143 </v-card> 144 </v-card>
144 </v-flex>--> 145 </v-flex>-->
145 </v-layout> 146 </v-layout>
146 </v-container> 147 </v-container>
147 </div> 148 </div>
148 </template> 149 </template>
149 <script> 150 <script>
150 import AllApiCalls from "@/Services/AllApiCalls.js"; 151 import AllApiCalls from "@/Services/AllApiCalls.js";
151 import http from "@/Services/http.js"; 152 import http from "@/Services/http.js";
152 import moment from "moment"; 153 import moment from "moment";
153 import Meet from "@/pages/Meet/meet.vue"; 154 import Meet from "@/pages/Meet/meet.vue";
154 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; 155 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
155 export default { 156 export default {
156 mixins: [AllApiCalls], 157 mixins: [AllApiCalls],
157 components: { 158 components: {
158 CoursesSideBar 159 CoursesSideBar
159 }, 160 },
160 data() { 161 data() {
161 return { 162 return {
162 startLiveSession: "", 163 startLiveSession: "",
164 studentBtn: "",
163 165
164 // DATA TABLE 166 // DATA TABLE
165 search: "", 167 search: "",
166 pagination: { 168 pagination: {
167 rowsPerPage: 10 169 rowsPerPage: 10
168 }, 170 },
169 liveOnlineHeaders: [ 171 liveOnlineHeaders: [
170 { 172 {
171 text: "Playback", 173 text: "Playback",
172 value: "attachementUrl", 174 value: "attachementUrl",
173 sortable: false, 175 sortable: false,
174 align: "center" 176 align: "center"
175 }, 177 },
176 { 178 {
177 text: "Meeting", 179 text: "Meeting",
178 align: "center", 180 align: "center",
179 sortable: false, 181 sortable: false,
180 value: "" 182 value: ""
181 }, 183 },
182 { 184 {
183 text: "Recording", 185 text: "Recording",
184 value: "", 186 value: "",
185 sortable: false, 187 sortable: false,
186 align: "center" 188 align: "center"
187 }, 189 },
188 { 190 {
189 text: "Description Preview", 191 text: "Description Preview",
190 value: "", 192 value: "",
191 sortable: false, 193 sortable: false,
192 align: "center" 194 align: "center"
193 }, 195 },
194 { text: "Date", value: "", sortable: false, align: "center" }, 196 { text: "Date", value: "", sortable: false, align: "center" },
195 { text: "Duration", value: "", sortable: false, align: "center" }, 197 { text: "Duration", value: "", sortable: false, align: "center" },
196 { text: "Toolbar", value: "", sortable: false, align: "center" } 198 { text: "Toolbar", value: "", sortable: false, align: "center" }
197 ], 199 ],
198 liveOnlineItems: [], 200 liveOnlineItems: [],
199 201
200 // JITSI CONTAINER 202 // JITSI CONTAINER
201 token: "", 203 token: "",
202 selectStudents: {}, 204 selectStudents: {},
203 classRules: [v => !!v || " Class Name is required"], 205 classRules: [v => !!v || " Class Name is required"],
204 sectionRules: [v => !!v || " Section Name is required"], 206 sectionRules: [v => !!v || " Section Name is required"],
205 addclass: [], 207 addclass: [],
206 addSection: [], 208 addSection: [],
207 loading: false, 209 loading: false,
208 room: "", 210 room: "",
209 username: "", 211 username: "",
210 roomPassword: "" 212 roomPassword: ""
211 }; 213 };
212 }, 214 },
213 methods: { 215 methods: {
214 // JITSI CONTAINER 216 // JITSI CONTAINER
215 startConference() { 217 startConference() {
216 var _this = this; 218 var _this = this;
217 try { 219 try {
218 const domain = "meet.intrack.in"; 220 const domain = "meet.intrack.in";
219 const options = { 221 const options = {
220 audioInput: "<deviceLabel>", 222 audioInput: "<deviceLabel>",
221 audioOutput: "<deviceLabel>", 223 audioOutput: "<deviceLabel>",
222 videoInput: "<deviceLabel>", 224 videoInput: "<deviceLabel>",
223 roomName: this.room, 225 roomName: this.room,
224 height: 500, 226 height: 500,
225 parentNode: document.getElementById("jitsi-container"), 227 parentNode: document.getElementById("jitsi-container"),
226 interfaceConfigOverwrite: { 228 interfaceConfigOverwrite: {
227 filmStripOnly: false, 229 filmStripOnly: false,
228 SHOW_JITSI_WATERMARK: false, 230 SHOW_JITSI_WATERMARK: false,
229 TOOLBAR_BUTTONS: [ 231 TOOLBAR_BUTTONS: [
230 "microphone", 232 "microphone",
231 "camera", 233 "camera",
232 "closedcaptions", 234 "closedcaptions",
233 "desktop", 235 "desktop",
234 "fullscreen", 236 "fullscreen",
235 "fodeviceselection", 237 "fodeviceselection",
236 "hangup", 238 "hangup",
237 "profile", 239 "profile",
238 "info", 240 "info",
239 "chat", 241 "chat",
240 "recording", 242 "recording",
241 "livestreaming", 243 "livestreaming",
242 "etherpad", 244 "etherpad",
243 "sharedvideo", 245 "sharedvideo",
244 "settings", 246 "settings",
245 "raisehand", 247 "raisehand",
246 "videoquality", 248 "videoquality",
247 "filmstrip", 249 "filmstrip",
248 "invite", 250 "invite",
249 "feedback", 251 "feedback",
250 "stats", 252 "stats",
251 "shortcuts", 253 "shortcuts",
252 "tileview" 254 "tileview"
253 ] 255 ]
254 }, 256 },
255 configOverwrite: { 257 configOverwrite: {
256 disableSimulcast: false 258 disableSimulcast: false
257 }, 259 },
258 teacherName: "", 260 teacherName: "",
259 romm: "" 261 romm: ""
260 }; 262 };
261 263
262 this.api = new JitsiMeetExternalAPI(domain, options); 264 this.api = new JitsiMeetExternalAPI(domain, options);
263 this.api.addEventListener("videoConferenceJoined", () => { 265 this.api.addEventListener("videoConferenceJoined", () => {
264 console.log("Local User Joined"); 266 console.log("Local User Joined");
265 267
266 _this.api.executeCommand("displayName", _this.username); 268 _this.api.executeCommand("displayName", _this.username);
267 _this.api.executeCommand("password", this.roomPassword); 269 _this.api.executeCommand("password", this.roomPassword);
268 }); 270 });
269 } catch (error) { 271 } catch (error) {
270 console.error("Failed to load Jitsi API", error); 272 console.error("Failed to load Jitsi API", error);
271 } 273 }
272 }, 274 },
273 openRoom() { 275 openRoom() {
274 // verify the JitsiMeetExternalAPI constructor is added to the global.. 276 // verify the JitsiMeetExternalAPI constructor is added to the global..
275 // if (this.teacherName != "" || this.room != "") { 277 // if (this.teacherName != "" || this.room != "") {
276 // if (window.JitsiMeetExternalAPI) { 278 // if (window.JitsiMeetExternalAPI) {
277 // // var person = prompt("Please enter your name:", "Rabie"); 279 // // var person = prompt("Please enter your name:", "Rabie");
278 // if (person != null || person != "") this.username = this.teacherName; 280 // if (person != null || person != "") this.username = this.teacherName;
279 // var room = prompt("Please enter your room:", "Test Room"); 281 // var room = prompt("Please enter your room:", "Test Room");
280 // if (room != null || room != "") this.room = this.room; 282 // if (room != null || room != "") this.room = this.room;
281 // this.startConference(); 283 // this.startConference();
282 // } else alert("Jitsi Meet API script not loaded"); 284 // } else alert("Jitsi Meet API script not loaded");
283 // } 285 // }
284 }, 286 },
285 287
286 createRoom(classId) { 288 createRoom(classId) {
287 this.showLoader = true; 289 this.showLoader = true;
288 var classId = { 290 var classId = {
289 classId: classId 291 classId: classId
290 }; 292 };
291 http() 293 http()
292 .post("/createLiveClasses", { 294 .post("/createLiveClasses", {
293 classId: this.$route.query.classId, 295 classId: this.$route.query.classId,
294 courseId: this.$route.query.courseId, 296 courseId: this.$route.query.courseId,
295 chapterId: this.$route.query.chapterId 297 chapterId: this.$route.query.chapterId
296 }) 298 })
297 .then(response => { 299 .then(response => {
298 // this.addSection = response.data.data; 300 // this.addSection = response.data.data;
299 console.log("CREATE___ROOOM", response.data); 301 console.log("CREATE___ROOOM", response.data);
300 this.room = response.data.data.LiveClasses.roomName; 302 this.room = response.data.data.LiveClasses.roomName;
301 // this.username = response.data.data.LiveClasses.teacherName; 303 // this.username = response.data.data.LiveClasses.teacherName;
302 this.roomPassword = response.data.data.LiveClasses.password; 304 this.roomPassword = response.data.data.LiveClasses.password;
303 var this_ = this; 305 var this_ = this;
304 if (this.username != "" || this.room != "") { 306 if (this.username != "" || this.room != "") {
305 if (window.JitsiMeetExternalAPI) { 307 if (window.JitsiMeetExternalAPI) {
306 // var person = prompt("Please enter your name:", "Rabie"); 308 // var person = prompt("Please enter your name:", "Rabie");
307 if (this_.username != null || this_.username != "") { 309 if (this_.username != null || this_.username != "") {
308 this.username = this.username; 310 this.username = this.username;
309 } 311 }
310 // var room = prompt("Please enter your room:", "Test Room"); 312 // var room = prompt("Please enter your room:", "Test Room");
311 if (this_.room != null || this_.room != "") { 313 if (this_.room != null || this_.room != "") {
312 this.room = this.room; 314 this.room = this.room;
313 } 315 }
314 this.startConference(); 316 this.startConference();
315 } else alert("Jitsi Meet API script not loaded"); 317 } else alert("Jitsi Meet API script not loaded");
316 } 318 }
317 this.showLoader = false; 319 this.showLoader = false;
318 }) 320 })
319 .catch(err => { 321 .catch(err => {
320 this.showLoader = false; 322 this.showLoader = false;
321 }); 323 });
322 } 324 }
323 }, 325 },
324 326
325 mounted() { 327 mounted() {
326 this.token = this.$store.state.token; 328 this.token = this.$store.state.token;
327 }, 329 },
328 async created() { 330 async created() {
329 console.log("local st - ",localStorage)
330
331 /* getLiveClassesesList - To up date line under heading*/ 331 /* getLiveClassesesList - To up date line under heading*/
332 let response = await this.getLiveClassesesList({ 332 let response = await this.getLiveClassesesList({
333 classId: this.$route.query.classId, 333 classId: this.$route.query.classId,
334 courseId: this.$route.query.courseId, 334 courseId: this.$route.query.courseId,
335 chapterId: this.$route.query.chapterId 335 chapterId: this.$route.query.chapterId
336 }); 336 });
337 console.log("response getLiveClassesesList- ", response); 337 console.log("response getLiveClassesesList- ", response);
338
339 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
338 if (response.data.data.length == 0) { 340 if (response.data.data.length == 0) {
339 console.log("response of - ", response); 341 this.startLiveSession = "Start Session";
340 this.startLiveSession = "Start live session"; 342 this.studentBtn = "";
343 } else {
344 if (response.data.data[0].sessionStatus == "ENDED") {
345 this.startLiveSession = "Start Session";
346 this.studentBtn = "";
347 }
348 if (response.data.data[0].sessionStatus == "STARTED") {
349 this.startLiveSession = "Join Session";
350 this.studentBtn = "Join Session";
351 }
341 } 352 }
342 353
343 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 354 /* getStudentCourses - to get courseData - defined in GetApis.js*/
344 if (this.$store.state.role === "PARENT") { 355 if (this.$store.state.role === "PARENT") {
345 await this.getStudentCourses({ 356 await this.getStudentCourses({
346 classId: localStorage.getItem("parentClassId"), 357 classId: localStorage.getItem("parentClassId"),
347 studentId: localStorage.getItem("parentStudentId") 358 studentId: localStorage.getItem("parentStudentId")
348 }); 359 });
349 } 360 }
350 } 361 }
351 }; 362 };
352 </script> 363 </script>
353 <style scoped> 364 <style scoped>
354 .side-bar-color { 365 .side-bar-color {
355 color: #827bfa !important; 366 color: #827bfa !important;
356 /* border-top-right-radius: 74px !important; */ 367 /* border-top-right-radius: 74px !important; */
357 } 368 }
358 .card-border { 369 .card-border {
359 border: 1px #bdbdbd solid; 370 border: 1px #bdbdbd solid;
360 border-radius: 3px; 371 border-radius: 3px;
361 } 372 }
362 .reply-desc { 373 .reply-desc {
363 border: 1px solid #f2f2f2; 374 border: 1px solid #f2f2f2;
364 } 375 }
365 .open-dialog-button { 376 .open-dialog-button {
366 background: #827bfa !important; 377 background: #827bfa !important;
367 border-color: #827bfa !important; 378 border-color: #827bfa !important;
368 text-transform: none !important; 379 text-transform: none !important;
369 } 380 }
370 381
371 .reply-btn { 382 .reply-btn {
372 background: #feb83c !important; 383 background: #feb83c !important;
373 border-color: #feb83c !important; 384 border-color: #feb83c !important;
374 text-transform: none !important; 385 text-transform: none !important;
375 -webkit-box-shadow: none !important; 386 -webkit-box-shadow: none !important;
376 box-shadow: none !important; 387 box-shadow: none !important;
377 } 388 }
378 #jitsi-container { 389 #jitsi-container {
379 height: 100vh; 390 height: 100vh;
src/pages/Dashboard/dashboard.vue
Diff comments   View file @8527136
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 51
52 <!-- LOADER --> 52 <!-- LOADER -->
53 <div class="loader" v-if="showLoader"> 53 <div class="loader" v-if="showLoader">
54 <v-progress-circular indeterminate color="white"></v-progress-circular> 54 <v-progress-circular indeterminate color="white"></v-progress-circular>
55 </div> 55 </div>
56 56
57 <!-- SNACKBAR --> 57 <!-- SNACKBAR -->
58 <v-snackbar 58 <v-snackbar
59 :timeout="timeout" 59 :timeout="timeout"
60 :top="y === 'top'" 60 :top="y === 'top'"
61 :right="x === 'right'" 61 :right="x === 'right'"
62 :vertical="mode === 'vertical'" 62 :vertical="mode === 'vertical'"
63 v-model="snackbar" 63 v-model="snackbar"
64 :color="snackbarColor" 64 :color="snackbarColor"
65 > 65 >
66 {{ text }} 66 {{ text }}
67 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
68 <v-btn flat text @click="snackbar = false">X</v-btn> 68 <v-btn flat text @click="snackbar = false">X</v-btn>
69 </v-snackbar> 69 </v-snackbar>
70 70
71 <!-- DIALOG BOX EVENT DETAILS --> 71 <!-- DIALOG BOX EVENT DETAILS -->
72 <v-dialog v-model="viewEventDetails" max-width="500"> 72 <v-dialog v-model="viewEventDetails" max-width="500">
73 <v-card flat class="card-style pa-2" dark> 73 <v-card flat class="card-style pa-2" dark>
74 <!-- TITLE --> 74 <!-- TITLE -->
75 <v-layout> 75 <v-layout>
76 <v-layout> 76 <v-layout>
77 <v-flex xs12> 77 <v-flex xs12>
78 <label class="title text-xs-center">{{particularEvent.title}}</label> 78 <label class="title text-xs-center">{{particularEvent.title}}</label>
79 <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon> 79 <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon>
80 </v-flex> 80 </v-flex>
81 </v-layout> 81 </v-layout>
82 </v-layout> 82 </v-layout>
83 83
84 <v-card-text> 84 <v-card-text>
85 <v-list dark class="card-style"> 85 <v-list dark class="card-style">
86 <v-list-tile> 86 <v-list-tile>
87 <v-list-tile-content> 87 <v-list-tile-content>
88 <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title> 88 <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title>
89 </v-list-tile-content> 89 </v-list-tile-content>
90 </v-list-tile> 90 </v-list-tile>
91 <v-list-tile> 91 <v-list-tile>
92 <v-list-tile-content> 92 <v-list-tile-content>
93 <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title> 93 <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title>
94 </v-list-tile-content> 94 </v-list-tile-content>
95 </v-list-tile> 95 </v-list-tile>
96 </v-list> 96 </v-list>
97 </v-card-text> 97 </v-card-text>
98 </v-card> 98 </v-card>
99 </v-dialog> 99 </v-dialog>
100 100
101 <v-layout wrap row> 101 <v-layout wrap row>
102 <v-flex xs12 sm12 md9> 102 <v-flex xs12 sm12 md9>
103 <v-container fluid grid-list-xl> 103 <v-container fluid grid-list-xl>
104 <!-- ***** Total Students ***** --> 104 <!-- ***** Total Students ***** -->
105 <v-layout wrap class v-if="$store.state.role != 'PARENT' "> 105 <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
106 <v-flex xs12 sm12 md3> 106 <v-flex xs12 sm12 md3>
107 <router-link :to="{ name:'Students' }"> 107 <router-link :to="{ name:'Students' }">
108 <v-card class="card pink-bgcolor"> 108 <v-card class="card pink-bgcolor">
109 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 109 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
110 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 110 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
111 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 111 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
112 </v-card> 112 </v-card>
113 </router-link> 113 </router-link>
114 </v-flex> 114 </v-flex>
115 <!-- ***** Total Teachers***** --> 115 <!-- ***** Total Teachers***** -->
116 <v-flex xs12 sm12 md3> 116 <v-flex xs12 sm12 md3>
117 <router-link :to="{ name:'Teachers' }"> 117 <router-link :to="{ name:'Teachers' }">
118 <v-card flat class="card elevation-2 firozi-bgcolor"> 118 <v-card flat class="card elevation-2 firozi-bgcolor">
119 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 119 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
120 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 120 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
121 121
122 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 122 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
123 </v-card> 123 </v-card>
124 </router-link> 124 </router-link>
125 </v-flex> 125 </v-flex>
126 <!-- ***** Total Parents ***** --> 126 <!-- ***** Total Parents ***** -->
127 <v-flex xs12 sm12 md3> 127 <v-flex xs12 sm12 md3>
128 <router-link :to="{ name:'Parents' }"> 128 <router-link :to="{ name:'Parents' }">
129 <v-card flat class="card yellow darken-3"> 129 <v-card flat class="card yellow darken-3">
130 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 130 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
131 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 131 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
132 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 132 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
133 </v-card> 133 </v-card>
134 </router-link> 134 </router-link>
135 </v-flex> 135 </v-flex>
136 <!-- ***** Total Class***** --> 136 <!-- ***** Total Class***** -->
137 <v-flex xs12 sm12 md3> 137 <v-flex xs12 sm12 md3>
138 <router-link :to="{ name:'Class' }"> 138 <router-link :to="{ name:'Class' }">
139 <v-card flat class="card darkBlue-bgcolor"> 139 <v-card flat class="card darkBlue-bgcolor">
140 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 140 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
141 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 141 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
142 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 142 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
143 </v-card> 143 </v-card>
144 </router-link> 144 </router-link>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 147
148 <p 148 <p
149 v-if="studentsData.length === 0 && role == 'PARENT'" 149 v-if="studentsData.length === 0 && role == 'PARENT'"
150 class="text-center title grey lighten-4 error--text" 150 class="text-center title grey lighten-4 error--text"
151 >You have no student registered with school</p> 151 >You have no student registered with school</p>
152 <!-- ACCOUNT --> 152 <!-- ACCOUNT -->
153 <!-- <v-layout v-if="role != 'PARENT'"> 153 <!-- <v-layout v-if="role != 'PARENT'">
154 <v-flex xs12> 154 <v-flex xs12>
155 <v-card class="card mt-2 account-Card"> 155 <v-card class="card mt-2 account-Card">
156 <h4> 156 <h4>
157 <b>Account</b> 157 <b>Account</b>
158 </h4> 158 </h4>
159 <v-layout wrap> 159 <v-layout wrap>
160 <v-flex xs12 sm12 md3> 160 <v-flex xs12 sm12 md3>
161 <v-list two-line> 161 <v-list two-line>
162 <template> 162 <template>
163 <v-list-tile> 163 <v-list-tile>
164 <v-list-tile-avatar> 164 <v-list-tile-avatar>
165 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 165 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
166 </v-list-tile-avatar> 166 </v-list-tile-avatar>
167 <v-list-tile-content> 167 <v-list-tile-content>
168 <v-list-tile-title class="mt-2"> 168 <v-list-tile-title class="mt-2">
169 <p class="subheading font-color">Fees</p> 169 <p class="subheading font-color">Fees</p>
170 </v-list-tile-title> 170 </v-list-tile-title>
171 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> 171 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
172 </v-list-tile-content> 172 </v-list-tile-content>
173 </v-list-tile> 173 </v-list-tile>
174 <v-list-tile> 174 <v-list-tile>
175 <v-list-tile-avatar> 175 <v-list-tile-avatar>
176 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 176 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
177 </v-list-tile-avatar> 177 </v-list-tile-avatar>
178 <v-list-tile-content> 178 <v-list-tile-content>
179 <v-list-tile-title class="mt-2"> 179 <v-list-tile-title class="mt-2">
180 <p class="subheading font-color">Collection</p> 180 <p class="subheading font-color">Collection</p>
181 </v-list-tile-title> 181 </v-list-tile-title>
182 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> 182 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
183 </v-list-tile-content> 183 </v-list-tile-content>
184 </v-list-tile> 184 </v-list-tile>
185 <v-list-tile> 185 <v-list-tile>
186 <v-list-tile-avatar> 186 <v-list-tile-avatar>
187 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 187 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
188 </v-list-tile-avatar> 188 </v-list-tile-avatar>
189 <v-list-tile-content> 189 <v-list-tile-content>
190 <v-list-tile-title class="mt-2"> 190 <v-list-tile-title class="mt-2">
191 <p class="subheading font-color">Expences</p> 191 <p class="subheading font-color">Expences</p>
192 </v-list-tile-title> 192 </v-list-tile-title>
193 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> 193 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
194 </v-list-tile-content> 194 </v-list-tile-content>
195 </v-list-tile> 195 </v-list-tile>
196 </template> 196 </template>
197 </v-list> 197 </v-list>
198 </v-flex> 198 </v-flex>
199 <v-flex xs12 sm12 md9 lg9> 199 <v-flex xs12 sm12 md9 lg9>
200 <div id="chart"> 200 <div id="chart">
201 <div v-if="this.series"> 201 <div v-if="this.series">
202 <apexchart 202 <apexchart
203 type="bar" 203 type="bar"
204 height="250" 204 height="250"
205 style="max-width: 800px !important" 205 style="max-width: 800px !important"
206 :options="chartOptions" 206 :options="chartOptions"
207 :series="series" 207 :series="series"
208 v-show="true" 208 v-show="true"
209 ></apexchart> 209 ></apexchart>
210 </div> 210 </div>
211 </div> 211 </div>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 </v-card> 214 </v-card>
215 </v-flex> 215 </v-flex>
216 </v-layout>--> 216 </v-layout>-->
217 217
218 <v-card class="mt-2 card" v-if="role != 'PARENT'"> 218 <v-card class="mt-2 card" v-if="role != 'PARENT'">
219 <!-- <full-calendar 219 <!-- <full-calendar
220 ref="calendar" 220 ref="calendar"
221 defaultView="month" 221 defaultView="month"
222 droppable="false" 222 droppable="false"
223 :events="events" 223 :events="events"
224 :config="config" 224 :config="config"
225 ></full-calendar>--> 225 ></full-calendar>-->
226 <h4 class="pa-3"> 226 <h4 class="pa-3">
227 <b>Notice</b> 227 <b>Notice</b>
228 </h4> 228 </h4>
229 229
230 <v-data-table 230 <v-data-table
231 :items="noticeData" 231 :items="noticeData"
232 class="elevation-0" 232 class="elevation-0"
233 flat 233 flat
234 hide-actions 234 hide-actions
235 hide-headers 235 hide-headers
236 style="border-spacing: 0 !important;" 236 style="border-spacing: 0 !important;"
237 > 237 >
238 <template 238 <template
239 slot="items" 239 slot="items"
240 slot-scope="props" 240 slot-scope="props"
241 v-if="props.index < 5" 241 v-if="props.index < 5"
242 style="border-spacing: 0 !important;" 242 style="border-spacing: 0 !important;"
243 > 243 >
244 <tr class="td-notice"> 244 <tr class="td-notice">
245 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 245 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
246 <td> 246 <td>
247 <span class="grey--text caption">{{ date(props.item.created) }}</span> 247 <span class="grey--text caption">{{ date(props.item.created) }}</span>
248 <br /> 248 <br />
249 <span class="body-2">{{ props.item.title}}</span> 249 <span class="body-2">{{ props.item.title}}</span>
250 </td> 250 </td>
251 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> 251 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
252 252
253 <td class="text-xs-center"> 253 <td class="text-xs-center">
254 <span> 254 <span>
255 <v-tooltip top> 255 <v-tooltip top>
256 <img 256 <img
257 slot="activator" 257 slot="activator"
258 style="cursor:pointer; width:25px; height:25px; " 258 style="cursor:pointer; width:25px; height:25px; "
259 @click="profile" 259 @click="profile"
260 src="/static/icon/view.png" 260 src="/static/icon/view.png"
261 /> 261 />
262 <span>View</span> 262 <span>View</span>
263 </v-tooltip> 263 </v-tooltip>
264 </span> 264 </span>
265 </td> 265 </td>
266 </tr> 266 </tr>
267 </template> 267 </template>
268 </v-data-table> 268 </v-data-table>
269 </v-card> 269 </v-card>
270 <!-- COURSES --> 270 <!-- COURSES -->
271 <v-layout v-if="role == 'PARENT'"> 271 <v-layout v-if="role == 'PARENT'">
272 <v-flex xs12> 272 <v-flex xs12>
273 <v-card class="card mt-2 account-Card"> 273 <v-card class="card mt-2 account-Card">
274 <h4> 274 <h4>
275 <b>My Courses</b> 275 <b>My Courses</b>
276 </h4> 276 </h4>
277 <v-layout wrap> 277 <v-layout wrap>
278 <v-flex xs12 sm12> 278 <v-flex xs12 sm12>
279 <v-list two-line> 279 <v-list two-line>
280 <template> 280 <template>
281 <v-list-tile v-for="(course,i) in courseData" :key="i"> 281 <v-list-tile v-for="(course,i) in courseData" :key="i">
282 <v-list-tile-avatar> 282 <v-list-tile-avatar>
283 <v-icon 283 <v-icon
284 class="account-circle darkBlue-color" 284 class="account-circle darkBlue-color"
285 style="cursor: pointer;" 285 style="cursor: pointer;"
286 >panorama_fish_eye</v-icon> 286 >panorama_fish_eye</v-icon>
287 </v-list-tile-avatar> 287 </v-list-tile-avatar>
288 <v-list-tile-content> 288 <v-list-tile-content>
289 <v-list-tile-title 289 <v-list-tile-title
290 style="cursor: pointer;" 290 style="cursor: pointer;"
291 @click="routeToCourseDetails(course._id)" 291 @click="routeToCourseDetails(course._id)"
292 >{{ course.courseName }}</v-list-tile-title> 292 >{{ course.courseName }}</v-list-tile-title>
293 </v-list-tile-content> 293 </v-list-tile-content>
294 </v-list-tile> 294 </v-list-tile>
295 </template> 295 </template>
296 </v-list> 296 </v-list>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-card> 299 </v-card>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 <v-layout v-if="role == 'PARENT'"> 302 <v-layout v-if="role == 'PARENT'">
303 <v-flex xs6> 303 <v-flex xs6>
304 <v-card class="mt-2 card"> 304 <v-card class="mt-2 card">
305 <h4 class="pa-3"> 305 <h4 class="pa-3">
306 <b>Latest Annoucements</b> 306 <b>Latest Annoucements</b>
307 </h4> 307 </h4>
308 308
309 <v-data-table 309 <v-data-table
310 :items="annoucementData" 310 :items="annoucementData"
311 class="elevation-0" 311 class="elevation-0"
312 flat 312 flat
313 hide-actions 313 hide-actions
314 hide-headers 314 hide-headers
315 style="border-spacing: 0 !important;" 315 style="border-spacing: 0 !important;"
316 > 316 >
317 <template 317 <template
318 slot="items" 318 slot="items"
319 slot-scope="props" 319 slot-scope="props"
320 v-if="props.index < 5" 320 v-if="props.index < 5"
321 style="border-spacing: 0 !important;" 321 style="border-spacing: 0 !important;"
322 > 322 >
323 <tr class="td-notice"> 323 <tr class="td-notice">
324 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 324 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
325 <td> 325 <td>
326 <span class="grey--text caption">{{ date(props.item.created) }}</span> 326 <span class="grey--text caption">{{ date(props.item.created) }}</span>
327 <br /> 327 <br />
328 <span class="body-2">{{ props.item.discussionType}}</span> 328 <span class="body-2">{{ props.item.discussionType}}</span>
329 </td> 329 </td>
330 <td class="text-xs-center"> 330 <td class="text-xs-center">
331 <span> 331 <span>
332 <v-tooltip top> 332 <v-tooltip top>
333 <img 333 <img
334 slot="activator" 334 slot="activator"
335 style="cursor:pointer; width:25px; height:25px; " 335 style="cursor:pointer; width:25px; height:25px; "
336 src="/static/icon/view.png" 336 src="/static/icon/view.png"
337 /> 337 />
338 <span>View</span> 338 <span>View</span>
339 </v-tooltip> 339 </v-tooltip>
340 </span> 340 </span>
341 </td> 341 </td>
342 </tr> 342 </tr>
343 </template> 343 </template>
344 </v-data-table> 344 </v-data-table>
345 </v-card> 345 </v-card>
346 </v-flex> 346 </v-flex>
347 <v-flex xs6> 347 <v-flex xs6>
348 <v-card class="mt-2 card"> 348 <v-card class="mt-2 card">
349 <h4 class="pa-3"> 349 <h4 class="pa-3">
350 <b>Online User</b> 350 <b>Online User</b>
351 </h4> 351 </h4>
352 352
353 <v-data-table 353 <v-data-table
354 :items="onlineUser" 354 :items="onlineUser"
355 class="elevation-0" 355 class="elevation-0"
356 flat 356 flat
357 hide-actions 357 hide-actions
358 hide-headers 358 hide-headers
359 style="border-spacing: 0 !important;" 359 style="border-spacing: 0 !important;"
360 > 360 >
361 <template 361 <template
362 slot="items" 362 slot="items"
363 slot-scope="props" 363 slot-scope="props"
364 v-if="props.index < 5" 364 v-if="props.index < 5"
365 style="border-spacing: 0 !important;" 365 style="border-spacing: 0 !important;"
366 > 366 >
367 <tr class="td-notice"> 367 <tr class="td-notice">
368 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 368 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
369 <td> 369 <td>
370 <span class="body-2">{{ props.item.user }}</span> 370 <span class="body-2">{{ props.item.user }}</span>
371 </td> 371 </td>
372 <td class="text-xs-center"> 372 <td class="text-xs-center">
373 <span> 373 <span>
374 <v-tooltip top> 374 <v-tooltip top>
375 <img 375 <img
376 slot="activator" 376 slot="activator"
377 style="cursor:pointer; width:25px; height:25px; " 377 style="cursor:pointer; width:25px; height:25px; "
378 src="/static/icon/view.png" 378 src="/static/icon/view.png"
379 /> 379 />
380 <span>View</span> 380 <span>View</span>
381 </v-tooltip> 381 </v-tooltip>
382 </span> 382 </span>
383 </td> 383 </td>
384 </tr> 384 </tr>
385 </template> 385 </template>
386 </v-data-table> 386 </v-data-table>
387 </v-card> 387 </v-card>
388 </v-flex> 388 </v-flex>
389 </v-layout> 389 </v-layout>
390 </v-container> 390 </v-container>
391 </v-flex> 391 </v-flex>
392 <v-spacer></v-spacer> 392 <v-spacer></v-spacer>
393 <!-- SIDE BAR --> 393 <!-- SIDE BAR -->
394 <v-flex xs12 sm12 md3> 394 <v-flex xs12 sm12 md3>
395 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 395 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
396 <v-card-text class="px-2"> 396 <v-card-text class="px-2">
397 <h4 class="text-xs-center py-3"> 397 <h4 class="text-xs-center py-3">
398 <b>Profile</b> 398 <b>Profile</b>
399 </h4> 399 </h4>
400 <v-flex xs12 class="py-3"> 400 <v-flex xs12 class="py-3">
401 <v-layout wrap> 401 <v-layout wrap>
402 <v-flex xs12 sm12 md4> 402 <v-flex xs12 sm12 md4>
403 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> 403 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
404 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" width="80" /> 404 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" width="80" />
405 </v-flex> 405 </v-flex>
406 <v-flex xs12 sm12 md6> 406 <v-flex xs12 sm12 md6>
407 <p class="mb-0 body-1"> 407 <p class="mb-0 body-1">
408 <i>{{ userData.name }}</i> 408 <i>{{ userData.name }}</i>
409 </p> 409 </p>
410 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 410 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
411 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 411 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
412 <address class="caption grey--text mb-3">{{ userData.address }}</address> 412 <address class="caption grey--text mb-3">{{ userData.address }}</address>
413 </v-flex> 413 </v-flex>
414 </v-layout> 414 </v-layout>
415 </v-flex> 415 </v-flex>
416 <hr /> 416 <hr />
417 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 417 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
418
418 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 419 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
419 420
420 <!-- LATEST EVENTS --> 421 <!-- LATEST EVENTS -->
421 <v-card class="my-3 elevation-0"> 422 <v-card class="my-3 elevation-0">
422 <v-card-text> 423 <v-card-text>
423 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> 424 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
424 <div 425 <div
425 v-for="(activity,index) in activityList" 426 v-for="(activity,index) in activityList"
426 :key="index" 427 :key="index"
427 class="mt-2" 428 class="mt-2"
428 style="cursor: pointer;" 429 style="cursor: pointer;"
429 @click="seeEventDetails(activity)" 430 @click="seeEventDetails(activity)"
430 > 431 >
431 <span 432 <span
432 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 433 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
433 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 434 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
434 ></span> 435 ></span>
435 <div style="display: inline-block;" class="ml-2"> 436 <div style="display: inline-block;" class="ml-2">
436 <!-- LATEST EVENTS FOR PARENT --> 437 <!-- LATEST EVENTS FOR PARENT -->
437 <div v-if="$store.state.role === 'PARENT' "> 438 <div v-if="$store.state.role === 'PARENT' ">
438 <div 439 <div
439 class="grey--text lighten-1 caption" 440 class="grey--text lighten-1 caption"
440 v-if="activity.meetingEvent" 441 v-if="activity.meetingEvent"
441 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 442 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
442 <div 443 <div
443 class="body-2" 444 class="body-2"
444 v-if="activity.meetingEvent" 445 v-if="activity.meetingEvent"
445 >{{activity.meetingEvent.title}}</div> 446 >{{activity.meetingEvent.title}}</div>
446 </div> 447 </div>
447 448
448 <!-- LATEST EVENTS FOR TEACHER --> 449 <!-- LATEST EVENTS FOR TEACHER -->
449 <div v-if="role == 'TEACHER'"> 450 <div v-if="role == 'TEACHER'">
450 <div 451 <div
451 class="grey--text lighten-1 caption" 452 class="grey--text lighten-1 caption"
452 v-if="activity.dateOfEvent" 453 v-if="activity.dateOfEvent"
453 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 454 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
454 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 455 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
455 </div> 456 </div>
456 </div> 457 </div>
457 </div> 458 </div>
458 <div v-if="activityList.length == 0"> 459 <div v-if="activityList.length == 0">
459 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 460 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
460 </div> 461 </div>
461 </v-card-text> 462 </v-card-text>
462 </v-card> 463 </v-card>
463 </v-card-text> 464 </v-card-text>
464 </v-card> 465 </v-card>
465 </v-flex> 466 </v-flex>
466 </v-layout> 467 </v-layout>
467 468
468 <v-dialog v-model="dialog" max-width="500"> 469 <v-dialog v-model="dialog" max-width="500">
469 <v-card color="grey lighten-4" flat> 470 <v-card color="grey lighten-4" flat>
470 <v-toolbar dark color="fixcolors"> 471 <v-toolbar dark color="fixcolors">
471 <v-spacer></v-spacer> 472 <v-spacer></v-spacer>
472 <v-btn icon @click="dialog= false"> 473 <v-btn icon @click="dialog= false">
473 <v-icon>close</v-icon> 474 <v-icon>close</v-icon>
474 </v-btn> 475 </v-btn>
475 </v-toolbar> 476 </v-toolbar>
476 <v-flex class="py-4"> 477 <v-flex class="py-4">
477 <v-list-tile> 478 <v-list-tile>
478 <v-list-tile-action> 479 <v-list-tile-action>
479 <v-icon>edit</v-icon> 480 <v-icon>edit</v-icon>
480 </v-list-tile-action> 481 </v-list-tile-action>
481 <v-list-tile-content> 482 <v-list-tile-content>
482 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 483 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
483 </v-list-tile-content> 484 </v-list-tile-content>
484 </v-list-tile> 485 </v-list-tile>
485 <v-list-tile> 486 <v-list-tile>
486 <v-list-tile-action> 487 <v-list-tile-action>
487 <v-icon>access_time</v-icon> 488 <v-icon>access_time</v-icon>
488 </v-list-tile-action> 489 </v-list-tile-action>
489 <v-list-tile-content> 490 <v-list-tile-content>
490 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 491 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
491 </v-list-tile-content> 492 </v-list-tile-content>
492 </v-list-tile> 493 </v-list-tile>
493 </v-flex> 494 </v-flex>
494 </v-card> 495 </v-card>
495 </v-dialog> 496 </v-dialog>
496 </v-app> 497 </v-app>
497 </template> 498 </template>
498 499
499 <script> 500 <script>
500 import http from "@/Services/http.js"; 501 import http from "@/Services/http.js";
501 import moment from "moment"; 502 import moment from "moment";
502 import AllApiCalls from "@/Services/AllApiCalls.js"; 503 import AllApiCalls from "@/Services/AllApiCalls.js";
503 // import { FunctionalCalendar } from "vue-functional-calendar"; 504 // import { FunctionalCalendar } from "vue-functional-calendar";
504 505
505 export default { 506 export default {
506 components: { 507 components: {
507 // FunctionalCalendar 508 // FunctionalCalendar
508 }, 509 },
509 mixins: [AllApiCalls], 510 mixins: [AllApiCalls],
510 data() { 511 data() {
511 return { 512 return {
512 // data: { 513 // data: {
513 // clieckedToday: false 514 // clieckedToday: false
514 // }, 515 // },
515 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 516 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
516 // calendarData: {}, 517 // calendarData: {},
517 // calendar: {}, 518 // calendar: {},
518 519
519 // DIALOG BOX EVENT DETAILS 520 // DIALOG BOX EVENT DETAILS
520 viewEventDetails: false, 521 viewEventDetails: false,
521 522
522 // CALENDER 523 // CALENDER
523 moment: moment, 524 moment: moment,
524 activityEvents: [], 525 activityEvents: [],
525 onlineUser: [ 526 onlineUser: [
526 { 527 {
527 user: "Student Demo" 528 user: "Student Demo"
528 }, 529 },
529 { 530 {
530 user: "Teacher Demo" 531 user: "Teacher Demo"
531 }, 532 },
532 { 533 {
533 user: "Priyansh Gupta" 534 user: "Priyansh Gupta"
534 }, 535 },
535 { 536 {
536 user: "Gaurav Aggarwal" 537 user: "Gaurav Aggarwal"
537 }, 538 },
538 { 539 {
539 user: "Approve Arorra" 540 user: "Approve Arorra"
540 } 541 }
541 ], 542 ],
542 showLoader: false, 543 showLoader: false,
543 calendarData: {}, 544 calendarData: {},
544 dialog: false, 545 dialog: false,
545 dialogNotice: false, 546 dialogNotice: false,
546 HolidaysList: [], 547 HolidaysList: [],
547 EventsList: [], 548 EventsList: [],
548 events: [], 549 events: [],
549 config: { 550 config: {
550 eventClick: event => { 551 eventClick: event => {
551 this.selected = event; 552 this.selected = event;
552 this.dialog = true; 553 this.dialog = true;
553 } 554 }
554 }, 555 },
555 selected: {}, 556 selected: {},
556 barGraph: [], 557 barGraph: [],
557 // notice: {}, 558 // notice: {},
558 userData: {}, 559 userData: {},
559 dated: new Date(2018, 0, 9), 560 dated: new Date(2018, 0, 9),
560 userList: [], 561 userList: [],
561 sectionList: [], 562 sectionList: [],
562 students: "", 563 students: "",
563 parents: "", 564 parents: "",
564 teachers: "", 565 teachers: "",
565 classes: "", 566 classes: "",
566 noticeData: [], 567 noticeData: [],
567 expenseData: [], 568 expenseData: [],
568 feeData: [], 569 feeData: [],
569 collectionData: [], 570 collectionData: [],
570 courseData: [], 571 courseData: [],
571 studentsData: [], 572 studentsData: [],
572 annoucementData: [], 573 annoucementData: [],
573 role: "", 574 role: "",
574 attrs: [ 575 attrs: [
575 { 576 {
576 key: "today", 577 key: "today",
577 highlight: true, 578 highlight: true,
578 dates: new Date() 579 dates: new Date()
579 } 580 }
580 ], 581 ],
581 drawer: true, 582 drawer: true,
582 items: [ 583 items: [
583 { title: "Home", icon: "dashboard" }, 584 { title: "Home", icon: "dashboard" },
584 { title: "About", icon: "question_answer" } 585 { title: "About", icon: "question_answer" }
585 ], 586 ],
586 right: null, 587 right: null,
587 588
588 series: [ 589 series: [
589 { 590 {
590 name: "Total", 591 name: "Total",
591 data: [] 592 data: []
592 } 593 }
593 ], 594 ],
594 chartOptions: { 595 chartOptions: {
595 chart: { 596 chart: {
596 type: "bar", 597 type: "bar",
597 height: 150, 598 height: 150,
598 stacked: true 599 stacked: true
599 // animations: { 600 // animations: {
600 // enabled: true, 601 // enabled: true,
601 // easing: "easeinout", 602 // easing: "easeinout",
602 // speed: 1200, 603 // speed: 1200,
603 // animateGradually: { 604 // animateGradually: {
604 // enabled: true, 605 // enabled: true,
605 // delay: 450 606 // delay: 450
606 // }, 607 // },
607 // dynamicAnimation: { 608 // dynamicAnimation: {
608 // enabled: true, 609 // enabled: true,
609 // speed: 450 610 // speed: 450
610 // } 611 // }
611 // } 612 // }
612 }, 613 },
613 plotOptions: { 614 plotOptions: {
614 bar: { 615 bar: {
615 horizontal: false, 616 horizontal: false,
616 columnWidth: "25%", 617 columnWidth: "25%",
617 // endingShape: "rounded", 618 // endingShape: "rounded",
618 distributed: true 619 distributed: true
619 } 620 }
620 }, 621 },
621 responsive: [ 622 responsive: [
622 { 623 {
623 breakpoint: 480, 624 breakpoint: 480,
624 options: { 625 options: {
625 legend: { 626 legend: {
626 position: "bottom", 627 position: "bottom",
627 offsetX: -10, 628 offsetX: -10,
628 offsetY: 0 629 offsetY: 0
629 } 630 }
630 } 631 }
631 } 632 }
632 ], 633 ],
633 legend: { 634 legend: {
634 show: false 635 show: false
635 }, 636 },
636 colors: ["#7852cc", "#f9a825", "#ff8a89"], 637 colors: ["#7852cc", "#f9a825", "#ff8a89"],
637 dataLabels: { 638 dataLabels: {
638 enabled: false 639 enabled: false
639 }, 640 },
640 stroke: { 641 stroke: {
641 show: true, 642 show: true,
642 width: 2, 643 width: 2,
643 colors: ["transparent"] 644 colors: ["transparent"]
644 }, 645 },
645 xaxis: { 646 xaxis: {
646 categories: ["Fee", "Collections", "Expences"] 647 categories: ["Fee", "Collections", "Expences"]
647 }, 648 },
648 yaxis: { 649 yaxis: {
649 title: { 650 title: {
650 text: "" 651 text: ""
651 } 652 }
652 }, 653 },
653 fill: { 654 fill: {
654 opacity: 1 655 opacity: 1
655 }, 656 },
656 tooltip: { 657 tooltip: {
657 y: { 658 y: {
658 formatter: function(val, opts) { 659 formatter: function(val, opts) {
659 // console.log("opts",opts.w.config.xaxis.categories) 660 // console.log("opts",opts.w.config.xaxis.categories)
660 return "" + val + " "; 661 return "" + val + " ";
661 } 662 }
662 } 663 }
663 } 664 }
664 }, 665 },
665 666
666 // LATEST ACTIVITY 667 // LATEST ACTIVITY
667 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 668 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
668 activityList: [] 669 activityList: []
669 }; 670 };
670 }, 671 },
671 methods: { 672 methods: {
673 test(e) {
674 console.log(" test - ", e);
675 },
672 async handleDayChanged(e) { 676 async handleDayChanged(e) {
673 await this.getParticularMeetingEvent({ 677 await this.getParticularMeetingEvent({
674 meetingEventId: e.events[0]._id 678 meetingEventId: e.events[0]._id
675 }); 679 });
676 this.viewEventDetails = true; 680 this.viewEventDetails = true;
677 }, 681 },
678 async seeEventDetails(activity) { 682 async seeEventDetails(activity) {
679 if (this.$store.state.role === "TEACHER") { 683 if (this.$store.state.role === "TEACHER") {
680 await this.getParticularMeetingEvent({ meetingEventId: activity._id }); 684 await this.getParticularMeetingEvent({ meetingEventId: activity._id });
681 this.viewEventDetails = true; 685 this.viewEventDetails = true;
682 } 686 }
683 if (this.$store.state.role === "PARENT") { 687 if (this.$store.state.role === "PARENT") {
684 await this.getParticularMeetingEvent({ 688 await this.getParticularMeetingEvent({
685 meetingEventId: activity.meetingEvent._id 689 meetingEventId: activity.meetingEvent._id
686 }); 690 });
687 this.viewEventDetails = true; 691 this.viewEventDetails = true;
688 } 692 }
689 }, 693 },
690 async routeToCourseDetails(courseId) { 694 async routeToCourseDetails(courseId) {
691 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 695 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
692 let response = await this.getParticularCourseDetail(courseId); 696 let response = await this.getParticularCourseDetail(courseId);
693 697
694 /* If the response is null then dont route */ 698 /* If the response is null then dont route */
695 if (response.data.data.length > 0) { 699 if (response.data.data.length > 0) {
696 this.$router.push({ 700 this.$router.push({
697 name: "Course Details", 701 name: "Course Details",
698 query: { courseId: courseId } 702 query: { courseId: courseId }
699 }); 703 });
700 } else { 704 } else {
701 this.seeSnackbar("No Data Available", "warning"); 705 this.seeSnackbar("No Data Available", "warning");
702 } 706 }
703 }, 707 },
704 708
705 closeNotice() { 709 closeNotice() {
706 this.dialogNotice = false; 710 this.dialogNotice = false;
707 }, 711 },
708 profile() { 712 profile() {
709 // this.editedIndex = this.desserts.indexOf(item); 713 // this.editedIndex = this.desserts.indexOf(item);
710 // this.notice = Object.assign({}, item); 714 // this.notice = Object.assign({}, item);
711 // this.dialogNotice = true; 715 // this.dialogNotice = true;
712 this.$router.push({ name: "NoticeBoard" }); 716 this.$router.push({ name: "NoticeBoard" });
713 }, 717 },
714 date: function(date) { 718 date: function(date) {
715 return moment(date).format("MMMM DD, YYYY HH:mm"); 719 return moment(date).format("MMMM DD, YYYY HH:mm");
716 }, 720 },
717 activityDate(date) { 721 activityDate(date) {
718 return moment(date).format("MMMM DD, YYYY"); 722 return moment(date).format("MMMM DD, YYYY");
719 }, 723 },
720 refreshEvents() { 724 refreshEvents() {
721 this.$refs.calendar.$emit("refetch-events"); 725 this.$refs.calendar.$emit("refetch-events");
722 }, 726 },
723 removeEvent() { 727 removeEvent() {
724 this.$refs.calendar.$emit("remove-event", this.selected); 728 this.$refs.calendar.$emit("remove-event", this.selected);
725 this.selected = {}; 729 this.selected = {};
726 }, 730 },
727 eventSelected(event) { 731 eventSelected(event) {
728 this.selected = event; 732 this.selected = event;
729 console.log("this.selected", this.selected); 733 console.log("this.selected", this.selected);
730 }, 734 },
731 // eventDropStart: function(event) { 735 // eventDropStart: function(event) {
732 // event.editable = false; 736 // event.editable = false;
733 // }, 737 // },
734 eventCreated(...test) { 738 eventCreated(...test) {
735 console.log(test); 739 console.log(test);
736 }, 740 },
737 getStudents() { 741 getStudents() {
738 http() 742 http()
739 .get("/getStudentsList", { 743 .get("/getStudentsList", {
740 headers: { 744 headers: {
741 Authorization: "Bearer " + this.token 745 Authorization: "Bearer " + this.token
742 } 746 }
743 }) 747 })
744 .then(response => { 748 .then(response => {
745 this.students = response.data.data; 749 this.students = response.data.data;
746 this.showLoader = false; 750 this.showLoader = false;
747 }) 751 })
748 .catch(error => { 752 .catch(error => {
749 // console.log("err====>", err); 753 // console.log("err====>", err);
750 this.showLoader = false; 754 this.showLoader = false;
751 if (error.response.status === 401) { 755 if (error.response.status === 401) {
752 this.$router.replace({ path: "/" }); 756 this.$router.replace({ path: "/" });
753 this.$store.dispatch("setToken", null); 757 this.$store.dispatch("setToken", null);
754 this.$store.dispatch("Id", null); 758 this.$store.dispatch("Id", null);
755 } 759 }
756 }); 760 });
757 }, 761 },
758 getParents() { 762 getParents() {
759 http() 763 http()
760 .get("/getParentsList", { 764 .get("/getParentsList", {
761 headers: { 765 headers: {
762 Authorization: "Bearer " + this.token 766 Authorization: "Bearer " + this.token
763 } 767 }
764 }) 768 })
765 .then(response => { 769 .then(response => {
766 this.parents = response.data.data; 770 this.parents = response.data.data;
767 this.showLoader = false; 771 this.showLoader = false;
768 }) 772 })
769 .catch(error => { 773 .catch(error => {
770 // console.log("err====>", err); 774 // console.log("err====>", err);
771 this.showLoader = false; 775 this.showLoader = false;
772 }); 776 });
773 }, 777 },
774 getTeachers() { 778 getTeachers() {
775 http() 779 http()
776 .get("/getTeachersList", { 780 .get("/getTeachersList", {
777 headers: { 781 headers: {
778 Authorization: "Bearer " + this.token 782 Authorization: "Bearer " + this.token
779 } 783 }
780 }) 784 })
781 .then(response => { 785 .then(response => {
782 this.teachers = response.data.data; 786 this.teachers = response.data.data;
783 this.showLoader = false; 787 this.showLoader = false;
784 }) 788 })
785 .catch(error => { 789 .catch(error => {
786 // console.log("err====>", err); 790 // console.log("err====>", err);
787 this.showLoader = false; 791 this.showLoader = false;
788 }); 792 });
789 }, 793 },
790 getClasses() { 794 getClasses() {
791 http() 795 http()
792 .get("/getClassesList", { 796 .get("/getClassesList", {
793 headers: { 797 headers: {
794 Authorization: "Bearer " + this.token 798 Authorization: "Bearer " + this.token
795 } 799 }
796 }) 800 })
797 .then(response => { 801 .then(response => {
798 this.classes = response.data.data; 802 this.classes = response.data.data;
799 this.showLoader = false; 803 this.showLoader = false;
800 }) 804 })
801 .catch(error => { 805 .catch(error => {
802 this.showLoader = false; 806 this.showLoader = false;
803 }); 807 });
804 }, 808 },
805 getNoticeData() { 809 getNoticeData() {
806 this.showLoader = true; 810 this.showLoader = true;
807 http() 811 http()
808 .get("/getEventsList", { 812 .get("/getEventsList", {
809 headers: { 813 headers: {
810 Authorization: "Bearer " + this.token 814 Authorization: "Bearer " + this.token
811 } 815 }
812 }) 816 })
813 .then(response => { 817 .then(response => {
814 this.noticeData = response.data.data; 818 this.noticeData = response.data.data;
815 this.showLoader = false; 819 this.showLoader = false;
816 }) 820 })
817 .catch(error => { 821 .catch(error => {
818 this.showLoader = false; 822 this.showLoader = false;
819 }); 823 });
820 }, 824 },
821 getUserData() { 825 getUserData() {
822 // this.showLoader = true; 826 // this.showLoader = true;
823 if (this.$store.state.role === "PARENT") { 827 if (this.$store.state.role === "PARENT") {
824 http() 828 http()
825 .get("/getParticularUserDetail", { 829 .get("/getParticularUserDetail", {
826 headers: { 830 headers: {
827 Authorization: "Bearer " + this.token 831 Authorization: "Bearer " + this.token
828 }, 832 },
829 params: { 833 params: {
830 studentId: localStorage.getItem("parentStudentId") 834 studentId: localStorage.getItem("parentStudentId")
831 } 835 }
832 }) 836 })
833 .then(response => { 837 .then(response => {
834 this.userData = response.data.data; 838 this.userData = response.data.data;
835 this.showLoader = false; 839 this.showLoader = false;
836 console.log("sdsdfsdfsd - ", response); 840 console.log("sdsdfsdfsd - ", response);
837 }) 841 })
838 .catch(error => { 842 .catch(error => {
839 this.showLoader = false; 843 this.showLoader = false;
840 }); 844 });
841 } else { 845 } else {
842 http() 846 http()
843 .get("/getParticularUserDetail", { 847 .get("/getParticularUserDetail", {
844 headers: { 848 headers: {
845 Authorization: "Bearer " + this.token 849 Authorization: "Bearer " + this.token
846 } 850 }
847 }) 851 })
848 .then(response => { 852 .then(response => {
849 this.userData = response.data.data; 853 this.userData = response.data.data;
850 this.showLoader = false; 854 this.showLoader = false;
851 }) 855 })
852 .catch(error => { 856 .catch(error => {
853 this.showLoader = false; 857 this.showLoader = false;
854 }); 858 });
855 } 859 }
856 }, 860 },
857 861
858 getFeesAndCollectionsData() { 862 getFeesAndCollectionsData() {
859 http() 863 http()
860 .get("/getTotalFeesAndCollections", { 864 .get("/getTotalFeesAndCollections", {
861 headers: { 865 headers: {
862 Authorization: "Bearer " + this.token 866 Authorization: "Bearer " + this.token
863 } 867 }
864 }) 868 })
865 .then(response => { 869 .then(response => {
866 this.feeData = response.data.data; 870 this.feeData = response.data.data;
867 // this.collectionData = response.data.data; 871 // this.collectionData = response.data.data;
868 this.series[0].data[0] = this.feeData.totalFees; 872 this.series[0].data[0] = this.feeData.totalFees;
869 this.series[0].data[1] = this.feeData.totalCollection; 873 this.series[0].data[1] = this.feeData.totalCollection;
870 // console.log("this.series====", this.series); 874 // console.log("this.series====", this.series);
871 875
872 this.showLoader = false; 876 this.showLoader = false;
873 }) 877 })
874 .catch(error => { 878 .catch(error => {
875 this.showLoader = false; 879 this.showLoader = false;
876 }); 880 });
877 }, 881 },
878 getExpensesData() { 882 getExpensesData() {
879 http() 883 http()
880 .get("/getTotalExpenses", { 884 .get("/getTotalExpenses", {
881 headers: { 885 headers: {
882 Authorization: "Bearer " + this.token 886 Authorization: "Bearer " + this.token
883 } 887 }
884 }) 888 })
885 .then(response => { 889 .then(response => {
886 this.expenseData = response.data.data; 890 this.expenseData = response.data.data;
887 // var array = response.data.data.sum; 891 // var array = response.data.data.sum;
888 this.series[0].data[2] = this.expenseData.sum; 892 this.series[0].data[2] = this.expenseData.sum;
889 // this.series = [ 893 // this.series = [
890 // { 894 // {
891 // name: "Total", 895 // name: "Total",
892 // data: array 896 // data: array
893 // } 897 // }
894 // ]; 898 // ];
895 // console.log("this.series====", this.series); 899 // console.log("this.series====", this.series);
896 this.showLoader = false; 900 this.showLoader = false;
897 }) 901 })
898 .catch(error => { 902 .catch(error => {
899 this.showLoader = false; 903 this.showLoader = false;
900 }); 904 });
901 }, 905 },
902 async getparentStudents() { 906 async getparentStudents() {
903 this.showLoader = true; 907 this.showLoader = true;
904 var parentStudentsId; 908 var parentStudentsId;
905 var classId; 909 var classId;
906 await http() 910 await http()
907 .get("/parentStudentsList") 911 .get("/parentStudentsList")
908 .then(response => { 912 .then(response => {
909 // console.log("resssssss", response.data.data.students[0].classId); 913 // console.log("resssssss", response.data.data.students[0].classId);
910 this.studentsData = response.data.data; 914 this.studentsData = response.data.data;
911 localStorage.setItem( 915 localStorage.setItem(
912 "parentStudentId", 916 "parentStudentId",
913 this.studentsData.students[0]._id 917 this.studentsData.students[0]._id
914 ); 918 );
915 localStorage.setItem( 919 localStorage.setItem(
916 "parentClassId", 920 "parentClassId",
917 this.studentsData.students[0].classId 921 this.studentsData.students[0].classId
918 ); 922 );
919 923
920 if (localStorage.getItem("parentStudentId") == null) { 924 if (localStorage.getItem("parentStudentId") == null) {
921 parentStudentsId = response.data.data.students[0].classId; 925 parentStudentsId = response.data.data.students[0].classId;
922 classId = response.data.data.students[0]._id; 926 classId = response.data.data.students[0]._id;
923 } 927 }
924 if (localStorage.getItem("parentStudentId")) { 928 if (localStorage.getItem("parentStudentId")) {
925 parentStudentsId = localStorage.getItem("parentStudentId"); 929 parentStudentsId = localStorage.getItem("parentStudentId");
926 classId = localStorage.getItem("parentClassId"); 930 classId = localStorage.getItem("parentClassId");
927 } 931 }
928 932
929 this.showLoader = false; 933 this.showLoader = false;
930 }) 934 })
931 .catch(err => { 935 .catch(err => {
932 console.log("err====>", err); 936 console.log("err====>", err);
933 this.showLoader = false; 937 this.showLoader = false;
934 }); 938 });
935 await this.getCourses(parentStudentsId, classId); 939 await this.getCourses(parentStudentsId, classId);
936 await this.getAnnoucementes(classId); 940 await this.getAnnoucementes(classId);
937 }, 941 },
938 async getCourses(parentStudentsId, classId) { 942 async getCourses(parentStudentsId, classId) {
939 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 943 /* getStudentCourses - to get courseData - defined in GetApis.js*/
940 await this.getStudentCourses({ 944 await this.getStudentCourses({
941 classId: classId, 945 classId: classId,
942 studentId: parentStudentsId 946 studentId: parentStudentsId
943 }); 947 });
944 }, 948 },
945 getAnnoucementes(classId) { 949 getAnnoucementes(classId) {
946 this.showLoader = true; 950 this.showLoader = true;
947 http() 951 http()
948 .get("/getAnnoucementesList", { 952 .get("/getAnnoucementesList", {
949 params: { 953 params: {
950 classId: classId 954 classId: classId
951 } 955 }
952 }) 956 })
953 .then(response => { 957 .then(response => {
954 this.annoucementData = response.data.data; 958 this.annoucementData = response.data.data;
955 this.showLoader = false; 959 this.showLoader = false;
956 }) 960 })
957 .catch(err => { 961 .catch(err => {
958 console.log("err====>", err); 962 console.log("err====>", err);
959 this.showLoader = false; 963 this.showLoader = false;
960 }); 964 });
961 }, 965 },
962 async getMeetingEventes() { 966 async getMeetingEventes() {
963 if (this.role == "TEACHER") { 967 if (this.role == "TEACHER") {
964 this.showLoader = true; 968 this.showLoader = true;
965 await http() 969 await http()
966 .get("/getMeetingEventesList", { 970 .get("/getMeetingEventesList", {
967 headers: { 971 headers: {
968 Authorization: "Bearer " + this.token 972 Authorization: "Bearer " + this.token
969 } 973 }
970 }) 974 })
971 .then(response => { 975 .then(response => {
972 var activityList = response.data.data; 976 var activityList = response.data.data;
973 this.activityList = activityList; 977 this.activityList = activityList;
974 this.showLoader = false; 978 this.showLoader = false;
975 979
976 /* set activityEvents array to highlight event dates in calender */ 980 /* set activityEvents array to highlight event dates in calender */
977 for (var i = 0; i < this.activityList.length; i++) { 981 for (var i = 0; i < this.activityList.length; i++) {
978 let obj = {}; 982 let obj = {};
979 obj.date = moment(this.activityList[i].dateOfEvent).format( 983 obj.date = moment(this.activityList[i].dateOfEvent).format(
980 "YYYY/MM/DD" 984 "YYYY/MM/DD"
981 ); 985 );
982 obj.title = this.activityList[i].title; 986 obj.title = this.activityList[i].title;
983 obj._id = this.activityList[i]._id; 987 obj._id = this.activityList[i]._id;
984 this.activityEvents.push(obj); 988 this.activityEvents.push(obj);
985 } 989 }
986 }) 990 })
987 .catch(error => { 991 .catch(error => {
988 this.showLoader = false; 992 this.showLoader = false;
989 }); 993 });
990 } 994 }
991 } 995 }
992 }, 996 },
993 997
994 mounted() { 998 mounted() {
995 // = this.$store.state.schoolToken; 999 // = this.$store.state.schoolToken;
996 // console.log("this.$store.state.role", this.token); 1000 // console.log("this.$store.state.role", this.token);
997 // this.getUsersList(); 1001 // this.getUsersList();
998 }, 1002 },
999 1003
1000 async created() { 1004 async created() {
1001 if (this.$store.state.role === "ADMIN") { 1005 if (this.$store.state.role === "ADMIN") {
1002 this.token = this.$store.state.token; 1006 this.token = this.$store.state.token;
1003 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 1007 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1004 this.token = this.$store.state.schoolToken; 1008 this.token = this.$store.state.schoolToken;
1005 } else if (this.$store.state.role === "TEACHER") { 1009 } else if (this.$store.state.role === "TEACHER") {
1006 this.token = this.$store.state.token; 1010 this.token = this.$store.state.token;
1007 } else if (this.$store.state.role === "ACCOUNTANT") { 1011 } else if (this.$store.state.role === "ACCOUNTANT") {
1008 this.token = this.$store.state.token; 1012 this.token = this.$store.state.token;
1009 } else if (this.$store.state.role === "LIBRARIAN") { 1013 } else if (this.$store.state.role === "LIBRARIAN") {
1010 this.token = this.$store.state.token; 1014 this.token = this.$store.state.token;
1011 } else if (this.$store.state.role === "PARENT") { 1015 } else if (this.$store.state.role === "PARENT") {
1012 this.token = this.$store.state.token; 1016 this.token = this.$store.state.token;
1013 await this.getparentStudents(); 1017 await this.getparentStudents();
1014 } 1018 }
1015 this.role = this.$store.state.role; 1019 this.role = this.$store.state.role;
1016 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); 1020 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
1017 // this.getData(); 1021 // this.getData();
1018 await this.getStudents(); 1022 await this.getStudents();
1019 await this.getTeachers(); 1023 await this.getTeachers();
1020 await this.getParents(); 1024 await this.getParents();
1021 await this.getClasses(); 1025 await this.getClasses();
1022 await this.getNoticeData(); 1026 await this.getNoticeData();
1023 await this.getUserData(); 1027 await this.getUserData();
1024 await this.getFeesAndCollectionsData(); 1028 await this.getFeesAndCollectionsData();
1025 await this.getExpensesData(); 1029 await this.getExpensesData();
1026 1030
1027 /* get Latest events list for student login*/ 1031 /* get Latest events list for student login*/
1028 if (this.$store.state.role == "PARENT") { 1032 if (this.$store.state.role == "PARENT") {
1029 let response = await this.studentMeetingEvents({ 1033 let response = await this.studentMeetingEvents({
1030 studentId: localStorage.getItem("parentStudentId") 1034 studentId: localStorage.getItem("parentStudentId")
1031 }); 1035 });
1032 this.activityList = response.data.data; 1036 this.activityList = response.data.data;
1033 1037
1034 /* set activityEvents array to highlight event dates in calender */ 1038 /* set activityEvents array to highlight event dates in calender */
1035 for (var i = 0; i < this.activityList.length; i++) { 1039 for (var i = 0; i < this.activityList.length; i++) {
1036 let obj = {}; 1040 let obj = {};
1037 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( 1041 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1038 "YYYY/MM/DD" 1042 "YYYY/MM/DD"
1039 ); 1043 );
1040 obj.title = this.activityList[i].meetingEvent.title; 1044 obj.title = this.activityList[i].meetingEvent.title;
1041 obj._id = this.activityList[i].meetingEvent._id; 1045 obj._id = this.activityList[i].meetingEvent._id;
1042 this.activityEvents.push(obj); 1046 this.activityEvents.push(obj);
1043 } 1047 }
1044 } 1048 }
1045 1049
1046 /* get Latest events list for teacher login*/ 1050 /* get Latest events list for teacher login*/
1047 if (this.role == "TEACHER") { 1051 if (this.role == "TEACHER") {
1048 await this.getMeetingEventes(); 1052 await this.getMeetingEventes();
1049 } 1053 }
1050 } 1054 }
1051 }; 1055 };
1052 </script> 1056 </script>
1053 1057
1054 <style scoped> 1058 <style scoped>
1055 @import "fullcalendar/dist/fullcalendar.css"; 1059 @import "fullcalendar/dist/fullcalendar.css";
1056 </style> 1060 </style>