viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit e91641fe5950ff5563954e1469c64a2ad564dd7c

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

solved bugs

Showing 12 changed files with 432 additions and 500 deletions   Show diff stats
src/Services/GetApis.js
Diff comments   View file @e91641f
... ... @@ -83,6 +83,24 @@ export default {
83 83  
84 84 /************************************************************************************************************************ */
85 85  
  86 + /* APIS USED IN LiveOnlineClass.vue */
  87 + async getLiveClassesesList(params) {
  88 + try {
  89 + let response = await this.getMethod("/getLiveClassesesList", {
  90 + classId: params.classId,
  91 + courseId: params.courseId,
  92 + chapterId: params.chapterId,
  93 + })
  94 + return response
  95 + } catch (error) {
  96 + console.log(" error in getLiveClassesesList - ", error.message)
  97 + }
  98 + },
  99 +
  100 +
  101 +
  102 + /*************************************************************************************************************************** */
  103 +
86 104  
87 105 /* APIS USED IN announcement.vue */
88 106 async getAnnoucementesList(params) {
... ...
src/Services/PutApis.js
Diff comments   View file @e91641f
... ... @@ -7,6 +7,25 @@ export default {
7 7 }
8 8 },
9 9 methods: {
  10 + /************************************************************************************************************************ */
  11 +
  12 + /* APIS USED IN LiveOnlineClass.vue */
  13 + async createLiveClasses(params) {
  14 + try {
  15 + let response = await this.getMethod("/createLiveClasses", {
  16 + classId: params.classId,
  17 + courseId: params.courseId,
  18 + chapterId: params.chapterId,
  19 + })
  20 + return response
  21 + } catch (error) {
  22 + console.log(" error in getLiveClassesesList - ", error.message)
  23 + }
  24 + },
  25 +
  26 +
  27 +
  28 + /*************************************************************************************************************************** */
10 29  
11 30  
12 31  
... ...
... ... @@ -391,6 +391,14 @@ const parentMenu = [{
391 391 title: 'Dashboard',
392 392 name: 'Dashboard',
393 393 icon: '/static/icon/dashboard.png',
  394 +},
  395 +{
  396 + title: "Change Student",
  397 + name: 'Change Students',
  398 + Vicon: "face",
  399 + click: e => {
  400 + console.log(e);
  401 + }
394 402 }];
395 403 // reorder menu
396 404 // Menu.forEach((item) => {
... ...
src/components/pageHeader/AppDrawer.vue
Diff comments   View file @e91641f
... ... @@ -394,6 +394,8 @@
394 394 <!-- </a> -->
395 395 </v-list-tile>
396 396 </template>
  397 +
  398 + <!-- NAVIGATION DRAWER IF ROLE IS TEACHER -->
397 399 <template v-for="(item, i) in menuTeacher" v-if="role === 'TEACHER'">
398 400 <!-- {{menus}} -->
399 401 <!--group with subitems-->
... ... @@ -486,6 +488,8 @@
486 488 <!-- </a> -->
487 489 </v-list-tile>
488 490 </template>
  491 +
  492 + <!-- NAVIGATION DRAWER IF ROLE IS PARENT -->
489 493 <template v-for="(item, i) in menuParent" v-if="role === 'PARENT'">
490 494 <!-- {{menus}} -->
491 495 <!--group with subitems-->
... ... @@ -566,6 +570,11 @@
566 570 <v-list-tile-action v-if="item.icon">
567 571 <img :src="item.icon" width="22" alt="icons" />
568 572 </v-list-tile-action>
  573 + <v-list-tile-action v-if="item.Vicon">
  574 + <div style="position: relative; top: 3px;">
  575 + <v-icon color="white" size="25">{{item.Vicon}}</v-icon>
  576 + </div>
  577 + </v-list-tile-action>
569 578 <v-list-tile-content class="pt-2">
570 579 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
571 580 </v-list-tile-content>
... ...
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @e91641f
... ... @@ -97,18 +97,19 @@ export default {
97 97 mounted() {
98 98 // this.getUserData();
99 99 this.adminRole = this.$store.state.role;
100   - if (this.adminRole == "PARENT") {
101   - var obj = {};
102   - obj = {
103   - icon: "face",
104   - href: "/changeStudents",
105   - title: "Change Student",
106   - click: e => {
107   - console.log(e);
108   - }
109   - };
110   - this.items.splice(0, 0, obj);
111   - }
  100 + /* push something in the settings option */
  101 + // if (this.adminRole == "PARENT") {
  102 + // var obj = {};
  103 + // obj = {
  104 + // icon: "face",
  105 + // href: "/changeStudents",
  106 + // title: "Change Student",
  107 + // click: e => {
  108 + // console.log(e);
  109 + // }
  110 + // };
  111 + // this.items.splice(0, 0, obj);
  112 + // }
112 113 // console.log("this.adminRole", this.adminRole);
113 114 this.SchoolRole = this.$store.state.schoolRole;
114 115 },
... ...
src/pages/Common/CoursesSideBar.vue
Diff comments   View file @e91641f
... ... @@ -0,0 +1,83 @@
  1 +<template>
  2 + <div>
  3 + <!-- LOADER -->
  4 + <div class="loader" v-if="showLoader">
  5 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  6 + </div>
  7 +
  8 + <!-- SNACKBAR -->
  9 + <v-snackbar
  10 + :timeout="timeout"
  11 + :top="y === 'top'"
  12 + :right="x === 'right'"
  13 + :vertical="mode === 'vertical'"
  14 + v-model="snackbar"
  15 + :color="snackbarColor"
  16 + >
  17 + {{ text }}
  18 + <v-spacer></v-spacer>
  19 + <v-btn flat text @click="snackbar = false">X</v-btn>
  20 + </v-snackbar>
  21 +
  22 + <v-container class="pt-0">
  23 + <div class="side-bar-color font-weight-bold title">Courses</div>
  24 +
  25 + <div v-for="(course,index) in courseData">
  26 + <v-btn
  27 + flat
  28 + class="subheading text-xs-start justify-left"
  29 + style="cursor: pointer;"
  30 + block
  31 + @click="routeToCourseDetails(course._id)"
  32 + >
  33 + <div style="width: 100%;text-align: left;">
  34 + <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
  35 + {{course.courseName}}
  36 + </div>
  37 + </v-btn>
  38 + </div>
  39 + </v-container>
  40 + </div>
  41 +</template>
  42 +<script>
  43 +import AllApiCalls from "@/Services/AllApiCalls.js";
  44 +export default {
  45 + mixins: [AllApiCalls],
  46 + data() {
  47 + return {};
  48 + },
  49 + methods: {
  50 + async routeToCourseDetails(courseId) {
  51 + /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
  52 + let response = await this.getParticularCourseDetail(courseId);
  53 +
  54 + /* If the response is null then dont route */
  55 + if (response.data.data.length > 0) {
  56 + this.$router.push({
  57 + name: "Course Details",
  58 + query: { courseId: courseId }
  59 + });
  60 + } else {
  61 + this.seeSnackbar("No Data Available", "warning");
  62 + }
  63 + }
  64 + },
  65 + async created() {
  66 + /* getStudentCourses - to get courseData - defined in GetApis.js*/
  67 + await this.getStudentCourses({
  68 + classId: localStorage.getItem("parentClassId"),
  69 + studentId: localStorage.getItem("parentStudentId")
  70 + });
  71 + }
  72 +};
  73 +</script>
  74 +<style scoped>
  75 +.side-bar-color {
  76 + color: #827bfa !important;
  77 + /* border-top-right-radius: 74px !important; */
  78 +}
  79 +.card-border {
  80 + border: 1px #bdbdbd solid;
  81 + border-radius: 3px;
  82 +}
  83 +</style>
0 84 \ No newline at end of file
... ...
src/pages/Course/courseDetail.vue
Diff comments   View file @e91641f
... ... @@ -453,7 +453,7 @@
453 453 slot="activator"
454 454 style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
455 455 class="mr-3"
456   - @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId }})"
  456 + @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"
457 457 >video_call</v-icon>
458 458 <span>Live Session</span>
459 459 </v-tooltip>
... ...
src/pages/Dashboard/ChapterInfo.vue
Diff comments   View file @e91641f
... ... @@ -40,8 +40,10 @@
40 40 <!-- OTHER OPTIONS -->
41 41 <div class="mt-5">
42 42 <ul class="subheading" style="cursor: pointer">
43   - <li @click="$router.push({name: 'Live Online Class'})">
44   - <v-btn flat>Live online classes solution</v-btn>
  43 + <li
  44 + @click="$router.push({name: 'Live Online Class', query: {chapterId: $route.query.selectedChapterId, chapterName: chapter.chapters[0].chapterName, courseId: $route.query.courseId, classId: localStorage.getItem('parentClassId') } })"
  45 + >
  46 + <v-btn flat>Live online classes</v-btn>
45 47 </li>
46 48 <!-- <li>
47 49 <v-btn flat>Tutorial-pharmacetutical</v-btn>
... ... @@ -86,27 +88,10 @@
86 88  
87 89 <v-spacer></v-spacer>
88 90  
89   - <!-- COURSES - positioned to the right of the page -->
  91 + <!-- COURSES SIDE BAR- positioned to the right of the page -->
90 92 <v-flex xs3>
91 93 <v-card class="elevation-0 card-border" height="100%">
92   - <v-container class="pt-0">
93   - <div class="side-bar-color font-weight-bold title">Courses</div>
94   -
95   - <div v-for="(course,index) in courseData" :key="index">
96   - <v-btn
97   - flat
98   - class="subheading text-xs-start justify-left"
99   - style="cursor: pointer;"
100   - block
101   - @click="routeToCourseDetails(course._id)"
102   - >
103   - <div style="width: 100%;text-align: left;">
104   - <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
105   - {{course.courseName}}
106   - </div>
107   - </v-btn>
108   - </div>
109   - </v-container>
  94 + <CoursesSideBar></CoursesSideBar>
110 95 </v-card>
111 96 </v-flex>
112 97 </v-layout>
... ... @@ -116,11 +101,16 @@
116 101 <script>
117 102 import http from "@/Services/http.js";
118 103 import AllApiCalls from "@/Services/AllApiCalls.js";
  104 +import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
119 105 export default {
120 106 mixins: [AllApiCalls],
  107 + components: {
  108 + CoursesSideBar
  109 + },
121 110 data() {
122 111 return {
123 112 // courseData: [],
  113 + localStorage: localStorage,
124 114 showLoader: false,
125 115 chapter: { chapters: [{}] },
126 116 chapterNames: [],
... ... @@ -152,27 +142,12 @@ export default {
152 142 })
153 143 .then(response => {
154 144 this.chapter = response.data.data;
155   - console.log(" chapter data - ", this.chapter);
156 145 this.showLoader = false;
157 146 })
158 147 .catch(err => {
159   - console.log("err====>", err);
  148 + console.log("err in getParticularChapterDetail====>", err);
160 149 this.showLoader = false;
161 150 });
162   - },
163   - async routeToCourseDetails(courseId) {
164   - /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
165   - let response = await this.getParticularCourseDetail(courseId);
166   -
167   - /* If the response is null then dont route */
168   - if (response.data.data.length > 0) {
169   - this.$router.push({
170   - name: "Course Details",
171   - query: { courseId: courseId }
172   - });
173   - } else {
174   - this.seeSnackbar("No Data Available", "warning");
175   - }
176 151 }
177 152 },
178 153 // computed:{
... ... @@ -183,33 +158,26 @@ export default {
183 158 async created() {
184 159 console.log("route query - ", this.$route.query);
185 160  
186   - this.selectedChapterId = this.$route.query.chapterId;
  161 + this.selectedChapterId = this.$route.query.selectedChapterId;
187 162  
188 163 /* set chapterNames array */
189 164 this.chapterNames = Object.keys(this.$route.query);
190 165 this.chapterNames.pop();
191 166 this.chapterNames.pop();
192   - console.log("chapter names - ", this.chapterNames);
  167 + this.chapterNames.pop();
193 168  
194 169 /* set chapter Ids */
195 170 this.chapterIds = Object.values(this.$route.query);
196 171 this.chapterIds.pop();
197 172 this.chapterIds.pop();
198   - console.log("chapter Ids - ", this.chapterIds);
  173 + this.chapterIds.pop();
199 174  
200 175 this.indexSelectedChapter = this.chapterIds.findIndex(id => {
201 176 return id == this.selectedChapterId;
202 177 });
203   - console.log(" index of selected chapter - ", this.indexSelectedChapter);
204 178  
205 179 /* get chapter clicked on using the id */
206 180 await this.getParticularChapterDetail(this.selectedChapterId);
207   -
208   - /* getStudentCourses - to get courseData - defined in GetApis.js*/
209   - await this.getStudentCourses({
210   - classId: localStorage.getItem("parentClassId"),
211   - studentId: localStorage.getItem("parentStudentId")
212   - });
213 181 }
214 182 };
215 183 </script>
... ...
src/pages/Dashboard/CourseDetails.vue
Diff comments   View file @e91641f
... ... @@ -32,24 +32,24 @@
32 32 </v-flex>
33 33  
34 34 <div class="mt-5">
35   - <span
36   - style="cursor: pointer;"
37   - class="grey--text lighten-1"
  35 + <v-btn
38 36 @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})"
  37 + flat
  38 + class="grey--text lighten-1"
39 39 >
40   - <v-icon>question_answer</v-icon>
41   - <span class="ml-2">Announcement</span>
42   - </span>
  40 + <v-icon>volume_up</v-icon>
  41 + <span>Announcement</span>
  42 + </v-btn>
43 43 </div>
44 44 <div>
45   - <span
46   - style="cursor: pointer;"
  45 + <v-btn
47 46 @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})"
48 47 class="grey--text lighten-1"
  48 + flat
49 49 >
50   - <v-icon>question_answer</v-icon>
  50 + <v-icon>forum</v-icon>
51 51 <span class="ml-2">Course discussion forum</span>
52   - </span>
  52 + </v-btn>
53 53 </div>
54 54 <!-- CHAPTERS -->
55 55 <v-layout column class="mt-5">
... ... @@ -127,7 +127,7 @@ export default {
127 127 };
128 128 },
129 129 methods: {
130   - routeToChapterInfo(chapterId) {
  130 + routeToChapterInfo(selectedChapterId) {
131 131 /* set value of present chapter selected, and other chapters ids in the obj */
132 132 let obj = {};
133 133 for (var i = 0; i < this.courseDetails[0].chapters.length; i++) {
... ... @@ -135,8 +135,9 @@ export default {
135 135 this.courseDetails[0].chapters[i].chapterName
136 136 ] = this.courseDetails[0].chapters[i]._id;
137 137 }
138   - obj.chapterId = chapterId;
  138 + obj.selectedChapterId = selectedChapterId;
139 139 obj.courseDetailId = this.courseDetails[0]._id;
  140 + obj.courseId = this.$route.query.courseId;
140 141 this.$router.push({
141 142 name: "Chapter Info",
142 143 query: obj
... ...
src/pages/Dashboard/CourseDiscussionForum.vue
Diff comments   View file @e91641f
... ... @@ -190,6 +190,7 @@
190 190 <td class="td td-row text-xs-center">{{ props.item.forumThread.length }}</td>
191 191 </tr>
192 192 </template>
  193 + <!-- REPLY FUNCTIONALITY -->
193 194 <template slot="expand" slot-scope="props">
194 195 <v-layout>
195 196 <v-flex xs12 v-for="(courseDiscussionData,i) in courseDiscussionData" :key="i">
... ... @@ -253,89 +254,94 @@
253 254 @click="replyThreadDiscussion(props.item)"
254 255 >Submit</v-btn>
255 256 </v-flex>
256   - <v-flex
257   - xs12
258   - class="mt-4 pl-5 mx-auto"
259   - v-for="(replyThread,i) in courseDiscussionData.forumThread"
  257 +
  258 + <!-- REPLY THREAD -->
  259 + <v-layout
  260 + :class="[mt-4,pl-5,mx-auto,replyThread.teacherId?'justify-start':'justify-end']"
  261 + v-for="(replyThread,i) in courseDiscussionData.forumThread.slice().reverse()"
260 262 :key="i"
261 263 >
262   - <v-card class="elevation-0 grey lighten-3" flat>
263   - <v-list two-line subheader class="grey lighten-3 pa-1">
264   - <v-list-tile>
265   - <v-list-tile-avatar>
266   - <v-avatar size="46">
267   - <img
268   - :src="courseDiscussionData.attachementUrl"
269   - v-if="courseDiscussionData.attachementUrl"
270   - />
271   - <img
272   - src="/static/icon/user.png"
273   - v-else-if="!courseDiscussionData.attachementUrl"
274   - />
275   - </v-avatar>
276   - </v-list-tile-avatar>
  264 + <v-flex xs12 md7>
  265 + <v-card class="elevation-0 grey lighten-3" flat>
  266 + <v-list two-line subheader class="grey lighten-3 pa-1">
  267 + <v-list-tile>
  268 + <v-list-tile-avatar>
  269 + <v-avatar size="46">
  270 + <img
  271 + :src="courseDiscussionData.attachementUrl"
  272 + v-if="courseDiscussionData.attachementUrl"
  273 + />
  274 + <img
  275 + src="/static/icon/user.png"
  276 + v-else-if="!courseDiscussionData.attachementUrl"
  277 + />
  278 + </v-avatar>
  279 + </v-list-tile-avatar>
  280 + <v-list-tile-content>
  281 + <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
  282 + <v-list-tile-sub-title>
  283 + By
  284 + <span
  285 + class="info--text"
  286 + v-if="replyThread.studentId"
  287 + >{{ replyThread.studentId.name }}</span>
  288 + <span
  289 + class="info--text"
  290 + v-if="replyThread.teacherId"
  291 + >{{ replyThread.teacherId.name }}</span>
  292 + - {{dates(replyThread.created ) }}
  293 + </v-list-tile-sub-title>
  294 + </v-list-tile-content>
  295 + </v-list-tile>
  296 + </v-list>
  297 + <v-list class="pa-2 reply-desc">
277 298 <v-list-tile-content>
278   - <v-list-tile-title>Re: {{ courseDiscussionData.subject }}</v-list-tile-title>
279   - <v-list-tile-sub-title>
280   - By
281   - <span
282   - class="info--text"
283   - v-if="replyThread.studentId"
284   - >{{ replyThread.studentId.name }}</span>
285   - <span
286   - class="info--text"
287   - v-if="replyThread.teacherId"
288   - >{{ replyThread.teacherId.name }}</span>
289   - - {{dates(replyThread.created ) }}
290   - </v-list-tile-sub-title>
  299 + <v-list-tile-title
  300 + v-show="replyThread.showDescriptionReplyThread"
  301 + >{{ replyThread.description }}</v-list-tile-title>
  302 + <v-flex
  303 + xs12
  304 + sm12
  305 + md4
  306 + v-show="replyThread.showUpdateReplyThread == true"
  307 + >
  308 + <v-text-field v-model="replyThread.description"></v-text-field>
  309 + <v-btn
  310 + flat
  311 + round
  312 + dark
  313 + class="reply-btn right"
  314 + @click="updateRelpyThreadDiscussion(replyThread,props.item)"
  315 + >Save</v-btn>
  316 + </v-flex>
291 317 </v-list-tile-content>
292   - </v-list-tile>
293   - </v-list>
294   - <v-list class="pa-2 reply-desc">
295   - <v-list-tile-content>
296   - <v-list-tile-title
297   - v-show="replyThread.showDescriptionReplyThread"
298   - >{{ replyThread.description }}</v-list-tile-title>
299   - <v-flex
300   - xs12
301   - sm12
302   - md4
303   - v-show="replyThread.showUpdateReplyThread == true"
304   - >
305   - <v-text-field v-model="replyThread.description"></v-text-field>
306   - <v-btn
307   - flat
308   - round
309   - dark
310   - class="reply-btn right"
311   - @click="updateRelpyThreadDiscussion(replyThread,props.item)"
312   - >Save</v-btn>
313   - </v-flex>
314   - </v-list-tile-content>
315   - </v-list>
316   - <v-list class="grey lighten-4 pa-0">
317   - <v-list-tile-action>
318   - <v-spacer></v-spacer>
319   - <div>
320   - <v-btn
321   - flat
322   - round
323   - dark
324   - class="reply-btn"
325   - @click="deleteRelpyThreadDiscussion(replyThread._id,props.item._id)"
326   - >Delete</v-btn>
327   - <v-btn
328   - flat
329   - round
330   - dark
331   - class="reply-btn mr-4"
332   - @click="showUpdateReplyThreadDiscussion(replyThread)"
333   - >Edit</v-btn>
334   - </div>
335   - </v-list-tile-action>
336   - </v-list>
337   - </v-card>
338   - </v-flex>
  318 + </v-list>
  319 + <v-list class="grey lighten-4 pa-0">
  320 + <v-list-tile-action>
  321 + <v-spacer></v-spacer>
  322 + <div
  323 + v-if="replyThread.studentId && replyThread.studentId._id == localStorage.getItem('parentStudentId')"
  324 + >
  325 + <v-btn
  326 + flat
  327 + round
  328 + dark
  329 + class="reply-btn"
  330 + @click="deleteRelpyThreadDiscussion(replyThread._id,props.item._id)"
  331 + >Delete</v-btn>
  332 + <v-btn
  333 + flat
  334 + round
  335 + dark
  336 + class="reply-btn mr-4"
  337 + @click="showUpdateReplyThreadDiscussion(replyThread)"
  338 + >Edit</v-btn>
  339 + </div>
  340 + </v-list-tile-action>
  341 + </v-list>
  342 + </v-card>
  343 + </v-flex>
  344 + </v-layout>
339 345 </v-flex>
340 346 </v-layout>
341 347 </template>
... ...
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @e91641f
... ... @@ -19,125 +19,17 @@
19 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 20 </v-snackbar>
21 21  
22   - <!-- DIALOG TO ADD COURSE DISCUSSION FORUM -->
23   - <v-dialog v-model="addForumDialog" max-width="500" persistent>
24   - <v-card flat class="card-style pa-2" dark>
25   - <v-layout>
26   - <v-flex xs12>
27   - <label class="title text-xs-center">Add Forum</label>
28   - <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon>
29   - </v-flex>
30   - </v-layout>
31   - <v-container fluid>
32   - <v-layout align-center>
33   - <v-flex xs12>
34   - <v-flex xs12 sm12>
35   - <v-form ref="form" v-model="valid" lazy-validation>
36   - <v-layout>
37   - <v-flex
38   - xs12
39   - class="text-xs-center text-sm-center text-md-center text-lg-center"
40   - >
41   - <v-avatar size="100px" v-if="!imageUrl">
42   - <img src="/static/icon/user.png" />
43   - </v-avatar>
44   - <input
45   - type="file"
46   - style="display: none"
47   - ref="image"
48   - accept="image/*"
49   - @change="onFilePicked"
50   - />
51   - <img
52   - :src="imageData.imageUrl"
53   - height="150"
54   - width="150"
55   - v-if="imageUrl"
56   - style="border-radius:50%; width:200px"
57   - />
58   - </v-flex>
59   - </v-layout>
60   -
61   - <v-layout wrap>
62   - <!-- SUBJECT -->
63   - <v-flex xs12 sm12>
64   - <v-layout>
65   - <v-flex xs4 sm4 class="pt-4 subheading">
66   - <label class="right hidden-xs-only hidden-sm-only">Subject:</label>
67   - <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
68   - </v-flex>
69   - <v-flex xs8 sm8 class="ml-3">
70   - <v-text-field
71   - v-model="addForumParams.subject"
72   - placeholder="subject"
73   - type="text"
74   - :rules="cantBeEmpty"
75   - required
76   - ></v-text-field>
77   - </v-flex>
78   - </v-layout>
79   - </v-flex>
80   - <!-- DESCRIPTION -->
81   - <v-flex xs12 sm12>
82   - <v-layout>
83   - <v-flex xs4 sm4 class="pt-4 subheading">
84   - <label class="right hidden-xs-only hidden-sm-only">Description:</label>
85   - <label
86   - class="right hidden-lg-only hidden-md-only hidden-xl-only"
87   - >Description:</label>
88   - </v-flex>
89   - <v-flex xs8 sm8 class="ml-3">
90   - <v-text-field
91   - v-model="addForumParams.description"
92   - placeholder="Description"
93   - type="text"
94   - :rules="cantBeEmpty"
95   - required
96   - ></v-text-field>
97   - </v-flex>
98   - </v-layout>
99   - </v-flex>
100   - <!-- UPLOAD IMAGE -->
101   - <v-flex xs12 sm12>
102   - <v-layout>
103   - <v-flex xs4 class="pt-4 subheading">
104   - <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
105   - <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
106   - </v-flex>
107   - <v-flex xs8 class="ml-3">
108   - <v-text-field
109   - label="Select Image"
110   - @click="pickFile"
111   - v-model="imageName"
112   - append-icon="attach_file"
113   - ></v-text-field>
114   - </v-flex>
115   - </v-layout>
116   - </v-flex>
117   - </v-layout>
118   - <v-layout>
119   - <v-flex xs12 sm12>
120   - <v-layout class="right">
121   - <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
122   - </v-layout>
123   - </v-flex>
124   - </v-layout>
125   - </v-form>
126   - </v-flex>
127   - </v-flex>
128   - </v-layout>
129   - </v-container>
130   - </v-card>
131   - </v-dialog>
132   -
133 22 <v-container grid-list-xl class="pt-0">
134 23 <v-layout row wrap class="mt-1">
  24 + <!-- if logged in user is parent -->
135 25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
136 26 <v-layout column>
137 27 <!-- HEADING -->
138 28 <v-flex>
139   - <div class="title side-bar-color font-weight-bold">Live Online Classes - Solution</div>
140   - <div class="subheading grey--text lighten-1">This conference is in progress</div>
  29 + <div
  30 + class="title side-bar-color font-weight-bold"
  31 + >Live Online Classes - {{$route.query.chapterName}}</div>
  32 + <div class="subheading grey--text lighten-1">{{startLiveSession}}</div>
141 33 <div
142 34 class="subheading grey--text lighten-1"
143 35 >The session started at 1:00 there is 1 moderator</div>
... ... @@ -151,7 +43,7 @@
151 43 </v-flex>
152 44  
153 45 <!-- DATA TABLE -->
154   - <v-flex>
  46 + <!-- <v-flex>
155 47 <div>
156 48 <span class="subheading font-weight-bold">Recording</span>
157 49 </div>
... ... @@ -177,9 +69,11 @@
177 69 </tr>
178 70 </template>
179 71 </v-data-table>
180   - </v-flex>
  72 + </v-flex>-->
181 73 </v-layout>
182 74 </v-flex>
  75 +
  76 + <!-- if logged in user is teacher -->
183 77 <v-flex xs12 sm12 md12 v-else>
184 78 <v-layout column>
185 79 <!-- HEADING -->
... ... @@ -187,7 +81,7 @@
187 81 <div
188 82 class="title side-bar-color font-weight-bold"
189 83 >Live Online Classes - {{$route.query.chapterName}}</div>
190   - <div class="subheading grey--text lighten-1">This conference is in progress</div>
  84 + <div class="subheading grey--text lighten-1">{{startLiveSession}}</div>
191 85 <div
192 86 class="subheading grey--text lighten-1"
193 87 >The session started at 1:00 there is 1 moderator</div>
... ... @@ -196,12 +90,17 @@
196 90 <!-- JOIN OR END SESSION -->
197 91 <v-flex>
198 92 <div>
199   - <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
  93 + <v-btn
  94 + round
  95 + class="open-dialog-button"
  96 + dark
  97 + @click="createRoom($route.query.classId)"
  98 + >Start Session</v-btn>
200 99 </div>
201 100 </v-flex>
202 101  
203 102 <!-- DATA TABLE -->
204   - <v-flex>
  103 + <!-- <v-flex>
205 104 <div>
206 105 <span class="subheading font-weight-bold">Recording</span>
207 106 </div>
... ... @@ -218,7 +117,7 @@
218 117 @click="props.expanded = !props.expanded;courseDiscussionId = props.item._id;getDiscussionesThread(props.item._id)"
219 118 >
220 119 <td class="text-xs-center td td-row">
221   - <v-btn round class="open-dialog-button" dark>Join Session</v-btn>
  120 + <v-btn round class="open-dialog-button" dark>Start Session</v-btn>
222 121 </td>
223 122 <td class="td td-row text-xs-center">{{ }}</td>
224 123 <td class="td td-row text-xs-center">{{ }}</td>
... ... @@ -227,33 +126,20 @@
227 126 </tr>
228 127 </template>
229 128 </v-data-table>
  129 + </v-flex>-->
  130 +
  131 + <v-flex>
  132 + <div id="jitsi-container"></div>
230 133 </v-flex>
231 134 </v-layout>
232 135 </v-flex>
233 136  
234 137 <v-spacer></v-spacer>
235 138  
236   - <!-- COURSES - positioned to the right of the page -->
237   - <v-flex xs12 sm12 md3 v-if=" $store.state.role === 'PARENT' ">
  139 + <!-- COURSES SIDE BAR- positioned to the right of the page -->
  140 + <v-flex xs3>
238 141 <v-card class="elevation-0 card-border" height="100%">
239   - <v-container class="pt-0">
240   - <div class="side-bar-color font-weight-bold title">Courses</div>
241   -
242   - <div v-for="(course,index) in courseData">
243   - <v-btn
244   - flat
245   - class="subheading text-xs-start justify-left"
246   - style="cursor: pointer;"
247   - block
248   - @click="routeToCourseDetails(course._id)"
249   - >
250   - <div style="width: 100%;text-align: left;">
251   - <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
252   - {{course.courseName}}
253   - </div>
254   - </v-btn>
255   - </div>
256   - </v-container>
  142 + <CoursesSideBar></CoursesSideBar>
257 143 </v-card>
258 144 </v-flex>
259 145 </v-layout>
... ... @@ -264,19 +150,16 @@
264 150 import AllApiCalls from "@/Services/AllApiCalls.js";
265 151 import http from "@/Services/http.js";
266 152 import moment from "moment";
  153 +import Meet from "@/pages/Meet/meet.vue";
  154 +import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
267 155 export default {
268 156 mixins: [AllApiCalls],
  157 + components: {
  158 + CoursesSideBar
  159 + },
269 160 data() {
270 161 return {
271   - localStorage: localStorage,
272   - valid: true,
273   - addForumDialog: false,
274   - addForumParams: {},
275   - // UPLOAD IMAGE
276   - imageName: "",
277   - imageUrl: "",
278   - imageFile: "",
279   - imageData: {},
  162 + startLiveSession: "",
280 163  
281 164 // DATA TABLE
282 165 search: "",
... ... @@ -314,227 +197,154 @@ export default {
314 197 ],
315 198 liveOnlineItems: [],
316 199  
317   - // COURSE DISCUSSION REPLTY FUNCTIONALITY
318   - courseDiscussionId: "",
319   - showReplyBox: false,
320   - courseDiscussionData: [],
321   - replyDescription: "",
322   - loginId: "",
323   - editedIndex: -1
  200 + // JITSI CONTAINER
  201 + token: "",
  202 + selectStudents: {},
  203 + classRules: [v => !!v || " Class Name is required"],
  204 + sectionRules: [v => !!v || " Section Name is required"],
  205 + addclass: [],
  206 + addSection: [],
  207 + loading: false,
  208 + room: "",
  209 + username: "",
  210 + roomPassword: ""
324 211 };
325 212 },
326 213 methods: {
327   - dates: function(date) {
328   - return moment(date).format("MMMM DD, YYYY hh:mm A");
329   - },
330   - /* UPLOAD IMAGE */
331   - pickFile() {
332   - this.$refs.image.click();
333   - },
  214 + // JITSI CONTAINER
  215 + startConference() {
  216 + var _this = this;
  217 + try {
  218 + const domain = "meet.jit.si";
  219 + const options = {
  220 + audioInput: "<deviceLabel>",
  221 + audioOutput: "<deviceLabel>",
  222 + videoInput: "<deviceLabel>",
  223 + roomName: this.room,
  224 + height: 500,
  225 + parentNode: document.getElementById("jitsi-container"),
  226 + interfaceConfigOverwrite: {
  227 + filmStripOnly: false,
  228 + SHOW_JITSI_WATERMARK: false,
  229 + TOOLBAR_BUTTONS: [
  230 + "microphone",
  231 + "camera",
  232 + "closedcaptions",
  233 + "desktop",
  234 + "fullscreen",
  235 + "fodeviceselection",
  236 + "hangup",
  237 + "profile",
  238 + "info",
  239 + "chat",
  240 + "recording",
  241 + "livestreaming",
  242 + "etherpad",
  243 + "sharedvideo",
  244 + "settings",
  245 + "raisehand",
  246 + "videoquality",
  247 + "filmstrip",
  248 + "invite",
  249 + "feedback",
  250 + "stats",
  251 + "shortcuts",
  252 + "tileview"
  253 + ]
  254 + },
  255 + configOverwrite: {
  256 + disableSimulcast: false
  257 + },
  258 + teacherName: "",
  259 + romm: ""
  260 + };
334 261  
335   - onFilePicked(e) {
336   - // console.log(e)
337   - const files = e.target.files;
338   - this.imageData.upload = e.target.files[0];
339   - if (files[0] !== undefined) {
340   - this.imageName = files[0].name;
341   - if (this.imageName.lastIndexOf(".") <= 0) {
342   - return;
343   - }
344   - const fr = new FileReader();
345   - fr.readAsDataURL(files[0]);
346   - fr.addEventListener("load", () => {
347   - this.imageUrl = fr.result;
348   - this.imageFile = files[0]; // this is an image file that can be sent to server...
349   - this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
350   - });
351   - } else {
352   - this.imageName = "";
353   - this.imageFile = "";
354   - this.imageUrl = "";
355   - }
356   - },
357   - async submit() {
358   - if (this.$refs.form.validate()) {
359   - this.addForumParams.classId = localStorage.getItem("parentClassId");
360   - this.addForumParams.courseId = this.$route.query.courseId;
361   - this.addForumParams.studentId = localStorage.getItem("parentStudentId");
362   -
363   - if (this.imageUrl) {
364   - var str = this.imageUrl;
365   - const [baseUrl, imageUrl] = str.split(/,/);
366   - this.addForumParams.upload = imageUrl;
367   - }
368   - this.loading = true;
369   - await http()
370   - .post("/createCourseDiscussion", this.addForumParams)
371   - .then(response => {
372   - this.snackbar = true;
373   - this.text = "Discussion added successfully";
374   - this.snackbarColor = "green";
375   - this.addForumDialog = false;
376   - this.clear();
377   - this.loading = false;
378   - console.log("response of createCourseDiscussion - ", response);
379   - })
380   - .catch(error => {
381   - this.snackbar = true;
382   - this.text = error.response.data.message;
383   - this.snackbarColor = "error";
384   - this.loading = false;
385   - });
  262 + this.api = new JitsiMeetExternalAPI(domain, options);
  263 + this.api.addEventListener("videoConferenceJoined", () => {
  264 + console.log("Local User Joined");
386 265  
387   - /* getCourseDiscussionesList - to populate the data table */
388   - await this.getCourseDiscussionesList({
389   - courseId: this.$route.query.courseId,
390   - classId: localStorage.getItem("parentClassId")
  266 + _this.api.executeCommand("displayName", _this.username);
  267 + _this.api.executeCommand("password", this.roomPassword);
391 268 });
392   - this.addForumDialog = false;
  269 + } catch (error) {
  270 + console.error("Failed to load Jitsi API", error);
393 271 }
394 272 },
395   - clear() {
396   - this.$refs.form.reset();
397   - this.imageUrl = "";
398   - },
399   - async routeToCourseDetails(courseId) {
400   - /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
401   - let response = await this.getParticularCourseDetail(courseId);
402   -
403   - /* If the response is null then dont route */
404   - if (response.data.data.length > 0) {
405   - this.$router.push({
406   - name: "Course Details",
407   - query: { courseId: courseId }
408   - });
409   - } else {
410   - this.seeSnackbar("No Data Available", "warning");
411   - }
  273 + openRoom() {
  274 + // verify the JitsiMeetExternalAPI constructor is added to the global..
  275 + // if (this.teacherName != "" || this.room != "") {
  276 + // if (window.JitsiMeetExternalAPI) {
  277 + // // var person = prompt("Please enter your name:", "Rabie");
  278 + // if (person != null || person != "") this.username = this.teacherName;
  279 + // var room = prompt("Please enter your room:", "Test Room");
  280 + // if (room != null || room != "") this.room = this.room;
  281 + // this.startConference();
  282 + // } else alert("Jitsi Meet API script not loaded");
  283 + // }
412 284 },
413 285  
414   - // COURSE DISCUSSION REPLY FUNCTIONALITY
415   -
416   - getDiscussionesThread() {
417   - // console.log("id", this.getSelectedData.courseId);
  286 + createRoom(classId) {
418 287 this.showLoader = true;
419   - http()
420   - .get("/getParticularCourseDiscussion", {
421   - params: {
422   - courseDiscussionId: this.courseDiscussionId
423   - }
424   - })
425   - .then(response => {
426   - // console.log("response", response.data.data);
427   - this.courseDiscussionData = response.data.data;
428   - for (let i = 0; i < this.courseDiscussionData.length; i++) {
429   - for (
430   - let j = 0;
431   - j < this.courseDiscussionData[i].forumThread.length;
432   - j++
433   - ) {
434   - this.courseDiscussionData[i].forumThread[
435   - j
436   - ].showUpdateReplyThread = false;
437   - this.courseDiscussionData[i].forumThread[
438   - j
439   - ].showDescriptionReplyThread = true;
440   - }
441   - }
442   - this.showLoader = false;
443   - this.showReplyBox = false;
444   - })
445   - .catch(error => {
446   - console.log("err====>", error);
447   - this.showLoader = false;
448   - });
449   - },
450   - replyThreadDiscussion(selected) {
451   - this.showLoader = true;
452   - var payloadData = {
453   - courseDiscussionId: selected._id,
454   - studentId: localStorage.getItem("parentStudentId"),
455   - description: this.replyDescription
456   - };
457   - http()
458   - .put("/replyForumThread", payloadData)
459   - .then(response => {
460   - // console.log("response", response.data.data);
461   - this.showLoader = false;
462   - this.getDiscussionesThread();
463   - })
464   - .catch(error => {
465   - this.showLoader = false;
466   - });
467   - },
468   - showUpdateReplyThreadDiscussion(item) {
469   - this.editedIndex = this.courseDiscussionData.indexOf(item);
470   - var editedItem = Object.assign({}, item);
471   - var arrayOfcourseDiscussionData = [];
472   - for (let i = 0; i < this.courseDiscussionData.length; i++) {
473   - for (
474   - let j = 0;
475   - j < this.courseDiscussionData[i].forumThread.length;
476   - j++
477   - ) {
478   - if (
479   - editedItem._id == this.courseDiscussionData[i].forumThread[j]._id
480   - ) {
481   - this.courseDiscussionData[i].forumThread[
482   - j
483   - ].showUpdateReplyThread = true;
484   - this.courseDiscussionData[i].forumThread[
485   - j
486   - ].showDescriptionReplyThread = false;
487   - }
488   - }
489   - arrayOfcourseDiscussionData.push(this.courseDiscussionData[i]);
490   - }
491   - this.courseDiscussionData = arrayOfcourseDiscussionData;
492   - },
493   - updateRelpyThreadDiscussion(replyThread, selected) {
494   - this.showLoader = true;
495   - var payloadData = {
496   - forumThreadId: replyThread._id,
497   - courseDiscussionId: selected._id,
498   - studentId: localStorage.getItem("parentStudentId"),
499   - description: replyThread.description
  288 + var classId = {
  289 + classId: classId
500 290 };
501 291 http()
502   - .put("/updateForumThread", payloadData)
503   - .then(response => {
504   - this.showLoader = false;
505   - this.getDiscussionesThread();
  292 + .post("/createLiveClasses", {
  293 + classId: this.$route.query.classId,
  294 + courseId: this.$route.query.courseId,
  295 + chapterId: this.$route.query.chapterId
506 296 })
507   - .catch(error => {
508   - this.showLoader = false;
509   - });
510   - },
511   - deleteRelpyThreadDiscussion(id, courseDiscussionId) {
512   - this.showLoader = true;
513   - var payloadData = {
514   - forumThreadId: id,
515   - courseDiscussionId: courseDiscussionId
516   - };
517   - http()
518   - .put(
519   - "/deleteForumThread",
520   - confirm("Are you sure you want to delete this?") && payloadData
521   - )
522 297 .then(response => {
  298 + // this.addSection = response.data.data;
  299 + console.log("CREATE___ROOOM", response.data);
  300 + this.room = response.data.data.LiveClasses.roomName;
  301 + this.username = response.data.data.LiveClasses.teacherName;
  302 + this.roomPassword = response.data.data.LiveClasses.roomPassword;
  303 + var this_ = this;
  304 + if (this.username != "" || this.room != "") {
  305 + if (window.JitsiMeetExternalAPI) {
  306 + // var person = prompt("Please enter your name:", "Rabie");
  307 + if (this_.username != null || this_.username != "") {
  308 + this.username = this.username;
  309 + }
  310 + // var room = prompt("Please enter your room:", "Test Room");
  311 + if (this_.room != null || this_.room != "") {
  312 + this.room = this.room;
  313 + }
  314 + this.startConference();
  315 + } else alert("Jitsi Meet API script not loaded");
  316 + }
523 317 this.showLoader = false;
524   - this.getDiscussionesThread();
525 318 })
526   - .catch(error => {
  319 + .catch(err => {
527 320 this.showLoader = false;
528 321 });
529 322 }
530 323 },
  324 +
  325 + mounted() {
  326 + this.token = this.$store.state.token;
  327 + },
531 328 async created() {
532   - this.loginId = this.$store.state.id;
533   - /* getStudentCourses - to get courseData - defined in GetApis.js*/
534   - await this.getStudentCourses({
535   - classId: localStorage.getItem("parentClassId"),
536   - studentId: localStorage.getItem("parentStudentId")
  329 + /* getLiveClassesesList - To up date line under heading*/
  330 + let response = await this.getLiveClassesesList({
  331 + classId: this.$route.query.classId,
  332 + courseId: this.$route.query.courseId,
  333 + chapterId: this.$route.query.chapterId
537 334 });
  335 + console.log("response getLiveClassesesList- ", response);
  336 + if (response.data.data.length == 0) {
  337 + console.log("response of - ", response);
  338 + this.startLiveSession = "Start live session";
  339 + }
  340 +
  341 + /* getStudentCourses - to get courseData - defined in GetApis.js*/
  342 + if (this.$store.state.role === "PARENT") {
  343 + await this.getStudentCourses({
  344 + classId: localStorage.getItem("parentClassId"),
  345 + studentId: localStorage.getItem("parentStudentId")
  346 + });
  347 + }
538 348 }
539 349 };
540 350 </script>
... ... @@ -563,4 +373,7 @@ export default {
563 373 -webkit-box-shadow: none !important;
564 374 box-shadow: none !important;
565 375 }
  376 +#jitsi-container {
  377 + height: 100vh;
  378 +}
566 379 </style>
567 380 \ No newline at end of file
... ...
src/pages/Meet/meet.vue
Diff comments   View file @e91641f
... ... @@ -29,7 +29,13 @@
29 29 ></v-select>
30 30 </v-flex>-->
31 31 <v-flex xs3>
32   - <v-btn @click="createRoom()" round dark :loading="loading" class="add-button mt-3">Find</v-btn>
  32 + <v-btn
  33 + @click="createRoom(selectStudents.classId)"
  34 + round
  35 + dark
  36 + :loading="loading"
  37 + class="add-button mt-3"
  38 + >Find</v-btn>
33 39 </v-flex>
34 40 </v-layout>
35 41 </v-flex>
... ... @@ -145,10 +151,10 @@ export default {
145 151 }
146 152 });
147 153 },
148   - createRoom() {
  154 + createRoom(classId) {
149 155 this.showLoader = true;
150 156 var classId = {
151   - classId: this.selectStudents.classId
  157 + classId: classId
152 158 };
153 159 http()
154 160 .post("/createRoom", classId)
... ...