viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit c301facad48a1d4baae2130886040e45c81f1163

Authored by Shikha Mishra
1 parent f808d58753
Exists in master and in 1 other branch ui-design

integrated createCourseAttendance API in live online class screen

Showing 1 changed file with 42 additions and 0 deletions   Show diff stats
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @c301fac
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">{{liveLink}}</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 v-if="showJoinSessionButton"> 39 <v-flex v-if="showJoinSessionButton">
40 <div> 40 <div>
41 <v-btn 41 <v-btn
42 round 42 round
43 class="open-dialog-button" 43 class="open-dialog-button"
44 dark 44 dark
45 v-if="studentBtn" 45 v-if="studentBtn"
46 @click="showLoader = true;startChat();" 46 @click="showLoader = true;startChat();"
47 >{{studentBtn}}</v-btn> 47 >{{studentBtn}}</v-btn>
48 <span class="subheading grey--twxt lighten-1" v-else>Session hasn't started yet</span> 48 <span class="subheading grey--twxt lighten-1" v-else>Session hasn't started yet</span>
49 </div> 49 </div>
50 </v-flex> 50 </v-flex>
51 <v-flex id="studentClone"> 51 <v-flex id="studentClone">
52 <div id="jitsi-container"></div> 52 <div id="jitsi-container"></div>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 56
57 <!-- if logged in user is teacher --> 57 <!-- if logged in user is teacher -->
58 <v-flex xs12 sm12 md12 v-else> 58 <v-flex xs12 sm12 md12 v-else>
59 <v-layout column> 59 <v-layout column>
60 <!-- HEADING --> 60 <!-- HEADING -->
61 <v-flex> 61 <v-flex>
62 <div 62 <div
63 class="title side-bar-color font-weight-bold" 63 class="title side-bar-color font-weight-bold"
64 >Live Online Classes - {{$route.query.chapterName}}</div> 64 >Live Online Classes - {{$route.query.chapterName}}</div>
65 <!-- <div class="subheading grey--text lighten-1"></div> --> 65 <!-- <div class="subheading grey--text lighten-1"></div> -->
66 <!-- <div 66 <!-- <div
67 class="subheading grey--text lighten-1" 67 class="subheading grey--text lighten-1"
68 >The session started at 1:00 there is 1 moderator</div>--> 68 >The session started at 1:00 there is 1 moderator</div>-->
69 </v-flex> 69 </v-flex>
70 70
71 <!-- JOIN OR END SESSION --> 71 <!-- JOIN OR END SESSION -->
72 <v-flex v-if="showStartSessionButton"> 72 <v-flex v-if="showStartSessionButton">
73 <div> 73 <div>
74 <v-btn 74 <v-btn
75 round 75 round
76 class="open-dialog-button" 76 class="open-dialog-button"
77 dark 77 dark
78 @click="showLoader = true;startChat()" 78 @click="showLoader = true;startChat()"
79 >Start Session</v-btn> 79 >Start Session</v-btn>
80 </div> 80 </div>
81 </v-flex> 81 </v-flex>
82 <v-flex id="teacherClone"> 82 <v-flex id="teacherClone">
83 <div id="jitsi-container"></div> 83 <div id="jitsi-container"></div>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-flex> 86 </v-flex>
87 87
88 <v-spacer></v-spacer> 88 <v-spacer></v-spacer>
89 89
90 <!-- COURSES SIDE BAR- positioned to the right of the page --> 90 <!-- COURSES SIDE BAR- positioned to the right of the page -->
91 <!-- <v-flex xs3> 91 <!-- <v-flex xs3>
92 <v-card class="elevation-0 card-border" height="100%"> 92 <v-card class="elevation-0 card-border" height="100%">
93 <CoursesSideBar></CoursesSideBar> 93 <CoursesSideBar></CoursesSideBar>
94 </v-card> 94 </v-card>
95 </v-flex>--> 95 </v-flex>-->
96 </v-layout> 96 </v-layout>
97 </v-container> 97 </v-container>
98 </div> 98 </div>
99 </template> 99 </template>
100 <script> 100 <script>
101 import AllApiCalls from "@/Services/AllApiCalls.js"; 101 import AllApiCalls from "@/Services/AllApiCalls.js";
102 import http from "@/Services/http.js"; 102 import http from "@/Services/http.js";
103 import moment from "moment"; 103 import moment from "moment";
104 import Meet from "@/pages/Meet/meet.vue"; 104 import Meet from "@/pages/Meet/meet.vue";
105 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; 105 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
106 export default { 106 export default {
107 mixins: [AllApiCalls], 107 mixins: [AllApiCalls],
108 components: { 108 components: {
109 CoursesSideBar, 109 CoursesSideBar,
110 }, 110 },
111 data() { 111 data() {
112 return { 112 return {
113 startLiveSession: "", 113 startLiveSession: "",
114 studentBtn: "", 114 studentBtn: "",
115 115
116 // DATA TABLE 116 // DATA TABLE
117 search: "", 117 search: "",
118 pagination: { 118 pagination: {
119 rowsPerPage: 10, 119 rowsPerPage: 10,
120 }, 120 },
121 liveOnlineHeaders: [ 121 liveOnlineHeaders: [
122 { 122 {
123 text: "Playback", 123 text: "Playback",
124 value: "attachementUrl", 124 value: "attachementUrl",
125 sortable: false, 125 sortable: false,
126 align: "center", 126 align: "center",
127 }, 127 },
128 { 128 {
129 text: "Meeting", 129 text: "Meeting",
130 align: "center", 130 align: "center",
131 sortable: false, 131 sortable: false,
132 value: "", 132 value: "",
133 }, 133 },
134 { 134 {
135 text: "Recording", 135 text: "Recording",
136 value: "", 136 value: "",
137 sortable: false, 137 sortable: false,
138 align: "center", 138 align: "center",
139 }, 139 },
140 { 140 {
141 text: "Description Preview", 141 text: "Description Preview",
142 value: "", 142 value: "",
143 sortable: false, 143 sortable: false,
144 align: "center", 144 align: "center",
145 }, 145 },
146 { text: "Date", value: "", sortable: false, align: "center" }, 146 { text: "Date", value: "", sortable: false, align: "center" },
147 { text: "Duration", value: "", sortable: false, align: "center" }, 147 { text: "Duration", value: "", sortable: false, align: "center" },
148 { text: "Toolbar", value: "", sortable: false, align: "center" }, 148 { text: "Toolbar", value: "", sortable: false, align: "center" },
149 ], 149 ],
150 liveOnlineItems: [], 150 liveOnlineItems: [],
151 151
152 // JITSI CONTAINER 152 // JITSI CONTAINER
153 liveLink: "", 153 liveLink: "",
154 token: "", 154 token: "",
155 selectStudents: {}, 155 selectStudents: {},
156 classRules: [(v) => !!v || " Class Name is required"], 156 classRules: [(v) => !!v || " Class Name is required"],
157 sectionRules: [(v) => !!v || " Section Name is required"], 157 sectionRules: [(v) => !!v || " Section Name is required"],
158 addclass: [], 158 addclass: [],
159 addSection: [], 159 addSection: [],
160 loading: false, 160 loading: false,
161 room: "", 161 room: "",
162 username: "", 162 username: "",
163 roomPassword: "", 163 roomPassword: "",
164 // counter: 0, 164 // counter: 0,
165 appLink: "", 165 appLink: "",
166 showStartSessionButton: true, 166 showStartSessionButton: true,
167 showJoinSessionButton: true, 167 showJoinSessionButton: true,
168 }; 168 };
169 }, 169 },
170 methods: { 170 methods: {
171 async startChat() { 171 async startChat() {
172 if (this.$store.state.role === "PARENT") { 172 if (this.$store.state.role === "PARENT") {
173 // if (this.counter == 0) { 173 // if (this.counter == 0) {
174 // console.log("enter start chat"); 174 // console.log("enter start chat");
175 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 175 const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
176 if (isMobile) { 176 if (isMobile) {
177 window.open(this.appLink); 177 window.open(this.appLink);
178 this.showLoader = false; 178 this.showLoader = false;
179 } else { 179 } else {
180 this.startConference(); 180 this.startConference();
181 this.createAttendence();
181 // this.counter += 1; 182 // this.counter += 1;
182 this.showJoinSessionButton = false; 183 this.showJoinSessionButton = false;
183 } 184 }
184 // } 185 // }
185 } 186 }
186 if (this.$store.state.role === "TEACHER") { 187 if (this.$store.state.role === "TEACHER") {
187 // if (this.counter == 0) { 188 // if (this.counter == 0) {
188 this.createRoom(); 189 this.createRoom();
189 // this.counter += 1; 190 // this.counter += 1;
190 // } 191 // }
191 } 192 }
192 }, 193 },
193 // JITSI CONTAINER 194 // JITSI CONTAINER
194 startConference() { 195 startConference() {
195 // console.log("yes session started"); 196 // console.log("yes session started");
196 var _this = this; 197 var _this = this;
197 try { 198 try {
198 const domain = "meet.intrack.in"; 199 const domain = "meet.intrack.in";
199 const options = { 200 const options = {
200 audioInput: "<deviceLabel>", 201 audioInput: "<deviceLabel>",
201 audioOutput: "<deviceLabel>", 202 audioOutput: "<deviceLabel>",
202 videoInput: "<deviceLabel>", 203 videoInput: "<deviceLabel>",
203 prejoinPageEnabled: false, 204 prejoinPageEnabled: false,
204 roomName: this.room, 205 roomName: this.room,
205 height: 500, 206 height: 500,
206 parentNode: document.getElementById("jitsi-container"), 207 parentNode: document.getElementById("jitsi-container"),
207 interfaceConfigOverwrite: { 208 interfaceConfigOverwrite: {
208 filmStripOnly: false, 209 filmStripOnly: false,
209 SHOW_PROMOTIONAL_CLOSE_PAGE: false, 210 SHOW_PROMOTIONAL_CLOSE_PAGE: false,
210 SHOW_POWERED_BY: false, 211 SHOW_POWERED_BY: false,
211 SHOW_JITSI_WATERMARK: false, 212 SHOW_JITSI_WATERMARK: false,
212 TOOLBAR_BUTTONS: [ 213 TOOLBAR_BUTTONS: [
213 "microphone", 214 "microphone",
214 "camera", 215 "camera",
215 "closedcaptions", 216 "closedcaptions",
216 "desktop", 217 "desktop",
217 "fullscreen", 218 "fullscreen",
218 "fodeviceselection", 219 "fodeviceselection",
219 "hangup", 220 "hangup",
220 "profile", 221 "profile",
221 "info", 222 "info",
222 "chat", 223 "chat",
223 "recording", 224 "recording",
224 "livestreaming", 225 "livestreaming",
225 "etherpad", 226 "etherpad",
226 "sharedvideo", 227 "sharedvideo",
227 "settings", 228 "settings",
228 "raisehand", 229 "raisehand",
229 "videoquality", 230 "videoquality",
230 "filmstrip", 231 "filmstrip",
231 "invite", 232 "invite",
232 "feedback", 233 "feedback",
233 "stats", 234 "stats",
234 "shortcuts", 235 "shortcuts",
235 "tileview", 236 "tileview",
236 ], 237 ],
237 }, 238 },
238 configOverwrite: { 239 configOverwrite: {
239 disableSimulcast: false, 240 disableSimulcast: false,
240 }, 241 },
241 teacherName: "", 242 teacherName: "",
242 room: "", 243 room: "",
243 }; 244 };
244 _this.api = new JitsiMeetExternalAPI(domain, options); 245 _this.api = new JitsiMeetExternalAPI(domain, options);
245 // console.log("this.api ", this.api); 246 // console.log("this.api ", this.api);
246 _this.api.addEventListener("videoConferenceJoined", () => { 247 _this.api.addEventListener("videoConferenceJoined", () => {
247 this.showLoader = false; 248 this.showLoader = false;
248 setTimeout(() => { 249 setTimeout(() => {
249 _this.api.executeCommand("displayName", _this.username); 250 _this.api.executeCommand("displayName", _this.username);
250 _this.api.executeCommand("password", _this.roomPassword); 251 _this.api.executeCommand("password", _this.roomPassword);
251 }, 1000); 252 }, 1000);
252 }); 253 });
253 254
254 _this.api.on("passwordRequired", () => { 255 _this.api.on("passwordRequired", () => {
255 _this.api.executeCommand("password", _this.roomPassword); 256 _this.api.executeCommand("password", _this.roomPassword);
256 }); 257 });
257 258
258 _this.api.on("readyToClose", () => { 259 _this.api.on("readyToClose", () => {
259 // this.$router.push({ name: "Refresh" }); 260 // this.$router.push({ name: "Refresh" });
260 let jitsi = document.getElementById("jitsi-container"); 261 let jitsi = document.getElementById("jitsi-container");
261 jitsi.innerHTML = ""; 262 jitsi.innerHTML = "";
262 this.showStartSessionButton = true; 263 this.showStartSessionButton = true;
263 this.showJoinSessionButton = true; 264 this.showJoinSessionButton = true;
264 if (this.$store.state.role === "TEACHER") { 265 if (this.$store.state.role === "TEACHER") {
265 this.updateLiveClass(); 266 this.updateLiveClass();
266 } 267 }
267 }); 268 });
268 } catch (error) { 269 } catch (error) {
269 // console.error("Failed to load Jitsi API", error); 270 // console.error("Failed to load Jitsi API", error);
270 } 271 }
271 }, 272 },
272 openRoom() { 273 openRoom() {
273 // verify the JitsiMeetExternalAPI constructor is added to the global.. 274 // verify the JitsiMeetExternalAPI constructor is added to the global..
274 // if (this.teacherName != "" || this.room != "") { 275 // if (this.teacherName != "" || this.room != "") {
275 // if (window.JitsiMeetExternalAPI) { 276 // if (window.JitsiMeetExternalAPI) {
276 // // var person = prompt("Please enter your name:", "Rabie"); 277 // // var person = prompt("Please enter your name:", "Rabie");
277 // if (person != null || person != "") this.username = this.teacherName; 278 // if (person != null || person != "") this.username = this.teacherName;
278 // var room = prompt("Please enter your room:", "Test Room"); 279 // var room = prompt("Please enter your room:", "Test Room");
279 // if (room != null || room != "") this.room = this.room; 280 // if (room != null || room != "") this.room = this.room;
280 // this.startConference(); 281 // this.startConference();
281 // } else alert("Jitsi Meet API script not loaded"); 282 // } else alert("Jitsi Meet API script not loaded");
282 // } 283 // }
283 }, 284 },
284 285
285 createRoom(classId) { 286 createRoom(classId) {
286 // this.showLoader = true; 287 // this.showLoader = true;
287 var classId = { 288 var classId = {
288 classId: classId, 289 classId: classId,
289 }; 290 };
290 http() 291 http()
291 .post("/createLiveClasses", { 292 .post("/createLiveClasses", {
292 classId: this.$route.query.classId, 293 classId: this.$route.query.classId,
293 courseId: this.$route.query.courseId, 294 courseId: this.$route.query.courseId,
294 chapterId: this.$route.query.chapterId, 295 chapterId: this.$route.query.chapterId,
295 }) 296 })
296 .then((response) => { 297 .then((response) => {
297 // this.addSection = response.data.data; 298 // this.addSection = response.data.data;
298 // console.log("CREATE___ROOOM", response.data); 299 // console.log("CREATE___ROOOM", response.data);
299 var room = response.data.data.roomName; 300 var room = response.data.data.roomName;
300 var username = localStorage.getItem("teacherName"); 301 var username = localStorage.getItem("teacherName");
301 var roomPassword = response.data.data.password; 302 var roomPassword = response.data.data.password;
302 this.appLink = response.data.data.appLink; 303 this.appLink = response.data.data.appLink;
303 this.liveClassId = response.data.data._id; 304 this.liveClassId = response.data.data._id;
304 // console.log( 305 // console.log(
305 // "room", 306 // "room",
306 // room, 307 // room,
307 // "username", 308 // "username",
308 // username, 309 // username,
309 // "roomPassword", 310 // "roomPassword",
310 // roomPassword 311 // roomPassword
311 // ); 312 // );
312 var this_ = this; 313 var this_ = this;
313 if (username != "" || room != "") { 314 if (username != "" || room != "") {
314 const isMobile = /iPhone|iPad|iPod|Android/i.test( 315 const isMobile = /iPhone|iPad|iPod|Android/i.test(
315 navigator.userAgent 316 navigator.userAgent
316 ); 317 );
317 if (isMobile) { 318 if (isMobile) {
318 // console.log("==TEACHER=appLink==", this.appLink); 319 // console.log("==TEACHER=appLink==", this.appLink);
319 window.open(this.appLink); 320 window.open(this.appLink);
320 this.showLoader = false; 321 this.showLoader = false;
321 this.showStartSessionButton = false; 322 this.showStartSessionButton = false;
322 } else { 323 } else {
323 if (window.JitsiMeetExternalAPI) { 324 if (window.JitsiMeetExternalAPI) {
324 // var person = prompt("Please enter your name:", "Rabie"); 325 // var person = prompt("Please enter your name:", "Rabie");
325 if (username != null || username != "") { 326 if (username != null || username != "") {
326 this_.username = username; 327 this_.username = username;
327 } 328 }
328 // var room = prompt("Please enter your room:", "Test Room"); 329 // var room = prompt("Please enter your room:", "Test Room");
329 if (room != null || room != "") { 330 if (room != null || room != "") {
330 this_.room = room; 331 this_.room = room;
331 } 332 }
332 if (roomPassword != null || roomPassword != "") { 333 if (roomPassword != null || roomPassword != "") {
333 this_.roomPassword = roomPassword; 334 this_.roomPassword = roomPassword;
334 } 335 }
335 } else alert("Jitsi Meet API script not loaded"); 336 } else alert("Jitsi Meet API script not loaded");
336 this_.startConference(); 337 this_.startConference();
337 this.showStartSessionButton = false; 338 this.showStartSessionButton = false;
338 } 339 }
339 } 340 }
340 }) 341 })
341 .catch((err) => { 342 .catch((err) => {
342 this.showLoader = false; 343 this.showLoader = false;
343 }); 344 });
344 }, 345 },
346 formatAMPM(date) {
347 var hours = date.getHours();
348 var minutes = date.getMinutes();
349 var ampm = hours >= 12 ? "pm" : "am";
350 hours = hours % 12;
351 hours = hours ? hours : 12; // the hour '0' should be '12'
352 minutes = minutes < 10 ? "0" + minutes : minutes;
353 var strTime = hours + ":" + minutes + " " + ampm;
354 return strTime;
355 },
356 createAttendence() {
357 let studentId = localStorage.getItem("parentStudentId");
358 let todayDate = new Date();
359 var attendenceData = {
360 classId: this.$route.query.classId,
361 studentId: studentId,
362 date: new Date().toISOString().substr(0, 10),
363 studentAttendance: [
364 {
365 courseId: this.$route.query.courseId,
366 chapterId: this.$route.query.chapterId,
367 liveClassId: this.attendenceLiveClassId,
368 startTime: this.formatAMPM(new Date()),
369 },
370 ],
371 };
372 this.loading = true;
373 http()
374 .post("/createCourseAttendance", attendenceData)
375 .then((response) => {
376 this.loading = false;
377 // this.snackbar = true;
378 // this.color = "green";
379 })
380 .catch((err) => {
381 this.loading = false;
382 this.snackbar = true;
383 this.color = "error";
384 });
385 },
345 updateLiveClass() { 386 updateLiveClass() {
346 this.showLoader = true; 387 this.showLoader = true;
347 var payloadData = { 388 var payloadData = {
348 liveClassesId: this.liveClassId, 389 liveClassesId: this.liveClassId,
349 }; 390 };
350 http() 391 http()
351 .put("/updateLiveClasses", payloadData) 392 .put("/updateLiveClasses", payloadData)
352 .then((response) => { 393 .then((response) => {
353 this.showLoader = false; 394 this.showLoader = false;
354 }) 395 })
355 .catch((error) => { 396 .catch((error) => {
356 this.showLoader = false; 397 this.showLoader = false;
357 }); 398 });
358 }, 399 },
359 async studentClasses() { 400 async studentClasses() {
360 this.liveLink = ""; 401 this.liveLink = "";
361 this.room = ""; 402 this.room = "";
362 this.username = ""; 403 this.username = "";
363 this.roomPassword = ""; 404 this.roomPassword = "";
364 /* getLiveClassesesList - To up date line under heading*/ 405 /* getLiveClassesesList - To up date line under heading*/
365 let response = await this.getLiveClassesesList({ 406 let response = await this.getLiveClassesesList({
366 classId: this.$route.query.classId, 407 classId: this.$route.query.classId,
367 courseId: this.$route.query.courseId, 408 courseId: this.$route.query.courseId,
368 chapterId: this.$route.query.chapterId, 409 chapterId: this.$route.query.chapterId,
369 }); 410 });
370 // console.log("response getLiveClassesesList- ", response); 411 // console.log("response getLiveClassesesList- ", response);
412 this.attendenceLiveClassId = response.data.data[0]._id;
371 413
372 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ 414 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
373 if (response.data.data[0].sessionStatus == "ENDED") { 415 if (response.data.data[0].sessionStatus == "ENDED") {
374 // this.startLiveSession = "Start Session"; 416 // this.startLiveSession = "Start Session";
375 this.studentBtn = ""; 417 this.studentBtn = "";
376 } 418 }
377 if (response.data.data[0].sessionStatus == "STARTED") { 419 if (response.data.data[0].sessionStatus == "STARTED") {
378 // this.startLiveSession = "Join Session"; 420 // this.startLiveSession = "Join Session";
379 this.studentBtn = "Join Session"; 421 this.studentBtn = "Join Session";
380 } 422 }
381 if (response.data.data.length == 0) { 423 if (response.data.data.length == 0) {
382 this.startLiveSession = "Start Session"; 424 this.startLiveSession = "Start Session";
383 this.studentBtn = ""; 425 this.studentBtn = "";
384 } else { 426 } else {
385 this.liveLink = response.data.data[0].link; 427 this.liveLink = response.data.data[0].link;
386 this.appLink = response.data.data[0].appLink; 428 this.appLink = response.data.data[0].appLink;
387 var room = response.data.data[0].roomName; 429 var room = response.data.data[0].roomName;
388 var username = this.currentUser; 430 var username = this.currentUser;
389 var roomPassword = response.data.data[0].password; 431 var roomPassword = response.data.data[0].password;
390 var this_ = this; 432 var this_ = this;
391 // console.log(this.room, this.roomPassword, this.username); 433 // console.log(this.room, this.roomPassword, this.username);
392 434
393 if (username != "" || room != "") { 435 if (username != "" || room != "") {
394 if (window.JitsiMeetExternalAPI) { 436 if (window.JitsiMeetExternalAPI) {
395 // var person = prompt("Please enter your name:", "Rabie"); 437 // var person = prompt("Please enter your name:", "Rabie");
396 if (username != null || username != "") { 438 if (username != null || username != "") {
397 this_.username = username; 439 this_.username = username;
398 } 440 }
399 if (roomPassword != null || roomPassword != "") { 441 if (roomPassword != null || roomPassword != "") {
400 this_.roomPassword = roomPassword; 442 this_.roomPassword = roomPassword;
401 } 443 }
402 // var room = prompt("Please enter your room:", "Test Room"); 444 // var room = prompt("Please enter your room:", "Test Room");
403 if (room != null || room != "") { 445 if (room != null || room != "") {
404 this_.room = room; 446 this_.room = room;
405 } 447 }
406 // this.startConference(); 448 // this.startConference();
407 } 449 }
408 } 450 }
409 } 451 }
410 }, 452 },
411 }, 453 },
412 454
413 async created() { 455 async created() {
414 // console.log( 456 // console.log(
415 // "this.$store.state.studentsData", 457 // "this.$store.state.studentsData",
416 // this.$store.state.studentsData[0].name 458 // this.$store.state.studentsData[0].name
417 // ); 459 // );
418 this.currentUser = localStorage.getItem("studentName"); 460 this.currentUser = localStorage.getItem("studentName");
419 this.token = this.$store.state.token; 461 this.token = this.$store.state.token;
420 if (this.$store.state.role === "PARENT") { 462 if (this.$store.state.role === "PARENT") {
421 await this.studentClasses(); 463 await this.studentClasses();
422 } 464 }
423 465
424 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 466 /* getStudentCourses - to get courseData - defined in GetApis.js*/
425 if (this.$store.state.role === "PARENT") { 467 if (this.$store.state.role === "PARENT") {
426 await this.getStudentCourses({ 468 await this.getStudentCourses({
427 classId: localStorage.getItem("parentClassId"), 469 classId: localStorage.getItem("parentClassId"),
428 studentId: localStorage.getItem("parentStudentId"), 470 studentId: localStorage.getItem("parentStudentId"),
429 }); 471 });
430 } 472 }
431 }, 473 },
432 }; 474 };
433 </script> 475 </script>
434 <style scoped> 476 <style scoped>
435 .side-bar-color { 477 .side-bar-color {
436 color: #827bfa !important; 478 color: #827bfa !important;
437 /* border-top-right-radius: 74px !important; */ 479 /* border-top-right-radius: 74px !important; */
438 } 480 }
439 .card-border { 481 .card-border {
440 border: 1px #bdbdbd solid; 482 border: 1px #bdbdbd solid;
441 border-radius: 3px; 483 border-radius: 3px;
442 } 484 }
443 .reply-desc { 485 .reply-desc {
444 border: 1px solid #f2f2f2; 486 border: 1px solid #f2f2f2;
445 } 487 }
446 .open-dialog-button { 488 .open-dialog-button {
447 background: #827bfa !important; 489 background: #827bfa !important;
448 border-color: #827bfa !important; 490 border-color: #827bfa !important;
449 text-transform: none !important; 491 text-transform: none !important;
450 } 492 }
451 493
452 .reply-btn { 494 .reply-btn {
453 background: #feb83c !important; 495 background: #feb83c !important;
454 border-color: #feb83c !important; 496 border-color: #feb83c !important;
455 text-transform: none !important; 497 text-transform: none !important;
456 -webkit-box-shadow: none !important; 498 -webkit-box-shadow: none !important;
457 box-shadow: none !important; 499 box-shadow: none !important;
458 } 500 }
459 #jitsi-container { 501 #jitsi-container {
460 height: 100vh; 502 height: 100vh;
461 } 503 }
462 </style> 504 </style>