viithiisys / School-Management-dashboard

Browse Code »

Commit b546bc474ac022210948c56133028521ce680379

Authored by Shikha Mishra 2020-09-11 09:21:25 -0400

1 parent 275b17e4fb

Exists in master and in 1 other branch

Show functionality of course attendance while parent login

Showing 3 changed files with 40 additions and 6 deletions Show diff stats

src/api/menu.js

Diff comments View file @b546bc4

 const adminMenu = [
 	//  { header: 'Apps' },
 	{
 		title: 'Dashboard',
 		// group: 'apps',
 		name: 'Dashboard',
 		icon: '/static/icon/dashboard.png',
 	},
 	{
 		title: 'Class',
 		// group: 'apps',
 		name: 'Class',
 		icon: '/static/icon/class.png',
 	},
 	{
 		title: 'Course',
 		group: 'AdminCourse',
 		component: 'AdminCourse',
 		icon: '/static/icon/attendence.png',
 		items: [
 			{ name: 'AssignTeachers', title: 'Assign Teachers', component: 'AssignTeachers', action: '', },
 		]
 	},
 	{
 		title: 'Section',
 		// group: 'apps',
 		name: 'Section',
 		icon: '/static/icon/section.png',
 	},
 	// {
 	//     title: 'Subjects',
 	//     name: 'Subject',
 	//     icon: '/static/icon/subject.png',
 	// },
 	{
 		title: 'Parents',
 		// group: 'apps',
 		name: 'Parents',
 		icon: '/static/icon/parents.png',
 	},
 	{
 		title: 'Teachers',
 		// group: '',
 		name: 'Teachers',
 		icon: '/static/icon/teacher.png',
 	},
 	{
 		title: 'Students',
 		// group: 'apps',
 		name: 'Students',
 		icon: '/static/icon/student.png',
 	},
 	{
 		title: 'User',
 		name: 'User',
 		icon: '/static/icon/users.png',
 	},
 	{
 		title: 'Attendance',
 		group: 'Attendance',
 		component: 'Attendance',
 		icon: '/static/icon/attendence.png',
 		items: [
 			{ name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
 			{ name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
 			{ name: 'courseAttendance', title: 'Course Attendance', component: 'Course Attendance', action: '', },
 			// { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
 		]
 	},
 	{
 		title: 'Exam',
 		group: 'Exam',
 		component: 'Exam',
 		icon: '/static/icon/exam.png',
 		items: [
 			{ name: 'Exam', title: 'Exam', component: 'Exam', action: '', },
 			{ name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },
 			{ name: 'Grade', title: 'Grade', component: 'Grade', action: '', },
 			// { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
 		]
 	},
 	{
 		title: 'Marks',
 		group: 'Mark',
 		component: 'Mark',
 		icon: '/static/icon/marks.png',
 		items: [
 			{ name: 'Mark', title: 'Mark', component: 'Mark', action: '', },
 			{ name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', },
 			// { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', },
 			// { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
 		]
 	},
 	{
 		title: 'Academic',
 		group: 'Academic',
 		component: 'Academic',
 		icon: '/static/icon/school.png',
 		items: [
 			{ name: 'Subject', title: 'Subject', component: 'Subject', action: '', },
 			{ name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },
 			{ name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },
 			{ name: 'Routine', title: 'Routine', component: 'Routine', action: '', },
 		]
 	},
 	{
 		title: 'Administrator',
 		group: 'Administrator',
 		component: 'Administrator',
 		icon: '/static/icon/adminstrator.png',
 		items: [
 			{ name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', },
 			// { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', },
 			{ name: 'resetPassword', title: 'Change Password', component: 'Change Password', action: '', },
 			{ name: 'Role', title: 'Role', component: 'Role', action: '', },
 			{ name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', },
 		]
 	},
 	{
 		title: 'Payroll',
 		group: 'Payroll',
 		component: 'Payroll',
 		icon: '/static/icon/dollar.png',
 		items: [
 			{ name: 'salaryTemplate', title: 'Salary Template', component: 'Salary Template', action: '', },
 			{ name: 'hourlyTemplate', title: 'Hourly Template', component: 'Hourly Template', action: '', },
 			{ name: 'manageSalary', title: 'Manage Salary', component: 'Manage Salary', action: '', },
 			// { name: 'makePayment', title: 'Make Payment', component: 'Make Payment', action: '', },
 		]
 	},
 	{
 		title: 'Notice Board',
 		name: 'Notice Board',
 		icon: '/static/icon/notice board.png',
 	},
 	{
 		title: 'News',
 		name: 'News',
 		icon: '/static/icon/news.png',
 	},
 	// {
 	//   title: 'Reminder',
 	//   name: 'reminder',
 	//   icon: 'alarm_add',
 	// },
 	{
 		title: 'Time Table',
 		name: 'Time Table',
 		icon: '/static/icon/time table.png',
 	},
 	{
 		title: 'Library',
 		group: 'Library',
 		component: 'Library',
 		icon: '/static/icon/library.png',
 		items: [
 			{ name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },
 			{ name: 'Books', title: 'Books', component: 'Books', action: '', },
 			{ name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
 			{ name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
 		]
 	},
 	{
 		title: 'Report',
 		group: 'Report',
 		component: 'Report',
 		icon: '/static/icon/reports.png',
 		items: [
 			{ name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
 			{ name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
 			{ name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
 			{ name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }
 		]
 	},
 	{
 		title: 'Notification',
 		name: 'Notification',
 		icon: '/static/icon/notification.png',
 	},
 	{
 		title: 'Social Media',
 		name: 'Social Media',
 		icon: '/static/icon/events.png',
 	},
 	{
 		title: 'Gallery',
 		name: 'Gallery',
 		icon: '/static/icon/gallery.png',
 	},
 	{
 		title: 'Event',
 		name: 'Event',
 		icon: '/static/icon/events.png',
 	},
 	{
 		title: 'Account',
 		group: 'Account',
 		component: 'Account',
 		icon: '/static/icon/accounts.png',
 		items: [
 			{ name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },
 			{ name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
 			{ name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },
 			{ name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
 			{ name: 'Income', title: 'Income', component: 'Income', action: '', },
 			{ name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }
 		]
 	},
 	{
 		title: 'Holiday',
 		name: 'Holiday',
 		icon: '/static/icon/holiday.png',
 	},
 	{
 		title: 'General Setting',
 		name: 'General Setting',
 		icon: '/static/icon/settings.png',
 	}
 ];
 const libraryMenu = [{
 	title: 'Dashboard',
 	name: 'Dashboard',
 	icon: '/static/icon/dashboard.png',
 },
 {
 	title: 'Library',
 	group: 'Library',
 	component: 'Library',
 	icon: '/static/icon/library.png',
 	items: [
 		{ name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },
 		{ name: 'Books', title: 'Books', component: 'Books', action: '', },
 		{ name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
 		{ name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
 	]
 },
 ];
 const accountMenu = [{
 	title: 'Dashboard',
 	name: 'Dashboard',
 	icon: '/static/icon/dashboard.png',
 },
 {
 	title: 'Account',
 	group: 'Account',
 	component: 'Account',
 	icon: '/static/icon/accounts.png',
 	items: [
 		{ name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },
 		{ name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
 		{ name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },
 		{ name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
 		{ name: 'Income', title: 'Income', component: 'Income', action: '', },
 		{ name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }
 	]
 },
 ];
 const schoolMenu = [
 	//  { header: 'Apps' },
 	{
 		title: 'Dashboard',
 		// group: 'apps',
 		name: 'View School Dashboard',
 		icon: '/static/icon/dashboard.png',
 	},
 	{
 		title: 'School',
 		// group: 'apps',
 		name: 'School',
 		icon: '/static/icon/school.png',
 	},
 	{
 		title: 'App Version',
 		name: 'App Version',
 		icon: '/static/icon/phone.png',
 	}
 ];
 const teacherMenu = [{
 	title: 'Dashboard',
 	name: 'Dashboard',
 	icon: '/static/icon/dashboard.png',
 },
 {
 	title: 'Parents',
 	// group: 'apps',
 	name: 'Parents',
 	icon: '/static/icon/parents.png',
 },
 {
 	title: 'Teachers',
 	// group: '',
 	name: 'Teachers',
 	icon: '/static/icon/teacher.png',
 },
 {
 	title: 'Students',
 	// group: 'apps',
 	name: 'Students',
 	icon: '/static/icon/student.png',
 },
 {
 	title: 'Academic',
 	group: 'Academic',
 	component: 'Academic',
 	icon: '/static/icon/school.png',
 	items: [
 		{ name: 'Subject', title: 'Subject', component: 'Subject', action: '', },
 		{ name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },
 		{ name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },
 		{ name: 'Routine', title: 'Routine', component: 'Routine', action: '', },
 	]
 },
 {
 	title: 'Course',
 	group: 'Course',
 	component: 'Course',
 	icon: '/static/icon/school.png',
 	items: [
 		{ name: 'Course', title: 'Course', component: 'Course', action: '', },
 		{ name: 'Enroll Students', title: 'Enroll Students', component: 'Enroll Students', action: '', },
 		{ name: 'Course Detail', title: 'Course Detail', component: 'Course Detail', action: '', },
 		{ name: 'Course Discussion', title: 'Course Discussion', component: 'Course Discussion', action: '', },
 	]
 },
 {
 	title: 'Annoucement',
 	// group: 'apps',
 	name: 'Annoucement',
 	icon: '/static/icon/student.png',
 },
 {
 	title: 'Meeting Event',
 	// group: 'apps',
 	name: 'Meeting Event',
 	icon: '/static/icon/student.png',
 },
 {
 	title: 'Attendance',
 	group: 'Attendance',
 	component: 'Attendance',
 	icon: '/static/icon/attendence.png',
 	items: [
 		{ name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
 		{ name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
 		{ name: 'courseAttendance', title: 'Course Attendance', component: 'Course Attendance', action: '', },
 		// { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
 	]
 },
 {
 	title: 'Exam',
 	group: 'Exam',
 	component: 'Exam',
 	icon: '/static/icon/exam.png',
 	items: [
 		{ name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },
 		{ name: 'ExamAttendence', title: 'Exam Attendence', component: 'Exam Attendence', action: '', }
 	]
 },
 {
 	title: 'Marks',
 	group: 'Mark',
 	component: 'Mark',
 	icon: '/static/icon/marks.png',
 	items: [
 		{ name: 'Mark', title: 'Mark', component: 'Mark', action: '', }
 	]
 },
 {
 	title: 'Report',
 	group: 'Report',
 	component: 'Report',
 	icon: '/static/icon/reports.png',
 	items: [
 		{ name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
 		{ name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
 		{ name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
 		{ name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }
 	]
 },
 {
 	title: 'Library',
 	group: 'Library',
 	component: 'Library',
 	icon: '/static/icon/library.png',
 	items: [
 		{ name: 'Books', title: 'Books', component: 'Books', action: '', },
 		{ name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
 	]
 },
 	// {
 	// 	title: 'Meet',
 	// 	name: 'Meet',
 	// 	icon: '/static/icon/meet_icon_navigation.png',
 	// }
 ];
 const parentMenu = [{
 	title: 'Dashboard',
 	name: 'Dashboard',
 	icon: '/static/icon/dashboard.png',
 },
 {
 	title: "Change Student",
 	name: 'Change Students',
 	Vicon: "face",
 	click: e => {
 		// console.log(e);
 	}
-}];
+},
+{
+	title: 'Attendance',
+	group: 'Attendance',
+	component: 'Attendance',
+	icon: '/static/icon/attendence.png',
+	items: [
+		{ name: 'courseAttendance', title: 'View Course Attendance', component: 'View Course Attendance', action: '', },
+	]
+},
+	// {
+	// 	path: '/CourseAttendance/:id',
+	// 	meta: {},
+	// 	name: 'View Course Attendance',
+	// 	props: (route) => ({
+	// 		type: route.query.type
+	// 	}),
+	// 	component: () =>
+	// 		import(
+	// 			/* webpackChunkName: "routes" */
+	// 			/* webpackMode: "lazy-once" */
+	// 			`@/pages/Attendence/viewCourseAttendance.vue`
+	// 		)
+	// },
+];
 // reorder menu
 // Menu.forEach((item) => {
 // if (item.items) {
 //     item.items.sort((x, y) => {
 //         let textA = x.title.toUpperCase();
 //         let textB = y.title.toUpperCase();
 //         return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
 //     });
 // }
 // });
 export default { adminMenu, schoolMenu, teacherMenu, libraryMenu, accountMenu, parentMenu };

src/pages/Attendence/viewCourseAttendance.vue

Diff comments View file @b546bc4

 <template>
   <v-container fluid grid-list-md class="body-color">
     <v-dialog v-model="viewCourseAttendance" max-width="1000" scrollable persistent>
       <v-card flat class="pa-3">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Course Attendance</label>
             <v-icon size="24" class="right" @click="viewCourseAttendance = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-data-table :headers="headers" :items="courseAttendanceList">
             <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">{{ props.item.courseId.courseName}}</td>
                 <td class="text-xs-center td td-row">{{ props.item.startTime}}</td>
                 <td class="text-xs-center td td-row">{{ props.item.endTime }}</td>
               </tr>
             </template>
           </v-data-table>
         </v-card-text>
       </v-card>
     </v-dialog>
     <div>
       <v-layout wrap>
         <v-flex xs12 sm12 md4>
           <v-card flat>
             <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
             <v-card-text>
               <v-container>
                 <v-layout wrap>
                   <v-flex xs12>
                     <v-layout>
                       <v-flex
                         xs12
                         class="text-xs-center text-sm-center text-md-center text-lg-center"
                       >
                         <v-avatar size="80px">
                           <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />
                           <img
                             :src="studentData.profilePicUrl"
                             v-else-if="studentData.profilePicUrl"
                           />
                         </v-avatar>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs12 sm12>
                         <h3 class="text-xs-center">
                           <b>{{ studentData.name }}</b>
                         </h3>
                         <p class="text-xs-center grey--text">Student</p>
                       </v-flex>
                     </v-layout>
                     <v-layout style="border: 1px solid lightgrey;">
                       <v-flex xs6 sm6 class="pa-0">
                         <h4 class="right">
                           <b>Roll No :</b>
                         </h4>
                       </v-flex>
                       <v-flex sm6 xs6 class="pa-0">
                         <h4>{{ studentData.rollNo }}</h4>
                       </v-flex>
                     </v-layout>
                     <v-layout style="border: 1px solid lightgrey;">
                       <v-flex xs6 sm6 class="pa-0">
                         <h4 class="right">
                           <b>Class :</b>
                         </h4>
                       </v-flex>
                       <v-flex sm6 xs6 class="right pa-0">
                         <h4>{{ studentData.classId.classNum }}</h4>
                       </v-flex>
                     </v-layout>
                     <v-layout style="border: 1px solid lightgrey;">
                       <v-flex xs6 sm6 class="right pa-0">
                         <h4 class="right">
                           <b>Section :</b>
                         </h4>
                       </v-flex>
                       <v-flex sm6 xs6 class="right pa-0">
                         <h4>{{ studentData.sectionId.name}}</h4>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
               </v-container>
             </v-card-text>
           </v-card>
         </v-flex>
         <v-flex xs12 sm12 md8>
           <v-card flat>
             <h3 class="py-2 text-xs-center card-style white--text">Attendence</h3>
             <YearCalendar
               v-model="year"
               :activeDates="activeDates"
               prefixClass="your_customized_wrapper_class"
               :activeClass="activeClass"
               @toggleDate="toggleDate"
             ></YearCalendar>
           </v-card>
         </v-flex>
       </v-layout>
     </div>
     <img :src="output" v-show="false" />
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script lang="js">
 import moment from "moment";
 import http from "@/Services/http.js";
 import YearCalendar from "vue-material-year-calendar";
 import jsPDF from 'jspdf';
     // eslint-disable-next-line
 import autoTable from 'jspdf-autotable';
 export default {
   components: { YearCalendar },
   data() {
     return {
       output:null,
       showLoader: false,
       token: "",
       year: new Date().getFullYear(),
       activeDates: [],
       activeClass: "",
       studentData: {
         classId: {
           classNum: ""
         },
         sectionId: {
           name: ""
         },
 	  },
       courseAttendanceData:{},
       courseAttendanceList: [],
 	  viewCourseAttendance: false,
 	  headers: [
+	  {
+        text: "No",
+        align: "",
+        sortable: false,
+        value: "index",
+      },
       { text: "Course Name", value: "courseName", sortable: false, align: "center" },
       {
         text: "Start Time",
         value: "startTime",
         sortable: false,
         align: "center",
       },
       { text: "End Time", value: "endTime", sortable: false, align: "center" },
     ],
     selectedDates: [],
     };
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getStudentAttendence();
 	this.getStudentData();
   },
   methods: {
 	  toggleDate (dateInfo) {
       if (this.selectedDates.includes(dateInfo.date)) {
           this.viewCourseAttendance = true;
       }
     },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getStudentAttendence() {
-      this.showLoader = true;
+	  this.showLoader = true;
+	  var studentId = localStorage.getItem("parentStudentId");
       http()
         .get(
           "/studentAttendance",
-          { params: { studentId: this.$route.params.id } },
+          { params: { studentId: studentId } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.showLoader = false;
         })
         .catch(error => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
             this.$store.dispatch("Role", null);
           }
         });
     },
     getStudentData() {
+		var particularStudentId = localStorage.getItem("parentStudentId");
       http()
         .get(
           "/getParticularStudentDetail",
-          { params: { studentId: this.$route.params.id } },
+          { params: { studentId: particularStudentId } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
 		  this.studentData = response.data.data;
 		  this.getCourseAttendance(response.data.data.classId._id);
         })
         .catch(err => {
 		//   console.log("err====>", err);
 		  	this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
           // this.$router.replace({ path: '/' });
         });
 	},
 	getCourseAttendance(classId) {
+		var particularCourseStudentId = localStorage.getItem("parentStudentId");
 		http()
         .get(
           "/getStudentCourseAttendance",
-		  { params: { studentId: this.$route.params.id,
+		  { params: { studentId: particularCourseStudentId,
 					 classId: classId }
 			},
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.courseAttendanceData = response.data.data;
           this.courseAttendanceList = response.data.data[0].studentAttendance;
         //   console.log("===this.courseAttendanceList===", this.courseAttendanceList)
 		  let array = [];
           for (let i = 0; i < this.courseAttendanceData.length; i++) {
             if (this.courseAttendanceData[i].date) {
                 this.selectedDates.push(this.courseAttendanceData[i].date)
               array.push({
                 date: this.courseAttendanceData[i].date,
                 className: "green"
               });
             }
           }
           this.activeDates = array;
         })
         .catch(err => {
 		  	this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
         });
 	},
 	profile(item) {
       this.viewCourseAttendance = true;
     },
   }
 };
 </script>
 <style lang="stylus">
 .your_customized_wrapper_class {
   background-color: #0aa;
   color: white;
   &.red {
     background-color: red;
     color: white;
     &:after {
       background-size: 100% 100%;
     }
   }
   &.blue {
     background-color: #0000aa;
     color: white;
   }
   &.your_customized_classname {
     background-color: yellow;
     color: black;
   }
 }
 </style>
 <style  scoped>
 .card-style {
   background: #7f62f8 !important;
   border-color: #7f62f8 !important;
   border-radius: 12px;
 }
 </style>

src/pages/Dashboard/LiveOnlineClass.vue

Diff comments View file @b546bc4

 <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 v-if="showJoinSessionButton">
               <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 hasn't 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 v-if="showStartSessionButton">
               <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: "",
       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,
       appLink: "",
       showStartSessionButton: true,
       showJoinSessionButton: true,
       courseAttendanceId: {},
     };
   },
   methods: {
     async startChat() {
       if (this.$store.state.role === "PARENT") {
         // if (this.counter == 0) {
         //   console.log("enter start chat");
         const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
         if (isMobile) {
           window.open(this.appLink);
           this.showLoader = false;
         } else {
           this.startConference();
           this.createAttendence();
           // this.counter += 1;
           this.showJoinSessionButton = false;
         }
         // }
       }
       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: "",
           room: "",
         };
         _this.api = new JitsiMeetExternalAPI(domain, options);
         // console.log("this.api ", this.api);
         _this.api.addEventListener("videoConferenceJoined", () => {
           this.showLoader = false;
           setTimeout(() => {
             _this.api.executeCommand("displayName", _this.username);
             _this.api.executeCommand("password", _this.roomPassword);
           }, 1000);
         });
         _this.api.on("passwordRequired", () => {
           _this.api.executeCommand("password", _this.roomPassword);
         });
         _this.api.on("readyToClose", () => {
           //   this.$router.push({ name: "Refresh" });
           let jitsi = document.getElementById("jitsi-container");
           jitsi.innerHTML = "";
           this.showStartSessionButton = true;
           this.showJoinSessionButton = true;
+          this.updateCourseAttendance();
           if (this.$store.state.role === "TEACHER") {
             this.updateLiveClass();
           }
         });
       } 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;
           this.appLink = response.data.data.appLink;
           this.liveClassId = response.data.data._id;
           //   console.log(
           //     "room",
           //     room,
           //     "username",
           //     username,
           //     "roomPassword",
           //     roomPassword
           //   );
           var this_ = this;
           if (username != "" || room != "") {
             const isMobile = /iPhone|iPad|iPod|Android/i.test(
               navigator.userAgent
             );
             if (isMobile) {
               //   console.log("==TEACHER=appLink==", this.appLink);
               window.open(this.appLink);
               this.showLoader = false;
               this.showStartSessionButton = false;
             } else {
               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_.roomPassword = roomPassword;
                 }
               } else alert("Jitsi Meet API script not loaded");
               this_.startConference();
               this.showStartSessionButton = false;
             }
           }
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     formatAMPM(date) {
       var hours = date.getHours();
       var minutes = date.getMinutes();
       var ampm = hours >= 12 ? "pm" : "am";
       hours = hours % 12;
       hours = hours ? hours : 12; // the hour '0' should be '12'
       minutes = minutes < 10 ? "0" + minutes : minutes;
       var strTime = hours + ":" + minutes + " " + ampm;
       return strTime;
     },
     createAttendence() {
       let studentId = localStorage.getItem("parentStudentId");
       let todayDate = new Date();
       var attendenceData = {
         classId: this.$route.query.classId,
         studentId: studentId,
         date: new Date().toISOString().substr(0, 10),
         studentAttendance: [
           {
             courseId: this.$route.query.courseId,
             chapterId: this.$route.query.chapterId,
             liveClassId: this.attendenceLiveClassId,
             startTime: this.formatAMPM(new Date()),
           },
         ],
       };
       this.loading = true;
       http()
         .post("/createCourseAttendance", attendenceData)
         .then((response) => {
           this.courseAttendanceId = response.data.data._id;
-          this.updateCourseAttendance();
           this.loading = false;
           //   this.snackbar = true;
           //   this.color = "green";
         })
         .catch((err) => {
           this.loading = false;
           this.snackbar = true;
           this.color = "error";
         });
     },
     updateLiveClass() {
       this.showLoader = true;
       var payloadData = {
         liveClassesId: this.liveClassId,
       };
       http()
         .put("/updateLiveClasses", payloadData)
         .then((response) => {
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     updateCourseAttendance() {
       this.showLoader = true;
       var payloadData = {
         courseAttendanceId: this.courseAttendanceId,
         liveClassId: this.attendenceLiveClassId,
         endTime: this.formatAMPM(new Date()),
       };
       http()
         .put("/updateCourseAttendance", payloadData)
         .then((response) => {
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     async studentClasses() {
       this.liveLink = "";
       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);
       this.attendenceLiveClassId = response.data.data[0]._id;
       /* 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.appLink = response.data.data[0].appLink;
         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);
         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;
 }