diff --git a/src/Services/GetApis.js b/src/Services/GetApis.js index 1c94173..dab75ec 100644 --- a/src/Services/GetApis.js +++ b/src/Services/GetApis.js @@ -83,6 +83,24 @@ export default { /************************************************************************************************************************ */ + /* APIS USED IN LiveOnlineClass.vue */ + async getLiveClassesesList(params) { + try { + let response = await this.getMethod("/getLiveClassesesList", { + classId: params.classId, + courseId: params.courseId, + chapterId: params.chapterId, + }) + return response + } catch (error) { + console.log(" error in getLiveClassesesList - ", error.message) + } + }, + + + + /*************************************************************************************************************************** */ + /* APIS USED IN announcement.vue */ async getAnnoucementesList(params) { diff --git a/src/Services/PutApis.js b/src/Services/PutApis.js index ad72e42..5652327 100644 --- a/src/Services/PutApis.js +++ b/src/Services/PutApis.js @@ -7,6 +7,25 @@ export default { } }, methods: { + /************************************************************************************************************************ */ + + /* APIS USED IN LiveOnlineClass.vue */ + async createLiveClasses(params) { + try { + let response = await this.getMethod("/createLiveClasses", { + classId: params.classId, + courseId: params.courseId, + chapterId: params.chapterId, + }) + return response + } catch (error) { + console.log(" error in getLiveClassesesList - ", error.message) + } + }, + + + + /*************************************************************************************************************************** */ diff --git a/src/api/menu.js b/src/api/menu.js index affadf1..137c133 100644 --- a/src/api/menu.js +++ b/src/api/menu.js @@ -391,6 +391,14 @@ const parentMenu = [{ title: 'Dashboard', name: 'Dashboard', icon: '/static/icon/dashboard.png', +}, +{ + title: "Change Student", + name: 'Change Students', + Vicon: "face", + click: e => { + console.log(e); + } }]; // reorder menu // Menu.forEach((item) => { diff --git a/src/components/pageHeader/AppDrawer.vue b/src/components/pageHeader/AppDrawer.vue index 7536bd3..d603afc 100644 --- a/src/components/pageHeader/AppDrawer.vue +++ b/src/components/pageHeader/AppDrawer.vue @@ -394,6 +394,8 @@ + + + + + diff --git a/src/pages/Dashboard/LiveOnlineClass.vue b/src/pages/Dashboard/LiveOnlineClass.vue index a989e75..d91db40 100644 --- a/src/pages/Dashboard/LiveOnlineClass.vue +++ b/src/pages/Dashboard/LiveOnlineClass.vue @@ -19,125 +19,17 @@ X - - - - - - - cancel - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Add - - - - - - - - - - - + -
Live Online Classes - Solution
-
This conference is in progress
+
Live Online Classes - {{$route.query.chapterName}}
+
{{startLiveSession}}
The session started at 1:00 there is 1 moderator
@@ -151,7 +43,7 @@ - + + + @@ -187,7 +81,7 @@
Live Online Classes - {{$route.query.chapterName}}
-
This conference is in progress
+
{{startLiveSession}}
The session started at 1:00 there is 1 moderator
@@ -196,12 +90,17 @@
- Join Session + Start Session
- + + + +
- - + + - -
Courses
- -
- -
- play_arrow - {{course.courseName}} -
- -
- + @@ -264,19 +150,16 @@ 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 { - localStorage: localStorage, - valid: true, - addForumDialog: false, - addForumParams: {}, - // UPLOAD IMAGE - imageName: "", - imageUrl: "", - imageFile: "", - imageData: {}, + startLiveSession: "", // DATA TABLE search: "", @@ -314,227 +197,154 @@ export default { ], liveOnlineItems: [], - // COURSE DISCUSSION REPLTY FUNCTIONALITY - courseDiscussionId: "", - showReplyBox: false, - courseDiscussionData: [], - replyDescription: "", - loginId: "", - editedIndex: -1 + // 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: { - dates: function(date) { - return moment(date).format("MMMM DD, YYYY hh:mm A"); - }, - /* UPLOAD IMAGE */ - pickFile() { - this.$refs.image.click(); - }, + // JITSI CONTAINER + startConference() { + var _this = this; + try { + const domain = "meet.jit.si"; + const options = { + audioInput: "", + audioOutput: "", + videoInput: "", + 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: "" + }; - onFilePicked(e) { - // console.log(e) - const files = e.target.files; - this.imageData.upload = e.target.files[0]; - if (files[0] !== undefined) { - this.imageName = files[0].name; - if (this.imageName.lastIndexOf(".") <= 0) { - return; - } - const fr = new FileReader(); - fr.readAsDataURL(files[0]); - fr.addEventListener("load", () => { - this.imageUrl = fr.result; - this.imageFile = files[0]; // this is an image file that can be sent to server... - this.imageData.imageUrl = URL.createObjectURL(this.imageFile); - }); - } else { - this.imageName = ""; - this.imageFile = ""; - this.imageUrl = ""; - } - }, - async submit() { - if (this.$refs.form.validate()) { - this.addForumParams.classId = localStorage.getItem("parentClassId"); - this.addForumParams.courseId = this.$route.query.courseId; - this.addForumParams.studentId = localStorage.getItem("parentStudentId"); - - if (this.imageUrl) { - var str = this.imageUrl; - const [baseUrl, imageUrl] = str.split(/,/); - this.addForumParams.upload = imageUrl; - } - this.loading = true; - await http() - .post("/createCourseDiscussion", this.addForumParams) - .then(response => { - this.snackbar = true; - this.text = "Discussion added successfully"; - this.snackbarColor = "green"; - this.addForumDialog = false; - this.clear(); - this.loading = false; - console.log("response of createCourseDiscussion - ", response); - }) - .catch(error => { - this.snackbar = true; - this.text = error.response.data.message; - this.snackbarColor = "error"; - this.loading = false; - }); + this.api = new JitsiMeetExternalAPI(domain, options); + this.api.addEventListener("videoConferenceJoined", () => { + console.log("Local User Joined"); - /* getCourseDiscussionesList - to populate the data table */ - await this.getCourseDiscussionesList({ - courseId: this.$route.query.courseId, - classId: localStorage.getItem("parentClassId") + _this.api.executeCommand("displayName", _this.username); + _this.api.executeCommand("password", this.roomPassword); }); - this.addForumDialog = false; + } catch (error) { + console.error("Failed to load Jitsi API", error); } }, - clear() { - this.$refs.form.reset(); - this.imageUrl = ""; - }, - async routeToCourseDetails(courseId) { - /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ - let response = await this.getParticularCourseDetail(courseId); - - /* If the response is null then dont route */ - if (response.data.data.length > 0) { - this.$router.push({ - name: "Course Details", - query: { courseId: courseId } - }); - } else { - this.seeSnackbar("No Data Available", "warning"); - } + 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"); + // } }, - // COURSE DISCUSSION REPLY FUNCTIONALITY - - getDiscussionesThread() { - // console.log("id", this.getSelectedData.courseId); + createRoom(classId) { this.showLoader = true; - http() - .get("/getParticularCourseDiscussion", { - params: { - courseDiscussionId: this.courseDiscussionId - } - }) - .then(response => { - // console.log("response", response.data.data); - this.courseDiscussionData = response.data.data; - for (let i = 0; i < this.courseDiscussionData.length; i++) { - for ( - let j = 0; - j < this.courseDiscussionData[i].forumThread.length; - j++ - ) { - this.courseDiscussionData[i].forumThread[ - j - ].showUpdateReplyThread = false; - this.courseDiscussionData[i].forumThread[ - j - ].showDescriptionReplyThread = true; - } - } - this.showLoader = false; - this.showReplyBox = false; - }) - .catch(error => { - console.log("err====>", error); - this.showLoader = false; - }); - }, - replyThreadDiscussion(selected) { - this.showLoader = true; - var payloadData = { - courseDiscussionId: selected._id, - studentId: localStorage.getItem("parentStudentId"), - description: this.replyDescription - }; - http() - .put("/replyForumThread", payloadData) - .then(response => { - // console.log("response", response.data.data); - this.showLoader = false; - this.getDiscussionesThread(); - }) - .catch(error => { - this.showLoader = false; - }); - }, - showUpdateReplyThreadDiscussion(item) { - this.editedIndex = this.courseDiscussionData.indexOf(item); - var editedItem = Object.assign({}, item); - var arrayOfcourseDiscussionData = []; - for (let i = 0; i < this.courseDiscussionData.length; i++) { - for ( - let j = 0; - j < this.courseDiscussionData[i].forumThread.length; - j++ - ) { - if ( - editedItem._id == this.courseDiscussionData[i].forumThread[j]._id - ) { - this.courseDiscussionData[i].forumThread[ - j - ].showUpdateReplyThread = true; - this.courseDiscussionData[i].forumThread[ - j - ].showDescriptionReplyThread = false; - } - } - arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]); - } - this.courseDiscussionData = arrayOfcourseDiscussionData; - }, - updateRelpyThreadDiscussion(replyThread, selected) { - this.showLoader = true; - var payloadData = { - forumThreadId: replyThread._id, - courseDiscussionId: selected._id, - studentId: localStorage.getItem("parentStudentId"), - description: replyThread.description + var classId = { + classId: classId }; http() - .put("/updateForumThread", payloadData) - .then(response => { - this.showLoader = false; - this.getDiscussionesThread(); + .post("/createLiveClasses", { + classId: this.$route.query.classId, + courseId: this.$route.query.courseId, + chapterId: this.$route.query.chapterId }) - .catch(error => { - this.showLoader = false; - }); - }, - deleteRelpyThreadDiscussion(id, courseDiscussionId) { - this.showLoader = true; - var payloadData = { - forumThreadId: id, - courseDiscussionId: courseDiscussionId - }; - http() - .put( - "/deleteForumThread", - confirm("Are you sure you want to delete this?") && payloadData - ) .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.roomPassword = response.data.data.LiveClasses.roomPassword; + 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; - this.getDiscussionesThread(); }) - .catch(error => { + .catch(err => { this.showLoader = false; }); } }, + + mounted() { + this.token = this.$store.state.token; + }, async created() { - this.loginId = this.$store.state.id; - /* getStudentCourses - to get courseData - defined in GetApis.js*/ - await this.getStudentCourses({ - classId: localStorage.getItem("parentClassId"), - studentId: localStorage.getItem("parentStudentId") + /* 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); + 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") + }); + } } }; @@ -563,4 +373,7 @@ export default { -webkit-box-shadow: none !important; box-shadow: none !important; } +#jitsi-container { + height: 100vh; +} \ No newline at end of file diff --git a/src/pages/Meet/meet.vue b/src/pages/Meet/meet.vue index 1647819..6acf04a 100644 --- a/src/pages/Meet/meet.vue +++ b/src/pages/Meet/meet.vue @@ -29,7 +29,13 @@ > --> - Find + Find @@ -145,10 +151,10 @@ export default { } }); }, - createRoom() { + createRoom(classId) { this.showLoader = true; var classId = { - classId: this.selectStudents.classId + classId: classId }; http() .post("/createRoom", classId)