viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 6e1cb5c96848910d65eac1a435e31c9b8dab92de

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

added token

Showing 4 changed files with 87 additions and 36 deletions   Show diff stats
src/Services/http.js
Diff comments   View file @6e1cb5c
1 import axios from 'axios' 1 import axios from 'axios'
2 import store from '@/store/store' 2 import store from '@/store/store'
3 import Vue from 'vue'
4 import {vm1} from "@/main.js"
3 5
4 const baseDomain = "https://api-dashboard.intrack.in/v1"; 6 const baseDomain = "https://api-dashboard.intrack.in/v1";
5 7
6 const baseURL = `${baseDomain}`; 8 const baseURL = `${baseDomain}`;
7 // var token = "" 9 // var token = ""
8 // if (store.state.role === "ADMIN") { 10 // if (store.state.role === "ADMIN") {
9 // token = `${store.state.token}` 11 // token = `${store.state.token}`
10 // } else if (store.state.schoolRole === "SUPERADMIN") { 12 // } else if (store.state.schoolRole === "SUPERADMIN") {
11 // token = `${store.state.schoolToken}` 13 // token = `${store.state.schoolToken}`
12 // } 14 // }
13 15
14 // console.log("role",`${store.state.schoolRole}`); 16 // console.log("role",`${store.state.schoolRole}`);
15 // console.log("token",`${store.state.schoolToken}`); 17 // console.log("token",`${store.state.schoolToken}`);
18
16 export default () => { 19 export default () => {
17 return axios.create({ 20 // return axios.create({
18 // baseURL: 'http://192.168.2.221:3002/v1', 21 // // baseURL: 'http://192.168.2.221:3002/v1',
19 baseURL, 22 // baseURL,
23 // headers: {
24 // Authorization: `Bearer ${store.state.token}`
25 // }
26 // })
27 let instance = axios.create({
28 // LIVE
29 //baseURL: 'https://annadata.patanjaliayurved.org/api',
30 // DEVELOPMENT
31 baseURL: baseURL,
32
20 headers: { 33 headers: {
21 Authorization: `Bearer ${store.state.token}` 34 Authorization: `Bearer ${store.state.token}`,
35 // 'Access-Control-Allow-Origin': '*'
36
37 }
38 })
39
40 instance.interceptors.request.use((config) => {
41 // Do something before request is sent
42
43 return config
44 }, error => {
45 return Promise.reject(error)
46 })
47 instance.interceptors.response.use((response) => {
48 // do something with the response data
49
50
51 return response;
52 }, error => {
53 // handle the response error
54 console.log("error in interceptor - ",error.response.status)
55 var customError
56 const errorNo = error.response.status
57
58 switch (errorNo) {
59 case 401:
60 customError = "Session expired"
61 console.log("what is this - ", vm1)
62 vm1.$store.dispatch("setToken", null);
63 vm1.$router.replace({ path: "/" });
64
65 vm1.$store.dispatch("Id", null);
66
67 break;
22 } 68 }
23 }) 69 })
70 // response parse
71
72 return instance;
24 } 73 }
1 // The Vue build version to load with the `import` command 1 // The Vue build version to load with the `import` command
2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 import Vue from 'vue'; 3 import Vue from 'vue';
4 import App from './App'; 4 import App from './App';
5 import Vuetify from 'vuetify'; 5 import Vuetify from 'vuetify';
6 import router from './router'; 6 import router from './router';
7 import 'font-awesome/css/font-awesome.css'; 7 import 'font-awesome/css/font-awesome.css';
8 import './theme/default.styl'; 8 import './theme/default.styl';
9 import VeeValidate from 'vee-validate'; 9 import VeeValidate from 'vee-validate';
10 import colors from 'vuetify/es5/util/colors'; 10 import colors from 'vuetify/es5/util/colors';
11 import Truncate from 'lodash.truncate'; 11 import Truncate from 'lodash.truncate';
12 import store from '@/store/store' 12 import store from '@/store/store'
13 import FullCalendar from 'vue-full-calendar'; 13 import FullCalendar from 'vue-full-calendar';
14 import JsonCSV from 'vue-json-csv' 14 import JsonCSV from 'vue-json-csv'
15 import VueHtml2Canvas from 'vue-html2canvas'; 15 import VueHtml2Canvas from 'vue-html2canvas';
16 import 'babel-polyfill'; 16 import 'babel-polyfill';
17 import VueHtmlToPaper from 'vue-html-to-paper'; 17 import VueHtmlToPaper from 'vue-html-to-paper';
18 import VueApexCharts from 'vue-apexcharts' 18 import VueApexCharts from 'vue-apexcharts'
19 // import FunctionalCalendar from 'vue-functional-calendar'; 19 // import FunctionalCalendar from 'vue-functional-calendar';
20 import 'vue-event-calendar/dist/style.css' //^1.1.10, CSS has been extracted as one file, so you can easily update it. 20 import 'vue-event-calendar/dist/style.css' //^1.1.10, CSS has been extracted as one file, so you can easily update it.
21 import vueEventCalendar from 'vue-event-calendar' 21 import vueEventCalendar from 'vue-event-calendar'
22 Vue.use(vueEventCalendar, { locale: 'en' }) 22 Vue.use(vueEventCalendar, { locale: 'en' })
23 23
24 // Vue.use(FunctionalCalendar, { 24 // Vue.use(FunctionalCalendar, {
25 // dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] 25 // dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
26 // }); 26 // });
27 Vue.use(VueApexCharts) 27 Vue.use(VueApexCharts)
28 Vue.component('apexchart', VueApexCharts) 28 Vue.component('apexchart', VueApexCharts)
29 const options = { 29 const options = {
30 name: '_blank', 30 name: '_blank',
31 specs: [ 31 specs: [
32 'fullscreen=yes', 32 'fullscreen=yes',
33 'titlebar=yes', 33 'titlebar=yes',
34 'scrollbars=yes' 34 'scrollbars=yes'
35 ], 35 ],
36 styles: [ 36 styles: [
37 'https://unpkg.com/vuetify/dist/vuetify.min.css', 37 'https://unpkg.com/vuetify/dist/vuetify.min.css',
38 'https://unpkg.com/kidlat-css/css/kidlat.css' 38 'https://unpkg.com/kidlat-css/css/kidlat.css'
39 ] 39 ]
40 } 40 }
41 Vue.use(VueHtmlToPaper, options); 41 Vue.use(VueHtmlToPaper, options);
42 // or, using the defaults with no stylesheet 42 // or, using the defaults with no stylesheet
43 43
44 Vue.use(VueHtmlToPaper); 44 Vue.use(VueHtmlToPaper);
45 Vue.use(VueHtml2Canvas); 45 Vue.use(VueHtml2Canvas);
46 46
47 Vue.component('downloadCsv', JsonCSV) 47 Vue.component('downloadCsv', JsonCSV)
48 48
49 Vue.config.productionTip = false; 49 Vue.config.productionTip = false;
50 Vue.use(FullCalendar); 50 Vue.use(FullCalendar);
51 // Helpers 51 // Helpers
52 // Global filters 52 // Global filters
53 // Vue.use(VueAxios, axios); 53 // Vue.use(VueAxios, axios);
54 Vue.filter('truncate', Truncate); 54 Vue.filter('truncate', Truncate);
55 Vue.use(VeeValidate, { fieldsBagName: 'formFields' }); 55 Vue.use(VeeValidate, { fieldsBagName: 'formFields' });
56 VeeValidate.Validator.localize({ 56 VeeValidate.Validator.localize({
57 en: { 57 en: {
58 custom: { 58 custom: {
59 password2: { 59 password2: {
60 is: 'The passwords do not match' 60 is: 'The passwords do not match'
61 } 61 }
62 } 62 }
63 } 63 }
64 }) 64 })
65 Vue.use(Vuetify, { 65 Vue.use(Vuetify, {
66 // theme: { 66 // theme: {
67 // primary: "f1f1f1", // #E53935 67 // primary: "f1f1f1", // #E53935
68 // // secondary: colors.indigo.lighten4, // #FFCDD2 68 // // secondary: colors.indigo.lighten4, // #FFCDD2
69 // // accent: colors.indigo.base // #3F51B5 69 // // accent: colors.indigo.base // #3F51B5
70 // }, 70 // },
71 options: { 71 options: {
72 themeVariations: ['primary', 'secondary', 'accent'], 72 themeVariations: ['primary', 'secondary', 'accent'],
73 extra: { 73 extra: {
74 mainToolbar: { 74 mainToolbar: {
75 color: 'primary', 75 color: 'primary',
76 }, 76 },
77 sideToolbar: {}, 77 sideToolbar: {},
78 sideNav: 'primary', 78 sideNav: 'primary',
79 mainNav: 'primary lighten-1', 79 mainNav: 'primary lighten-1',
80 bodyBg: '', 80 bodyBg: '',
81 } 81 }
82 } 82 }
83 }); 83 });
84 // Bootstrap application components 84 // Bootstrap application components
85 85
86 86
87 87
88 /* eslint-disable no-new */ 88 /* eslint-disable no-new */
89 new Vue({ 89 export var vm1 = new Vue({
90 el: '#app', 90 el: '#app',
91 router, 91 router,
92 store, 92 store,
93 components: { 93 components: {
94 App 94 App
95 }, 95 },
96 template: '<App/>' 96 template: '<App/>'
97 }); 97 });
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @6e1cb5c
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> 39 <v-flex>
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="startChat();" 46 @click="startChat();"
47 >{{studentBtn}}</v-btn> 47 >{{studentBtn}}</v-btn>
48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span> 48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>
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> 72 <v-flex>
73 <div> 73 <div>
74 <v-btn 74 <v-btn round class="open-dialog-button" dark @click="startChat()">Start Session</v-btn>
75 round
76 class="open-dialog-button"
77 dark
78 @click="startChat()"
79 >Start Session</v-btn>
80 </div> 75 </div>
81 </v-flex> 76 </v-flex>
82 <v-flex id="teacherClone"> 77 <v-flex id="teacherClone">
83 <div id="jitsi-container"></div> 78 <div id="jitsi-container"></div>
84 </v-flex> 79 </v-flex>
85 </v-layout> 80 </v-layout>
86 </v-flex> 81 </v-flex>
87 82
88 <v-spacer></v-spacer> 83 <v-spacer></v-spacer>
89 84
90 <!-- COURSES SIDE BAR- positioned to the right of the page --> 85 <!-- COURSES SIDE BAR- positioned to the right of the page -->
91 <!-- <v-flex xs3> 86 <!-- <v-flex xs3>
92 <v-card class="elevation-0 card-border" height="100%"> 87 <v-card class="elevation-0 card-border" height="100%">
93 <CoursesSideBar></CoursesSideBar> 88 <CoursesSideBar></CoursesSideBar>
94 </v-card> 89 </v-card>
95 </v-flex>--> 90 </v-flex>-->
96 </v-layout> 91 </v-layout>
97 </v-container> 92 </v-container>
98 </div> 93 </div>
99 </template> 94 </template>
100 <script> 95 <script>
101 import AllApiCalls from "@/Services/AllApiCalls.js"; 96 import AllApiCalls from "@/Services/AllApiCalls.js";
102 import http from "@/Services/http.js"; 97 import http from "@/Services/http.js";
103 import moment from "moment"; 98 import moment from "moment";
104 import Meet from "@/pages/Meet/meet.vue"; 99 import Meet from "@/pages/Meet/meet.vue";
105 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; 100 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
106 export default { 101 export default {
107 mixins: [AllApiCalls], 102 mixins: [AllApiCalls],
108 components: { 103 components: {
109 CoursesSideBar, 104 CoursesSideBar,
110 }, 105 },
111 data() { 106 data() {
112 return { 107 return {
113 startLiveSession: "", 108 startLiveSession: "",
114 studentBtn: "", 109 studentBtn: "",
115 110
116 // DATA TABLE 111 // DATA TABLE
117 search: "", 112 search: "",
118 pagination: { 113 pagination: {
119 rowsPerPage: 10, 114 rowsPerPage: 10,
120 }, 115 },
121 liveOnlineHeaders: [ 116 liveOnlineHeaders: [
122 { 117 {
123 text: "Playback", 118 text: "Playback",
124 value: "attachementUrl", 119 value: "attachementUrl",
125 sortable: false, 120 sortable: false,
126 align: "center", 121 align: "center",
127 }, 122 },
128 { 123 {
129 text: "Meeting", 124 text: "Meeting",
130 align: "center", 125 align: "center",
131 sortable: false, 126 sortable: false,
132 value: "", 127 value: "",
133 }, 128 },
134 { 129 {
135 text: "Recording", 130 text: "Recording",
136 value: "", 131 value: "",
137 sortable: false, 132 sortable: false,
138 align: "center", 133 align: "center",
139 }, 134 },
140 { 135 {
141 text: "Description Preview", 136 text: "Description Preview",
142 value: "", 137 value: "",
143 sortable: false, 138 sortable: false,
144 align: "center", 139 align: "center",
145 }, 140 },
146 { text: "Date", value: "", sortable: false, align: "center" }, 141 { text: "Date", value: "", sortable: false, align: "center" },
147 { text: "Duration", value: "", sortable: false, align: "center" }, 142 { text: "Duration", value: "", sortable: false, align: "center" },
148 { text: "Toolbar", value: "", sortable: false, align: "center" }, 143 { text: "Toolbar", value: "", sortable: false, align: "center" },
149 ], 144 ],
150 liveOnlineItems: [], 145 liveOnlineItems: [],
151 146
152 // JITSI CONTAINER 147 // JITSI CONTAINER
153 liveLink: "", 148 liveLink: "",
154 token: "", 149 token: "",
155 selectStudents: {}, 150 selectStudents: {},
156 classRules: [(v) => !!v || " Class Name is required"], 151 classRules: [(v) => !!v || " Class Name is required"],
157 sectionRules: [(v) => !!v || " Section Name is required"], 152 sectionRules: [(v) => !!v || " Section Name is required"],
158 addclass: [], 153 addclass: [],
159 addSection: [], 154 addSection: [],
160 loading: false, 155 loading: false,
161 room: "", 156 room: "",
162 username: "", 157 username: "",
163 roomPassword: "", 158 roomPassword: "",
164 counter: 0, 159 counter: 0,
165 }; 160 };
166 }, 161 },
167 methods: { 162 methods: {
168 startChat() { 163 async startChat() {
169 if (this.$store.state.role === "PARENT") { 164 if (this.$store.state.role === "PARENT") {
170 let div = document.getElementById("jitsi-container"); 165 // let div = document.getElementById("jitsi-container");
171 var parent = div.parentNode; 166 // var parent = div.parentNode;
172 var clone = div.cloneNode(true); 167 // var clone = div.cloneNode(true);
173 clone.id = "jitsi-container"; 168 // clone.id = "jitsi-container";
174 parent.replaceChild(clone, div); 169 // div.replaceWith(clone);
175 // div.replaceWith(input.val('').clone(true)); 170 // div.replaceWith(input.val('').clone(true));
176 this.studentClasses(); 171 if(this.counter == 0){
172 this.counter +=1
173 }else{
174 await this.studentClasses();
175 }
176 this.startConference();
177 } 177 }
178 if (this.$store.state.role === "TEACHER") { 178 if (this.$store.state.role === "TEACHER") {
179 let div = document.getElementById("jitsi-container"); 179 let div = document.getElementById("jitsi-container");
180 var parent = div.parentNode; 180 var parent = div.parentNode;
181 var clone = div.cloneNode(true); 181 var clone = div.cloneNode(true);
182 clone.id = "jitsi-container"; 182 clone.id = "jitsi-container";
183 parent.replaceChild(clone, div); 183 parent.replaceChild(clone, div);
184 // div.replaceWith(input.val('').clone(true)); 184 // div.replaceWith(input.val('').clone(true));
185 this.createRoom(); 185 this.createRoom();
186 } 186 }
187 }, 187 },
188 // JITSI CONTAINER 188 // JITSI CONTAINER
189 startConference() { 189 startConference() {
190 console.log("yes session started"); 190 console.log("yes session started");
191 var _this = this; 191 var _this = this;
192 try { 192 try {
193 const domain = "meet.intrack.in"; 193 const domain = "meet.intrack.in";
194 const options = { 194 const options = {
195 audioInput: "<deviceLabel>", 195 audioInput: "<deviceLabel>",
196 audioOutput: "<deviceLabel>", 196 audioOutput: "<deviceLabel>",
197 videoInput: "<deviceLabel>", 197 videoInput: "<deviceLabel>",
198 prejoinPageEnabled: false, 198 prejoinPageEnabled: false,
199 roomName: this.room, 199 roomName: this.room,
200 height: 500, 200 height: 500,
201 parentNode: document.getElementById("jitsi-container"), 201 parentNode: document.getElementById("jitsi-container"),
202 interfaceConfigOverwrite: { 202 interfaceConfigOverwrite: {
203 filmStripOnly: false, 203 filmStripOnly: false,
204 SHOW_JITSI_WATERMARK: false, 204 SHOW_JITSI_WATERMARK: false,
205 TOOLBAR_BUTTONS: [ 205 TOOLBAR_BUTTONS: [
206 "microphone", 206 "microphone",
207 "camera", 207 "camera",
208 "closedcaptions", 208 "closedcaptions",
209 "desktop", 209 "desktop",
210 "fullscreen", 210 "fullscreen",
211 "fodeviceselection", 211 "fodeviceselection",
212 "hangup", 212 "hangup",
213 "profile", 213 "profile",
214 "info", 214 "info",
215 "chat", 215 "chat",
216 "recording", 216 "recording",
217 "livestreaming", 217 "livestreaming",
218 "etherpad", 218 "etherpad",
219 "sharedvideo", 219 "sharedvideo",
220 "settings", 220 "settings",
221 "raisehand", 221 "raisehand",
222 "videoquality", 222 "videoquality",
223 "filmstrip", 223 "filmstrip",
224 "invite", 224 "invite",
225 "feedback", 225 "feedback",
226 "stats", 226 "stats",
227 "shortcuts", 227 "shortcuts",
228 "tileview", 228 "tileview",
229 ], 229 ],
230 }, 230 },
231 configOverwrite: { 231 configOverwrite: {
232 disableSimulcast: false, 232 disableSimulcast: false,
233 }, 233 },
234 teacherName: "", 234 teacherName: "",
235 romm: "", 235 romm: "",
236 }; 236 };
237 237
238 this.api = new JitsiMeetExternalAPI(domain, options); 238 this.api = new JitsiMeetExternalAPI(domain, options);
239 this.api.addEventListener("videoConferenceJoined", () => { 239 this.api.addEventListener("videoConferenceJoined", () => {
240 console.log("Local User Joined"); 240 console.log("Local User Joined");
241 241
242 _this.api.executeCommand("displayName", _this.username); 242 _this.api.executeCommand("displayName", _this.username);
243 _this.api.executeCommand("password", _this.roomPassword); 243 _this.api.executeCommand("password", _this.roomPassword);
244 }); 244 });
245 } catch (error) { 245 } catch (error) {
246 console.error("Failed to load Jitsi API", error); 246 console.error("Failed to load Jitsi API", error);
247 } 247 }
248 }, 248 },
249 openRoom() { 249 openRoom() {
250 // verify the JitsiMeetExternalAPI constructor is added to the global.. 250 // verify the JitsiMeetExternalAPI constructor is added to the global..
251 // if (this.teacherName != "" || this.room != "") { 251 // if (this.teacherName != "" || this.room != "") {
252 // if (window.JitsiMeetExternalAPI) { 252 // if (window.JitsiMeetExternalAPI) {
253 // // var person = prompt("Please enter your name:", "Rabie"); 253 // // var person = prompt("Please enter your name:", "Rabie");
254 // if (person != null || person != "") this.username = this.teacherName; 254 // if (person != null || person != "") this.username = this.teacherName;
255 // var room = prompt("Please enter your room:", "Test Room"); 255 // var room = prompt("Please enter your room:", "Test Room");
256 // if (room != null || room != "") this.room = this.room; 256 // if (room != null || room != "") this.room = this.room;
257 // this.startConference(); 257 // this.startConference();
258 // } else alert("Jitsi Meet API script not loaded"); 258 // } else alert("Jitsi Meet API script not loaded");
259 // } 259 // }
260 }, 260 },
261 261
262 createRoom(classId) { 262 createRoom(classId) {
263 this.showLoader = true; 263 this.showLoader = true;
264 var classId = { 264 var classId = {
265 classId: classId, 265 classId: classId,
266 }; 266 };
267 http() 267 http()
268 .post("/createLiveClasses", { 268 .post("/createLiveClasses", {
269 classId: this.$route.query.classId, 269 classId: this.$route.query.classId,
270 courseId: this.$route.query.courseId, 270 courseId: this.$route.query.courseId,
271 chapterId: this.$route.query.chapterId, 271 chapterId: this.$route.query.chapterId,
272 }) 272 })
273 .then((response) => { 273 .then((response) => {
274 // this.addSection = response.data.data; 274 // this.addSection = response.data.data;
275 console.log("CREATE___ROOOM", response.data); 275 console.log("CREATE___ROOOM", response.data);
276 this.room = response.data.data.roomName; 276 this.room = response.data.data.roomName;
277 277
278 // this.username = response.data.data.LiveClasses.teacherName; 278 // this.username = response.data.data.LiveClasses.teacherName;
279 this.roomPassword = response.data.data.password; 279 this.roomPassword = response.data.data.password;
280 280
281 var this_ = this; 281 var this_ = this;
282 if (this.username != "" || this.room != "") { 282 if (this.username != "" || this.room != "") {
283 if (window.JitsiMeetExternalAPI) { 283 if (window.JitsiMeetExternalAPI) {
284 // var person = prompt("Please enter your name:", "Rabie"); 284 // var person = prompt("Please enter your name:", "Rabie");
285 if (this_.username != null || this_.username != "") { 285 if (this_.username != null || this_.username != "") {
286 this.username = this.username; 286 this.username = this.username;
287 } 287 }
288 // var room = prompt("Please enter your room:", "Test Room"); 288 // var room = prompt("Please enter your room:", "Test Room");
289 if (this_.room != null || this_.room != "") { 289 if (this_.room != null || this_.room != "") {
290 this.room = this.room; 290 this.room = this.room;
291 } 291 }
292 this.startConference(); 292 this.startConference();
293 } else alert("Jitsi Meet API script not loaded"); 293 } else alert("Jitsi Meet API script not loaded");
294 } 294 }
295 console.log("bazinga"); 295 console.log("bazinga");
296 this.showLoader = false; 296 this.showLoader = false;
297 }) 297 })
298 .catch((err) => { 298 .catch((err) => {
299 this.showLoader = false; 299 this.showLoader = false;
300 }); 300 });
301 }, 301 },
302 async studentClasses() { 302 async studentClasses() {
303 /* getLiveClassesesList - To up date line under heading*/ 303 /* getLiveClassesesList - To up date line under heading*/
304 let response = await this.getLiveClassesesList({ 304 let response = await this.getLiveClassesesList({
305 classId: this.$route.query.classId, 305 classId: this.$route.query.classId,
306 courseId: this.$route.query.courseId, 306 courseId: this.$route.query.courseId,
307 chapterId: this.$route.query.chapterId, 307 chapterId: this.$route.query.chapterId,
308 }); 308 });
309 console.log("response getLiveClassesesList- ", response); 309 console.log("response getLiveClassesesList- ", response);
310 310
311 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ 311 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
312 if (response.data.data[0].sessionStatus == "ENDED") {
313 // this.startLiveSession = "Start Session";
314 this.studentBtn = "";
315 }
316 if (response.data.data[0].sessionStatus == "STARTED") {
317 // this.startLiveSession = "Join Session";
318 this.studentBtn = "Join Session";
319 }
312 if (response.data.data.length == 0) { 320 if (response.data.data.length == 0) {
313 this.startLiveSession = "Start Session"; 321 this.startLiveSession = "Start Session";
314 this.studentBtn = ""; 322 this.studentBtn = "";
315 } else { 323 } else {
316 this.liveLink = response.data.data[0].link; 324 this.liveLink = response.data.data[0].link;
317 this.room = response.data.data[0].roomName; 325 this.room = response.data.data[0].roomName;
318 this.username = response.data.data[0].teacherId.name; 326 this.username = response.data.data[0].teacherId.name;
319 this.roomPassword = response.data.data[0].password; 327 this.roomPassword = response.data.data[0].password;
320 // this.room = response.data.data[0].roomName; 328 // this.room = response.data.data[0].roomName;
321 var this_ = this; 329 var this_ = this;
322 console.log(this.room, this.roomPassword, this.username); 330 console.log(this.room, this.roomPassword, this.username);
323 331
324 // // this.username = response.data.data.LiveClasses.teacherName; 332 // // this.username = response.data.data.LiveClasses.teacherName;
325 // this.roomPassword = response.data.data[0].password; 333 // this.roomPassword = response.data.data[0].password;
326 // var this_ = this; 334 // var this_ = this;
327 if (this.username != "" || this.room != "") { 335 if (this.username != "" || this.room != "") {
328 if (window.JitsiMeetExternalAPI) { 336 if (window.JitsiMeetExternalAPI) {
329 // var person = prompt("Please enter your name:", "Rabie"); 337 // var person = prompt("Please enter your name:", "Rabie");
330 if (this_.username != null || this_.username != "") { 338 if (this_.username != null || this_.username != "") {
331 this.username = this.username; 339 this.username = this.username;
332 } 340 }
333 // var room = prompt("Please enter your room:", "Test Room"); 341 // var room = prompt("Please enter your room:", "Test Room");
334 if (this_.room != null || this_.room != "") { 342 if (this_.room != null || this_.room != "") {
335 this.room = this.room; 343 this.room = this.room;
336 } 344 }
337 this.startConference(); 345 // this.startConference();
338 } 346 }
339 } 347 }
340
341 if (response.data.data[0].sessionStatus == "ENDED") {
342 // this.startLiveSession = "Start Session";
343 this.studentBtn = "";
344 }
345 if (response.data.data[0].sessionStatus == "STARTED") {
346 // this.startLiveSession = "Join Session";
347 this.studentBtn = "Join Session";
348 }
349 } 348 }
350 }, 349 },
351 }, 350 },
352 351
353 mounted() { 352 mounted() {
354 this.token = this.$store.state.token; 353 this.token = this.$store.state.token;
355 }, 354 },
356 async created() { 355 async created() {
357 if (this.$store.state.role === "PARENT") { 356 if (this.$store.state.role === "PARENT") {
358 this.studentClasses(); 357 await this.studentClasses();
359 } 358 }
360 359
361 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 360 /* getStudentCourses - to get courseData - defined in GetApis.js*/
362 if (this.$store.state.role === "PARENT") { 361 if (this.$store.state.role === "PARENT") {
363 await this.getStudentCourses({ 362 await this.getStudentCourses({
364 classId: localStorage.getItem("parentClassId"), 363 classId: localStorage.getItem("parentClassId"),
365 studentId: localStorage.getItem("parentStudentId"), 364 studentId: localStorage.getItem("parentStudentId"),
366 }); 365 });
367 } 366 }
368 }, 367 },
369 }; 368 };
370 </script> 369 </script>
371 <style scoped> 370 <style scoped>
372 .side-bar-color { 371 .side-bar-color {
373 color: #827bfa !important; 372 color: #827bfa !important;
374 /* border-top-right-radius: 74px !important; */ 373 /* border-top-right-radius: 74px !important; */
375 } 374 }
376 .card-border { 375 .card-border {
377 border: 1px #bdbdbd solid; 376 border: 1px #bdbdbd solid;
378 border-radius: 3px; 377 border-radius: 3px;
379 } 378 }
380 .reply-desc { 379 .reply-desc {
381 border: 1px solid #f2f2f2; 380 border: 1px solid #f2f2f2;
382 } 381 }
383 .open-dialog-button { 382 .open-dialog-button {
384 background: #827bfa !important; 383 background: #827bfa !important;
385 border-color: #827bfa !important; 384 border-color: #827bfa !important;
386 text-transform: none !important; 385 text-transform: none !important;
src/pages/Dashboard/dashboard.vue
Diff comments   View file @6e1cb5c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 51
52 <!-- LOADER --> 52 <!-- LOADER -->
53 <div class="loader" v-if="showLoader"> 53 <div class="loader" v-if="showLoader">
54 <v-progress-circular indeterminate color="white"></v-progress-circular> 54 <v-progress-circular indeterminate color="white"></v-progress-circular>
55 </div> 55 </div>
56 56
57 <!-- SNACKBAR --> 57 <!-- SNACKBAR -->
58 <v-snackbar 58 <v-snackbar
59 :timeout="timeout" 59 :timeout="timeout"
60 :top="y === 'top'" 60 :top="y === 'top'"
61 :right="x === 'right'" 61 :right="x === 'right'"
62 :vertical="mode === 'vertical'" 62 :vertical="mode === 'vertical'"
63 v-model="snackbar" 63 v-model="snackbar"
64 :color="snackbarColor" 64 :color="snackbarColor"
65 > 65 >
66 {{ text }} 66 {{ text }}
67 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
68 <v-btn flat text @click="snackbar = false">X</v-btn> 68 <v-btn flat text @click="snackbar = false">X</v-btn>
69 </v-snackbar> 69 </v-snackbar>
70 70
71 <!-- DIALOG BOX EVENT DETAILS --> 71 <!-- DIALOG BOX EVENT DETAILS -->
72 <v-dialog v-model="viewEventDetails" max-width="500"> 72 <v-dialog v-model="viewEventDetails" max-width="500">
73 <v-card flat class="card-style pa-2" dark> 73 <v-card flat class="card-style pa-2" dark>
74 <!-- TITLE --> 74 <!-- TITLE -->
75 <v-layout> 75 <v-layout>
76 <v-layout> 76 <v-layout>
77 <v-flex xs12> 77 <v-flex xs12>
78 <label class="title text-xs-center">{{particularEvent.title}}</label> 78 <label class="title text-xs-center">{{particularEvent.title}}</label>
79 <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon> 79 <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon>
80 </v-flex> 80 </v-flex>
81 </v-layout> 81 </v-layout>
82 </v-layout> 82 </v-layout>
83 83
84 <v-card-text> 84 <v-card-text>
85 <v-list dark class="card-style"> 85 <v-list dark class="card-style">
86 <v-list-tile> 86 <v-list-tile>
87 <v-list-tile-content> 87 <v-list-tile-content>
88 <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title> 88 <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title>
89 </v-list-tile-content> 89 </v-list-tile-content>
90 </v-list-tile> 90 </v-list-tile>
91 <v-list-tile> 91 <v-list-tile>
92 <v-list-tile-content> 92 <v-list-tile-content>
93 <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title> 93 <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title>
94 </v-list-tile-content> 94 </v-list-tile-content>
95 </v-list-tile> 95 </v-list-tile>
96 </v-list> 96 </v-list>
97 </v-card-text> 97 </v-card-text>
98 </v-card> 98 </v-card>
99 </v-dialog> 99 </v-dialog>
100 100
101 <v-layout wrap row> 101 <v-layout wrap row>
102 <v-flex xs12 sm12 md9> 102 <v-flex xs12 sm12 md9>
103 <v-container fluid grid-list-xl> 103 <v-container fluid grid-list-xl>
104 <!-- ***** Total Students ***** --> 104 <!-- ***** Total Students ***** -->
105 <v-layout wrap class v-if="$store.state.role != 'PARENT' "> 105 <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
106 <v-flex xs12 sm12 md3> 106 <v-flex xs12 sm12 md3>
107 <router-link :to="{ name:'Students' }"> 107 <router-link :to="{ name:'Students' }">
108 <v-card class="card pink-bgcolor"> 108 <v-card class="card pink-bgcolor">
109 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 109 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
110 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 110 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
111 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 111 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
112 </v-card> 112 </v-card>
113 </router-link> 113 </router-link>
114 </v-flex> 114 </v-flex>
115 <!-- ***** Total Teachers***** --> 115 <!-- ***** Total Teachers***** -->
116 <v-flex xs12 sm12 md3> 116 <v-flex xs12 sm12 md3>
117 <router-link :to="{ name:'Teachers' }"> 117 <router-link :to="{ name:'Teachers' }">
118 <v-card flat class="card elevation-2 firozi-bgcolor"> 118 <v-card flat class="card elevation-2 firozi-bgcolor">
119 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 119 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
120 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 120 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
121 121
122 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 122 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
123 </v-card> 123 </v-card>
124 </router-link> 124 </router-link>
125 </v-flex> 125 </v-flex>
126 <!-- ***** Total Parents ***** --> 126 <!-- ***** Total Parents ***** -->
127 <v-flex xs12 sm12 md3> 127 <v-flex xs12 sm12 md3>
128 <router-link :to="{ name:'Parents' }"> 128 <router-link :to="{ name:'Parents' }">
129 <v-card flat class="card yellow darken-3"> 129 <v-card flat class="card yellow darken-3">
130 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 130 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
131 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 131 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
132 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 132 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
133 </v-card> 133 </v-card>
134 </router-link> 134 </router-link>
135 </v-flex> 135 </v-flex>
136 <!-- ***** Total Class***** --> 136 <!-- ***** Total Class***** -->
137 <v-flex xs12 sm12 md3> 137 <v-flex xs12 sm12 md3>
138 <router-link :to="{ name:'Class' }"> 138 <router-link :to="{ name:'Class' }">
139 <v-card flat class="card darkBlue-bgcolor"> 139 <v-card flat class="card darkBlue-bgcolor">
140 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 140 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
141 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 141 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
142 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 142 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
143 </v-card> 143 </v-card>
144 </router-link> 144 </router-link>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 147
148 <p 148 <p
149 v-if="studentsData.length === 0 && role == 'PARENT'" 149 v-if="studentsData.length === 0 && role == 'PARENT'"
150 class="text-center title grey lighten-4 error--text" 150 class="text-center title grey lighten-4 error--text"
151 >You have no student registered with school</p> 151 >You have no student registered with school</p>
152 <!-- ACCOUNT --> 152 <!-- ACCOUNT -->
153 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'"> 153 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
154 <v-flex xs12> 154 <v-flex xs12>
155 <v-card class="card mt-2 account-Card"> 155 <v-card class="card mt-2 account-Card">
156 <h4> 156 <h4>
157 <b>Account</b> 157 <b>Account</b>
158 </h4> 158 </h4>
159 <v-layout wrap> 159 <v-layout wrap>
160 <v-flex xs12 sm12 md3> 160 <v-flex xs12 sm12 md3>
161 <v-list two-line> 161 <v-list two-line>
162 <template> 162 <template>
163 <v-list-tile> 163 <v-list-tile>
164 <v-list-tile-avatar> 164 <v-list-tile-avatar>
165 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 165 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
166 </v-list-tile-avatar> 166 </v-list-tile-avatar>
167 <v-list-tile-content> 167 <v-list-tile-content>
168 <v-list-tile-title class="mt-2"> 168 <v-list-tile-title class="mt-2">
169 <p class="subheading font-color">Fees</p> 169 <p class="subheading font-color">Fees</p>
170 </v-list-tile-title> 170 </v-list-tile-title>
171 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> 171 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
172 </v-list-tile-content> 172 </v-list-tile-content>
173 </v-list-tile> 173 </v-list-tile>
174 <v-list-tile> 174 <v-list-tile>
175 <v-list-tile-avatar> 175 <v-list-tile-avatar>
176 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 176 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
177 </v-list-tile-avatar> 177 </v-list-tile-avatar>
178 <v-list-tile-content> 178 <v-list-tile-content>
179 <v-list-tile-title class="mt-2"> 179 <v-list-tile-title class="mt-2">
180 <p class="subheading font-color">Collection</p> 180 <p class="subheading font-color">Collection</p>
181 </v-list-tile-title> 181 </v-list-tile-title>
182 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> 182 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
183 </v-list-tile-content> 183 </v-list-tile-content>
184 </v-list-tile> 184 </v-list-tile>
185 <v-list-tile> 185 <v-list-tile>
186 <v-list-tile-avatar> 186 <v-list-tile-avatar>
187 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 187 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
188 </v-list-tile-avatar> 188 </v-list-tile-avatar>
189 <v-list-tile-content> 189 <v-list-tile-content>
190 <v-list-tile-title class="mt-2"> 190 <v-list-tile-title class="mt-2">
191 <p class="subheading font-color">Expences</p> 191 <p class="subheading font-color">Expences</p>
192 </v-list-tile-title> 192 </v-list-tile-title>
193 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> 193 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
194 </v-list-tile-content> 194 </v-list-tile-content>
195 </v-list-tile> 195 </v-list-tile>
196 </template> 196 </template>
197 </v-list> 197 </v-list>
198 </v-flex> 198 </v-flex>
199 <v-flex xs12 sm12 md9 lg9> 199 <v-flex xs12 sm12 md9 lg9>
200 <div id="chart"> 200 <div id="chart">
201 <div v-if="this.series"> 201 <div v-if="this.series">
202 <apexchart 202 <apexchart
203 type="bar" 203 type="bar"
204 height="250" 204 height="250"
205 style="max-width: 800px !important" 205 style="max-width: 800px !important"
206 :options="chartOptions" 206 :options="chartOptions"
207 :series="series" 207 :series="series"
208 v-show="true" 208 v-show="true"
209 ></apexchart> 209 ></apexchart>
210 </div> 210 </div>
211 </div> 211 </div>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 </v-card> 214 </v-card>
215 </v-flex> 215 </v-flex>
216 </v-layout> 216 </v-layout>
217 217
218 <v-card class="mt-2 card" v-if="role != 'PARENT'"> 218 <v-card class="mt-2 card" v-if="role != 'PARENT'">
219 <!-- <full-calendar 219 <!-- <full-calendar
220 ref="calendar" 220 ref="calendar"
221 defaultView="month" 221 defaultView="month"
222 droppable="false" 222 droppable="false"
223 :events="events" 223 :events="events"
224 :config="config" 224 :config="config"
225 ></full-calendar>--> 225 ></full-calendar>-->
226 <h4 class="pa-3"> 226 <h4 class="pa-3">
227 <b>Notice</b> 227 <b>Notice</b>
228 </h4> 228 </h4>
229 229
230 <v-data-table 230 <v-data-table
231 :items="noticeData" 231 :items="noticeData"
232 class="elevation-0" 232 class="elevation-0"
233 flat 233 flat
234 hide-actions 234 hide-actions
235 hide-headers 235 hide-headers
236 style="border-spacing: 0 !important;" 236 style="border-spacing: 0 !important;"
237 > 237 >
238 <template 238 <template
239 slot="items" 239 slot="items"
240 slot-scope="props" 240 slot-scope="props"
241 v-if="props.index < 5" 241 v-if="props.index < 5"
242 style="border-spacing: 0 !important;" 242 style="border-spacing: 0 !important;"
243 > 243 >
244 <tr class="td-notice"> 244 <tr class="td-notice">
245 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 245 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
246 <td> 246 <td>
247 <span class="grey--text caption">{{ date(props.item.created) }}</span> 247 <span class="grey--text caption">{{ date(props.item.created) }}</span>
248 <br /> 248 <br />
249 <span class="body-2">{{ props.item.title}}</span> 249 <span class="body-2">{{ props.item.title}}</span>
250 </td> 250 </td>
251 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> 251 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
252 252
253 <td class="text-xs-center"> 253 <td class="text-xs-center">
254 <span> 254 <span>
255 <v-tooltip top> 255 <v-tooltip top>
256 <img 256 <img
257 slot="activator" 257 slot="activator"
258 style="cursor:pointer; width:25px; height:25px; " 258 style="cursor:pointer; width:25px; height:25px; "
259 @click="profile" 259 @click="profile"
260 src="/static/icon/view.png" 260 src="/static/icon/view.png"
261 /> 261 />
262 <span>View</span> 262 <span>View</span>
263 </v-tooltip> 263 </v-tooltip>
264 </span> 264 </span>
265 </td> 265 </td>
266 </tr> 266 </tr>
267 </template> 267 </template>
268 </v-data-table> 268 </v-data-table>
269 </v-card> 269 </v-card>
270 <!-- COURSES --> 270 <!-- COURSES -->
271 <v-layout v-if="role == 'PARENT'"> 271 <v-layout v-if="role == 'PARENT'">
272 <v-flex xs12> 272 <v-flex xs12>
273 <v-card class="card mt-2 account-Card"> 273 <v-card class="card mt-2 account-Card">
274 <h4> 274 <h4>
275 <b>My Courses</b> 275 <b>My Courses</b>
276 </h4> 276 </h4>
277 <v-layout wrap> 277 <v-layout wrap>
278 <v-flex xs12 sm12> 278 <v-flex xs12 sm12>
279 <v-list two-line> 279 <v-list two-line>
280 <template> 280 <template>
281 <v-list-tile v-for="(course,i) in courseData" :key="i"> 281 <v-list-tile v-for="(course,i) in courseData" :key="i">
282 <v-list-tile-avatar> 282 <v-list-tile-avatar>
283 <v-icon 283 <v-icon
284 class="account-circle darkBlue-color" 284 class="account-circle darkBlue-color"
285 style="cursor: pointer;" 285 style="cursor: pointer;"
286 >panorama_fish_eye</v-icon> 286 >panorama_fish_eye</v-icon>
287 </v-list-tile-avatar> 287 </v-list-tile-avatar>
288 <v-list-tile-content> 288 <v-list-tile-content>
289 <v-list-tile-title 289 <v-list-tile-title
290 style="cursor: pointer;" 290 style="cursor: pointer;"
291 @click="routeToCourseDetails(course._id)" 291 @click="routeToCourseDetails(course._id)"
292 >{{ course.courseName }}</v-list-tile-title> 292 >{{ course.courseName }}</v-list-tile-title>
293 </v-list-tile-content> 293 </v-list-tile-content>
294 </v-list-tile> 294 </v-list-tile>
295 </template> 295 </template>
296 </v-list> 296 </v-list>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 </v-card> 299 </v-card>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 <v-layout v-if="role == 'PARENT'"> 302 <v-layout v-if="role == 'PARENT'">
303 <v-flex xs6> 303 <v-flex xs6>
304 <v-card class="mt-2 card"> 304 <v-card class="mt-2 card">
305 <h4 class="pa-3"> 305 <h4 class="pa-3">
306 <b>Latest Annoucements</b> 306 <b>Latest Annoucements</b>
307 </h4> 307 </h4>
308 308
309 <v-data-table 309 <v-data-table
310 :items="annoucementData" 310 :items="annoucementData"
311 class="elevation-0" 311 class="elevation-0"
312 flat 312 flat
313 hide-actions 313 hide-actions
314 hide-headers 314 hide-headers
315 style="border-spacing: 0 !important;" 315 style="border-spacing: 0 !important;"
316 > 316 >
317 <template 317 <template
318 slot="items" 318 slot="items"
319 slot-scope="props" 319 slot-scope="props"
320 v-if="props.index < 5" 320 v-if="props.index < 5"
321 style="border-spacing: 0 !important;" 321 style="border-spacing: 0 !important;"
322 > 322 >
323 <tr class="td-notice"> 323 <tr class="td-notice">
324 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 324 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
325 <td> 325 <td>
326 <span class="grey--text caption">{{ date(props.item.created) }}</span> 326 <span class="grey--text caption">{{ date(props.item.created) }}</span>
327 <br /> 327 <br />
328 <span class="body-2">{{ props.item.discussionType}}</span> 328 <span class="body-2">{{ props.item.discussionType}}</span>
329 </td> 329 </td>
330 <td class="text-xs-center"> 330 <td class="text-xs-center">
331 <span> 331 <span>
332 <v-tooltip top> 332 <v-tooltip top>
333 <img 333 <img
334 slot="activator" 334 slot="activator"
335 style="cursor:pointer; width:25px; height:25px; " 335 style="cursor:pointer; width:25px; height:25px; "
336 src="/static/icon/view.png" 336 src="/static/icon/view.png"
337 /> 337 />
338 <span>View</span> 338 <span>View</span>
339 </v-tooltip> 339 </v-tooltip>
340 </span> 340 </span>
341 </td> 341 </td>
342 </tr> 342 </tr>
343 </template> 343 </template>
344 </v-data-table> 344 </v-data-table>
345 </v-card> 345 </v-card>
346 </v-flex> 346 </v-flex>
347 <v-flex xs6> 347 <v-flex xs6>
348 <v-card class="mt-2 card"> 348 <v-card class="mt-2 card">
349 <h4 class="pa-3"> 349 <h4 class="pa-3">
350 <b>Online User</b> 350 <b>Online User</b>
351 </h4> 351 </h4>
352 352
353 <v-data-table 353 <v-data-table
354 :items="onlineUser" 354 :items="onlineUser"
355 class="elevation-0" 355 class="elevation-0"
356 flat 356 flat
357 hide-actions 357 hide-actions
358 hide-headers 358 hide-headers
359 style="border-spacing: 0 !important;" 359 style="border-spacing: 0 !important;"
360 > 360 >
361 <template 361 <template
362 slot="items" 362 slot="items"
363 slot-scope="props" 363 slot-scope="props"
364 v-if="props.index < 5" 364 v-if="props.index < 5"
365 style="border-spacing: 0 !important;" 365 style="border-spacing: 0 !important;"
366 > 366 >
367 <tr class="td-notice"> 367 <tr class="td-notice">
368 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 368 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
369 <td> 369 <td>
370 <span class="body-2">{{ props.item.user }}</span> 370 <span class="body-2">{{ props.item.user }}</span>
371 </td> 371 </td>
372 <td class="text-xs-center"> 372 <td class="text-xs-center">
373 <span> 373 <span>
374 <v-tooltip top> 374 <v-tooltip top>
375 <img 375 <img
376 slot="activator" 376 slot="activator"
377 style="cursor:pointer; width:25px; height:25px; " 377 style="cursor:pointer; width:25px; height:25px; "
378 src="/static/icon/view.png" 378 src="/static/icon/view.png"
379 /> 379 />
380 <span>View</span> 380 <span>View</span>
381 </v-tooltip> 381 </v-tooltip>
382 </span> 382 </span>
383 </td> 383 </td>
384 </tr> 384 </tr>
385 </template> 385 </template>
386 </v-data-table> 386 </v-data-table>
387 </v-card> 387 </v-card>
388 </v-flex> 388 </v-flex>
389 </v-layout> 389 </v-layout>
390 </v-container> 390 </v-container>
391 </v-flex> 391 </v-flex>
392 <v-spacer></v-spacer> 392 <v-spacer></v-spacer>
393 <!-- SIDE BAR --> 393 <!-- SIDE BAR -->
394 <v-flex xs12 sm12 md3> 394 <v-flex xs12 sm12 md3>
395 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 395 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
396 <v-card-text class="px-2"> 396 <v-card-text class="px-2">
397 <h4 class="text-xs-center py-3"> 397 <h4 class="text-xs-center py-3">
398 <b>Profile</b> 398 <b>Profile</b>
399 </h4> 399 </h4>
400 <v-flex xs12 class="py-3"> 400 <v-flex xs12 class="py-3">
401 <v-layout wrap> 401 <v-layout wrap>
402 <v-flex xs12 sm12 md4> 402 <v-flex xs12 sm12 md4>
403 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> 403 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
404 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" width="80" /> 404 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" width="80" />
405 </v-flex> 405 </v-flex>
406 <v-flex xs12 sm12 md6> 406 <v-flex xs12 sm12 md6>
407 <p class="mb-0 body-1"> 407 <p class="mb-0 body-1">
408 <i>{{ userData.name }}</i> 408 <i>{{ userData.name }}</i>
409 </p> 409 </p>
410 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 410 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
411 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 411 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
412 <address class="caption grey--text mb-3">{{ userData.address }}</address> 412 <address class="caption grey--text mb-3">{{ userData.address }}</address>
413 </v-flex> 413 </v-flex>
414 </v-layout> 414 </v-layout>
415 </v-flex> 415 </v-flex>
416 <hr /> 416 <hr />
417 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 417 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
418 418
419 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 419 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
420 420
421 <!-- LATEST EVENTS --> 421 <!-- LATEST EVENTS -->
422 <v-card class="my-3 elevation-0"> 422 <v-card class="my-3 elevation-0">
423 <v-card-text> 423 <v-card-text>
424 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> 424 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
425 <div 425 <div
426 v-for="(activity,index) in activityList" 426 v-for="(activity,index) in activityList"
427 :key="index" 427 :key="index"
428 class="mt-2" 428 class="mt-2"
429 style="cursor: pointer;" 429 style="cursor: pointer;"
430 @click="seeEventDetails(activity)" 430 @click="seeEventDetails(activity)"
431 > 431 >
432 <span 432 <span
433 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 433 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
434 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 434 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
435 ></span> 435 ></span>
436 <div style="display: inline-block;" class="ml-2"> 436 <div style="display: inline-block;" class="ml-2">
437 <!-- LATEST EVENTS FOR PARENT --> 437 <!-- LATEST EVENTS FOR PARENT -->
438 <div v-if="$store.state.role === 'PARENT' "> 438 <div v-if="$store.state.role === 'PARENT' ">
439 <div 439 <div
440 class="grey--text lighten-1 caption" 440 class="grey--text lighten-1 caption"
441 v-if="activity.meetingEvent" 441 v-if="activity.meetingEvent"
442 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 442 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
443 <div 443 <div
444 class="body-2" 444 class="body-2"
445 v-if="activity.meetingEvent" 445 v-if="activity.meetingEvent"
446 >{{activity.meetingEvent.title}}</div> 446 >{{activity.meetingEvent.title}}</div>
447 </div> 447 </div>
448 448
449 <!-- LATEST EVENTS FOR TEACHER --> 449 <!-- LATEST EVENTS FOR TEACHER -->
450 <div v-if="role == 'TEACHER'"> 450 <div v-if="role == 'TEACHER'">
451 <div 451 <div
452 class="grey--text lighten-1 caption" 452 class="grey--text lighten-1 caption"
453 v-if="activity.dateOfEvent" 453 v-if="activity.dateOfEvent"
454 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 454 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
455 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 455 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
456 </div> 456 </div>
457 </div> 457 </div>
458 </div> 458 </div>
459 <div v-if="activityList.length == 0"> 459 <div v-if="activityList.length == 0">
460 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 460 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
461 </div> 461 </div>
462 </v-card-text> 462 </v-card-text>
463 </v-card> 463 </v-card>
464 </v-card-text> 464 </v-card-text>
465 </v-card> 465 </v-card>
466 </v-flex> 466 </v-flex>
467 </v-layout> 467 </v-layout>
468 468
469 <v-dialog v-model="dialog" max-width="500"> 469 <v-dialog v-model="dialog" max-width="500">
470 <v-card color="grey lighten-4" flat> 470 <v-card color="grey lighten-4" flat>
471 <v-toolbar dark color="fixcolors"> 471 <v-toolbar dark color="fixcolors">
472 <v-spacer></v-spacer> 472 <v-spacer></v-spacer>
473 <v-btn icon @click="dialog= false"> 473 <v-btn icon @click="dialog= false">
474 <v-icon>close</v-icon> 474 <v-icon>close</v-icon>
475 </v-btn> 475 </v-btn>
476 </v-toolbar> 476 </v-toolbar>
477 <v-flex class="py-4"> 477 <v-flex class="py-4">
478 <v-list-tile> 478 <v-list-tile>
479 <v-list-tile-action> 479 <v-list-tile-action>
480 <v-icon>edit</v-icon> 480 <v-icon>edit</v-icon>
481 </v-list-tile-action> 481 </v-list-tile-action>
482 <v-list-tile-content> 482 <v-list-tile-content>
483 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 483 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
484 </v-list-tile-content> 484 </v-list-tile-content>
485 </v-list-tile> 485 </v-list-tile>
486 <v-list-tile> 486 <v-list-tile>
487 <v-list-tile-action> 487 <v-list-tile-action>
488 <v-icon>access_time</v-icon> 488 <v-icon>access_time</v-icon>
489 </v-list-tile-action> 489 </v-list-tile-action>
490 <v-list-tile-content> 490 <v-list-tile-content>
491 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 491 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
492 </v-list-tile-content> 492 </v-list-tile-content>
493 </v-list-tile> 493 </v-list-tile>
494 </v-flex> 494 </v-flex>
495 </v-card> 495 </v-card>
496 </v-dialog> 496 </v-dialog>
497 </v-app> 497 </v-app>
498 </template> 498 </template>
499 499
500 <script> 500 <script>
501 import http from "@/Services/http.js"; 501 import http from "@/Services/http.js";
502 import moment from "moment"; 502 import moment from "moment";
503 import AllApiCalls from "@/Services/AllApiCalls.js"; 503 import AllApiCalls from "@/Services/AllApiCalls.js";
504 // import { FunctionalCalendar } from "vue-functional-calendar"; 504 // import { FunctionalCalendar } from "vue-functional-calendar";
505 505
506 export default { 506 export default {
507 components: { 507 components: {
508 // FunctionalCalendar 508 // FunctionalCalendar
509 }, 509 },
510 mixins: [AllApiCalls], 510 mixins: [AllApiCalls],
511 data() { 511 data() {
512 return { 512 return {
513 // data: { 513 // data: {
514 // clieckedToday: false 514 // clieckedToday: false
515 // }, 515 // },
516 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 516 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
517 // calendarData: {}, 517 // calendarData: {},
518 // calendar: {}, 518 // calendar: {},
519 519
520 // DIALOG BOX EVENT DETAILS 520 // DIALOG BOX EVENT DETAILS
521 viewEventDetails: false, 521 viewEventDetails: false,
522 522
523 // CALENDER 523 // CALENDER
524 moment: moment, 524 moment: moment,
525 activityEvents: [], 525 activityEvents: [],
526 onlineUser: [ 526 onlineUser: [
527 { 527 {
528 user: "Student Demo" 528 user: "Student Demo"
529 }, 529 },
530 { 530 {
531 user: "Teacher Demo" 531 user: "Teacher Demo"
532 }, 532 },
533 { 533 {
534 user: "Priyansh Gupta" 534 user: "Priyansh Gupta"
535 }, 535 },
536 { 536 {
537 user: "Gaurav Aggarwal" 537 user: "Gaurav Aggarwal"
538 }, 538 },
539 { 539 {
540 user: "Approve Arorra" 540 user: "Approve Arorra"
541 } 541 }
542 ], 542 ],
543 showLoader: false, 543 showLoader: false,
544 calendarData: {}, 544 calendarData: {},
545 dialog: false, 545 dialog: false,
546 dialogNotice: false, 546 dialogNotice: false,
547 HolidaysList: [], 547 HolidaysList: [],
548 EventsList: [], 548 EventsList: [],
549 events: [], 549 events: [],
550 config: { 550 config: {
551 eventClick: event => { 551 eventClick: event => {
552 this.selected = event; 552 this.selected = event;
553 this.dialog = true; 553 this.dialog = true;
554 } 554 }
555 }, 555 },
556 selected: {}, 556 selected: {},
557 barGraph: [], 557 barGraph: [],
558 // notice: {}, 558 // notice: {},
559 userData: {}, 559 userData: {},
560 dated: new Date(2018, 0, 9), 560 dated: new Date(2018, 0, 9),
561 userList: [], 561 userList: [],
562 sectionList: [], 562 sectionList: [],
563 students: "", 563 students: "",
564 parents: "", 564 parents: "",
565 teachers: "", 565 teachers: "",
566 classes: "", 566 classes: "",
567 noticeData: [], 567 noticeData: [],
568 expenseData: [], 568 expenseData: [],
569 feeData: [], 569 feeData: [],
570 collectionData: [], 570 collectionData: [],
571 courseData: [], 571 courseData: [],
572 studentsData: [], 572 studentsData: [],
573 annoucementData: [], 573 annoucementData: [],
574 role: "", 574 role: "",
575 attrs: [ 575 attrs: [
576 { 576 {
577 key: "today", 577 key: "today",
578 highlight: true, 578 highlight: true,
579 dates: new Date() 579 dates: new Date()
580 } 580 }
581 ], 581 ],
582 drawer: true, 582 drawer: true,
583 items: [ 583 items: [
584 { title: "Home", icon: "dashboard" }, 584 { title: "Home", icon: "dashboard" },
585 { title: "About", icon: "question_answer" } 585 { title: "About", icon: "question_answer" }
586 ], 586 ],
587 right: null, 587 right: null,
588 588
589 series: [ 589 series: [
590 { 590 {
591 name: "Total", 591 name: "Total",
592 data: [] 592 data: []
593 } 593 }
594 ], 594 ],
595 chartOptions: { 595 chartOptions: {
596 chart: { 596 chart: {
597 type: "bar", 597 type: "bar",
598 height: 150, 598 height: 150,
599 stacked: true 599 stacked: true
600 // animations: { 600 // animations: {
601 // enabled: true, 601 // enabled: true,
602 // easing: "easeinout", 602 // easing: "easeinout",
603 // speed: 1200, 603 // speed: 1200,
604 // animateGradually: { 604 // animateGradually: {
605 // enabled: true, 605 // enabled: true,
606 // delay: 450 606 // delay: 450
607 // }, 607 // },
608 // dynamicAnimation: { 608 // dynamicAnimation: {
609 // enabled: true, 609 // enabled: true,
610 // speed: 450 610 // speed: 450
611 // } 611 // }
612 // } 612 // }
613 }, 613 },
614 plotOptions: { 614 plotOptions: {
615 bar: { 615 bar: {
616 horizontal: false, 616 horizontal: false,
617 columnWidth: "25%", 617 columnWidth: "25%",
618 // endingShape: "rounded", 618 // endingShape: "rounded",
619 distributed: true 619 distributed: true
620 } 620 }
621 }, 621 },
622 responsive: [ 622 responsive: [
623 { 623 {
624 breakpoint: 480, 624 breakpoint: 480,
625 options: { 625 options: {
626 legend: { 626 legend: {
627 position: "bottom", 627 position: "bottom",
628 offsetX: -10, 628 offsetX: -10,
629 offsetY: 0 629 offsetY: 0
630 } 630 }
631 } 631 }
632 } 632 }
633 ], 633 ],
634 legend: { 634 legend: {
635 show: false 635 show: false
636 }, 636 },
637 colors: ["#7852cc", "#f9a825", "#ff8a89"], 637 colors: ["#7852cc", "#f9a825", "#ff8a89"],
638 dataLabels: { 638 dataLabels: {
639 enabled: false 639 enabled: false
640 }, 640 },
641 stroke: { 641 stroke: {
642 show: true, 642 show: true,
643 width: 2, 643 width: 2,
644 colors: ["transparent"] 644 colors: ["transparent"]
645 }, 645 },
646 xaxis: { 646 xaxis: {
647 categories: ["Fee", "Collections", "Expences"] 647 categories: ["Fee", "Collections", "Expences"]
648 }, 648 },
649 yaxis: { 649 yaxis: {
650 title: { 650 title: {
651 text: "" 651 text: ""
652 } 652 }
653 }, 653 },
654 fill: { 654 fill: {
655 opacity: 1 655 opacity: 1
656 }, 656 },
657 tooltip: { 657 tooltip: {
658 y: { 658 y: {
659 formatter: function(val, opts) { 659 formatter: function(val, opts) {
660 // console.log("opts",opts.w.config.xaxis.categories) 660 // console.log("opts",opts.w.config.xaxis.categories)
661 return "" + val + " "; 661 return "" + val + " ";
662 } 662 }
663 } 663 }
664 } 664 }
665 }, 665 },
666 666
667 // LATEST ACTIVITY 667 // LATEST ACTIVITY
668 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 668 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
669 activityList: [] 669 activityList: []
670 }; 670 };
671 }, 671 },
672 methods: { 672 methods: {
673 test(e) { 673 test(e) {
674 console.log(" test - ", e); 674 console.log(" test - ", e);
675 }, 675 },
676 async handleDayChanged(e) { 676 async handleDayChanged(e) {
677 await this.getParticularMeetingEvent({ 677 await this.getParticularMeetingEvent({
678 meetingEventId: e.events[0]._id 678 meetingEventId: e.events[0]._id
679 }); 679 });
680 this.viewEventDetails = true; 680 this.viewEventDetails = true;
681 }, 681 },
682 async seeEventDetails(activity) { 682 async seeEventDetails(activity) {
683 if (this.$store.state.role === "TEACHER") { 683 if (this.$store.state.role === "TEACHER") {
684 await this.getParticularMeetingEvent({ meetingEventId: activity._id }); 684 await this.getParticularMeetingEvent({ meetingEventId: activity._id });
685 this.viewEventDetails = true; 685 this.viewEventDetails = true;
686 } 686 }
687 if (this.$store.state.role === "PARENT") { 687 if (this.$store.state.role === "PARENT") {
688 await this.getParticularMeetingEvent({ 688 await this.getParticularMeetingEvent({
689 meetingEventId: activity.meetingEvent._id 689 meetingEventId: activity.meetingEvent._id
690 }); 690 });
691 this.viewEventDetails = true; 691 this.viewEventDetails = true;
692 } 692 }
693 }, 693 },
694 async routeToCourseDetails(courseId) { 694 async routeToCourseDetails(courseId) {
695 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 695 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
696 let response = await this.getParticularCourseDetail(courseId); 696 let response = await this.getParticularCourseDetail(courseId);
697 697
698 /* If the response is null then dont route */ 698 /* If the response is null then dont route */
699 if (response.data.data.length > 0) { 699 if (response.data.data.length > 0) {
700 this.$router.push({ 700 this.$router.push({
701 name: "Course Details", 701 name: "Course Details",
702 query: { courseId: courseId } 702 query: { courseId: courseId }
703 }); 703 });
704 } else { 704 } else {
705 this.seeSnackbar("No Data Available", "warning"); 705 this.seeSnackbar("No Data Available", "warning");
706 } 706 }
707 }, 707 },
708 708
709 closeNotice() { 709 closeNotice() {
710 this.dialogNotice = false; 710 this.dialogNotice = false;
711 }, 711 },
712 profile() { 712 profile() {
713 // this.editedIndex = this.desserts.indexOf(item); 713 // this.editedIndex = this.desserts.indexOf(item);
714 // this.notice = Object.assign({}, item); 714 // this.notice = Object.assign({}, item);
715 // this.dialogNotice = true; 715 // this.dialogNotice = true;
716 this.$router.push({ name: "NoticeBoard" }); 716 this.$router.push({ name: "NoticeBoard" });
717 }, 717 },
718 date: function(date) { 718 date: function(date) {
719 return moment(date).format("MMMM DD, YYYY HH:mm"); 719 return moment(date).format("MMMM DD, YYYY HH:mm");
720 }, 720 },
721 activityDate(date) { 721 activityDate(date) {
722 return moment(date).format("MMMM DD, YYYY"); 722 return moment(date).format("MMMM DD, YYYY");
723 }, 723 },
724 refreshEvents() { 724 refreshEvents() {
725 this.$refs.calendar.$emit("refetch-events"); 725 this.$refs.calendar.$emit("refetch-events");
726 }, 726 },
727 removeEvent() { 727 removeEvent() {
728 this.$refs.calendar.$emit("remove-event", this.selected); 728 this.$refs.calendar.$emit("remove-event", this.selected);
729 this.selected = {}; 729 this.selected = {};
730 }, 730 },
731 eventSelected(event) { 731 eventSelected(event) {
732 this.selected = event; 732 this.selected = event;
733 console.log("this.selected", this.selected); 733 console.log("this.selected", this.selected);
734 }, 734 },
735 // eventDropStart: function(event) { 735 // eventDropStart: function(event) {
736 // event.editable = false; 736 // event.editable = false;
737 // }, 737 // },
738 eventCreated(...test) { 738 eventCreated(...test) {
739 console.log(test); 739 console.log(test);
740 }, 740 },
741 getStudents() { 741 getStudents() {
742 http() 742 http()
743 .get("/getStudentsList", { 743 .get("/getStudentsList", {
744 headers: { 744 headers: {
745 Authorization: "Bearer " + this.token 745 Authorization: "Bearer " + this.token
746 } 746 }
747 }) 747 })
748 .then(response => { 748 .then(response => {
749 this.students = response.data.data; 749 this.students = response.data.data;
750 this.showLoader = false; 750 this.showLoader = false;
751 }) 751 })
752 .catch(error => { 752 .catch(error => {
753 // console.log("err====>", err); 753 // console.log("err====>", err);
754 this.showLoader = false; 754 this.showLoader = false;
755 if (error.response.status === 401) { 755 // if (error.response.status === 401) {
756 this.$router.replace({ path: "/" }); 756 // this.$router.replace({ path: "/" });
757 this.$store.dispatch("setToken", null); 757 // this.$store.dispatch("setToken", null);
758 this.$store.dispatch("Id", null); 758 // this.$store.dispatch("Id", null);
759 } 759 // }
760 }); 760 });
761 }, 761 },
762 getParents() { 762 getParents() {
763 http() 763 http()
764 .get("/getParentsList", { 764 .get("/getParentsList", {
765 headers: { 765 headers: {
766 Authorization: "Bearer " + this.token 766 Authorization: "Bearer " + this.token
767 } 767 }
768 }) 768 })
769 .then(response => { 769 .then(response => {
770 this.parents = response.data.data; 770 this.parents = response.data.data;
771 this.showLoader = false; 771 this.showLoader = false;
772 }) 772 })
773 .catch(error => { 773 .catch(error => {
774 // console.log("err====>", err); 774 // console.log("err====>", err);
775 this.showLoader = false; 775 this.showLoader = false;
776 }); 776 });
777 }, 777 },
778 getTeachers() { 778 getTeachers() {
779 http() 779 http()
780 .get("/getTeachersList", { 780 .get("/getTeachersList", {
781 headers: { 781 headers: {
782 Authorization: "Bearer " + this.token 782 Authorization: "Bearer " + this.token
783 } 783 }
784 }) 784 })
785 .then(response => { 785 .then(response => {
786 this.teachers = response.data.data; 786 this.teachers = response.data.data;
787 this.showLoader = false; 787 this.showLoader = false;
788 }) 788 })
789 .catch(error => { 789 .catch(error => {
790 // console.log("err====>", err); 790 // console.log("err====>", err);
791 this.showLoader = false; 791 this.showLoader = false;
792 }); 792 });
793 }, 793 },
794 getClasses() { 794 getClasses() {
795 http() 795 http()
796 .get("/getClassesList", { 796 .get("/getClassesList", {
797 headers: { 797 headers: {
798 Authorization: "Bearer " + this.token 798 Authorization: "Bearer " + this.token
799 } 799 }
800 }) 800 })
801 .then(response => { 801 .then(response => {
802 this.classes = response.data.data; 802 this.classes = response.data.data;
803 this.showLoader = false; 803 this.showLoader = false;
804 }) 804 })
805 .catch(error => { 805 .catch(error => {
806 this.showLoader = false; 806 this.showLoader = false;
807 }); 807 });
808 }, 808 },
809 getNoticeData() { 809 getNoticeData() {
810 this.showLoader = true; 810 this.showLoader = true;
811 http() 811 http()
812 .get("/getEventsList", { 812 .get("/getEventsList", {
813 headers: { 813 headers: {
814 Authorization: "Bearer " + this.token 814 Authorization: "Bearer " + this.token
815 } 815 }
816 }) 816 })
817 .then(response => { 817 .then(response => {
818 this.noticeData = response.data.data; 818 this.noticeData = response.data.data;
819 this.showLoader = false; 819 this.showLoader = false;
820 }) 820 })
821 .catch(error => { 821 .catch(error => {
822 this.showLoader = false; 822 this.showLoader = false;
823 }); 823 });
824 }, 824 },
825 getUserData() { 825 getUserData() {
826 // this.showLoader = true; 826 // this.showLoader = true;
827 if (this.$store.state.role === "PARENT") { 827 if (this.$store.state.role === "PARENT") {
828 http() 828 http()
829 .get("/getParticularUserDetail", { 829 .get("/getParticularUserDetail", {
830 headers: { 830 headers: {
831 Authorization: "Bearer " + this.token 831 Authorization: "Bearer " + this.token
832 }, 832 },
833 params: { 833 params: {
834 studentId: localStorage.getItem("parentStudentId") 834 studentId: localStorage.getItem("parentStudentId")
835 } 835 }
836 }) 836 })
837 .then(response => { 837 .then(response => {
838 this.userData = response.data.data; 838 this.userData = response.data.data;
839 this.showLoader = false; 839 this.showLoader = false;
840 console.log("sdsdfsdfsd - ", response); 840 console.log("sdsdfsdfsd - ", response);
841 }) 841 })
842 .catch(error => { 842 .catch(error => {
843 this.showLoader = false; 843 this.showLoader = false;
844 }); 844 });
845 } else { 845 } else {
846 http() 846 http()
847 .get("/getParticularUserDetail", { 847 .get("/getParticularUserDetail", {
848 headers: { 848 headers: {
849 Authorization: "Bearer " + this.token 849 Authorization: "Bearer " + this.token
850 } 850 }
851 }) 851 })
852 .then(response => { 852 .then(response => {
853 this.userData = response.data.data; 853 this.userData = response.data.data;
854 this.showLoader = false; 854 this.showLoader = false;
855 }) 855 })
856 .catch(error => { 856 .catch(error => {
857 this.showLoader = false; 857 this.showLoader = false;
858 }); 858 });
859 } 859 }
860 }, 860 },
861 861
862 getFeesAndCollectionsData() { 862 getFeesAndCollectionsData() {
863 http() 863 http()
864 .get("/getTotalFeesAndCollections", { 864 .get("/getTotalFeesAndCollections", {
865 headers: { 865 headers: {
866 Authorization: "Bearer " + this.token 866 Authorization: "Bearer " + this.token
867 } 867 }
868 }) 868 })
869 .then(response => { 869 .then(response => {
870 this.feeData = response.data.data; 870 this.feeData = response.data.data;
871 // this.collectionData = response.data.data; 871 // this.collectionData = response.data.data;
872 this.series[0].data[0] = this.feeData.totalFees; 872 this.series[0].data[0] = this.feeData.totalFees;
873 this.series[0].data[1] = this.feeData.totalCollection; 873 this.series[0].data[1] = this.feeData.totalCollection;
874 // console.log("this.series====", this.series); 874 // console.log("this.series====", this.series);
875 875
876 this.showLoader = false; 876 this.showLoader = false;
877 }) 877 })
878 .catch(error => { 878 .catch(error => {
879 this.showLoader = false; 879 this.showLoader = false;
880 }); 880 });
881 }, 881 },
882 getExpensesData() { 882 getExpensesData() {
883 http() 883 http()
884 .get("/getTotalExpenses", { 884 .get("/getTotalExpenses", {
885 headers: { 885 headers: {
886 Authorization: "Bearer " + this.token 886 Authorization: "Bearer " + this.token
887 } 887 }
888 }) 888 })
889 .then(response => { 889 .then(response => {
890 this.expenseData = response.data.data; 890 this.expenseData = response.data.data;
891 // var array = response.data.data.sum; 891 // var array = response.data.data.sum;
892 this.series[0].data[2] = this.expenseData.sum; 892 this.series[0].data[2] = this.expenseData.sum;
893 // this.series = [ 893 // this.series = [
894 // { 894 // {
895 // name: "Total", 895 // name: "Total",
896 // data: array 896 // data: array
897 // } 897 // }
898 // ]; 898 // ];
899 // console.log("this.series====", this.series); 899 // console.log("this.series====", this.series);
900 this.showLoader = false; 900 this.showLoader = false;
901 }) 901 })
902 .catch(error => { 902 .catch(error => {
903 this.showLoader = false; 903 this.showLoader = false;
904 }); 904 });
905 }, 905 },
906 async getparentStudents() { 906 async getparentStudents() {
907 this.showLoader = true; 907 this.showLoader = true;
908 var parentStudentsId; 908 var parentStudentsId;
909 var classId; 909 var classId;
910 await http() 910 await http()
911 .get("/parentStudentsList") 911 .get("/parentStudentsList")
912 .then(response => { 912 .then(response => {
913 // console.log("resssssss", response.data.data.students[0].classId); 913 // console.log("resssssss", response.data.data.students[0].classId);
914 this.studentsData = response.data.data; 914 this.studentsData = response.data.data;
915 localStorage.setItem( 915 localStorage.setItem(
916 "parentStudentId", 916 "parentStudentId",
917 this.studentsData.students[0]._id 917 this.studentsData.students[0]._id
918 ); 918 );
919 localStorage.setItem( 919 localStorage.setItem(
920 "parentClassId", 920 "parentClassId",
921 this.studentsData.students[0].classId 921 this.studentsData.students[0].classId
922 ); 922 );
923 923
924 if (localStorage.getItem("parentStudentId") == null) { 924 if (localStorage.getItem("parentStudentId") == null) {
925 parentStudentsId = response.data.data.students[0].classId; 925 parentStudentsId = response.data.data.students[0].classId;
926 classId = response.data.data.students[0]._id; 926 classId = response.data.data.students[0]._id;
927 } 927 }
928 if (localStorage.getItem("parentStudentId")) { 928 if (localStorage.getItem("parentStudentId")) {
929 parentStudentsId = localStorage.getItem("parentStudentId"); 929 parentStudentsId = localStorage.getItem("parentStudentId");
930 classId = localStorage.getItem("parentClassId"); 930 classId = localStorage.getItem("parentClassId");
931 } 931 }
932 932
933 this.showLoader = false; 933 this.showLoader = false;
934 }) 934 })
935 .catch(err => { 935 .catch(err => {
936 console.log("err====>", err); 936 console.log("err====>", err);
937 this.showLoader = false; 937 this.showLoader = false;
938 }); 938 });
939 await this.getCourses(parentStudentsId, classId); 939 await this.getCourses(parentStudentsId, classId);
940 await this.getAnnoucementes(classId); 940 await this.getAnnoucementes(classId);
941 }, 941 },
942 async getCourses(parentStudentsId, classId) { 942 async getCourses(parentStudentsId, classId) {
943 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 943 /* getStudentCourses - to get courseData - defined in GetApis.js*/
944 await this.getStudentCourses({ 944 await this.getStudentCourses({
945 classId: classId, 945 classId: classId,
946 studentId: parentStudentsId 946 studentId: parentStudentsId
947 }); 947 });
948 }, 948 },
949 getAnnoucementes(classId) { 949 getAnnoucementes(classId) {
950 this.showLoader = true; 950 this.showLoader = true;
951 http() 951 http()
952 .get("/getAnnoucementesList", { 952 .get("/getAnnoucementesList", {
953 params: { 953 params: {
954 classId: classId 954 classId: classId
955 } 955 }
956 }) 956 })
957 .then(response => { 957 .then(response => {
958 this.annoucementData = response.data.data; 958 this.annoucementData = response.data.data;
959 this.showLoader = false; 959 this.showLoader = false;
960 }) 960 })
961 .catch(err => { 961 .catch(err => {
962 console.log("err====>", err); 962 console.log("err====>", err);
963 this.showLoader = false; 963 this.showLoader = false;
964 }); 964 });
965 }, 965 },
966 async getMeetingEventes() { 966 async getMeetingEventes() {
967 if (this.role == "TEACHER") { 967 if (this.role == "TEACHER") {
968 this.showLoader = true; 968 this.showLoader = true;
969 await http() 969 await http()
970 .get("/getMeetingEventesList", { 970 .get("/getMeetingEventesList", {
971 headers: { 971 headers: {
972 Authorization: "Bearer " + this.token 972 Authorization: "Bearer " + this.token
973 } 973 }
974 }) 974 })
975 .then(response => { 975 .then(response => {
976 var activityList = response.data.data; 976 var activityList = response.data.data;
977 this.activityList = activityList; 977 this.activityList = activityList;
978 this.showLoader = false; 978 this.showLoader = false;
979 979
980 /* set activityEvents array to highlight event dates in calender */ 980 /* set activityEvents array to highlight event dates in calender */
981 for (var i = 0; i < this.activityList.length; i++) { 981 for (var i = 0; i < this.activityList.length; i++) {
982 let obj = {}; 982 let obj = {};
983 obj.date = moment(this.activityList[i].dateOfEvent).format( 983 obj.date = moment(this.activityList[i].dateOfEvent).format(
984 "YYYY/MM/DD" 984 "YYYY/MM/DD"
985 ); 985 );
986 obj.title = this.activityList[i].title; 986 obj.title = this.activityList[i].title;
987 obj._id = this.activityList[i]._id; 987 obj._id = this.activityList[i]._id;
988 this.activityEvents.push(obj); 988 this.activityEvents.push(obj);
989 } 989 }
990 }) 990 })
991 .catch(error => { 991 .catch(error => {
992 this.showLoader = false; 992 this.showLoader = false;
993 }); 993 });
994 } 994 }
995 } 995 }
996 }, 996 },
997 997
998 mounted() { 998 mounted() {
999 // = this.$store.state.schoolToken; 999 // = this.$store.state.schoolToken;
1000 // console.log("this.$store.state.role", this.token); 1000 // console.log("this.$store.state.role", this.token);
1001 // this.getUsersList(); 1001 // this.getUsersList();
1002 }, 1002 },
1003 1003
1004 async created() { 1004 async created() {
1005 if (this.$store.state.role === "ADMIN") { 1005 if (this.$store.state.role === "ADMIN") {
1006 this.token = this.$store.state.token; 1006 this.token = this.$store.state.token;
1007 await this.getFeesAndCollectionsData();
1008 await this.getExpensesData();
1007 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 1009 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1008 this.token = this.$store.state.schoolToken; 1010 this.token = this.$store.state.schoolToken;
1011 await this.getFeesAndCollectionsData();
1009 } else if (this.$store.state.role === "TEACHER") { 1012 } else if (this.$store.state.role === "TEACHER") {
1010 this.token = this.$store.state.token; 1013 this.token = this.$store.state.token;
1011 } else if (this.$store.state.role === "ACCOUNTANT") { 1014 } else if (this.$store.state.role === "ACCOUNTANT") {
1012 this.token = this.$store.state.token; 1015 this.token = this.$store.state.token;
1013 } else if (this.$store.state.role === "LIBRARIAN") { 1016 } else if (this.$store.state.role === "LIBRARIAN") {
1014 this.token = this.$store.state.token; 1017 this.token = this.$store.state.token;
1015 } else if (this.$store.state.role === "PARENT") { 1018 } else if (this.$store.state.role === "PARENT") {
1016 this.token = this.$store.state.token; 1019 this.token = this.$store.state.token;
1017 await this.getparentStudents(); 1020 await this.getparentStudents();
1018 } 1021 }
1019 this.role = this.$store.state.role; 1022 this.role = this.$store.state.role;
1020 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); 1023 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
1021 // this.getData(); 1024 // this.getData();
1022 await this.getStudents(); 1025 await this.getStudents();
1023 await this.getTeachers(); 1026 await this.getTeachers();
1024 await this.getParents(); 1027 await this.getParents();
1025 await this.getClasses(); 1028 await this.getClasses();
1026 await this.getNoticeData(); 1029 await this.getNoticeData();
1027 await this.getUserData(); 1030 await this.getUserData();
1028 await this.getFeesAndCollectionsData(); 1031
1029 await this.getExpensesData(); 1032
1030 1033
1031 /* get Latest events list for student login*/ 1034 /* get Latest events list for student login*/
1032 if (this.$store.state.role == "PARENT") { 1035 if (this.$store.state.role == "PARENT") {
1033 let response = await this.studentMeetingEvents({ 1036 let response = await this.studentMeetingEvents({
1034 studentId: localStorage.getItem("parentStudentId") 1037 studentId: localStorage.getItem("parentStudentId")
1035 }); 1038 });
1036 this.activityList = response.data.data; 1039 this.activityList = response.data.data;
1037 1040
1038 /* set activityEvents array to highlight event dates in calender */ 1041 /* set activityEvents array to highlight event dates in calender */
1039 for (var i = 0; i < this.activityList.length; i++) { 1042 for (var i = 0; i < this.activityList.length; i++) {
1040 let obj = {}; 1043 let obj = {};
1041 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( 1044 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1042 "YYYY/MM/DD" 1045 "YYYY/MM/DD"
1043 ); 1046 );
1044 obj.title = this.activityList[i].meetingEvent.title; 1047 obj.title = this.activityList[i].meetingEvent.title;
1045 obj._id = this.activityList[i].meetingEvent._id; 1048 obj._id = this.activityList[i].meetingEvent._id;
1046 this.activityEvents.push(obj); 1049 this.activityEvents.push(obj);
1047 } 1050 }
1048 } 1051 }
1049 1052
1050 /* get Latest events list for teacher login*/ 1053 /* get Latest events list for teacher login*/
1051 if (this.role == "TEACHER") { 1054 if (this.role == "TEACHER") {
1052 await this.getMeetingEventes(); 1055 await this.getMeetingEventes();
1053 } 1056 }
1054 } 1057 }
1055 }; 1058 };
1056 </script> 1059 </script>
1057 1060
1058 <style scoped> 1061 <style scoped>
1059 @import "fullcalendar/dist/fullcalendar.css"; 1062 @import "fullcalendar/dist/fullcalendar.css";
1060 </style> 1063 </style>