viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit edfe025fa47320a61a51df20aaffd3f8a32cb5b4

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

added jitsi meet

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