viithiisys / School-Management-dashboard

Commit e05668b28f8a358d7b5f138ceb7fc77782a6ab96

Authored by Shikha Mishra 2020-08-28 08:00:01 -0400

Exists in master and in 2 other branches

Clear preavious data while selecting class from drop-down in Exam Attendence and…

… show password in video sharing link

Showing 3 changed files with 7 additions and 10 deletions Show diff stats

src/pages/Dashboard/LiveOnlineClass.vue

Diff comments View file @e05668b

 <template>
   <div class="body-color">
     <!-- LOADER -->
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <!-- SNACKBAR -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="snackbarColor"
     >
       {{ text }}
       <v-spacer></v-spacer>
       <v-btn flat text @click="snackbar = false">X</v-btn>
     </v-snackbar>
     <v-container grid-list-xl class="pt-0">
       <v-layout row wrap class="mt-1">
         <!-- if logged in user is parent -->
         <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
           <v-layout column>
             <!-- HEADING -->
             <v-flex>
               <div
                 class="title side-bar-color font-weight-bold"
               >Live Online Classes - {{$route.query.chapterName}}</div>
               <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> -->
               <!-- <div
                 class="subheading grey--text lighten-1"
               >The session started at 1:00 there is 1 moderator</div>-->
             </v-flex>
             <!-- JOIN OR END SESSION -->
             <v-flex>
               <div>
                 <v-btn
                   round
                   class="open-dialog-button"
                   dark
                   v-if="studentBtn"
                   @click="showLoader = true;startChat();"
                 >{{studentBtn}}</v-btn>
                 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>
               </div>
             </v-flex>
             <v-flex id="studentClone">
               <div id="jitsi-container"></div>
             </v-flex>
           </v-layout>
         </v-flex>
         <!-- if logged in user is teacher -->
         <v-flex xs12 sm12 md12 v-else>
           <v-layout column>
             <!-- HEADING -->
             <v-flex>
               <div
                 class="title side-bar-color font-weight-bold"
               >Live Online Classes - {{$route.query.chapterName}}</div>
               <!-- <div class="subheading grey--text lighten-1"></div> -->
               <!-- <div
                 class="subheading grey--text lighten-1"
               >The session started at 1:00 there is 1 moderator</div>-->
             </v-flex>
             <!-- JOIN OR END SESSION -->
             <v-flex>
               <div>
                 <v-btn
                   round
                   class="open-dialog-button"
                   dark
                   @click="showLoader = true;startChat()"
                 >Start Session</v-btn>
               </div>
             </v-flex>
             <v-flex id="teacherClone">
               <div id="jitsi-container"></div>
             </v-flex>
           </v-layout>
         </v-flex>
         <v-spacer></v-spacer>
         <!-- COURSES SIDE BAR- positioned to the right of the page -->
         <!-- <v-flex xs3>
           <v-card class="elevation-0 card-border" height="100%">
             <CoursesSideBar></CoursesSideBar>
           </v-card>
         </v-flex>-->
       </v-layout>
     </v-container>
   </div>
 </template>
 <script>
 import AllApiCalls from "@/Services/AllApiCalls.js";
 import http from "@/Services/http.js";
 import moment from "moment";
 import Meet from "@/pages/Meet/meet.vue";
 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
 export default {
   mixins: [AllApiCalls],
   components: {
     CoursesSideBar,
   },
   data() {
     return {
       startLiveSession: "",
       studentBtn: "",
       // DATA TABLE
       search: "",
       pagination: {
         rowsPerPage: 10,
       },
       liveOnlineHeaders: [
         {
           text: "Playback",
           value: "attachementUrl",
           sortable: false,
           align: "center",
         },
         {
           text: "Meeting",
           align: "center",
           sortable: false,
           value: "",
         },
         {
           text: "Recording",
           value: "",
           sortable: false,
           align: "center",
         },
         {
           text: "Description Preview",
           value: "",
           sortable: false,
           align: "center",
         },
         { text: "Date", value: "", sortable: false, align: "center" },
         { text: "Duration", value: "", sortable: false, align: "center" },
         { text: "Toolbar", value: "", sortable: false, align: "center" },
       ],
       liveOnlineItems: [],
       // JITSI CONTAINER
       liveLink: "",
-      livePassword: "",
       token: "",
       selectStudents: {},
       classRules: [(v) => !!v || " Class Name is required"],
       sectionRules: [(v) => !!v || " Section Name is required"],
       addclass: [],
       addSection: [],
       loading: false,
       room: "",
       username: "",
       roomPassword: "",
       counter: 0,
     };
   },
   methods: {
     async startChat() {
       if (this.$store.state.role === "PARENT") {
         if (this.counter == 0) {
           //   console.log("enter start chat");
           this.startConference();
           this.counter += 1;
         }
       }
       if (this.$store.state.role === "TEACHER") {
         if (this.counter == 0) {
           this.createRoom();
           this.counter += 1;
         }
       }
     },
     // JITSI CONTAINER
     startConference() {
       //   console.log("yes session started");
       var _this = this;
       try {
         const domain = "meet.intrack.in";
         const options = {
           audioInput: "<deviceLabel>",
           audioOutput: "<deviceLabel>",
           videoInput: "<deviceLabel>",
           prejoinPageEnabled: false,
           roomName: this.room,
           height: 500,
           parentNode: document.getElementById("jitsi-container"),
           interfaceConfigOverwrite: {
             filmStripOnly: false,
             SHOW_PROMOTIONAL_CLOSE_PAGE: false,
             SHOW_POWERED_BY: false,
             SHOW_JITSI_WATERMARK: false,
             TOOLBAR_BUTTONS: [
               "microphone",
               "camera",
               "closedcaptions",
               "desktop",
               "fullscreen",
               "fodeviceselection",
               "hangup",
               "profile",
               "info",
               "chat",
               "recording",
               "livestreaming",
               "etherpad",
               "sharedvideo",
               "settings",
               "raisehand",
               "videoquality",
               "filmstrip",
               "invite",
               "feedback",
               "stats",
               "shortcuts",
               "tileview",
             ],
           },
           configOverwrite: {
             disableSimulcast: false,
           },
           teacherName: "",
-          romm: "",
+          room: "",
         };
         _this.api = new JitsiMeetExternalAPI(domain, options);
         // console.log("this.api ", this.api);
         _this.api.addEventListener("videoConferenceJoined", () => {
-          //   console.log("Local User Joined");
           this.showLoader = false;
-          _this.api.executeCommand("displayName", _this.username);
+          setTimeout(() => {
-          _this.api.executeCommand("password", _this.roomPassword);
+            _this.api.executeCommand("displayName", _this.username);
+            _this.api.executeCommand("password", _this.roomPassword);
+          }, 1000);
         });
         _this.api.on("readyToClose", () => {
           this.$router.push({ name: "Refresh" });
         });
       } catch (error) {
         // console.error("Failed to load Jitsi API", error);
       }
     },
     openRoom() {
       // verify the JitsiMeetExternalAPI constructor is added to the global..
       // if (this.teacherName != "" || this.room != "") {
       //   if (window.JitsiMeetExternalAPI) {
       //     // var person = prompt("Please enter your name:", "Rabie");
       //     if (person != null || person != "") this.username = this.teacherName;
       //     var room = prompt("Please enter your room:", "Test Room");
       //     if (room != null || room != "") this.room = this.room;
       //     this.startConference();
       //   } else alert("Jitsi Meet API script not loaded");
       // }
     },
     createRoom(classId) {
       // this.showLoader = true;
       var classId = {
         classId: classId,
       };
       http()
         .post("/createLiveClasses", {
           classId: this.$route.query.classId,
           courseId: this.$route.query.courseId,
           chapterId: this.$route.query.chapterId,
         })
         .then((response) => {
           // this.addSection = response.data.data;
           //   console.log("CREATE___ROOOM", response.data);
           var room = response.data.data.roomName;
           var username = localStorage.getItem("teacherName");
           var roomPassword = response.data.data.password;
           //   console.log(
           //     "room",
           //     room,
           //     "username",
           //     username,
           //     "roomPassword",
           //     roomPassword
           //   );
           var this_ = this;
           if (username != "" || room != "") {
             if (window.JitsiMeetExternalAPI) {
               // var person = prompt("Please enter your name:", "Rabie");
               if (username != null || username != "") {
                 this_.username = username;
               }
               // var room = prompt("Please enter your room:", "Test Room");
               if (room != null || room != "") {
                 this_.room = room;
               }
               if (roomPassword != null || roomPassword != "") {
                 this_.password = roomPassword;
               }
             } else alert("Jitsi Meet API script not loaded");
             this_.startConference();
           }
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     async studentClasses() {
       this.liveLink = "";
-      this.livePassword = "";
       this.room = "";
       this.username = "";
       this.roomPassword = "";
       /* getLiveClassesesList - To up date line under heading*/
       let response = await this.getLiveClassesesList({
         classId: this.$route.query.classId,
         courseId: this.$route.query.courseId,
         chapterId: this.$route.query.chapterId,
       });
       //   console.log("response getLiveClassesesList- ", response);
       /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
       if (response.data.data[0].sessionStatus == "ENDED") {
         // this.startLiveSession = "Start Session";
         this.studentBtn = "";
       }
       if (response.data.data[0].sessionStatus == "STARTED") {
         // this.startLiveSession = "Join Session";
         this.studentBtn = "Join Session";
       }
       if (response.data.data.length == 0) {
         this.startLiveSession = "Start Session";
         this.studentBtn = "";
       } else {
         this.liveLink = response.data.data[0].link;
-        this.livePassword = response.data.data[0].password;
         var room = response.data.data[0].roomName;
         var username = this.currentUser;
         var roomPassword = response.data.data[0].password;
         var this_ = this;
         // console.log(this.room, this.roomPassword, this.username);
-        // console.log("live session link", this.liveLink);
-        // console.log("live session password", this.livePassword);
         if (username != "" || room != "") {
           if (window.JitsiMeetExternalAPI) {
             // var person = prompt("Please enter your name:", "Rabie");
             if (username != null || username != "") {
               this_.username = username;
             }
             if (roomPassword != null || roomPassword != "") {
               this_.roomPassword = roomPassword;
             }
             // var room = prompt("Please enter your room:", "Test Room");
             if (room != null || room != "") {
               this_.room = room;
             }
             // this.startConference();
           }
         }
       }
     },
   },
   async created() {
     // console.log(
     //   "this.$store.state.studentsData",
     //   this.$store.state.studentsData[0].name
     // );
     this.currentUser = localStorage.getItem("studentName");
     this.token = this.$store.state.token;
     if (this.$store.state.role === "PARENT") {
       await this.studentClasses();
     }
     /* getStudentCourses - to get courseData - defined in GetApis.js*/
     if (this.$store.state.role === "PARENT") {
       await this.getStudentCourses({
         classId: localStorage.getItem("parentClassId"),
         studentId: localStorage.getItem("parentStudentId"),
       });
     }
   },
 };
 </script>
 <style scoped>
 .side-bar-color {
   color: #827bfa !important;
   /* border-top-right-radius: 74px !important; */
 }
 .card-border {
   border: 1px #bdbdbd solid;
   border-radius: 3px;
 }
 .reply-desc {
   border: 1px solid #f2f2f2;
 }
 .open-dialog-button {
   background: #827bfa !important;
   border-color: #827bfa !important;
   text-transform: none !important;
 }
 .reply-btn {
   background: #feb83c !important;
   border-color: #feb83c !important;
   text-transform: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
 }
 #jitsi-container {
   height: 100vh;

src/pages/Dashboard/dashboard.vue

Diff comments View file @e05668b

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" persistent lazy>	72	<v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
73	<v-card flat class="card-style elevation-0" height="600" dark>	73	<v-card flat class="card-style elevation-0" height="600" dark>
74	<v-layout>	74	<v-layout>
75	<v-flex xs12>	75	<v-flex xs12>
76	<v-icon	76	<v-icon
77	size="24"	77	size="24"
78	class="right"	78	class="right"
79	@click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"	79	@click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
80	>cancel</v-icon>	80	>cancel</v-icon>
81	</v-flex>	81	</v-flex>
82	</v-layout>	82	</v-layout>
83	<v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">	83	<v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
84	<v-tabs-slider color="yellow"></v-tabs-slider>	84	<v-tabs-slider color="yellow"></v-tabs-slider>
85	<v-tab v-for="(tab,index) in tabs" :key="index">	85	<v-tab v-for="(tab,index) in tabs" :key="index">
86	<div class="subheading py-1">{{ tab.name }}</div>	86	<div class="subheading py-1">{{ tab.name }}</div>
87	</v-tab>	87	</v-tab>
88	<!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>	88	<!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
89	<v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->	89	<v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->
90		90
91	<!-- SCHOOL EVENTS-->	91	<!-- SCHOOL EVENTS-->
92	<v-tab-item>	92	<v-tab-item>
93	<v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">	93	<v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
94	<v-container fluid>	94	<v-container fluid>
95	<v-divider class="white"></v-divider>	95	<v-divider class="white"></v-divider>
96	<v-card	96	<v-card
97	v-for="(particularEvent,index) in dialogSchoolEvents"	97	v-for="(particularEvent,index) in dialogSchoolEvents"
98	:key="index"	98	:key="index"
99	class="mt-3 pa-2 card-style white--text elevation-0"	99	class="mt-3 pa-2 card-style white--text elevation-0"
100	>	100	>
101	<div>	101	<div>
102	<div class="headline">{{particularEvent.title}}</div>	102	<div class="headline">{{particularEvent.title}}</div>
103	<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>	103	<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
104	<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>	104	<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
105	<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>	105	<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
106	<div v-if="particularEvent.link">	106	<div v-if="particularEvent.link">
107	Link :	107	Link :
108	<a :href="particularEvent.link">{{particularEvent.link}}</a>	108	<a :href="particularEvent.link">{{particularEvent.link}}</a>
109	</div>	109	</div>
110	<div	110	<div
111	v-if="particularEvent.description"	111	v-if="particularEvent.description"
112	>Description : {{particularEvent.description}}</div>	112	>Description : {{particularEvent.description}}</div>
113	</div>	113	</div>
114	<v-divider class="white mt-3"></v-divider>	114	<v-divider class="white mt-3"></v-divider>
115	</v-card>	115	</v-card>
116	</v-container>	116	</v-container>
117	</v-card>	117	</v-card>
118	</v-tab-item>	118	</v-tab-item>
119		119
120	<!-- MEETING EVENTS -->	120	<!-- MEETING EVENTS -->
121	<v-tab-item>	121	<v-tab-item>
122	<v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>	122	<v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
123	<v-container fluid>	123	<v-container fluid>
124	<v-divider class="white"></v-divider>	124	<v-divider class="white"></v-divider>
125	<v-card	125	<v-card
126	v-for="(particularEvent,index) in dialogMeetingEvents"	126	v-for="(particularEvent,index) in dialogMeetingEvents"
127	:key="index"	127	:key="index"
128	class="mt-3 pa-2 card-style white--text elevation-0"	128	class="mt-3 pa-2 card-style white--text elevation-0"
129	>	129	>
130	<div>	130	<div>
131	<div class="headline">{{particularEvent.title}}</div>	131	<div class="headline">{{particularEvent.title}}</div>
132	<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>	132	<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
133	<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>	133	<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
134	<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>	134	<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
135	<div v-if="particularEvent.link">	135	<div v-if="particularEvent.link">
136	Link :	136	Link :
137	<a :href="particularEvent.link">{{particularEvent.link}}</a>	137	<a :href="particularEvent.link">{{particularEvent.link}}</a>
138	</div>	138	</div>
139	<div	139	<div
140	v-if="particularEvent.description"	140	v-if="particularEvent.description"
141	>Description : {{particularEvent.description}}</div>	141	>Description : {{particularEvent.description}}</div>
142	</div>	142	</div>
143	<v-divider class="white mt-3"></v-divider>	143	<v-divider class="white mt-3"></v-divider>
144	</v-card>	144	</v-card>
145	</v-container>	145	</v-container>
146	</v-card>	146	</v-card>
147	</v-tab-item>	147	</v-tab-item>
148	</v-tabs>	148	</v-tabs>
149		149
150	<!-- IF NO MULTIPLE EVENTS ON SAME DATE -->	150	<!-- IF NO MULTIPLE EVENTS ON SAME DATE -->
151	<v-card flat class="card-style pa-2 elevation-0" dark v-else>	151	<v-card flat class="card-style pa-2 elevation-0" dark v-else>
152	<v-container fluid>	152	<v-container fluid>
153	<v-divider class="white"></v-divider>	153	<v-divider class="white"></v-divider>
154	<v-card	154	<v-card
155	v-for="(particularEvent,index) in displayEventsList"	155	v-for="(particularEvent,index) in displayEventsList"
156	:key="index"	156	:key="index"
157	class="mt-3 pa-2 card-style white--text elevation-0"	157	class="mt-3 pa-2 card-style white--text elevation-0"
158	>	158	>
159	<div>	159	<div>
160	<div class="headline">{{particularEvent.title}}</div>	160	<div class="headline">{{particularEvent.title}}</div>
161	<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>	161	<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
162	<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>	162	<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
163	<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>	163	<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
164	<div v-if="particularEvent.link">	164	<div v-if="particularEvent.link">
165	Link :	165	Link :
166	<a :href="particularEvent.link">{{particularEvent.link}}</a>	166	<a :href="particularEvent.link">{{particularEvent.link}}</a>
167	</div>	167	</div>
168	<div	168	<div
169	v-if="particularEvent.description"	169	v-if="particularEvent.description"
170	>Description : {{particularEvent.description}}</div>	170	>Description : {{particularEvent.description}}</div>
171	</div>	171	</div>
172	<v-divider class="white mt-3"></v-divider>	172	<v-divider class="white mt-3"></v-divider>
173	</v-card>	173	</v-card>
174	</v-container>	174	</v-container>
175	</v-card>	175	</v-card>
176	</v-card>	176	</v-card>
177	</v-dialog>	177	</v-dialog>
178		178
179	<v-layout wrap row>	179	<v-layout wrap row>
180	<v-flex xs12 sm12 md8>	180	<v-flex xs12 sm12 md8>
181	<v-container fluid grid-list-xl>	181	<v-container fluid grid-list-xl>
182	<!-- *** Total Students *** -->	182	<!-- *** Total Students *** -->
183	<v-layout wrap class v-if="$store.state.role != 'PARENT' ">	183	<v-layout wrap class v-if="$store.state.role != 'PARENT' ">
184	<v-flex xs12 sm12 md3>	184	<v-flex xs12 sm12 md3>
185	<router-link :to="{ name:'Students' }">	185	<router-link :to="{ name:'Students' }">
186	<v-card class="card pink-bgcolor">	186	<v-card class="card pink-bgcolor">
187	<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>	187	<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
188	<img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />	188	<img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
189	<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>	189	<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
190	</v-card>	190	</v-card>
191	</router-link>	191	</router-link>
192	</v-flex>	192	</v-flex>
193	<!-- *** Total Teachers*** -->	193	<!-- *** Total Teachers*** -->
194	<v-flex xs12 sm12 md3>	194	<v-flex xs12 sm12 md3>
195	<router-link :to="{ name:'Teachers' }">	195	<router-link :to="{ name:'Teachers' }">
196	<v-card flat class="card elevation-2 firozi-bgcolor">	196	<v-card flat class="card elevation-2 firozi-bgcolor">
197	<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>	197	<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
198	<img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />	198	<img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
199		199
200	<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>	200	<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
201	</v-card>	201	</v-card>
202	</router-link>	202	</router-link>
203	</v-flex>	203	</v-flex>
204	<!-- *** Total Parents *** -->	204	<!-- *** Total Parents *** -->
205	<v-flex xs12 sm12 md3>	205	<v-flex xs12 sm12 md3>
206	<router-link :to="{ name:'Parents' }">	206	<router-link :to="{ name:'Parents' }">
207	<v-card flat class="card yellow darken-3">	207	<v-card flat class="card yellow darken-3">
208	<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>	208	<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
209	<img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />	209	<img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
210	<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>	210	<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
211	</v-card>	211	</v-card>
212	</router-link>	212	</router-link>
213	</v-flex>	213	</v-flex>
214	<!-- *** Total Class*** -->	214	<!-- *** Total Class*** -->
215	<v-flex xs12 sm12 md3>	215	<v-flex xs12 sm12 md3>
216	<router-link :to="{ name:'Class' }">	216	<router-link :to="{ name:'Class' }">
217	<v-card flat class="card darkBlue-bgcolor">	217	<v-card flat class="card darkBlue-bgcolor">
218	<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>	218	<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
219	<img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />	219	<img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
220	<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>	220	<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
221	</v-card>	221	</v-card>
222	</router-link>	222	</router-link>
223	</v-flex>	223	</v-flex>
224	</v-layout>	224	</v-layout>
225		225
226	<p	226	<p
227	v-if="studentsData.length === 0 && role == 'PARENT'"	227	v-if="studentsData.length === 0 && role == 'PARENT'"
228	class="text-center title grey lighten-4 error--text"	228	class="text-center title grey lighten-4 error--text"
229	>You have no student registered with school</p>	229	>You have no student registered with school</p>
230	<!-- ACCOUNT -->	230	<!-- ACCOUNT -->
231	<v-layout v-if="role == 'SUPERADMIN'\|\| role == 'ADMIN'">	231	<v-layout v-if="role == 'SUPERADMIN'\|\| role == 'ADMIN'">
232	<v-flex xs12>	232	<v-flex xs12>
233	<v-card class="card mt-2 account-Card">	233	<v-card class="card mt-2 account-Card">
234	<h4>	234	<h4>
235	<b>Account</b>	235	<b>Account</b>
236	</h4>	236	</h4>
237	<v-layout wrap>	237	<v-layout wrap>
238	<v-flex xs12 sm12 md3>	238	<v-flex xs12 sm12 md3>
239	<v-list two-line>	239	<v-list two-line>
240	<template>	240	<template>
241	<v-list-tile>	241	<v-list-tile>
242	<v-list-tile-avatar>	242	<v-list-tile-avatar>
243	<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>	243	<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
244	</v-list-tile-avatar>	244	</v-list-tile-avatar>
245	<v-list-tile-content>	245	<v-list-tile-content>
246	<v-list-tile-title class="mt-2">	246	<v-list-tile-title class="mt-2">
247	<p class="subheading font-color">Fees</p>	247	<p class="subheading font-color">Fees</p>
248	</v-list-tile-title>	248	</v-list-tile-title>
249	<v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>	249	<v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
250	</v-list-tile-content>	250	</v-list-tile-content>
251	</v-list-tile>	251	</v-list-tile>
252	<v-list-tile>	252	<v-list-tile>
253	<v-list-tile-avatar>	253	<v-list-tile-avatar>
254	<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>	254	<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
255	</v-list-tile-avatar>	255	</v-list-tile-avatar>
256	<v-list-tile-content>	256	<v-list-tile-content>
257	<v-list-tile-title class="mt-2">	257	<v-list-tile-title class="mt-2">
258	<p class="subheading font-color">Collection</p>	258	<p class="subheading font-color">Collection</p>
259	</v-list-tile-title>	259	</v-list-tile-title>
260	<v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>	260	<v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
261	</v-list-tile-content>	261	</v-list-tile-content>
262	</v-list-tile>	262	</v-list-tile>
263	<v-list-tile>	263	<v-list-tile>
264	<v-list-tile-avatar>	264	<v-list-tile-avatar>
265	<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>	265	<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
266	</v-list-tile-avatar>	266	</v-list-tile-avatar>
267	<v-list-tile-content>	267	<v-list-tile-content>
268	<v-list-tile-title class="mt-2">	268	<v-list-tile-title class="mt-2">
269	<p class="subheading font-color">Expences</p>	269	<p class="subheading font-color">Expences</p>
270	</v-list-tile-title>	270	</v-list-tile-title>
271	<v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>	271	<v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
272	</v-list-tile-content>	272	</v-list-tile-content>
273	</v-list-tile>	273	</v-list-tile>
274	</template>	274	</template>
275	</v-list>	275	</v-list>
276	</v-flex>	276	</v-flex>
277	<v-flex xs12 sm12 md9 lg9>	277	<v-flex xs12 sm12 md9 lg9>
278	<div id="chart">	278	<div id="chart">
279	<div v-if="showChart">	279	<div v-if="showChart">
280	<apexchart	280	<apexchart
281	type="bar"	281	type="bar"
282	height="250"	282	height="250"
283	style="max-width: 800px !important"	283	style="max-width: 800px !important"
284	:options="chartOptions"	284	:options="chartOptions"
285	:series="series"	285	:series="series"
286	></apexchart>	286	></apexchart>
287	</div>	287	</div>
288	</div>	288	</div>
289	</v-flex>	289	</v-flex>
290	</v-layout>	290	</v-layout>
291	</v-card>	291	</v-card>
292	</v-flex>	292	</v-flex>
293	</v-layout>	293	</v-layout>
294		294
295	<!-- FOR ADMIN,TEACHER ROLE -->	295	<!-- FOR ADMIN,TEACHER ROLE -->
296	<v-layout row wrap v-if="role == 'ADMIN'\|\|role == 'TEACHER'">	296	<v-layout row wrap v-if="role == 'ADMIN'\|\|role == 'TEACHER'">
297	<!-- NOTICE -->	297	<!-- NOTICE -->
298	<v-flex xs12 sm6>	298	<v-flex xs12 sm6>
299	<v-card class="card">	299	<v-card class="card">
300	<v-container>	300	<v-container>
301	<v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>	301	<v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>
302		302
303	<v-data-table	303	<v-data-table
304	:items="noticeData"	304	:items="noticeData"
305	class="elevation-0"	305	class="elevation-0"
306	flat	306	flat
307	hide-actions	307	hide-actions
308	hide-headers	308	hide-headers
309	style="border-spacing: 0 !important;"	309	style="border-spacing: 0 !important;"
310	>	310	>
311	<template	311	<template
312	slot="items"	312	slot="items"
313	slot-scope="props"	313	slot-scope="props"
314	v-if="props.index < 5"	314	v-if="props.index < 5"
315	style="border-spacing: 0 !important;"	315	style="border-spacing: 0 !important;"
316	>	316	>
317	<tr class="td-notice">	317	<tr class="td-notice">
318	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	318	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
319	<td>	319	<td>
320	<span class="grey--text caption">{{ date(props.item.created) }}</span>	320	<span class="grey--text caption">{{ date(props.item.created) }}</span>
321	<br />	321	<br />
322	<span class="body-2">{{ props.item.title}}</span>	322	<span class="body-2">{{ props.item.title}}</span>
323	</td>	323	</td>
324	<!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->	324	<!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
325		325
326	<td class="text-xs-center">	326	<td class="text-xs-center">
327	<span>	327	<span>
328	<v-tooltip top>	328	<v-tooltip top>
329	<img	329	<img
330	slot="activator"	330	slot="activator"
331	style="cursor:pointer; width:25px; height:25px; "	331	style="cursor:pointer; width:25px; height:25px; "
332	@click="profile"	332	@click="profile"
333	src="/static/icon/view.png"	333	src="/static/icon/view.png"
334	/>	334	/>
335	<span>View</span>	335	<span>View</span>
336	</v-tooltip>	336	</v-tooltip>
337	</span>	337	</span>
338	</td>	338	</td>
339	</tr>	339	</tr>
340	</template>	340	</template>
341	</v-data-table>	341	</v-data-table>
342	</v-container>	342	</v-container>
343	</v-card>	343	</v-card>
344	</v-flex>	344	</v-flex>
345		345
346	<!-- SCHOOL EVENTS -->	346	<!-- SCHOOL EVENTS -->
347		347
348	<v-flex xs12 sm6>	348	<v-flex xs12 sm6>
349	<v-card class="card">	349	<v-card class="card">
350	<v-container>	350	<v-container>
351	<v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>	351	<v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
352	<div	352	<div
353	v-for="(schoolEvent,index) in schoolEvents"	353	v-for="(schoolEvent,index) in schoolEvents"
354	:key="schoolEvent.title"	354	:key="schoolEvent.title"
355	class="mt-2"	355	class="mt-2"
356	style="cursor: pointer;"	356	style="cursor: pointer;"
357	@click="seeEventDetails(schoolEvent,'schoolEvent')"	357	@click="seeEventDetails(schoolEvent,'schoolEvent')"
358	>	358	>
359	<!-- color dot-->	359	<!-- color dot-->
360	<span	360	<span
361	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"	361	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"
362	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"	362	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
363	></span>	363	></span>
364	<div style="display: inline-block;" class="ml-2">	364	<div style="display: inline-block;" class="ml-2">
365	<div>	365	<div>
366	<!-- date of event -->	366	<!-- date of event -->
367	<div	367	<div
368	class="grey--text lighten-1 caption"	368	class="grey--text lighten-1 caption"
369	v-if="schoolEvent.dateOfEvent"	369	v-if="schoolEvent.dateOfEvent"
370	>{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>	370	>{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
371	<!-- event title-->	371	<!-- event title-->
372	<div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>	372	<div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
373	</div>	373	</div>
374	</div>	374	</div>
375	</div>	375	</div>
376	<div v-if="schoolEvents.length == 0">	376	<div v-if="schoolEvents.length == 0">
377	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>	377	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>
378	</div>	378	</div>
379	</v-container>	379	</v-container>
380	</v-card>	380	</v-card>
381	</v-flex>	381	</v-flex>
382	</v-layout>	382	</v-layout>
383		383
384	<!-- FOR TEACHER ROLE -->	384	<!-- FOR TEACHER ROLE -->
385	<!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">	385	<!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
386	<v-layout>	386	<v-layout>
387	<v-flex xs6 sm6 md6>	387	<v-flex xs6 sm6 md6>
388	<h4 class="pa-3">	388	<h4 class="pa-3">
389	<b>Notice</b>	389	<b>Notice</b>
390	</h4>	390	</h4>
391	<v-data-table	391	<v-data-table
392	:items="noticeData"	392	:items="noticeData"
393	class="elevation-0"	393	class="elevation-0"
394	flat	394	flat
395	hide-actions	395	hide-actions
396	hide-headers	396	hide-headers
397	style="border-spacing: 0 !important;"	397	style="border-spacing: 0 !important;"
398	>	398	>
399	<template	399	<template
400	slot="items"	400	slot="items"
401	slot-scope="props"	401	slot-scope="props"
402	v-if="props.index < 5"	402	v-if="props.index < 5"
403	style="border-spacing: 0 !important;"	403	style="border-spacing: 0 !important;"
404	>	404	>
405	<tr class="td-notice">	405	<tr class="td-notice">
406	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	406	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
407	<td>	407	<td>
408	<span class="grey--text caption">{{ date(props.item.created) }}</span>	408	<span class="grey--text caption">{{ date(props.item.created) }}</span>
409	<br />	409	<br />
410	<span class="body-2">{{ props.item.title}}</span>	410	<span class="body-2">{{ props.item.title}}</span>
411	</td>	411	</td>
412	<td class="grey--text mt-2">{{ props.item.description}}</td>	412	<td class="grey--text mt-2">{{ props.item.description}}</td>
413		413
414	<td class="text-xs-center">	414	<td class="text-xs-center">
415	<span>	415	<span>
416	<v-tooltip top>	416	<v-tooltip top>
417	<img	417	<img
418	slot="activator"	418	slot="activator"
419	style="cursor:pointer; width:25px; height:25px; "	419	style="cursor:pointer; width:25px; height:25px; "
420	@click="profile"	420	@click="profile"
421	src="/static/icon/view.png"	421	src="/static/icon/view.png"
422	/>	422	/>
423	<span>View</span>	423	<span>View</span>
424	</v-tooltip>	424	</v-tooltip>
425	</span>	425	</span>
426	</td>	426	</td>
427	</tr>	427	</tr>
428	</template>	428	</template>
429	</v-data-table>	429	</v-data-table>
430	</v-flex>	430	</v-flex>
431		431
432	<v-flex xs6 sm6 md6>	432	<v-flex xs6 sm6 md6>
433	<v-card-text>	433	<v-card-text>
434	<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>	434	<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
435	<div	435	<div
436	v-for="(activity,index) in activityList"	436	v-for="(activity,index) in activityList"
437	:key="index"	437	:key="index"
438	class="mt-2"	438	class="mt-2"
439	style="cursor: pointer;"	439	style="cursor: pointer;"
440	@click="seeEventDetails(activity)"	440	@click="seeEventDetails(activity)"
441	>	441	>
442	<span	442	<span
443	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"	443	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"
444	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"	444	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
445	></span>	445	></span>
446	<div style="display: inline-block;" class="ml-2">	446	<div style="display: inline-block;" class="ml-2">
447	<div>	447	<div>
448	<div	448	<div
449	class="grey--text lighten-1 caption"	449	class="grey--text lighten-1 caption"
450	v-if="activity.dateOfEvent"	450	v-if="activity.dateOfEvent"
451	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>	451	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
452	<div class="body-2" v-if="activity.title">{{activity.title}}</div>	452	<div class="body-2" v-if="activity.title">{{activity.title}}</div>
453	</div>	453	</div>
454	</div>	454	</div>
455	</div>	455	</div>
456	<div v-if="activityList.length == 0">	456	<div v-if="activityList.length == 0">
457	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>	457	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>
458	</div>	458	</div>
459	</v-card-text>	459	</v-card-text>
460	</v-flex>	460	</v-flex>
461	</v-layout>	461	</v-layout>
462	</v-card>-->	462	</v-card>-->
463		463
464	<!-- ROLE == PARENT, MY COURSES -->	464	<!-- ROLE == PARENT, MY COURSES -->
465	<v-layout v-if="role == 'PARENT'">	465	<v-layout v-if="role == 'PARENT'">
466	<v-flex xs12>	466	<v-flex xs12>
467	<v-card class="elevation-0 account-Card">	467	<v-card class="elevation-0 account-Card">
468	<v-container>	468	<v-container>
469	<v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>	469	<v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>
470	<v-layout wrap>	470	<v-layout wrap>
471	<v-flex xs12 sm12>	471	<v-flex xs12 sm12>
472	<v-list two-line>	472	<v-list two-line>
473	<template>	473	<template>
474	<v-list-tile v-for="(course,i) in courseData" :key="i">	474	<v-list-tile v-for="(course,i) in courseData" :key="i">
475	<v-list-tile-avatar>	475	<v-list-tile-avatar>
476	<!-- <v-icon	476	<!-- <v-icon
477	class="account-circle darkBlue-color"	477	class="account-circle darkBlue-color"
478	style="cursor: pointer;"	478	style="cursor: pointer;"
479	@click="routeToCourseDetails(course._id)"	479	@click="routeToCourseDetails(course._id)"
480	>panorama_fish_eye</v-icon>-->	480	>panorama_fish_eye</v-icon>-->
481	<span>	481	<span>
482	<v-tooltip top>	482	<v-tooltip top>
483	<img	483	<img
484	slot="activator"	484	slot="activator"
485	style="cursor:pointer; width:25px; height:25px; "	485	style="cursor:pointer; width:25px; height:25px; "
486	src="/static/icon/view.png"	486	src="/static/icon/view.png"
487	@click="routeToCourseDetails(course._id)"	487	@click="routeToCourseDetails(course._id)"
488	/>	488	/>
489	<span>View</span>	489	<span>View</span>
490	</v-tooltip>	490	</v-tooltip>
491	</span>	491	</span>
492	</v-list-tile-avatar>	492	</v-list-tile-avatar>
493	<v-list-tile-content>	493	<v-list-tile-content>
494	<v-list-tile-title	494	<v-list-tile-title
495	style="cursor: pointer;"	495	style="cursor: pointer;"
496	@click="routeToCourseDetails(course._id)"	496	@click="routeToCourseDetails(course._id)"
497	>{{ course.courseName }}</v-list-tile-title>	497	>{{ course.courseName }}</v-list-tile-title>
498	</v-list-tile-content>	498	</v-list-tile-content>
499	</v-list-tile>	499	</v-list-tile>
500	</template>	500	</template>
501	</v-list>	501	</v-list>
502	</v-flex>	502	</v-flex>
503	</v-layout>	503	</v-layout>
504	</v-container>	504	</v-container>
505	</v-card>	505	</v-card>
506	</v-flex>	506	</v-flex>
507	</v-layout>	507	</v-layout>
508		508
509	<v-layout row wrap v-if="role == 'PARENT'">	509	<v-layout row wrap v-if="role == 'PARENT'">
510	<!-- LATEST ANNOUNCEMENTSS , IF ROLE == PARENT -->	510	<!-- LATEST ANNOUNCEMENTSS , IF ROLE == PARENT -->
511	<v-flex xs6>	511	<v-flex xs6>
512	<v-card class="card">	512	<v-card class="card">
513	<v-container>	513	<v-container>
514	<v-card-title	514	<v-card-title
515	class="justify-center subheading font-weight-bold"	515	class="justify-center subheading font-weight-bold"
516	>Latest Announcements</v-card-title>	516	>Latest Announcements</v-card-title>
517		517
518	<v-data-table	518	<v-data-table
519	:items="annoucementData"	519	:items="annoucementData"
520	class="elevation-0"	520	class="elevation-0"
521	flat	521	flat
522	hide-actions	522	hide-actions
523	hide-headers	523	hide-headers
524	style="border-spacing: 0 !important;"	524	style="border-spacing: 0 !important;"
525	>	525	>
526	<template	526	<template
527	slot="items"	527	slot="items"
528	slot-scope="props"	528	slot-scope="props"
529	v-if="props.index < 5"	529	v-if="props.index < 5"
530	style="border-spacing: 0 !important;"	530	style="border-spacing: 0 !important;"
531	>	531	>
532	<tr class="td-notice">	532	<tr class="td-notice">
533	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	533	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
534	<td>	534	<td>
535	<span class="grey--text caption">{{ date(props.item.created) }}</span>	535	<span class="grey--text caption">{{ date(props.item.created) }}</span>
536	<br />	536	<br />
537	<span class="body-2">{{ props.item.discussionType}}</span>	537	<span class="body-2">{{ props.item.discussionType}}</span>
538	</td>	538	</td>
539	<td class="text-xs-center">	539	<td class="text-xs-center">
540	<span>	540	<span>
541	<v-tooltip top>	541	<v-tooltip top>
542	<img	542	<img
543	slot="activator"	543	slot="activator"
544	style="cursor:pointer; width:25px; height:25px; "	544	style="cursor:pointer; width:25px; height:25px; "
545	src="/static/icon/view.png"	545	src="/static/icon/view.png"
546	/>	546	/>
547	<span>View</span>	547	<span>View</span>
548	</v-tooltip>	548	</v-tooltip>
549	</span>	549	</span>
550	</td>	550	</td>
551	</tr>	551	</tr>
552	</template>	552	</template>
553	</v-data-table>	553	</v-data-table>
554	</v-container>	554	</v-container>
555	</v-card>	555	</v-card>
556	</v-flex>	556	</v-flex>
557	<!-- IF ROLE == PARENT, SCHOOL EVENTS -->	557	<!-- IF ROLE == PARENT, SCHOOL EVENTS -->
558	<v-flex xs6>	558	<v-flex xs6>
559	<v-card class="card">	559	<v-card class="card">
560	<v-container>	560	<v-container>
561	<v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>	561	<v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
562	<div	562	<div
563	v-for="(schoolEvent,index) in schoolEvents"	563	v-for="(schoolEvent,index) in schoolEvents"
564	:key="schoolEvent.title"	564	:key="schoolEvent.title"
565	class="mt-2"	565	class="mt-2"
566	style="cursor: pointer;"	566	style="cursor: pointer;"
567	@click="seeEventDetails(schoolEvent,'schoolEvent')"	567	@click="seeEventDetails(schoolEvent,'schoolEvent')"
568	>	568	>
569	<!-- color dot-->	569	<!-- color dot-->
570	<span	570	<span
571	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"	571	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"
572	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"	572	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
573	></span>	573	></span>
574	<div style="display: inline-block;" class="ml-2">	574	<div style="display: inline-block;" class="ml-2">
575	<div>	575	<div>
576	<!-- date of event -->	576	<!-- date of event -->
577	<div	577	<div
578	class="grey--text lighten-1 caption"	578	class="grey--text lighten-1 caption"
579	v-if="schoolEvent.dateOfEvent"	579	v-if="schoolEvent.dateOfEvent"
580	>{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>	580	>{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
581	<!-- event title-->	581	<!-- event title-->
582	<div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>	582	<div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
583	</div>	583	</div>
584	</div>	584	</div>
585	</div>	585	</div>
586	<div v-if="schoolEvents.length == 0">	586	<div v-if="schoolEvents.length == 0">
587	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>	587	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>
588	</div>	588	</div>
589	</v-container>	589	</v-container>
590	</v-card>	590	</v-card>
591	</v-flex>	591	</v-flex>
592	<!-- ONLINE USER , IF ROLE == PARENT -->	592	<!-- ONLINE USER , IF ROLE == PARENT -->
593	<!-- <v-flex xs6>	593	<!-- <v-flex xs6>
594	<v-card class="card">	594	<v-card class="card">
595	<v-container>	595	<v-container>
596	<v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>	596	<v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>
597		597
598	<v-data-table	598	<v-data-table
599	:items="onlineUser"	599	:items="onlineUser"
600	class="elevation-0"	600	class="elevation-0"
601	flat	601	flat
602	hide-actions	602	hide-actions
603	hide-headers	603	hide-headers
604	style="border-spacing: 0 !important;"	604	style="border-spacing: 0 !important;"
605	>	605	>
606	<template	606	<template
607	slot="items"	607	slot="items"
608	slot-scope="props"	608	slot-scope="props"
609	v-if="props.index < 5"	609	v-if="props.index < 5"
610	style="border-spacing: 0 !important;"	610	style="border-spacing: 0 !important;"
611	>	611	>
612	<tr class="td-notice">	612	<tr class="td-notice">
613	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	613	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
614	<td>	614	<td>
615	<span class="body-2">{{ props.item.user }}</span>	615	<span class="body-2">{{ props.item.user }}</span>
616	</td>	616	</td>
617	<td class="text-xs-center">	617	<td class="text-xs-center">
618	<span>	618	<span>
619	<v-tooltip top>	619	<v-tooltip top>
620	<img	620	<img
621	slot="activator"	621	slot="activator"
622	style="cursor:pointer; width:25px; height:25px; "	622	style="cursor:pointer; width:25px; height:25px; "
623	src="/static/icon/view.png"	623	src="/static/icon/view.png"
624	/>	624	/>
625	<span>View</span>	625	<span>View</span>
626	</v-tooltip>	626	</v-tooltip>
627	</span>	627	</span>
628	</td>	628	</td>
629	</tr>	629	</tr>
630	</template>	630	</template>
631	</v-data-table>	631	</v-data-table>
632	</v-container>	632	</v-container>
633	</v-card>	633	</v-card>
634	</v-flex> -->	634	</v-flex>-->
635	</v-layout>	635	</v-layout>
636	</v-container>	636	</v-container>
637	</v-flex>	637	</v-flex>
638	<v-spacer></v-spacer>	638	<v-spacer></v-spacer>
639	<!-- SIDE BAR -->	639	<!-- SIDE BAR -->
640	<v-flex xs12 sm12 md4>	640	<v-flex xs12 sm12 md4>
641	<v-card height="100%" class="elevation-0 mt-3 profileDasboard">	641	<v-card height="100%" class="elevation-0 mt-3 profileDasboard">
642	<v-card-text class="px-2">	642	<v-card-text class="px-2">
643	<h4 class="text-xs-center py-3">	643	<h4 class="text-xs-center py-3">
644	<b>Profile</b>	644	<b>Profile</b>
645	</h4>	645	</h4>
646	<v-flex xs12 class="py-3">	646	<v-flex xs12 class="py-3">
647	<v-layout wrap>	647	<v-layout wrap>
648	<v-flex xs12 sm12 md4>	648	<v-flex xs12 sm12 md4>
649	<img	649	<img
650	src="/static/icon/user.png"	650	src="/static/icon/user.png"
651	v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"	651	v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"
652	width="80"	652	width="80"
653	/>	653	/>
654	<img	654	<img
655	:src="userData.profilePicUrl"	655	:src="userData.profilePicUrl"
656	onerror="this.src='/static/icon/user.png';"	656	onerror="this.src='/static/icon/user.png';"
657	v-if="userData.profilePicUrl"	657	v-if="userData.profilePicUrl"
658	width="80"	658	width="80"
659	/>	659	/>
660	<img	660	<img
661	:src="userData.schoolLogoUrl"	661	:src="userData.schoolLogoUrl"
662	onerror="this.src='/static/icon/user.png';"	662	onerror="this.src='/static/icon/user.png';"
663	v-if="userData.schoolLogoUrl"	663	v-if="userData.schoolLogoUrl"
664	width="80"	664	width="80"
665	/>	665	/>
666	</v-flex>	666	</v-flex>
667	<v-flex xs12 sm12 md6>	667	<v-flex xs12 sm12 md6>
668	<p class="mb-0 body-1">	668	<p class="mb-0 body-1">
669	<i>{{ userData.name }}</i>	669	<i>{{ userData.name }}</i>
670	</p>	670	</p>
671	<p class="mb-0 caption grey--text">{{ userData.email }}</p>	671	<p class="mb-0 caption grey--text">{{ userData.email }}</p>
672	<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>	672	<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
673	<address class="caption grey--text mb-3">{{ userData.address }}</address>	673	<address class="caption grey--text mb-3">{{ userData.address }}</address>
674	</v-flex>	674	</v-flex>
675	</v-layout>	675	</v-layout>
676	</v-flex>	676	</v-flex>
677	<hr />	677	<hr />
678	<div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>	678	<div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
679		679
680	<vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>	680	<vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
681		681
682	<!-- MEETING EVENTS -->	682	<!-- MEETING EVENTS -->
683	<!-- IF ROLE IS ADMIN -->	683	<!-- IF ROLE IS ADMIN -->
684	<v-card class="my-3 elevation-0">	684	<v-card class="my-3 elevation-0">
685	<v-card-text v-if="$store.state.role === 'ADMIN' ">	685	<v-card-text v-if="$store.state.role === 'ADMIN' ">
686	<!-- MEETING EVENTS -->	686	<!-- MEETING EVENTS -->
687	<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>	687	<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
688	<div	688	<div
689	v-for="(activity,index) in activityList"	689	v-for="(activity,index) in activityList"
690	:key="index"	690	:key="index"
691	class="mt-2"	691	class="mt-2"
692	style="cursor: pointer;"	692	style="cursor: pointer;"
693	@click="seeEventDetails(activity)"	693	@click="seeEventDetails(activity)"
694	>	694	>
695	<span	695	<span
696	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"	696	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"
697	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"	697	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
698	></span>	698	></span>
699	<div style="display: inline-block;" class="ml-2">	699	<div style="display: inline-block;" class="ml-2">
700	<div>	700	<div>
701	<div	701	<div
702	class="grey--text lighten-1 caption"	702	class="grey--text lighten-1 caption"
703	v-if="activity.dateOfEvent"	703	v-if="activity.dateOfEvent"
704	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>	704	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
705	<div class="body-1" v-if="activity.title">{{activity.title}}</div>	705	<div class="body-1" v-if="activity.title">{{activity.title}}</div>
706	</div>	706	</div>
707	</div>	707	</div>
708	</div>	708	</div>
709	<div v-if="activityList.length == 0">	709	<div v-if="activityList.length == 0">
710	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>	710	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>
711	</div>	711	</div>
712	</v-card-text>	712	</v-card-text>
713		713
714	<!-- ROLE IS NOT ADMIN -->	714	<!-- ROLE IS NOT ADMIN -->
715	<v-card-text v-if="$store.state.role != 'ADMIN'">	715	<v-card-text v-if="$store.state.role != 'ADMIN'">
716	<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>	716	<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
717	<div	717	<div
718	v-for="(activity,index) in activityList"	718	v-for="(activity,index) in activityList"
719	:key="index"	719	:key="index"
720	class="mt-2"	720	class="mt-2"
721	style="cursor: pointer;"	721	style="cursor: pointer;"
722	@click="seeEventDetails(activity)"	722	@click="seeEventDetails(activity)"
723	>	723	>
724	<span	724	<span
725	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"	725	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"
726	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"	726	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
727	></span>	727	></span>
728	<div style="display: inline-block;" class="ml-2">	728	<div style="display: inline-block;" class="ml-2">
729	<!-- MEETING EVENTS FOR PARENT -->	729	<!-- MEETING EVENTS FOR PARENT -->
730	<div v-if="$store.state.role === 'PARENT' ">	730	<div v-if="$store.state.role === 'PARENT' ">
731	<div	731	<div
732	class="grey--text lighten-1 caption"	732	class="grey--text lighten-1 caption"
733	v-if="activity.meetingEvent"	733	v-if="activity.meetingEvent"
734	>{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>	734	>{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
735	<div	735	<div
736	class="body-2"	736	class="body-2"
737	v-if="activity.meetingEvent"	737	v-if="activity.meetingEvent"
738	>{{activity.meetingEvent.title}}</div>	738	>{{activity.meetingEvent.title}}</div>
739	</div>	739	</div>
740		740
741	<!-- MEETING EVENTS FOR TEACHER -->	741	<!-- MEETING EVENTS FOR TEACHER -->
742	<div v-if="role === 'TEACHER'">	742	<div v-if="role === 'TEACHER'">
743	<div	743	<div
744	class="grey--text lighten-1 caption"	744	class="grey--text lighten-1 caption"
745	v-if="activity.dateOfEvent"	745	v-if="activity.dateOfEvent"
746	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>	746	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
747	<div class="body-2" v-if="activity.title">{{activity.title}}</div>	747	<div class="body-2" v-if="activity.title">{{activity.title}}</div>
748	</div>	748	</div>
749	</div>	749	</div>
750	<div v-if="activityList.length == 0">	750	<div v-if="activityList.length == 0">
751	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>	751	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>
752	</div>	752	</div>
753	</div>	753	</div>
754	</v-card-text>	754	</v-card-text>
755	</v-card>	755	</v-card>
756	</v-card-text>	756	</v-card-text>
757	</v-card>	757	</v-card>
758	</v-flex>	758	</v-flex>
759	</v-layout>	759	</v-layout>
760		760
761	<v-dialog v-model="dialog" max-width="500" persistent>	761	<v-dialog v-model="dialog" max-width="500" persistent>
762	<v-card color="grey lighten-4" flat>	762	<v-card color="grey lighten-4" flat>
763	<v-toolbar dark color="fixcolors">	763	<v-toolbar dark color="fixcolors">
764	<v-spacer></v-spacer>	764	<v-spacer></v-spacer>
765	<v-btn icon @click="dialog= false">	765	<v-btn icon @click="dialog= false">
766	<v-icon>close</v-icon>	766	<v-icon>close</v-icon>
767	</v-btn>	767	</v-btn>
768	</v-toolbar>	768	</v-toolbar>
769	<v-flex class="py-4">	769	<v-flex class="py-4">
770	<v-list-tile>	770	<v-list-tile>
771	<v-list-tile-action>	771	<v-list-tile-action>
772	<v-icon>edit</v-icon>	772	<v-icon>edit</v-icon>
773	</v-list-tile-action>	773	</v-list-tile-action>
774	<v-list-tile-content>	774	<v-list-tile-content>
775	<v-list-tile-title>{{ selected.title }}</v-list-tile-title>	775	<v-list-tile-title>{{ selected.title }}</v-list-tile-title>
776	</v-list-tile-content>	776	</v-list-tile-content>
777	</v-list-tile>	777	</v-list-tile>
778	<v-list-tile>	778	<v-list-tile>
779	<v-list-tile-action>	779	<v-list-tile-action>
780	<v-icon>access_time</v-icon>	780	<v-icon>access_time</v-icon>
781	</v-list-tile-action>	781	</v-list-tile-action>
782	<v-list-tile-content>	782	<v-list-tile-content>
783	<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>	783	<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
784	</v-list-tile-content>	784	</v-list-tile-content>
785	</v-list-tile>	785	</v-list-tile>
786	</v-flex>	786	</v-flex>
787	</v-card>	787	</v-card>
788	</v-dialog>	788	</v-dialog>
789	</v-app>	789	</v-app>
790	</template>	790	</template>
791		791
792	<script>	792	<script>
793	import http from "@/Services/http.js";	793	import http from "@/Services/http.js";
794	import moment from "moment";	794	import moment from "moment";
795	import AllApiCalls from "@/Services/AllApiCalls.js";	795	import AllApiCalls from "@/Services/AllApiCalls.js";
796	// import { FunctionalCalendar } from "vue-functional-calendar";	796	// import { FunctionalCalendar } from "vue-functional-calendar";
797		797
798	export default {	798	export default {
799	components: {	799	components: {
800	// FunctionalCalendar	800	// FunctionalCalendar
801	},	801	},
802	mixins: [AllApiCalls],	802	mixins: [AllApiCalls],
803	data() {	803	data() {
804	return {	804	return {
805	// data: {	805	// data: {
806	// clieckedToday: false	806	// clieckedToday: false
807	// },	807	// },
808	// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],	808	// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
809	// calendarData: {},	809	// calendarData: {},
810	// calendar: {},	810	// calendar: {},
811		811
812	// DIALOG BOX EVENT DETAILS	812	// DIALOG BOX EVENT DETAILS
813	tabs: [	813	tabs: [
814	{ name: "School Events", icon: "mdi-account" },	814	{ name: "School Events", icon: "mdi-account" },
815	{ name: "Meeting Events", icon: "mdi-account-outline" },	815	{ name: "Meeting Events", icon: "mdi-account-outline" },
816	],	816	],
817	viewEventDetails: false,	817	viewEventDetails: false,
818	active: 0,	818	active: 0,
819	particularEvent: [],	819	particularEvent: [],
820	displayEventsList: [],	820	displayEventsList: [],
821	dialogSchoolEvents: [],	821	dialogSchoolEvents: [],
822	dialogMeetingEvents: [],	822	dialogMeetingEvents: [],
823		823
824	// CALENDER	824	// CALENDER
825	moment: moment,	825	moment: moment,
826	activityEvents: [],	826	activityEvents: [],
827	onlineUser: [	827	onlineUser: [
828	{	828	{
829	user: "Student Demo",	829	user: "Student Demo",
830	},	830	},
831	{	831	{
832	user: "Teacher Demo",	832	user: "Teacher Demo",
833	},	833	},
834	{	834	{
835	user: "Priyansh Gupta",	835	user: "Priyansh Gupta",
836	},	836	},
837	{	837	{
838	user: "Gaurav Aggarwal",	838	user: "Gaurav Aggarwal",
839	},	839	},
840	{	840	{
841	user: "Approve Arorra",	841	user: "Approve Arorra",
842	},	842	},
843	],	843	],
844	showLoader: false,	844	showLoader: false,
845	calendarData: {},	845	calendarData: {},
846	dialog: false,	846	dialog: false,
847	dialogNotice: false,	847	dialogNotice: false,
848	HolidaysList: [],	848	HolidaysList: [],
849	EventsList: [],	849	EventsList: [],
850	events: [],	850	events: [],
851	config: {	851	config: {
852	eventClick: (event) => {	852	eventClick: (event) => {
853	this.selected = event;	853	this.selected = event;
854	this.dialog = true;	854	this.dialog = true;
855	},	855	},
856	},	856	},
857	selected: {},	857	selected: {},
858	barGraph: [],	858	barGraph: [],
859	// notice: {},	859	// notice: {},
860	userData: {},	860	userData: {},
861	dated: new Date(2018, 0, 9),	861	dated: new Date(2018, 0, 9),
862	userList: [],	862	userList: [],
863	sectionList: [],	863	sectionList: [],
864	students: "",	864	students: "",
865	parents: "",	865	parents: "",
866	teachers: "",	866	teachers: "",
867	classes: "",	867	classes: "",
868	noticeData: [],	868	noticeData: [],
869	expenseData: [],	869	expenseData: [],
870	feeData: [],	870	feeData: [],
871	collectionData: [],	871	collectionData: [],
872	courseData: [],	872	courseData: [],
873	studentsData: [],	873	studentsData: [],
874	annoucementData: [],	874	annoucementData: [],
875	role: "",	875	role: "",
876	attrs: [	876	attrs: [
877	{	877	{
878	key: "today",	878	key: "today",
879	highlight: true,	879	highlight: true,
880	dates: new Date(),	880	dates: new Date(),
881	},	881	},
882	],	882	],
883	drawer: true,	883	drawer: true,
884	items: [	884	items: [
885	{ title: "Home", icon: "dashboard" },	885	{ title: "Home", icon: "dashboard" },
886	{ title: "About", icon: "question_answer" },	886	{ title: "About", icon: "question_answer" },
887	],	887	],
888	right: null,	888	right: null,
889		889
890	series: [	890	series: [
891	{	891	{
892	name: "Total",	892	name: "Total",
893	data: [],	893	data: [],
894	},	894	},
895	],	895	],
896	showChart: false,	896	showChart: false,
897	chartOptions: {	897	chartOptions: {
898	chart: {	898	chart: {
899	type: "bar",	899	type: "bar",
900	height: 150,	900	height: 150,
901	stacked: true,	901	stacked: true,
902	// animations: {	902	// animations: {
903	// enabled: true,	903	// enabled: true,
904	// easing: "easeinout",	904	// easing: "easeinout",
905	// speed: 1200,	905	// speed: 1200,
906	// animateGradually: {	906	// animateGradually: {
907	// enabled: true,	907	// enabled: true,
908	// delay: 450	908	// delay: 450
909	// },	909	// },
910	// dynamicAnimation: {	910	// dynamicAnimation: {
911	// enabled: true,	911	// enabled: true,
912	// speed: 450	912	// speed: 450
913	// }	913	// }
914	// }	914	// }
915	},	915	},
916	plotOptions: {	916	plotOptions: {
917	bar: {	917	bar: {
918	horizontal: false,	918	horizontal: false,
919	columnWidth: "25%",	919	columnWidth: "25%",
920	// endingShape: "rounded",	920	// endingShape: "rounded",
921	distributed: true,	921	distributed: true,
922	},	922	},
923	},	923	},
924	responsive: [	924	responsive: [
925	{	925	{
926	breakpoint: 480,	926	breakpoint: 480,
927	options: {	927	options: {
928	legend: {	928	legend: {
929	position: "bottom",	929	position: "bottom",
930	offsetX: -10,	930	offsetX: -10,
931	offsetY: 0,	931	offsetY: 0,
932	},	932	},
933	},	933	},
934	},	934	},
935	],	935	],
936	legend: {	936	legend: {
937	show: false,	937	show: false,
938	},	938	},
939	colors: ["#7852cc", "#f9a825", "#ff8a89"],	939	colors: ["#7852cc", "#f9a825", "#ff8a89"],
940	dataLabels: {	940	dataLabels: {
941	enabled: false,	941	enabled: false,
942	},	942	},
943	stroke: {	943	stroke: {
944	show: true,	944	show: true,
945	width: 2,	945	width: 2,
946	colors: ["transparent"],	946	colors: ["transparent"],
947	},	947	},
948	xaxis: {	948	xaxis: {
949	categories: ["Fee", "Collections", "Expences"],	949	categories: ["Fee", "Collections", "Expences"],
950	},	950	},
951	yaxis: {	951	yaxis: {
952	title: {	952	title: {
953	text: "",	953	text: "",
954	},	954	},
955	},	955	},
956	fill: {	956	fill: {
957	opacity: 1,	957	opacity: 1,
958	},	958	},
959	tooltip: {	959	tooltip: {
960	y: {	960	y: {
961	formatter: function (val, opts) {	961	formatter: function (val, opts) {
962	return "" + val + " ";	962	return "" + val + " ";
963	},	963	},
964	},	964	},
965	},	965	},
966	},	966	},
967		967
968	// LATEST ACTIVITY	968	// LATEST ACTIVITY
969	colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],	969	colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
970	activityList: [],	970	activityList: [],
971	};	971	};
972	},	972	},
973		973
974	methods: {	974	methods: {
975	test(e) {	975	test(e) {
976	// console.log(" test - ", e);	976	// console.log(" test - ", e);
977	},	977	},
978		978
979	/WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX /	979	/WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX /
980	async handleDayChanged(e) {	980	async handleDayChanged(e) {
981	// console.log("event calender - ", e);	981	// console.log("event calender - ", e);
982	/the list of events that will be used in dialog box to display events /	982	/the list of events that will be used in dialog box to display events /
983		983
984	this.dialogMeetingEvents = [];	984	this.dialogMeetingEvents = [];
985	this.dialogSchoolEvents = [];	985	this.dialogSchoolEvents = [];
986		986
987	for (var i = 0; i < e.events.length; i++) {	987	for (var i = 0; i < e.events.length; i++) {
988	if (e.events[i].eventType == "meetingEvent") {	988	if (e.events[i].eventType == "meetingEvent") {
989	let meetingEventResponse = await this.getParticularMeetingEvent({	989	let meetingEventResponse = await this.getParticularMeetingEvent({
990	meetingEventId: e.events[i]._id,	990	meetingEventId: e.events[i]._id,
991	});	991	});
992	this.dialogMeetingEvents.push(meetingEventResponse.data.data);	992	this.dialogMeetingEvents.push(meetingEventResponse.data.data);
993	}	993	}
994	if (e.events[i].eventType == "schoolEvent") {	994	if (e.events[i].eventType == "schoolEvent") {
995	let schoolEventResponse = await this.getParticularSchoolEvent({	995	let schoolEventResponse = await this.getParticularSchoolEvent({
996	schoolEventId: e.events[i]._id,	996	schoolEventId: e.events[i]._id,
997	});	997	});
998	this.dialogSchoolEvents.push(schoolEventResponse.data.data);	998	this.dialogSchoolEvents.push(schoolEventResponse.data.data);
999	}	999	}
1000	}	1000	}
1001	/* Opens the dialog box */	1001	/* Opens the dialog box */
1002	this.viewEventDetails = true;	1002	this.viewEventDetails = true;
1003	},	1003	},
1004		1004
1005	/* see meeting events, school events individually (when calender is not clicked) */	1005	/* see meeting events, school events individually (when calender is not clicked) */
1006	async seeEventDetails(activity, message) {	1006	async seeEventDetails(activity, message) {
1007	// if (this.$store.state.role === "TEACHER") {	1007	// if (this.$store.state.role === "TEACHER") {
1008	// let response = await this.getParticularMeetingEvent({	1008	// let response = await this.getParticularMeetingEvent({
1009	// meetingEventId: activity._id,	1009	// meetingEventId: activity._id,
1010	// });	1010	// });
1011	// this.displayEventsList = [];	1011	// this.displayEventsList = [];
1012	// this.displayEventsList.push(response.data.data);	1012	// this.displayEventsList.push(response.data.data);
1013	// this.viewEventDetails = true;	1013	// this.viewEventDetails = true;
1014	// }	1014	// }
1015	if (this.$store.state.role === "PARENT") {	1015	if (this.$store.state.role === "PARENT") {
1016	if (message == "schoolEvent") {	1016	if (message == "schoolEvent") {
1017	let response = await this.getParticularSchoolEvent({	1017	let response = await this.getParticularSchoolEvent({
1018	schoolEventId: activity._id,	1018	schoolEventId: activity._id,
1019	});	1019	});
1020	this.displayEventsList = [];	1020	this.displayEventsList = [];
1021	this.displayEventsList.push(response.data.data);	1021	this.displayEventsList.push(response.data.data);
1022	} else {	1022	} else {
1023	let response = await this.getParticularMeetingEvent({	1023	let response = await this.getParticularMeetingEvent({
1024	meetingEventId: activity.meetingEvent._id,	1024	meetingEventId: activity.meetingEvent._id,
1025	});	1025	});
1026	this.displayEventsList = [];	1026	this.displayEventsList = [];
1027	this.displayEventsList.push(response.data.data);	1027	this.displayEventsList.push(response.data.data);
1028	}	1028	}
1029	this.viewEventDetails = true;	1029	this.viewEventDetails = true;
1030	}	1030	}
1031	if (	1031	if (
1032	this.$store.state.role === "ADMIN" \|\|	1032	this.$store.state.role === "ADMIN" \|\|
1033	this.$store.state.role === "TEACHER"	1033	this.$store.state.role === "TEACHER"
1034	) {	1034	) {
1035	if (message == "schoolEvent") {	1035	if (message == "schoolEvent") {
1036	let response = await this.getParticularSchoolEvent({	1036	let response = await this.getParticularSchoolEvent({
1037	schoolEventId: activity._id,	1037	schoolEventId: activity._id,
1038	});	1038	});
1039	this.displayEventsList = [];	1039	this.displayEventsList = [];
1040	this.displayEventsList.push(response.data.data);	1040	this.displayEventsList.push(response.data.data);
1041	} else {	1041	} else {
1042	let response = await this.getParticularMeetingEvent({	1042	let response = await this.getParticularMeetingEvent({
1043	meetingEventId: activity._id,	1043	meetingEventId: activity._id,
1044	});	1044	});
1045	this.displayEventsList = [];	1045	this.displayEventsList = [];
1046	this.displayEventsList.push(response.data.data);	1046	this.displayEventsList.push(response.data.data);
1047	}	1047	}
1048	this.viewEventDetails = true;	1048	this.viewEventDetails = true;
1049	}	1049	}
1050	},	1050	},
1051	async routeToCourseDetails(courseId) {	1051	async routeToCourseDetails(courseId) {
1052	/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/	1052	/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
1053	let response = await this.getParticularCourseDetail(courseId);	1053	let response = await this.getParticularCourseDetail(courseId);
1054		1054
1055	/* If the response is null then dont route */	1055	/* If the response is null then dont route */
1056	if (response.data.data.length > 0) {	1056	if (response.data.data.length > 0) {
1057	this.$router.push({	1057	this.$router.push({
1058	name: "Course Details",	1058	name: "Course Details",
1059	query: { courseId: courseId },	1059	query: { courseId: courseId },
1060	});	1060	});
1061	} else {	1061	} else {
1062	this.seeSnackbar("No Data Available", "warning");	1062	this.seeSnackbar("No Data Available", "warning");
1063	}	1063	}
1064	},	1064	},
1065		1065
1066	closeNotice() {	1066	closeNotice() {
1067	this.dialogNotice = false;	1067	this.dialogNotice = false;
1068	},	1068	},
1069	profile() {	1069	profile() {
1070	// this.editedIndex = this.desserts.indexOf(item);	1070	// this.editedIndex = this.desserts.indexOf(item);
1071	// this.notice = Object.assign({}, item);	1071	// this.notice = Object.assign({}, item);
1072	// this.dialogNotice = true;	1072	// this.dialogNotice = true;
1073	this.$router.push("/noticeBoard");	1073	this.$router.push("/noticeBoard");
1074	},	1074	},
1075	date: function (date) {	1075	date: function (date) {
1076	return moment(date).format("MMMM DD, YYYY HH:mm");	1076	return moment(date).format("MMMM DD, YYYY HH:mm");
1077	},	1077	},
1078	activityDate(date) {	1078	activityDate(date) {
1079	return moment(date).format("MMMM DD, YYYY");	1079	return moment(date).format("MMMM DD, YYYY");
1080	},	1080	},
1081	refreshEvents() {	1081	refreshEvents() {
1082	this.$refs.calendar.$emit("refetch-events");	1082	this.$refs.calendar.$emit("refetch-events");
1083	},	1083	},
1084	removeEvent() {	1084	removeEvent() {
1085	this.$refs.calendar.$emit("remove-event", this.selected);	1085	this.$refs.calendar.$emit("remove-event", this.selected);
1086	this.selected = {};	1086	this.selected = {};
1087	},	1087	},
1088	eventSelected(event) {	1088	eventSelected(event) {
1089	this.selected = event;	1089	this.selected = event;
1090	},	1090	},
1091	// eventDropStart: function(event) {	1091	// eventDropStart: function(event) {
1092	// event.editable = false;	1092	// event.editable = false;
1093	// },	1093	// },
1094	eventCreated(...test) {	1094	eventCreated(...test) {
1095	// console.log(test);	1095	// console.log(test);
1096	},	1096	},
1097	getStudents() {	1097	getStudents() {
1098	http()	1098	http()
1099	.get("/getStudentsList")	1099	.get("/getStudentsList")
1100	.then((response) => {	1100	.then((response) => {
1101	this.students = response.data.data;	1101	this.students = response.data.data;
1102	this.showLoader = false;	1102	this.showLoader = false;
1103	})	1103	})
1104	.catch((error) => {	1104	.catch((error) => {
1105	// console.log("err====>", err);	1105	// console.log("err====>", err);
1106	this.showLoader = false;	1106	this.showLoader = false;
1107	if (error.response.status === 401) {	1107	if (error.response.status === 401) {
1108	this.$router.replace({ path: "/" });	1108	this.$router.replace({ path: "/" });
1109	this.$store.dispatch("setToken", null);	1109	this.$store.dispatch("setToken", null);
1110	this.$store.dispatch("Id", null);	1110	this.$store.dispatch("Id", null);
1111	}	1111	}
1112	});	1112	});
1113	},	1113	},
1114	getParents() {	1114	getParents() {
1115	http()	1115	http()
1116	.get("/getParentsList")	1116	.get("/getParentsList")
1117	.then((response) => {	1117	.then((response) => {
1118	this.parents = response.data.data;	1118	this.parents = response.data.data;
1119	this.showLoader = false;	1119	this.showLoader = false;
1120	})	1120	})
1121	.catch((error) => {	1121	.catch((error) => {
1122	// console.log("err====>", err);	1122	// console.log("err====>", err);
1123	this.showLoader = false;	1123	this.showLoader = false;
1124	});	1124	});
1125	},	1125	},
1126	getTeachers() {	1126	getTeachers() {
1127	http()	1127	http()
1128	.get("/getTeachersList")	1128	.get("/getTeachersList")
1129	.then((response) => {	1129	.then((response) => {
1130	this.teachers = response.data.data;	1130	this.teachers = response.data.data;
1131	this.showLoader = false;	1131	this.showLoader = false;
1132	})	1132	})
1133	.catch((error) => {	1133	.catch((error) => {
1134	// console.log("err====>", err);	1134	// console.log("err====>", err);
1135	this.showLoader = false;	1135	this.showLoader = false;
1136	});	1136	});
1137	},	1137	},
1138	getClasses() {	1138	getClasses() {
1139	http()	1139	http()
1140	.get("/getClassesList")	1140	.get("/getClassesList")
1141	.then((response) => {	1141	.then((response) => {
1142	this.classes = response.data.data;	1142	this.classes = response.data.data;
1143	this.showLoader = false;	1143	this.showLoader = false;
1144	})	1144	})
1145	.catch((error) => {	1145	.catch((error) => {
1146	this.showLoader = false;	1146	this.showLoader = false;
1147	});	1147	});
1148	},	1148	},
1149	getNoticeData() {	1149	getNoticeData() {
1150	this.showLoader = true;	1150	this.showLoader = true;
1151	http()	1151	http()
1152	.get("/getEventsList")	1152	.get("/getEventsList")
1153	.then((response) => {	1153	.then((response) => {
1154	this.noticeData = response.data.data;	1154	this.noticeData = response.data.data;
1155	this.showLoader = false;	1155	this.showLoader = false;
1156	})	1156	})
1157	.catch((error) => {	1157	.catch((error) => {
1158	this.showLoader = false;	1158	this.showLoader = false;
1159	});	1159	});
1160	},	1160	},
1161	getUserData() {	1161	getUserData() {
1162	// this.showLoader = true;	1162	// this.showLoader = true;
1163	if (this.$store.state.role === "PARENT") {	1163	if (this.$store.state.role === "PARENT") {
1164	http()	1164	http()
1165	.get("/getParticularUserDetail", {	1165	.get("/getParticularUserDetail", {
1166	params: {	1166	params: {
1167	studentId: localStorage.getItem("parentStudentId"),	1167	studentId: localStorage.getItem("parentStudentId"),
1168	},	1168	},
1169	})	1169	})
1170	.then((response) => {	1170	.then((response) => {
1171	this.userData = response.data.data;	1171	this.userData = response.data.data;
1172	this.showLoader = false;	1172	this.showLoader = false;
1173	})	1173	})
1174	.catch((error) => {	1174	.catch((error) => {
1175	this.showLoader = false;	1175	this.showLoader = false;
1176	});	1176	});
1177	} else {	1177	} else {
1178	http()	1178	http()
1179	.get("/getParticularUserDetail")	1179	.get("/getParticularUserDetail")
1180	.then((response) => {	1180	.then((response) => {
1181	this.userData = response.data.data;	1181	this.userData = response.data.data;
1182	this.showLoader = false;	1182	this.showLoader = false;
1183	})	1183	})
1184	.catch((error) => {	1184	.catch((error) => {
1185	this.showLoader = false;	1185	this.showLoader = false;
1186	});	1186	});
1187	}	1187	}
1188	},	1188	},
1189		1189
1190	getFeesAndCollectionsData() {	1190	getFeesAndCollectionsData() {
1191	http()	1191	http()
1192	.get("/getTotalFeesAndCollections")	1192	.get("/getTotalFeesAndCollections")
1193	.then((response) => {	1193	.then((response) => {
1194	this.feeData = response.data.data;	1194	this.feeData = response.data.data;
1195	// this.collectionData = response.data.data;	1195	// this.collectionData = response.data.data;
1196	this.series[0].data[0] = this.feeData.totalFees;	1196	this.series[0].data[0] = this.feeData.totalFees;
1197	this.series[0].data[1] = this.feeData.totalCollection;	1197	this.series[0].data[1] = this.feeData.totalCollection;
1198	this.showLoader = false;	1198	this.showLoader = false;
1199	})	1199	})
1200	.catch((error) => {	1200	.catch((error) => {
1201	this.showLoader = false;	1201	this.showLoader = false;
1202	});	1202	});
1203	},	1203	},
1204	getExpensesData() {	1204	getExpensesData() {
1205	http()	1205	http()
1206	.get("/getTotalExpenses")	1206	.get("/getTotalExpenses")
1207	.then((response) => {	1207	.then((response) => {
1208	this.expenseData = response.data.data;	1208	this.expenseData = response.data.data;
1209	// var array = response.data.data.sum;	1209	// var array = response.data.data.sum;
1210	this.series[0].data[2] = this.expenseData.sum;	1210	this.series[0].data[2] = this.expenseData.sum;
1211	this.showChart = true;	1211	this.showChart = true;
1212	// this.series = [	1212	// this.series = [
1213	// {	1213	// {
1214	// name: "Total",	1214	// name: "Total",
1215	// data: array	1215	// data: array
1216	// }	1216	// }
1217	// ];	1217	// ];
1218	this.showLoader = false;	1218	this.showLoader = false;
1219	})	1219	})
1220	.catch((error) => {	1220	.catch((error) => {
1221	this.showLoader = false;	1221	this.showLoader = false;
1222	});	1222	});
1223	},	1223	},
1224	// async getparentStudents() {	1224	// async getparentStudents() {
1225	// this.showLoader = true;	1225	// this.showLoader = true;
1226	// await http()	1226	// await http()
1227	// .get("/parentStudentsList")	1227	// .get("/parentStudentsList")
1228	// .then((response) => {	1228	// .then((response) => {
1229		1229
1230	// /* set values in local storage */	1230	// /* set values in local storage */
1231	// this.studentsData = response.data.data.students;	1231	// this.studentsData = response.data.data.students;
1232	// this.showLoader = false;	1232	// this.showLoader = false;
1233	// })	1233	// })
1234	// .catch((err) => {	1234	// .catch((err) => {
1235	// console.log("err====>", err);	1235	// console.log("err====>", err);
1236	// this.showLoader = false;	1236	// this.showLoader = false;
1237	// });	1237	// });
1238	// await this.getCourses(parentStudentsId, classId);	1238	// await this.getCourses(parentStudentsId, classId);
1239	// await this.getAnnoucementes(classId);	1239	// await this.getAnnoucementes(classId);
1240	// },	1240	// },
1241	async getCourses(parentStudentsId, classId) {	1241	async getCourses(parentStudentsId, classId) {
1242	/* getStudentCourses - to get courseData - defined in GetApis.js*/	1242	/* getStudentCourses - to get courseData - defined in GetApis.js*/
1243	await this.getStudentCourses({	1243	await this.getStudentCourses({
1244	classId: localStorage.getItem("parentClassId"),	1244	classId: localStorage.getItem("parentClassId"),
1245	studentId: localStorage.getItem("parentStudentId"),	1245	studentId: localStorage.getItem("parentStudentId"),
1246	});	1246	});
1247	},	1247	},
1248	getAnnoucementes(classId) {	1248	getAnnoucementes(classId) {
1249	this.showLoader = true;	1249	this.showLoader = true;
1250	http()	1250	http()
1251	.get("/getAnnoucementesList", {	1251	.get("/getAnnoucementesList", {
1252	params: {	1252	params: {
1253	classId: localStorage.getItem("parentClassId"),	1253	classId: localStorage.getItem("parentClassId"),
1254	},	1254	},
1255	})	1255	})
1256	.then((response) => {	1256	.then((response) => {
1257	this.annoucementData = response.data.data;	1257	this.annoucementData = response.data.data;
1258	this.showLoader = false;	1258	this.showLoader = false;
1259	})	1259	})
1260	.catch((err) => {	1260	.catch((err) => {
1261	// console.log("err====>", err);	1261	// console.log("err====>", err);
1262	this.showLoader = false;	1262	this.showLoader = false;
1263	this.snackbar = true;	1263	this.snackbar = true;
1264	this.color = "error";	1264	this.color = "error";
1265	this.text = error.response.data.message;	1265	this.text = error.response.data.message;
1266	});	1266	});
1267	},	1267	},
1268		1268
1269	/* MEETING EVENTS, SCHOOL EVENTS */	1269	/* MEETING EVENTS, SCHOOL EVENTS */
1270	async getMeetingEventes() {	1270	async getMeetingEventes() {
1271	if (this.role == "TEACHER" \|\| this.role === "ADMIN") {	1271	if (this.role == "TEACHER" \|\| this.role === "ADMIN") {
1272	this.showLoader = true;	1272	this.showLoader = true;
1273	await http()	1273	await http()
1274	.get("/getMeetingEventesList")	1274	.get("/getMeetingEventesList")
1275	.then((response) => {	1275	.then((response) => {
1276	var activityList = response.data.data;	1276	var activityList = response.data.data;
1277	this.activityList = activityList;	1277	this.activityList = activityList;
1278	this.showLoader = false;	1278	this.showLoader = false;
1279		1279
1280	/* set meetingEvents in activityEvents array to highlight event dates in calender */	1280	/* set meetingEvents in activityEvents array to highlight event dates in calender */
1281	for (var i = 0; i < this.activityList.length; i++) {	1281	for (var i = 0; i < this.activityList.length; i++) {
1282	let obj = {};	1282	let obj = {};
1283	obj.date = moment(this.activityList[i].dateOfEvent).format(	1283	obj.date = moment(this.activityList[i].dateOfEvent).format(
1284	"YYYY/MM/DD"	1284	"YYYY/MM/DD"
1285	);	1285	);
1286	obj.title = this.activityList[i].title;	1286	obj.title = this.activityList[i].title;
1287	obj._id = this.activityList[i]._id;	1287	obj._id = this.activityList[i]._id;
1288	obj.eventType = "meetingEvent";	1288	obj.eventType = "meetingEvent";
1289	/* activityEvents is an array used to display events in calender on particular dates */	1289	/* activityEvents is an array used to display events in calender on particular dates */
1290	this.activityEvents.push(obj);	1290	this.activityEvents.push(obj);
1291	}	1291	}
1292	})	1292	})
1293	.catch((error) => {	1293	.catch((error) => {
1294	this.showLoader = false;	1294	this.showLoader = false;
1295	});	1295	});
1296	}	1296	}
1297	/* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */	1297	/* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */
1298	if (	1298	if (
1299	this.role === "ADMIN" \|\|	1299	this.role === "ADMIN" \|\|
1300	this.role === "TEACHER" \|\|	1300	this.role === "TEACHER" \|\|
1301	this.role === "PARENT"	1301	this.role === "PARENT"
1302	) {	1302	) {
1303	/* this will get data in a "schoolEvents" data property */	1303	/* this will get data in a "schoolEvents" data property */
1304	await this.getSchoolEventsList();	1304	await this.getSchoolEventsList();
1305	/* set schoolEvents in activityEvents array to highlight event dates in calender */	1305	/* set schoolEvents in activityEvents array to highlight event dates in calender */
1306	for (var i = 0; i < this.schoolEvents.length; i++) {	1306	for (var i = 0; i < this.schoolEvents.length; i++) {
1307	let obj = {};	1307	let obj = {};
1308	obj.date = moment(this.schoolEvents[i].dateOfEvent).format(	1308	obj.date = moment(this.schoolEvents[i].dateOfEvent).format(
1309	"YYYY/MM/DD"	1309	"YYYY/MM/DD"
1310	);	1310	);
1311	obj.title = this.schoolEvents[i].title;	1311	obj.title = this.schoolEvents[i].title;
1312	obj._id = this.schoolEvents[i]._id;	1312	obj._id = this.schoolEvents[i]._id;
1313	obj.eventType = "schoolEvent";	1313	obj.eventType = "schoolEvent";
1314	/* activityEvents is an array used to display events in calender on particular dates */	1314	/* activityEvents is an array used to display events in calender on particular dates */
1315	this.activityEvents.push(obj);	1315	this.activityEvents.push(obj);
1316	}	1316	}
1317	}	1317	}
1318	},	1318	},
1319	},	1319	},
1320		1320
1321	mounted() {	1321	mounted() {
1322	// = this.$store.state.schoolToken;	1322	// = this.$store.state.schoolToken;
1323	// console.log("this.$store.state.role", this.token);	1323	// console.log("this.$store.state.role", this.token);
1324	// this.getUsersList();	1324	// this.getUsersList();
1325	},	1325	},
1326		1326
1327	async created() {	1327	async created() {
1328	if (this.$store.state.role === "ADMIN") {	1328	if (this.$store.state.role === "ADMIN") {
1329	// this.token = this.$store.state.token;	1329	// this.token = this.$store.state.token;
1330	await this.getFeesAndCollectionsData();	1330	await this.getFeesAndCollectionsData();
1331	await this.getExpensesData();	1331	await this.getExpensesData();
1332	} else if (this.$store.state.schoolRole === "SUPERADMIN") {	1332	} else if (this.$store.state.schoolRole === "SUPERADMIN") {
1333	// this.token = this.$store.state.schoolToken;	1333	// this.token = this.$store.state.schoolToken;
1334	await this.getFeesAndCollectionsData();	1334	await this.getFeesAndCollectionsData();
1335	await this.getExpensesData();	1335	await this.getExpensesData();
1336	} else if (this.$store.state.role === "TEACHER") {	1336	} else if (this.$store.state.role === "TEACHER") {
1337	// this.token = this.$store.state.token;	1337	// this.token = this.$store.state.token;
1338	} else if (this.$store.state.role === "ACCOUNTANT") {	1338	} else if (this.$store.state.role === "ACCOUNTANT") {
1339	// this.token = this.$store.state.token;	1339	// this.token = this.$store.state.token;
1340	} else if (this.$store.state.role === "LIBRARIAN") {	1340	} else if (this.$store.state.role === "LIBRARIAN") {
1341	// this.token = this.$store.state.token;	1341	// this.token = this.$store.state.token;
1342	} else if (this.$store.state.role === "PARENT") {	1342	} else if (this.$store.state.role === "PARENT") {
1343	// this.token = this.$store.state.token;	1343	// this.token = this.$store.state.token;
1344	// await this.getparentStudents();	1344	// await this.getparentStudents();
1345	this.studentsData = this.$store.getters.GET_STUDENTS_DATA;	1345	this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
1346	// console.log("students data - ", this.studentsData);	1346	// console.log("students data - ", this.studentsData);
1347	await this.getCourses();	1347	await this.getCourses();
1348	await this.getAnnoucementes();	1348	await this.getAnnoucementes();
1349	}	1349	}
1350	this.role = this.$store.state.role;	1350	this.role = this.$store.state.role;
1351		1351
1352	await this.getStudents();	1352	await this.getStudents();
1353	await this.getTeachers();	1353	await this.getTeachers();
1354	await this.getParents();	1354	await this.getParents();
1355	await this.getClasses();	1355	await this.getClasses();
1356	await this.getNoticeData();	1356	await this.getNoticeData();
1357	await this.getUserData();	1357	await this.getUserData();
1358		1358
1359	/* get Latest events list for student login*/	1359	/* get Latest events list for student login*/
1360	if (this.$store.state.role == "PARENT") {	1360	if (this.$store.state.role == "PARENT") {
1361	let response = await this.studentMeetingEvents({	1361	let response = await this.studentMeetingEvents({
1362	studentId: localStorage.getItem("parentStudentId"),	1362	studentId: localStorage.getItem("parentStudentId"),
1363	});	1363	});
1364	this.activityList = response.data.data;	1364	this.activityList = response.data.data;
1365		1365
1366	/* set activityEvents array to highlight event dates in calender */	1366	/* set activityEvents array to highlight event dates in calender */
1367	for (var i = 0; i < this.activityList.length; i++) {	1367	for (var i = 0; i < this.activityList.length; i++) {
1368	let obj = {};	1368	let obj = {};
1369	obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(	1369	obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1370	"YYYY/MM/DD"	1370	"YYYY/MM/DD"
1371	);	1371	);
1372	obj.title = this.activityList[i].meetingEvent.title;	1372	obj.title = this.activityList[i].meetingEvent.title;
1373	obj._id = this.activityList[i].meetingEvent._id;	1373	obj._id = this.activityList[i].meetingEvent._id;
1374	obj.eventType = "meetingEvent";	1374	obj.eventType = "meetingEvent";
1375	this.activityEvents.push(obj);	1375	this.activityEvents.push(obj);
1376	}	1376	}
1377	}	1377	}
1378		1378
1379	/* get Latest events list for teacher login*/	1379	/* get Latest events list for teacher login*/
1380	if (	1380	if (
1381	this.role == "TEACHER" \|\|	1381	this.role == "TEACHER" \|\|
1382	this.role == "ADMIN" \|\|	1382	this.role == "ADMIN" \|\|
1383	this.role == "PARENT"	1383	this.role == "PARENT"
1384	) {	1384	) {
1385	await this.getMeetingEventes();	1385	await this.getMeetingEventes();
1386	}	1386	}
1387	},	1387	},
1388	};	1388	};
1389	</script>	1389	</script>
1390		1390
1391	<style scoped>	1391	<style scoped>
1392	@import "fullcalendar/dist/fullcalendar.css";	1392	@import "fullcalendar/dist/fullcalendar.css";
1393	.wrap-text {	1393	.wrap-text {
1394	-webkit-line-clamp: unset !important;	1394	-webkit-line-clamp: unset !important;
1395	}	1395	}
1396		1396
1397	a {	1397	a {
1398	color: white;	1398	color: white;
1399	}	1399	}
1400	</style>	1400	</style>

src/pages/Exam/examAttendence.vue

Diff comments View file @e05668b

 <template>
   <v-container fluid class="body-color">
     <!-- *****  Exam Schedule TABLE****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addExamAttendenceDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addExamAttendenceDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence
       </v-btn>
       <v-spacer></v-spacer>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
           v-model="getAttendence.examId"
           label="Select Exam"
           :rules="examRules"
           :items="examList"
           item-text="examName"
           item-value="_id"
           required
         ></v-select>
       </v-flex>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
           v-model="getAttendence.classId"
           label="Select your class"
           type="text"
           :items="classList"
           item-text="classNum"
           item-value="_id"
           @change="getSections(getAttendence.classId)"
           required
         ></v-select>
       </v-flex>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
           v-model="getAttendence.sectionId"
           label="Select your section"
           type="text"
           :items="addSection"
           item-text="name"
           item-value="_id"
           @change="getClassSubject(getAttendence.classId)"
           required
         ></v-select>
       </v-flex>
       <v-flex xs8 sm3 md2 class="mr-3">
         <v-select
           v-model="getAttendence.subjectId"
           label="Select Subject"
           :rules="subjectRules"
           :items="subjectList.subjects"
           item-text="subjectName"
           item-value="_id"
           @change="getExamAttendenceList()"
           required
         ></v-select>
       </v-flex>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
         <v-layout>
           <v-text-field
             autofocus
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       v-if="showData"
       :headers="headers"
       :items="examData.students"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
               <img
                 :src="props.item.studentId.profilePicUrl"
                 v-if="props.item.studentId.profilePicUrl"
               />
               <img src="/static/icon/user.png" v-else-if="!props.item.studentId.profilePicUrl" />
             </v-avatar>
           </td>
           <td class="td td-row text-xs-center">{{ props.item.studentId.name}}</td>
           <td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td>
           <td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td>
           <td class="td td-row text-xs-center">
             <!-- <v-radio-group v-model="isPresent" row>
               <v-radio :value="props.item.isPresent"></v-radio>
             </v-radio-group>-->
             <v-checkbox
               v-model="props.item.isPresent"
               @click="markStudentAttendence(props.item)"
               primary
               hide-details
             ></v-checkbox>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD  Student Attendence ****** -->
     <v-dialog v-model="changeStudentAttendenceDialog" max-width="500px" persistent>
       <v-card flat>
         <v-layout class="pa-3 card-style white--text">
           <v-flex xs12>
             <label class="title text-xs-center">Change Student's Attendence</label>
             <v-icon
               size="24"
               class="right white--text"
               @click="changeStudentAttendenceDialog = false"
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-flex xs12>
             <h3>Are you sure you want to change the attendence</h3>
           </v-flex>
           <v-spacer></v-spacer>
           <v-flex xs12>
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn
                 @click.native="closeStudentAttendenceDialog"
                 round
                 dark
                 class="clear-button"
               >cancel</v-btn>
               <v-btn
                 @click="selectParticularStudent"
                 round
                 dark
                 :loading="loading"
                 class="add-button"
               >Yes</v-btn>
             </v-card-actions>
           </v-flex>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** ADD  Exam Attendence ****** -->
     <v-dialog
       v-model="addExamAttendenceDialog"
       max-width="800px"
       v-if="addExamAttendenceDialog"
       persistent
     >
       <v-card flat>
         <v-layout class="pa-3 card-style white--text">
           <v-flex xs12>
             <label class="title text-xs-center">Add Exam Attendence</label>
             <v-icon size="24" class="right white--text" @click="closeAttendenceModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation class="text-xs-center">
           <v-container fluid>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Exam Name:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     label="Select Exam"
                     :rules="examRules"
                     :items="examList"
                     v-model="addAttendence.examId"
                     item-text="examName"
                     item-value="_id"
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     v-model="addAttendence.classId"
                     label="Select Class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(addAttendence.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     :items="addSection"
                     label="Select Section"
                     v-model="addAttendence.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     :rules="sectionRules"
                     @change="getClassSubject(addAttendence.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs5 class="pt-4 subheading">
                   <label class="right">Subject Name:</label>
                 </v-flex>
                 <v-flex xs7 sm7 md6 class="ml-3">
                   <v-select
                     :items="subjectList.subjects"
                     label="Select Subject"
                     item-text="subjectName"
                     v-model="addAttendence.subjectId"
                     item-value="_id"
                     name="Select Subject"
                     :rules="subjectRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-card-actions>
                   <v-spacer class="hidden-xs-only"></v-spacer>
                   <v-btn
                     round
                     dark
                     @click="showTable"
                     :loading="loading"
                     class="add-button"
                   >Attendence</v-btn>
                 </v-card-actions>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
         <v-flex xs12 v-show="attendeceTable" class>
           <v-data-table
             :headers="studentheader"
             :items="studentsData"
             :pagination.sync="pagination"
             :search="search"
             select-all
             v-model="selected"
             item-key="_id"
           >
             <template slot="items" slot-scope="props">
               <tr class="tr">
                 <!-- <td class="td td-row">{{ props.index + 1}}</td> -->
                 <td class="td td-row">
                   <v-checkbox
                     v-model="props.item.attendence"
                     @change="markParticularStudentAttendence(props.item)"
                     primary
                     hide-details
                   ></v-checkbox>
                 </td>
                 <td class="text-xs-center td td-row">
                   <v-avatar size="40">
                     <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                     <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
                   </v-avatar>
                 </td>
                 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
                 <td class="td td-row text-xs-center">{{ props.item.rollNo}}</td>
                 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
                 <!-- <td class="td td-row text-xs-center">
                   <v-radio-group v-model="props.item.attendence" :mandatory="false" row>
                     <v-radio
                       v-for="attendences in attendenceType"
                       :key="attendences.value"
                       :label="`${attendences.label}`"
                       :value="attendences.value"
                     ></v-radio>
                   </v-radio-group>
                 </td>-->
               </tr>
             </template>
             <template slot="headers" slot-scope="props">
               <tr>
                 <th>
                   <v-checkbox
                     :input-value="props.all"
                     :indeterminate="props.indeterminate"
                     primary
                     hide-details
                     @click.native="selectAll"
                   ></v-checkbox>
                 </th>
                 <th
                   v-for="header in props.headers"
                   :key="header.text"
                   :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
                   @click="changeSort(header.value)"
                 >
                   <v-icon small>arrow_upward</v-icon>
                   {{ header.text }}
                 </th>
               </tr>
             </template>
             <v-alert
               slot="no-results"
               :value="true"
               color="error"
               icon="warning"
             >Your search for "{{ search }}" found no results.</v-alert>
           </v-data-table>
           <v-flex xs12 sm12>
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn @click="submit()" round dark :loading="loading" class="add-button">Submit</v-btn>
             </v-card-actions>
           </v-flex>
         </v-flex>
       </v-card>
     </v-dialog>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     editDate: false,
     menu1: false,
     menuB: false,
     menu2: false,
     menuEdit: false,
     timeToEdit: false,
     show: true,
     showSearch: false,
     addExamAttendenceDialog: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     loading: false,
     search: "",
     showLoader: false,
     valid: true,
     role: "",
     pagination: {
       rowsPerPage: 10,
     },
     attendeceTable: false,
     isPresent: true,
     examRules: [(v) => !!v || "Exam Name is required"],
     classRules: [(v) => !!v || "Class Name is required"],
     sectionRules: [(v) => !!v || "section is required"],
     subjectRules: [(v) => !!v || "Subject is required"],
     timeInRules: [(v) => !!v || "Time In is required"],
     timeOutRules: [(v) => !!v || "time Out s is required"],
     roomRules: [(v) => !!v || "Room is required"],
     examScheduleDateRules: [(v) => !!v || "Date is required"],
     studentsData: [],
     examData: [],
     students: [],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "No",
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
         align: "center",
       },
       {
         text: "Name",
         value: "name",
         sortable: false,
         align: "center",
       },
       {
         text: "Roll No",
         value: "rollNo",
         sortable: false,
         align: "center",
       },
       {
         text: "Email",
         value: "email",
         sortable: false,
         align: "center",
       },
       {
         text: "Action",
         value: "isPresent",
         sortable: false,
         align: "center",
       },
     ],
     studentheader: [
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
         align: "center",
       },
       {
         text: "Name",
         value: "name",
         sortable: false,
         align: "center",
       },
       {
         text: "Roll No",
         value: "rollNo",
         sortable: false,
         align: "center",
       },
       {
         text: "Email",
         value: "email",
         sortable: false,
         align: "center",
       },
     ],
     attendenceType: [
       {
         label: "",
         value: true,
       },
     ],
     classList: [],
     addSection: [],
     examList: [],
     subjectList: [],
     subjects: [],
     addAttendence: {},
     getAttendence: {},
     editedItem: {
       sectionId: {
         name: "",
       },
     },
     getScheduleData: {},
     ScheduleData: [],
     token: "",
     showData: false,
     selected: [],
     changeStudentAttendenceDialog: false,
     closeStudentAttendenceDialog() {
       this.changeStudentAttendenceDialog = false;
     },
     selectedStudent: {},
     presentStudent: [],
     absentStudent: [],
   }),
   watch: {
     addExamAttendenceDialog: function (val) {
       if (!val) {
         this.studentsData = [];
         this.selected = [];
         this.attendeceTable = false;
         this.valid = false;
         this.addAttendence = [];
       }
     },
   },
   methods: {
     pickFile() {
       this.$refs.image.click();
     },
     markStudentAttendence(item) {
       this.selectedStudent = {
         id: item.studentId._id,
         isPresent: !item.isPresent,
       };
       this.changeStudentAttendenceDialog = true;
     },
     getSchedulesList() {
       this.showLoader = true;
       http()
         .get("/getSchedulesList", {
           params: { classId: this.getScheduleData.classId },
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.ScheduleData = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     close() {
       this.dialog = false;
     },
     closeAttendenceModel() {
       this.addExamAttendenceDialog = false;
       this.studentsData = [];
       this.selected = [];
       this.attendeceTable = false;
       this.valid = false;
       this.addAttendence = [];
     },
     submit() {
       var examAttendence = {
         examId: this.addAttendence.examId,
         classId: this.addAttendence.classId,
         sectionId: this.addAttendence.sectionId,
         subjectId: this.addAttendence.subjectId,
         students: [],
       };
       for (var j = 0; j < this.presentStudent.length; j++) {
         examAttendence.students.push({
           studentId: this.presentStudent[j],
           isPresent: true,
         });
       }
       for (var j = 0; j < this.absentStudent.length; j++) {
         examAttendence.students.push({
           studentId: this.absentStudent[j],
           isPresent: false,
         });
       }
       if (this.$refs.form.validate()) {
         http()
           .post("/createExamAttendance", examAttendence)
           .then((response) => {
             this.snackbar = true;
             this.color = "success";
             this.text = "Successfully created exam attendence";
             this.addExamAttendenceDialog = false;
             this.studentsData = [];
             this.selected = [];
             this.attendeceTable = false;
             this.valid = false;
             this.addAttendence = [];
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.disable = false;
       this.loading = false;
     },
     getClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.classList = response.data.data;
         })
         .catch((err) => {
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       for (let i = 0; i < this.classList.length; i++) {
         if (_id == this.classList[i]._id) {
           // this.subjects = this.classList[i].subjects;
         }
       }
+      this.examData = [];
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
         })
         .catch((err) => {});
     },
     getClassSubject(_id) {
       this.showLoader = true;
       // this.classId = this.classId;
       http()
         .get(
           "/getParticularClass",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.subjectList = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.examList = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
         .catch((error) => {
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     showTable() {
       this.attendeceTable = true;
       this.getStudentList();
     },
     getStudentList() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.addAttendence.classId,
             sectionId: this.addAttendence.sectionId,
           },
         })
         .then((response) => {
           this.studentsData = response.data.data;
           this.showLoader = false;
           // this.addExamAttendenceDialog = false;
           var attendence = "";
           for (let i = 0; i < this.studentsData.length; i++) {
             this.studentsData[i].attendence = false;
           }
         })
         .catch((err) => {
           //   console.log("err====>", err);
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     getExamAttendenceList() {
       this.showLoader = true;
       http()
         .get("/getExamAttendenceList", {
           params: {
             examId: this.getAttendence.examId,
             classId: this.getAttendence.classId,
             sectionId: this.getAttendence.sectionId,
             subjectId: this.getAttendence.subjectId,
           },
         })
         .then((response) => {
           this.examData = response.data.data;
           if (this.examData.length === 0) {
             this.showLoader = false;
             this.snackbar = true;
             this.text = "No Attendence found!";
             this.color = "error";
             return;
           }
           this.examData = this.examData[0];
           //   if (this.examData.students.length === 0) {
           //     this.showLoader = false;
           //     this.snackbar = true;
           //     this.text = "No Students found!";
           //     this.color = "error";
           //     return;
           //   }
           this.showData = true;
           this.showLoader = false;
         })
         .catch((error) => {
           //   console.log("error", error);
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     markParticularStudentAttendence(selected) {
       if (selected.attendence) {
         this.selected.push(selected);
       } else {
         for (var i = 0; i < this.selected.length; i++) {
           if (this.selected[i]._id === selected._id) {
             this.selected.splice(i, 1);
             break;
           }
         }
       }
       let presentIndex = this.presentStudent.indexOf(selected._id);
       let absentIndex = this.absentStudent.indexOf(selected._id);
       if (presentIndex > -1) {
         this.presentStudent.splice(presentIndex, 1);
         this.absentStudent.push(selected._id);
       } else {
         if (absentIndex > -1) {
           this.absentStudent.splice(absentIndex, 1);
         }
         this.presentStudent.push(selected._id);
       }
     },
     selectAll() {
       let markAbsent = false;
       if (this.selected.length === this.studentsData.length) markAbsent = true;
       this.presentStudent = [];
       this.absentStudent = [];
       this.selected = [];
       for (let i = 0; i < this.studentsData.length; i++) {
         if (markAbsent) {
           this.studentsData[i].attendence = false;
           this.absentStudent.push(this.studentsData[i]._id);
         } else {
           this.studentsData[i].attendence = true;
           this.presentStudent.push(this.studentsData[i]._id);
           this.selected.push(this.studentsData[i]);
         }
       }
     },
     selectParticularStudent(_id) {
       var payload = {
         examAttendanceId: this.examData._id,
         studentId: this.selectedStudent.id,
         isPresent: this.selectedStudent.isPresent,
       };
       http()
         .put("/updateExamAttendance", payload)
         .then((response) => {
           this.snackbar = true;
           this.color = "success";
           this.text = "Successfully change attendence";
           this.changeStudentAttendenceDialog = false;
           this.selectedStudent = {};
           this.getExamAttendenceList();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
         });
     },
     changeSort(column) {
       if (this.pagination.sortBy === column) {
         this.pagination.descending = !this.pagination.descending;
       } else {
         this.pagination.sortBy = column;
         this.pagination.descending = false;
       }
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getExamList();
     this.role = this.$store.state.role;
   },
 };
 </script>