viithiisys / School-Management-dashboard

Browse Code »

Commit 01a388dfe9c1d0f1421abd741596567fea61af37

Authored by Amber Dev 2020-07-17 09:22:01 -0400

1 parent 34a2a2609b

Exists in master and in 2 other branches

added intrack logo

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

src/pages/Common/UploadPdf.vue

Diff comments View file @01a388d

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	document.getElementById(this.id).type = "text";
74	document.getElementById(this.id).type = "file";	74	document.getElementById(this.id).type = "file";
75		75
76	let fileData = {	76	let fileData = {
77	fileName: this.fileName,	77	fileName: this.fileName,
78	fileInBase64: this.fileInBase64,	78	fileInBase64: this.fileInBase64,
79	emptyPdf: ""	79	emptyPdf: ""
80	};	80	};
81	this.$emit("pdfFileSelected", fileData);	81	this.$emit("pdfFileSelected", fileData);
82	// console.log("its reset - ", fileData);	82	// console.log("its reset - ", fileData);
83	}	83	}
84	},	84	},
85	watch: {	85	watch: {
86	respondToTrigger() {	86	respondToTrigger() {
87	if (this.respondToTrigger == "reset") {	87	if (this.respondToTrigger == "reset") {
88	// console.log("Reset pdf - ", this.emptyPdf);	88	// console.log("Reset pdf - ", this.emptyPdf);
89	this.resetInput();	89	this.resetInput();
90	}	90	}
91	}	91	}
92	},	92	},
93	computed: {	93	computed: {
94	respondToTrigger: {	94	respondToTrigger: {
95	get() {	95	get() {
96	return this.emptyPdf;	96	return this.emptyPdf;
97	},	97	},
98	set(newVal) {}	98	set(newVal) {}
99	// this.respondToTrigger = this.trigger;	99	// this.respondToTrigger = this.trigger;
100	}	100	}
101	}	101	}
102	};	102	};
103	</script>	103	</script>
104	<style scoped >	104	<style scoped >
105	</style>	105	</style>

src/pages/Course/courseDetail.vue

Diff comments View file @01a388d

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 @click="clear();" round dark class="clear-button">Clear</v-btn>
732	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	732	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
733	</v-layout>	733	</v-layout>
734	</v-flex>	734	</v-flex>
735	</v-layout>	735	</v-layout>
736	</v-container>	736	</v-container>
737	</v-form>	737	</v-form>
738	</v-card>	738	</v-card>
739	</v-dialog>	739	</v-dialog>
740	<v-snackbar	740	<v-snackbar
741	:timeout="timeout"	741	:timeout="timeout"
742	:top="y === 'top'"	742	:top="y === 'top'"
743	:right="x === 'right'"	743	:right="x === 'right'"
744	:vertical="mode === 'vertical'"	744	:vertical="mode === 'vertical'"
745	v-model="snackbar"	745	v-model="snackbar"
746	:color="color"	746	:color="color"
747	>{{ text }}</v-snackbar>	747	>{{ text }}</v-snackbar>
748	<div class="loader" v-if="showLoader">	748	<div class="loader" v-if="showLoader">
749	<v-progress-circular indeterminate color="white"></v-progress-circular>	749	<v-progress-circular indeterminate color="white"></v-progress-circular>
750	</div>	750	</div>
751	</v-container>	751	</v-container>
752	</template>	752	</template>
753		753
754	<script>	754	<script>
755	import http from "@/Services/http.js";	755	import http from "@/Services/http.js";
756	import UploadFiles from "@/pages/Common/UploadFiles.vue";	756	import UploadFiles from "@/pages/Common/UploadFiles.vue";
757	import UploadPdf from "@/pages/Common/UploadPdf.vue";	757	import UploadPdf from "@/pages/Common/UploadPdf.vue";
758	import AllApiCalls from "@/Services/AllApiCalls.js";	758	import AllApiCalls from "@/Services/AllApiCalls.js";
759		759
760	export default {	760	export default {
761	mixins: [AllApiCalls],	761	mixins: [AllApiCalls],
762	components: {	762	components: {
763	UploadFiles,	763	UploadFiles,
764	UploadPdf	764	UploadPdf
765	},	765	},
766	data: () => ({	766	data: () => ({
767	snackbar: false,	767	snackbar: false,
768	y: "top",	768	y: "top",
769	x: "right",	769	x: "right",
770	mode: "",	770	mode: "",
771	timeout: 3000,	771	timeout: 3000,
772	text: "",	772	text: "",
773	loading: false,	773	loading: false,
774	color: "",	774	color: "",
775	date: null,	775	date: null,
776	search: "",	776	search: "",
777	show: true,	777	show: true,
778	addCourseDetailDialog: false,	778	addCourseDetailDialog: false,
779	showSearch: false,	779	showSearch: false,
780	showLoader: false,	780	showLoader: false,
781	editCourseDetailDialog: false,	781	editCourseDetailDialog: false,
782	editChapterDetailDialog: false,	782	editChapterDetailDialog: false,
783	viewProfileGallery: false,	783	viewProfileGallery: false,
784	valid: true,	784	valid: true,
785	editLoading: false,	785	editLoading: false,
786	addclass: [],	786	addclass: [],
787	courseData: [],	787	courseData: [],
788	addSection: [],	788	addSection: [],
789	getCourse: {},	789	getCourse: {},
790	finds: [{ value: "" }],	790	finds: [{ value: "" }],
791	findsChapterPoint: [{ value: "" }],	791	findsChapterPoint: [{ value: "" }],
792	updates: [],	792	updates: [],
793	youTubeLink: {},	793	youTubeLink: {},
794	addCourseDetail: {	794	addCourseDetail: {
795	chapters: [	795	chapters: [
796	{	796	{
797	chapterName: "",	797	chapterName: "",
798	description: "",	798	description: "",
799	chapterPoints: []	799	chapterPoints: []
800	}	800	}
801	]	801	]
802	},	802	},
803	chapters: [],	803	chapters: [],
804	pagination: {	804	pagination: {
805	rowsPerPage: 10	805	rowsPerPage: 10
806	},	806	},
807	editFiles: [],	807	editFiles: [],
808	files: [],	808	files: [],
809	courseData: [],	809	courseData: [],
810	token: "",	810	token: "",
811	courseId: "",	811	courseId: "",
812	clsssRules: [v => !!v \|\| " Class is required"],	812	clsssRules: [v => !!v \|\| " Class is required"],
813	courseRules: [v => !!v \|\| " Course is required"],	813	courseRules: [v => !!v \|\| " Course is required"],
814	chapterNameRules: [v => !!v \|\| " Tilte is required"],	814	chapterNameRules: [v => !!v \|\| " Tilte is required"],
815	descriptionRules: [v => !!v \|\| " Description is required"],	815	descriptionRules: [v => !!v \|\| " Description is required"],
816	headers: [	816	headers: [
817	{	817	{
818	align: "",	818	align: "",
819	text: "No",	819	text: "No",
820	sortable: false,	820	sortable: false,
821	value: "index"	821	value: "index"
822	},	822	},
823	{	823	{
824	text: "Class Name",	824	text: "Class Name",
825	value: "classNum",	825	value: "classNum",
826	sortable: false,	826	sortable: false,
827	align: "center"	827	align: "center"
828	},	828	},
829	{	829	{
830	text: "Course Name",	830	text: "Course Name",
831	value: "courseName",	831	value: "courseName",
832	sortable: false,	832	sortable: false,
833	align: "center"	833	align: "center"
834	},	834	},
835	{ text: "Action", value: "", sortable: false, align: "center" }	835	{ text: "Action", value: "", sortable: false, align: "center" }
836	],	836	],
837	CourseDetailsList: [],	837	CourseDetailsList: [],
838	editedIndex: -1,	838	editedIndex: -1,
839	editedItem: {},	839	editedItem: {},
840	editedCourse: {},	840	editedCourse: {},
841	editChapter: {	841	editChapter: {
842	chapterPoints: []	842	chapterPoints: []
843	},	843	},
844	index: "",	844	index: "",
845	addChapterItem: {},	845	addChapterItem: {},
846	addChapterItemObj: {},	846	addChapterItemObj: {},
847	addChapterDialog: false	847	addChapterDialog: false
848	}),	848	}),
849	methods: {	849	methods: {
850	getCourses(classId) {	850	getCourses(classId) {
851	this.showLoader = true;	851	this.showLoader = true;
852	http()	852	http()
853	.get("/getCourseesList", {	853	.get("/getCourseesList", {
854	params: {	854	params: {
855	classId: classId	855	classId: classId
856	}	856	}
857	})	857	})
858	.then(response => {	858	.then(response => {
859	this.editChapter.courseId = "";	859	this.editChapter.courseId = "";
860	this.courseData = response.data.data;	860	this.courseData = response.data.data;
861	// console.log("this.courseData", this.courseData);	861	// console.log("this.courseData", this.courseData);
862	this.showLoader = false;	862	this.showLoader = false;
863	})	863	})
864	.catch(err => {	864	.catch(err => {
865	console.log("err====>", err);	865	console.log("err====>", err);
866	this.showLoader = false;	866	this.showLoader = false;
867	});	867	});
868	},	868	},
869	getCourseDetailsList() {	869	getCourseDetailsList() {
870	this.showLoader = true;	870	this.showLoader = true;
871	http()	871	http()
872	.get("/getParticularCourseDetail", {	872	.get("/getParticularCourseDetail", {
873	params: {	873	params: {
874	courseId: this.getCourse.courseId	874	courseId: this.getCourse.courseId
875	}	875	}
876	})	876	})
877	.then(response => {	877	.then(response => {
878	this.CourseDetailsList = response.data.data;	878	this.CourseDetailsList = response.data.data;
879	if (response.data.data[0]) {	879	if (response.data.data[0]) {
880	this.chapters = response.data.data[0].chapters;	880	this.chapters = response.data.data[0].chapters;
881	console.log(" this.chapters - ", this.chapters);	881	console.log(" this.chapters - ", this.chapters);
882	}	882	}
883	// console.log("response.data.data", this.CourseDetailsList);	883	// console.log("response.data.data", this.CourseDetailsList);
884	this.showLoader = false;	884	this.showLoader = false;
885	})	885	})
886	.catch(error => {	886	.catch(error => {
887	// console.log("err====>", err);	887	// console.log("err====>", err);
888	this.showLoader = false;	888	this.showLoader = false;
889	if (error.response.status === 401) {	889	if (error.response.status === 401) {
890	this.$router.replace({ path: "/" });	890	this.$router.replace({ path: "/" });
891	this.$store.dispatch("setToken", null);	891	this.$store.dispatch("setToken", null);
892	this.$store.dispatch("Id", null);	892	this.$store.dispatch("Id", null);
893	}	893	}
894	});	894	});
895	},	895	},
896	courseTableRow(id) {	896	courseTableRow(id) {
897	// console.log("click7", id);	897	// console.log("click7", id);
898	this.courseId = id;	898	this.courseId = id;
899	},	899	},
900	addChapters(item) {	900	addChapters(item) {
901	this.editedIndex = this.CourseDetailsList.indexOf(item);	901	this.editedIndex = this.CourseDetailsList.indexOf(item);
902	this.addChapterItemObj = Object.assign({}, item);	902	this.addChapterItemObj = Object.assign({}, item);
903	this.addChapterItem.courseDetailId = this.addChapterItemObj._id;	903	this.addChapterItem.courseDetailId = this.addChapterItemObj._id;
904	this.addChapterDialog = true;	904	this.addChapterDialog = true;
905	},	905	},
906	submitChapter() {	906	submitChapter() {
907	this.addChapterItem.chapterPoints = [];	907	this.addChapterItem.chapterPoints = [];
908	for (let i = 0; i < this.findsChapterPoint.length; i++) {	908	for (let i = 0; i < this.findsChapterPoint.length; i++) {
909	this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);	909	this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);
910	}	910	}
911	// console.log("this.addChapterItem", this.addChapterItem);	911	// console.log("this.addChapterItem", this.addChapterItem);
912	this.loading = true;	912	this.loading = true;
913	http()	913	http()
914	.put("/addChapters", this.addChapterItem)	914	.put("/addChapters", this.addChapterItem)
915	.then(response => {	915	.then(response => {
916	this.addChapterDialog = false;	916	this.addChapterDialog = false;
917	this.loading = false;	917	this.loading = false;
918	this.snackbar = true;	918	this.snackbar = true;
919	this.text = response.data.message;	919	this.text = response.data.message;
920	this.color = "green";	920	this.color = "green";
921	this.addChapterItem = {};	921	this.addChapterItem = {};
922	this.removeChapterPoint();	922	this.removeChapterPoint();
923	this.getCourseDetailsList();	923	this.getCourseDetailsList();
924	})	924	})
925	.catch(error => {	925	.catch(error => {
926	this.snackbar = true;	926	this.snackbar = true;
927	this.text = error.response.data.message;	927	this.text = error.response.data.message;
928	this.color = "error";	928	this.color = "error";
929	this.loading = false;	929	this.loading = false;
930	});	930	});
931	},	931	},
932	profile(item) {	932	profile(item) {
933	this.editedIndex = this.chapters.indexOf(item);	933	this.editedIndex = this.chapters.indexOf(item);
934	this.editedItem = Object.assign({}, item);	934	this.editedItem = Object.assign({}, item);
935	this.viewProfileGallery = true;	935	this.viewProfileGallery = true;
936	},	936	},
937	editItem(item) {	937	editItem(item) {
938	this.editedIndex = this.CourseDetailsList.indexOf(item);	938	this.editedIndex = this.CourseDetailsList.indexOf(item);
939	this.editedCourse = Object.assign({}, item);	939	this.editedCourse = Object.assign({}, item);
940	this.editCourseDetailDialog = true;	940	this.editCourseDetailDialog = true;
941	},	941	},
942	editChapterItem(item) {	942	editChapterItem(item) {
943	this.editedIndex = this.chapters.indexOf(item);	943	this.editedIndex = this.chapters.indexOf(item);
944	this.editChapter = Object.assign({}, item);	944	this.editChapter = Object.assign({}, item);
945	this.updates = [];	945	this.updates = [];
946	for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {	946	for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {
947	this.updates.push({ value: this.editChapter.chapterPoints[i] });	947	this.updates.push({ value: this.editChapter.chapterPoints[i] });
948	}	948	}
949	this.editChapterDetailDialog = true;	949	this.editChapterDetailDialog = true;
950	},	950	},
951	deleteItem(item) {	951	deleteItem(item) {
952	let deleteGallery = {	952	let deleteGallery = {
953	courseDetailId: item._id	953	courseDetailId: item._id
954	};	954	};
955	http()	955	http()
956	.delete(	956	.delete(
957	"/deleteCourseDetail",	957	"/deleteCourseDetail",
958	confirm("Are you sure you want to delete this?") && {	958	confirm("Are you sure you want to delete this?") && {
959	params: deleteGallery,	959	params: deleteGallery,
960	headers: {	960	headers: {
961	Authorization: "Bearer " + this.token	961	Authorization: "Bearer " + this.token
962	}	962	}
963	}	963	}
964	)	964	)
965	.then(response => {	965	.then(response => {
966	this.snackbar = true;	966	this.snackbar = true;
967	this.text = "Successfully delete Course Details";	967	this.text = "Successfully delete Course Details";
968	this.color = "green";	968	this.color = "green";
969	this.getCourseDetailsList();	969	this.getCourseDetailsList();
970	})	970	})
971	.catch(error => {	971	.catch(error => {
972	// console.log(error);	972	// console.log(error);
973	this.snackbar = true;	973	this.snackbar = true;
974	this.text = error.response.data.message;	974	this.text = error.response.data.message;
975	this.color = "error";	975	this.color = "error";
976	});	976	});
977	},	977	},
978	deleteChapters(item) {	978	deleteChapters(item) {
979	// console.log("item", item);	979	// console.log("item", item);
980	let deleteChapters = {	980	let deleteChapters = {
981	courseDetailId: this.courseId,	981	courseDetailId: this.courseId,
982	chapterId: item._id	982	chapterId: item._id
983	};	983	};
984	http()	984	http()
985	.put(	985	.put(
986	"/deleteChapters",	986	"/deleteChapters",
987	confirm("Are you sure you want to delete this?") && deleteChapters	987	confirm("Are you sure you want to delete this?") && deleteChapters
988	)	988	)
989	.then(response => {	989	.then(response => {
990	this.snackbar = true;	990	this.snackbar = true;
991	this.text = "Successfully delete Chapters";	991	this.text = "Successfully delete Chapters";
992	this.color = "green";	992	this.color = "green";
993	this.getCourseDetailsList();	993	this.getCourseDetailsList();
994	})	994	})
995	.catch(error => {	995	.catch(error => {
996	// console.log(error);	996	// console.log(error);
997	this.snackbar = true;	997	this.snackbar = true;
998	this.text = error.response.data.message;	998	this.text = error.response.data.message;
999	this.color = "error";	999	this.color = "error";
1000	});	1000	});
1001	},	1001	},
1002	close() {	1002	close() {
1003	this.editCourseDetailDialog = false;	1003	this.editCourseDetailDialog = false;
1004	},	1004	},
1005	closeProfileGallery() {	1005	closeProfileGallery() {
1006	this.viewProfileGallery = false;	1006	this.viewProfileGallery = false;
1007	},	1007	},
1008	submit() {	1008	submit() {
1009	let chapters = [];	1009	let chapters = [];
1010	var chapterPoints = [];	1010	var chapterPoints = [];
1011	for (let i = 0; i < this.finds.length; i++) {	1011	for (let i = 0; i < this.finds.length; i++) {
1012	chapterPoints.push(this.finds[i].value);	1012	chapterPoints.push(this.finds[i].value);
1013	// console.log("this.finds[i].value", this.finds[i].value);	1013	// console.log("this.finds[i].value", this.finds[i].value);
1014	chapters = [	1014	chapters = [
1015	{	1015	{
1016	chapterName: this.addCourseDetail.chapterName,	1016	chapterName: this.addCourseDetail.chapterName,
1017	description: this.addCourseDetail.description,	1017	description: this.addCourseDetail.description,
1018	chapterPoints: chapterPoints,	1018	chapterPoints: chapterPoints,
1019	uploadPdf: this.pdfFile,	1019	uploadPdf: this.pdfFile,
1020	uploadPpt: this.pptFile	1020	uploadPpt: this.pptFile
1021	}	1021	}
1022	];	1022	];
1023	}	1023	}
1024	if (this.$refs.form.validate()) {	1024	if (this.$refs.form.validate()) {
1025	// console.log("this.addCourseDetail", this.addCourseDetail);	1025	// console.log("this.addCourseDetail", this.addCourseDetail);
1026	var courseDetailsData = {	1026	var courseDetailsData = {
1027	classId: this.addCourseDetail.classId,	1027	classId: this.addCourseDetail.classId,
1028	courseId: this.addCourseDetail.courseId,	1028	courseId: this.addCourseDetail.courseId,
1029	chapters: chapters	1029	chapters: chapters
1030	};	1030	};
1031	this.loading = true;	1031	this.loading = true;
1032	http()	1032	http()
1033	.post("/createCourseDetail", courseDetailsData)	1033	.post("/createCourseDetail", courseDetailsData)
1034	.then(response => {	1034	.then(response => {
1035	this.addCourseDetailDialog = false;	1035	this.addCourseDetailDialog = false;
1036	this.loading = false;	1036	this.loading = false;
1037	this.snackbar = true;	1037	this.snackbar = true;
1038	this.text = response.data.message;	1038	this.text = response.data.message;
1039	this.color = "green";	1039	this.color = "green";
1040	this.clear();	1040	this.clear();
1041	this.trigger = "reset";	1041	this.trigger = "reset";
1042	this.emptyPdf = "reset";	1042	this.emptyPdf = "reset";
1043	this.removeAddFind();	1043	this.removeAddFind();
1044	})	1044	})
1045	.catch(error => {	1045	.catch(error => {
1046	this.snackbar = true;	1046	this.snackbar = true;
1047	this.text = error.response.data.message;	1047	this.text = error.response.data.message;
1048	this.color = "error";	1048	this.color = "error";
1049	this.loading = false;	1049	this.loading = false;
1050	});	1050	});
1051	}	1051	}
1052	},	1052	},
1053	clear() {	1053	clear() {
1054	this.$refs.form.reset();	1054	this.$refs.form.reset();
1055	},	1055	},
1056	saveChapter() {	1056	saveChapter() {
1057	this.editedItem.courseDetailId = this.editedItem._id;	1057	this.editedItem.courseDetailId = this.editedItem._id;
1058	// console.log("this.updates", this.updates);	1058	// console.log("this.updates", this.updates);
1059	var chapterPoints = [];	1059	var chapterPoints = [];
1060	for (let i = 0; i < this.updates.length; i++) {	1060	for (let i = 0; i < this.updates.length; i++) {
1061	chapterPoints.push(this.updates[i].value);	1061	chapterPoints.push(this.updates[i].value);
1062	}	1062	}
1063	var updateData = {	1063	var updateData = {
1064	courseDetailId: this.courseId,	1064	courseDetailId: this.courseId,
1065	chapterId: this.editChapter._id,	1065	chapterId: this.editChapter._id,
1066	chapterName: this.editChapter.chapterName,	1066	chapterName: this.editChapter.chapterName,
1067	description: this.editChapter.description,	1067	description: this.editChapter.description,
1068	chapterPoints: chapterPoints,	1068	chapterPoints: chapterPoints,
1069	uploadPdf: this.pdfFile,	1069	uploadPdf: this.pdfFile,
1070	uploadPpt: this.pptFile	1070	uploadPpt: this.pptFile
1071	};	1071	};
1072	this.editLoading = true;	1072	this.editLoading = true;
1073	http()	1073	http()
1074	.put("/updateChapters", updateData)	1074	.put("/updateChapters", updateData)
1075	.then(response => {	1075	.then(response => {
1076	this.editChapterDetailDialog = false;	1076	this.editChapterDetailDialog = false;
1077	this.snackbar = true;	1077	this.snackbar = true;
1078	this.text = response.data.message;	1078	this.text = response.data.message;
1079	this.color = "green";	1079	this.color = "green";
1080	this.editLoading = false;	1080	this.editLoading = false;
1081	// this.removeUpdatePoints();	1081	// this.removeUpdatePoints();
1082	this.trigger = "reset";	1082	this.trigger = "reset";
1083	this.emptyPdf = "reset";	1083	this.emptyPdf = "reset";
1084	this.getCourseDetailsList();	1084	this.getCourseDetailsList();
1085	})	1085	})
1086	.catch(error => {	1086	.catch(error => {
1087	this.editLoading = false;	1087	this.editLoading = false;
1088	this.snackbar = true;	1088	this.snackbar = true;
1089	this.text = error.response.data.message;	1089	this.text = error.response.data.message;
1090	this.color = "error";	1090	this.color = "error";
1091	});	1091	});
1092	},	1092	},
1093	save() {	1093	save() {
1094	var updateData = {	1094	var updateData = {
1095	courseDetailId: this.editedCourse._id,	1095	courseDetailId: this.editedCourse._id,
1096	courseId: this.editedCourse.courseId,	1096	courseId: this.editedCourse.courseId,
1097	classId: this.editedCourse.classId	1097	classId: this.editedCourse.classId
1098	};	1098	};
1099	this.editLoading = true;	1099	this.editLoading = true;
1100	http()	1100	http()
1101	.put("/updateCourseDetail", updateData)	1101	.put("/updateCourseDetail", updateData)
1102	.then(response => {	1102	.then(response => {
1103	this.getCourseDetailsList();	1103	this.getCourseDetailsList();
1104	this.editCourseDetailDialog = false;	1104	this.editCourseDetailDialog = false;
1105	this.snackbar = true;	1105	this.snackbar = true;
1106	this.text = response.data.message;	1106	this.text = response.data.message;
1107	this.color = "green";	1107	this.color = "green";
1108	this.editLoading = false;	1108	this.editLoading = false;
1109	// this.editChapterPointName = "";	1109	// this.editChapterPointName = "";
1110	this.editFiles = [];	1110	this.editFiles = [];
1111	})	1111	})
1112	.catch(error => {	1112	.catch(error => {
1113	this.editLoading = false;	1113	this.editLoading = false;
1114	this.snackbar = true;	1114	this.snackbar = true;
1115	this.text = error.response.data.message;	1115	this.text = error.response.data.message;
1116	this.color = "error";	1116	this.color = "error";
1117	});	1117	});
1118	},	1118	},
1119	getAllClasses() {	1119	getAllClasses() {
1120	http()	1120	http()
1121	.get("/getClassesList", {	1121	.get("/getClassesList", {
1122	headers: { Authorization: "Bearer " + this.token }	1122	headers: { Authorization: "Bearer " + this.token }
1123	})	1123	})
1124	.then(response => {	1124	.then(response => {
1125	this.addclass = response.data.data;	1125	this.addclass = response.data.data;
1126	})	1126	})
1127	.catch(err => {	1127	.catch(err => {
1128	// console.log("err====>", err);	1128	// console.log("err====>", err);
1129	});	1129	});
1130	},	1130	},
1131	removeChapterPoint: function() {	1131	removeChapterPoint: function() {
1132	this.findsChapterPoint = [{ value: "" }];	1132	this.findsChapterPoint = [{ value: "" }];
1133	},	1133	},
1134	removeAddFind: function() {	1134	removeAddFind: function() {
1135	this.finds = [{ value: "" }];	1135	this.finds = [{ value: "" }];
1136	},	1136	},
1137	addFind: function() {	1137	addFind: function() {
1138	this.finds.push({ value: "" });	1138	this.finds.push({ value: "" });
1139	},	1139	},
1140	addChapterPoint: function() {	1140	addChapterPoint: function() {
1141	this.findsChapterPoint.push({ value: "" });	1141	this.findsChapterPoint.push({ value: "" });
1142	},	1142	},
1143	update: function() {	1143	update: function() {
1144	this.updates.push({ value: "" });	1144	this.updates.push({ value: "" });
1145	},	1145	},
1146	// removeUpdatePoints: function() {	1146	// removeUpdatePoints: function() {
1147	// this.updates = [{ value: "" }];	1147	// this.updates = [{ value: "" }];
1148	// },	1148	// },
1149	deleteFind: function(index) {	1149	deleteFind: function(index) {
1150	this.finds.splice(index, 1);	1150	this.finds.splice(index, 1);
1151	if (index === 0) this.addFind();	1151	if (index === 0) this.addFind();
1152	},	1152	},
1153	deleteChapterPoint: function(index) {	1153	deleteChapterPoint: function(index) {
1154	this.findsChapterPoint.splice(index, 1);	1154	this.findsChapterPoint.splice(index, 1);
1155	if (index === 0) this.addChapterPoint();	1155	if (index === 0) this.addChapterPoint();
1156	},	1156	},
1157	deleteUpdate: function(index) {	1157	deleteUpdate: function(index) {
1158	this.updates.splice(index, 1);	1158	this.updates.splice(index, 1);
1159	if (index === 0) this.update();	1159	if (index === 0) this.update();
1160	},	1160	},
1161	deleteUrl: function(index, youTubelinkId, id) {	1161	deleteUrl: function(index, youTubelinkId, id) {
1162	this.editChapter.chapterPoints.splice(index, 1);	1162	this.editChapter.chapterPoints.splice(index, 1);
1163	if (index === 0) this.update();	1163	if (index === 0) this.update();
1164	},	1164	},
1165	displaySearch() {	1165	displaySearch() {
1166	this.show = false;	1166	this.show = false;
1167	this.showSearch = true;	1167	this.showSearch = true;
1168	},	1168	},
1169	closeSearch() {	1169	closeSearch() {
1170	this.showSearch = false;	1170	this.showSearch = false;
1171	this.show = true;	1171	this.show = true;
1172	this.search = "";	1172	this.search = "";
1173	}	1173	}
1174	},	1174	},
1175	mounted() {	1175	mounted() {
1176	this.token = this.$store.state.token;	1176	this.token = this.$store.state.token;
1177	this.getAllClasses();	1177	this.getAllClasses();
1178	}	1178	}
1179	};	1179	};
1180	</script>	1180	</script>

src/pages/Dashboard/LiveOnlineClass.vue

Diff comments View file @01a388d

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