viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 8b184d484a4e2a8e46adac10c7367028bd11aad2

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

added events to teacher

Showing 1 changed file with 51 additions and 22 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @8b184d4
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-flex xs12 sm12 md12> 105 <v-flex xs12 sm12 md12 v-if="$store.state.role == 'TEACHER' ">
106 <v-layout wrap class> 106 <v-layout wrap class>
107 <v-flex xs12 sm12 md3> 107 <v-flex xs12 sm12 md3>
108 <router-link :to="{ name:'Students' }"> 108 <router-link :to="{ name:'Students' }">
109 <v-card class="card pink-bgcolor"> 109 <v-card class="card pink-bgcolor">
110 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 110 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
111 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 111 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
112 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 112 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
113 </v-card> 113 </v-card>
114 </router-link> 114 </router-link>
115 </v-flex>--> 115 </v-flex>
116 <!-- ***** Total Teachers***** --> 116 <!-- ***** Total Teachers***** -->
117 <!-- <v-flex xs12 sm12 md3> 117 <v-flex xs12 sm12 md3>
118 <router-link :to="{ name:'Teachers' }"> 118 <router-link :to="{ name:'Teachers' }">
119 <v-card flat class="card elevation-2 firozi-bgcolor"> 119 <v-card flat class="card elevation-2 firozi-bgcolor">
120 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 120 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
121 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 121 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
122 122
123 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 123 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
124 </v-card> 124 </v-card>
125 </router-link> 125 </router-link>
126 </v-flex>--> 126 </v-flex>
127 <!-- ***** Total Parents ***** --> 127 <!-- ***** Total Parents ***** -->
128 <!-- <v-flex xs12 sm12 md3> 128 <v-flex xs12 sm12 md3>
129 <router-link :to="{ name:'Parents' }"> 129 <router-link :to="{ name:'Parents' }">
130 <v-card flat class="card yellow darken-3"> 130 <v-card flat class="card yellow darken-3">
131 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 131 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
132 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 132 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
133 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 133 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
134 </v-card> 134 </v-card>
135 </router-link> 135 </router-link>
136 </v-flex>--> 136 </v-flex>
137 <!-- ***** Total Class***** --> 137 <!-- ***** Total Class***** -->
138 <!-- <v-flex xs12 sm12 md3> 138 <v-flex xs12 sm12 md3>
139 <router-link :to="{ name:'Class' }"> 139 <router-link :to="{ name:'Class' }">
140 <v-card flat class="card darkBlue-bgcolor"> 140 <v-card flat class="card darkBlue-bgcolor">
141 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 141 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
142 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 142 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
143 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 143 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
144 </v-card> 144 </v-card>
145 </router-link> 145 </router-link>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 </v-flex>--> 148 </v-flex>
149 <p 149 <p
150 v-if="studentsData.length === 0 && role == 'PARENT'" 150 v-if="studentsData.length === 0 && role == 'PARENT'"
151 class="text-center title grey lighten-4 error--text" 151 class="text-center title grey lighten-4 error--text"
152 >You have no student registered with school</p> 152 >You have no student registered with school</p>
153 <v-layout v-if="role != 'PARENT'"> 153 <v-layout v-if="role != 'PARENT'">
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 <v-card class="mt-2 card" v-if="role != 'PARENT'"> 217 <v-card class="mt-2 card" v-if="role != 'PARENT'">
218 <!-- <full-calendar 218 <!-- <full-calendar
219 ref="calendar" 219 ref="calendar"
220 defaultView="month" 220 defaultView="month"
221 droppable="false" 221 droppable="false"
222 :events="events" 222 :events="events"
223 :config="config" 223 :config="config"
224 ></full-calendar>--> 224 ></full-calendar>-->
225 <h4 class="pa-3"> 225 <h4 class="pa-3">
226 <b>Notice</b> 226 <b>Notice</b>
227 </h4> 227 </h4>
228 228
229 <v-data-table 229 <v-data-table
230 :items="noticeData" 230 :items="noticeData"
231 class="elevation-0" 231 class="elevation-0"
232 flat 232 flat
233 hide-actions 233 hide-actions
234 hide-headers 234 hide-headers
235 style="border-spacing: 0 !important;" 235 style="border-spacing: 0 !important;"
236 > 236 >
237 <template 237 <template
238 slot="items" 238 slot="items"
239 slot-scope="props" 239 slot-scope="props"
240 v-if="props.index < 5" 240 v-if="props.index < 5"
241 style="border-spacing: 0 !important;" 241 style="border-spacing: 0 !important;"
242 > 242 >
243 <tr class="td-notice"> 243 <tr class="td-notice">
244 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 244 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
245 <td> 245 <td>
246 <span class="grey--text caption">{{ date(props.item.created) }}</span> 246 <span class="grey--text caption">{{ date(props.item.created) }}</span>
247 <br /> 247 <br />
248 <span class="body-2">{{ props.item.title}}</span> 248 <span class="body-2">{{ props.item.title}}</span>
249 </td> 249 </td>
250 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> 250 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
251 251
252 <td class="text-xs-center"> 252 <td class="text-xs-center">
253 <span> 253 <span>
254 <v-tooltip top> 254 <v-tooltip top>
255 <img 255 <img
256 slot="activator" 256 slot="activator"
257 style="cursor:pointer; width:25px; height:25px; " 257 style="cursor:pointer; width:25px; height:25px; "
258 @click="profile" 258 @click="profile"
259 src="/static/icon/view.png" 259 src="/static/icon/view.png"
260 /> 260 />
261 <span>View</span> 261 <span>View</span>
262 </v-tooltip> 262 </v-tooltip>
263 </span> 263 </span>
264 </td> 264 </td>
265 </tr> 265 </tr>
266 </template> 266 </template>
267 </v-data-table> 267 </v-data-table>
268 </v-card> 268 </v-card>
269 <!-- COURSES --> 269 <!-- COURSES -->
270 <v-layout v-if="role == 'PARENT'"> 270 <v-layout v-if="role == 'PARENT'">
271 <v-flex xs12> 271 <v-flex xs12>
272 <v-card class="card mt-2 account-Card"> 272 <v-card class="card mt-2 account-Card">
273 <h4> 273 <h4>
274 <b>My Courses</b> 274 <b>My Courses</b>
275 </h4> 275 </h4>
276 <v-layout wrap> 276 <v-layout wrap>
277 <v-flex xs12 sm12> 277 <v-flex xs12 sm12>
278 <v-list two-line> 278 <v-list two-line>
279 <template> 279 <template>
280 <v-list-tile v-for="(course,i) in courseData" :key="i"> 280 <v-list-tile v-for="(course,i) in courseData" :key="i">
281 <v-list-tile-avatar> 281 <v-list-tile-avatar>
282 <v-icon 282 <v-icon
283 class="account-circle darkBlue-color" 283 class="account-circle darkBlue-color"
284 style="cursor: pointer;" 284 style="cursor: pointer;"
285 >panorama_fish_eye</v-icon> 285 >panorama_fish_eye</v-icon>
286 </v-list-tile-avatar> 286 </v-list-tile-avatar>
287 <v-list-tile-content> 287 <v-list-tile-content>
288 <v-list-tile-title 288 <v-list-tile-title
289 style="cursor: pointer;" 289 style="cursor: pointer;"
290 @click="routeToCourseDetails(course._id)" 290 @click="routeToCourseDetails(course._id)"
291 >{{ course.courseName }}</v-list-tile-title> 291 >{{ course.courseName }}</v-list-tile-title>
292 </v-list-tile-content> 292 </v-list-tile-content>
293 </v-list-tile> 293 </v-list-tile>
294 </template> 294 </template>
295 </v-list> 295 </v-list>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 </v-card> 298 </v-card>
299 </v-flex> 299 </v-flex>
300 </v-layout> 300 </v-layout>
301 <v-layout v-if="role == 'PARENT'"> 301 <v-layout v-if="role == 'PARENT'">
302 <v-flex xs6> 302 <v-flex xs6>
303 <v-card class="mt-2 card"> 303 <v-card class="mt-2 card">
304 <h4 class="pa-3"> 304 <h4 class="pa-3">
305 <b>Latest Annoucements</b> 305 <b>Latest Annoucements</b>
306 </h4> 306 </h4>
307 307
308 <v-data-table 308 <v-data-table
309 :items="annoucementData" 309 :items="annoucementData"
310 class="elevation-0" 310 class="elevation-0"
311 flat 311 flat
312 hide-actions 312 hide-actions
313 hide-headers 313 hide-headers
314 style="border-spacing: 0 !important;" 314 style="border-spacing: 0 !important;"
315 > 315 >
316 <template 316 <template
317 slot="items" 317 slot="items"
318 slot-scope="props" 318 slot-scope="props"
319 v-if="props.index < 5" 319 v-if="props.index < 5"
320 style="border-spacing: 0 !important;" 320 style="border-spacing: 0 !important;"
321 > 321 >
322 <tr class="td-notice"> 322 <tr class="td-notice">
323 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 323 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
324 <td> 324 <td>
325 <span class="grey--text caption">{{ date(props.item.created) }}</span> 325 <span class="grey--text caption">{{ date(props.item.created) }}</span>
326 <br /> 326 <br />
327 <span class="body-2">{{ props.item.discussionType}}</span> 327 <span class="body-2">{{ props.item.discussionType}}</span>
328 </td> 328 </td>
329 <td class="text-xs-center"> 329 <td class="text-xs-center">
330 <span> 330 <span>
331 <v-tooltip top> 331 <v-tooltip top>
332 <img 332 <img
333 slot="activator" 333 slot="activator"
334 style="cursor:pointer; width:25px; height:25px; " 334 style="cursor:pointer; width:25px; height:25px; "
335 src="/static/icon/view.png" 335 src="/static/icon/view.png"
336 /> 336 />
337 <span>View</span> 337 <span>View</span>
338 </v-tooltip> 338 </v-tooltip>
339 </span> 339 </span>
340 </td> 340 </td>
341 </tr> 341 </tr>
342 </template> 342 </template>
343 </v-data-table> 343 </v-data-table>
344 </v-card> 344 </v-card>
345 </v-flex> 345 </v-flex>
346 <v-flex xs6> 346 <v-flex xs6>
347 <v-card class="mt-2 card"> 347 <v-card class="mt-2 card">
348 <h4 class="pa-3"> 348 <h4 class="pa-3">
349 <b>Online User</b> 349 <b>Online User</b>
350 </h4> 350 </h4>
351 351
352 <v-data-table 352 <v-data-table
353 :items="onlineUser" 353 :items="onlineUser"
354 class="elevation-0" 354 class="elevation-0"
355 flat 355 flat
356 hide-actions 356 hide-actions
357 hide-headers 357 hide-headers
358 style="border-spacing: 0 !important;" 358 style="border-spacing: 0 !important;"
359 > 359 >
360 <template 360 <template
361 slot="items" 361 slot="items"
362 slot-scope="props" 362 slot-scope="props"
363 v-if="props.index < 5" 363 v-if="props.index < 5"
364 style="border-spacing: 0 !important;" 364 style="border-spacing: 0 !important;"
365 > 365 >
366 <tr class="td-notice"> 366 <tr class="td-notice">
367 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 367 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
368 <td> 368 <td>
369 <span class="body-2">{{ props.item.user }}</span> 369 <span class="body-2">{{ props.item.user }}</span>
370 </td> 370 </td>
371 <td class="text-xs-center"> 371 <td class="text-xs-center">
372 <span> 372 <span>
373 <v-tooltip top> 373 <v-tooltip top>
374 <img 374 <img
375 slot="activator" 375 slot="activator"
376 style="cursor:pointer; width:25px; height:25px; " 376 style="cursor:pointer; width:25px; height:25px; "
377 src="/static/icon/view.png" 377 src="/static/icon/view.png"
378 /> 378 />
379 <span>View</span> 379 <span>View</span>
380 </v-tooltip> 380 </v-tooltip>
381 </span> 381 </span>
382 </td> 382 </td>
383 </tr> 383 </tr>
384 </template> 384 </template>
385 </v-data-table> 385 </v-data-table>
386 </v-card> 386 </v-card>
387 </v-flex> 387 </v-flex>
388 </v-layout> 388 </v-layout>
389 </v-container> 389 </v-container>
390 </v-flex> 390 </v-flex>
391 <v-spacer></v-spacer> 391 <v-spacer></v-spacer>
392 <!-- SIDE BAR --> 392 <!-- SIDE BAR -->
393 <v-flex xs12 sm12 md3> 393 <v-flex xs12 sm12 md3>
394 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 394 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
395 <v-card-text class="px-2"> 395 <v-card-text class="px-2">
396 <h4 class="text-xs-center py-3"> 396 <h4 class="text-xs-center py-3">
397 <b>Profile</b> 397 <b>Profile</b>
398 </h4> 398 </h4>
399 <v-flex xs12 class="py-3"> 399 <v-flex xs12 class="py-3">
400 <v-layout wrap> 400 <v-layout wrap>
401 <v-flex xs12 sm12 md4> 401 <v-flex xs12 sm12 md4>
402 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> 402 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
403 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" width="80" /> 403 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" width="80" />
404 </v-flex> 404 </v-flex>
405 <v-flex xs12 sm12 md6> 405 <v-flex xs12 sm12 md6>
406 <p class="mb-0 body-1"> 406 <p class="mb-0 body-1">
407 <i>{{ userData.name }}</i> 407 <i>{{ userData.name }}</i>
408 </p> 408 </p>
409 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 409 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
410 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 410 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
411 <address class="caption grey--text mb-3">{{ userData.address }}</address> 411 <address class="caption grey--text mb-3">{{ userData.address }}</address>
412 </v-flex> 412 </v-flex>
413 </v-layout> 413 </v-layout>
414 </v-flex> 414 </v-flex>
415 <hr /> 415 <hr />
416 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 416 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
417 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 417 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
418 <!-- LATEST ACTIVITY --> 418 <!-- LATEST ACTIVITY -->
419 <v-card class="my-3 elevation-0"> 419 <v-card class="my-3 elevation-0">
420 <v-card-text> 420 <v-card-text>
421 <v-card-title class="justify-center subheading font-weight-bold">Latest Activity</v-card-title> 421 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
422 <div 422 <div
423 v-for="(activity,index) in activityList" 423 v-for="(activity,index) in activityList"
424 :key="index" 424 :key="index"
425 class="mt-2" 425 class="mt-2"
426 style="cursor: pointer;" 426 style="cursor: pointer;"
427 @click="seeEventDetails({meetingEventId: activity.meetingEvent._id})" 427 @click="seeEventDetails(activity)"
428 > 428 >
429 <span 429 <span
430 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 430 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
431 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 431 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
432 ></span> 432 ></span>
433 <div style="display: inline-block;" class="ml-2"> 433 <div style="display: inline-block;" class="ml-2">
434 <div 434 <div v-if="$store.state.role === 'PARENT' ">
435 class="grey--text lighten-1 caption" 435 <div
436 v-if="activity.meetingEvent" 436 class="grey--text lighten-1 caption"
437 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 437 v-if="activity.meetingEvent"
438 <div class="body-2" v-if="activity.meetingEvent">{{activity.meetingEvent.title}}</div> 438 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
439 <div
440 class="body-2"
441 v-if="activity.meetingEvent"
442 >{{activity.meetingEvent.title}}</div>
443 </div>
439 444
445 <!-- LATEST EVENTS FOR TEACHER -->
440 <div v-if="role == 'TEACHER'"> 446 <div v-if="role == 'TEACHER'">
441 <div 447 <div
442 class="grey--text lighten-1 caption" 448 class="grey--text lighten-1 caption"
443 v-if="activity.dateOfEvent" 449 v-if="activity.dateOfEvent"
444 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 450 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
445 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 451 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
446 </div> 452 </div>
447 </div> 453 </div>
448 </div> 454 </div>
449 <div v-if="activityList.length == 0"> 455 <div v-if="activityList.length == 0">
450 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 456 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
451 </div> 457 </div>
452 </v-card-text> 458 </v-card-text>
453 </v-card> 459 </v-card>
454 </v-card-text> 460 </v-card-text>
455 </v-card> 461 </v-card>
456 </v-flex> 462 </v-flex>
457 </v-layout> 463 </v-layout>
458 464
459 <v-dialog v-model="dialog" max-width="500"> 465 <v-dialog v-model="dialog" max-width="500">
460 <v-card color="grey lighten-4" flat> 466 <v-card color="grey lighten-4" flat>
461 <v-toolbar dark color="fixcolors"> 467 <v-toolbar dark color="fixcolors">
462 <v-spacer></v-spacer> 468 <v-spacer></v-spacer>
463 <v-btn icon @click="dialog= false"> 469 <v-btn icon @click="dialog= false">
464 <v-icon>close</v-icon> 470 <v-icon>close</v-icon>
465 </v-btn> 471 </v-btn>
466 </v-toolbar> 472 </v-toolbar>
467 <v-flex class="py-4"> 473 <v-flex class="py-4">
468 <v-list-tile> 474 <v-list-tile>
469 <v-list-tile-action> 475 <v-list-tile-action>
470 <v-icon>edit</v-icon> 476 <v-icon>edit</v-icon>
471 </v-list-tile-action> 477 </v-list-tile-action>
472 <v-list-tile-content> 478 <v-list-tile-content>
473 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 479 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
474 </v-list-tile-content> 480 </v-list-tile-content>
475 </v-list-tile> 481 </v-list-tile>
476 <v-list-tile> 482 <v-list-tile>
477 <v-list-tile-action> 483 <v-list-tile-action>
478 <v-icon>access_time</v-icon> 484 <v-icon>access_time</v-icon>
479 </v-list-tile-action> 485 </v-list-tile-action>
480 <v-list-tile-content> 486 <v-list-tile-content>
481 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 487 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
482 </v-list-tile-content> 488 </v-list-tile-content>
483 </v-list-tile> 489 </v-list-tile>
484 </v-flex> 490 </v-flex>
485 </v-card> 491 </v-card>
486 </v-dialog> 492 </v-dialog>
487 </v-app> 493 </v-app>
488 </template> 494 </template>
489 495
490 <script> 496 <script>
491 import http from "@/Services/http.js"; 497 import http from "@/Services/http.js";
492 import moment from "moment"; 498 import moment from "moment";
493 import AllApiCalls from "@/Services/AllApiCalls.js"; 499 import AllApiCalls from "@/Services/AllApiCalls.js";
494 // import { FunctionalCalendar } from "vue-functional-calendar"; 500 // import { FunctionalCalendar } from "vue-functional-calendar";
495 501
496 export default { 502 export default {
497 components: { 503 components: {
498 // FunctionalCalendar 504 // FunctionalCalendar
499 }, 505 },
500 mixins: [AllApiCalls], 506 mixins: [AllApiCalls],
501 data() { 507 data() {
502 return { 508 return {
503 // data: { 509 // data: {
504 // clieckedToday: false 510 // clieckedToday: false
505 // }, 511 // },
506 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 512 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
507 // calendarData: {}, 513 // calendarData: {},
508 // calendar: {}, 514 // calendar: {},
509 515
510 // DIALOG BOX EVENT DETAILS 516 // DIALOG BOX EVENT DETAILS
511 viewEventDetails: false, 517 viewEventDetails: false,
512 518
513 // CALENDER 519 // CALENDER
514 moment: moment, 520 moment: moment,
515 activityEvents: [], 521 activityEvents: [],
516 onlineUser: [ 522 onlineUser: [
517 { 523 {
518 user: "Student Demo" 524 user: "Student Demo"
519 }, 525 },
520 { 526 {
521 user: "Teacher Demo" 527 user: "Teacher Demo"
522 }, 528 },
523 { 529 {
524 user: "Priyansh Gupta" 530 user: "Priyansh Gupta"
525 }, 531 },
526 { 532 {
527 user: "Gaurav Aggarwal" 533 user: "Gaurav Aggarwal"
528 }, 534 },
529 { 535 {
530 user: "Approve Arorra" 536 user: "Approve Arorra"
531 } 537 }
532 ], 538 ],
533 showLoader: false, 539 showLoader: false,
534 calendarData: {}, 540 calendarData: {},
535 dialog: false, 541 dialog: false,
536 dialogNotice: false, 542 dialogNotice: false,
537 HolidaysList: [], 543 HolidaysList: [],
538 EventsList: [], 544 EventsList: [],
539 events: [], 545 events: [],
540 config: { 546 config: {
541 eventClick: event => { 547 eventClick: event => {
542 this.selected = event; 548 this.selected = event;
543 this.dialog = true; 549 this.dialog = true;
544 } 550 }
545 }, 551 },
546 selected: {}, 552 selected: {},
547 barGraph: [], 553 barGraph: [],
548 // notice: {}, 554 // notice: {},
549 userData: {}, 555 userData: {},
550 dated: new Date(2018, 0, 9), 556 dated: new Date(2018, 0, 9),
551 userList: [], 557 userList: [],
552 sectionList: [], 558 sectionList: [],
553 students: "", 559 students: "",
554 parents: "", 560 parents: "",
555 teachers: "", 561 teachers: "",
556 classes: "", 562 classes: "",
557 noticeData: [], 563 noticeData: [],
558 expenseData: [], 564 expenseData: [],
559 feeData: [], 565 feeData: [],
560 collectionData: [], 566 collectionData: [],
561 courseData: [], 567 courseData: [],
562 studentsData: [], 568 studentsData: [],
563 annoucementData: [], 569 annoucementData: [],
564 role: "", 570 role: "",
565 attrs: [ 571 attrs: [
566 { 572 {
567 key: "today", 573 key: "today",
568 highlight: true, 574 highlight: true,
569 dates: new Date() 575 dates: new Date()
570 } 576 }
571 ], 577 ],
572 drawer: true, 578 drawer: true,
573 items: [ 579 items: [
574 { title: "Home", icon: "dashboard" }, 580 { title: "Home", icon: "dashboard" },
575 { title: "About", icon: "question_answer" } 581 { title: "About", icon: "question_answer" }
576 ], 582 ],
577 right: null, 583 right: null,
578 584
579 series: [ 585 series: [
580 { 586 {
581 name: "Total", 587 name: "Total",
582 data: [] 588 data: []
583 } 589 }
584 ], 590 ],
585 chartOptions: { 591 chartOptions: {
586 chart: { 592 chart: {
587 type: "bar", 593 type: "bar",
588 height: 150, 594 height: 150,
589 stacked: true 595 stacked: true
590 // animations: { 596 // animations: {
591 // enabled: true, 597 // enabled: true,
592 // easing: "easeinout", 598 // easing: "easeinout",
593 // speed: 1200, 599 // speed: 1200,
594 // animateGradually: { 600 // animateGradually: {
595 // enabled: true, 601 // enabled: true,
596 // delay: 450 602 // delay: 450
597 // }, 603 // },
598 // dynamicAnimation: { 604 // dynamicAnimation: {
599 // enabled: true, 605 // enabled: true,
600 // speed: 450 606 // speed: 450
601 // } 607 // }
602 // } 608 // }
603 }, 609 },
604 plotOptions: { 610 plotOptions: {
605 bar: { 611 bar: {
606 horizontal: false, 612 horizontal: false,
607 columnWidth: "25%", 613 columnWidth: "25%",
608 // endingShape: "rounded", 614 // endingShape: "rounded",
609 distributed: true 615 distributed: true
610 } 616 }
611 }, 617 },
612 responsive: [ 618 responsive: [
613 { 619 {
614 breakpoint: 480, 620 breakpoint: 480,
615 options: { 621 options: {
616 legend: { 622 legend: {
617 position: "bottom", 623 position: "bottom",
618 offsetX: -10, 624 offsetX: -10,
619 offsetY: 0 625 offsetY: 0
620 } 626 }
621 } 627 }
622 } 628 }
623 ], 629 ],
624 legend: { 630 legend: {
625 show: false 631 show: false
626 }, 632 },
627 colors: ["#7852cc", "#f9a825", "#ff8a89"], 633 colors: ["#7852cc", "#f9a825", "#ff8a89"],
628 dataLabels: { 634 dataLabels: {
629 enabled: false 635 enabled: false
630 }, 636 },
631 stroke: { 637 stroke: {
632 show: true, 638 show: true,
633 width: 2, 639 width: 2,
634 colors: ["transparent"] 640 colors: ["transparent"]
635 }, 641 },
636 xaxis: { 642 xaxis: {
637 categories: ["Fee", "Collections", "Expences"] 643 categories: ["Fee", "Collections", "Expences"]
638 }, 644 },
639 yaxis: { 645 yaxis: {
640 title: { 646 title: {
641 text: "" 647 text: ""
642 } 648 }
643 }, 649 },
644 fill: { 650 fill: {
645 opacity: 1 651 opacity: 1
646 }, 652 },
647 tooltip: { 653 tooltip: {
648 y: { 654 y: {
649 formatter: function(val, opts) { 655 formatter: function(val, opts) {
650 // console.log("opts",opts.w.config.xaxis.categories) 656 // console.log("opts",opts.w.config.xaxis.categories)
651 return "" + val + " "; 657 return "" + val + " ";
652 } 658 }
653 } 659 }
654 } 660 }
655 }, 661 },
656 662
657 // LATEST ACTIVITY 663 // LATEST ACTIVITY
658 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 664 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
659 activityList: [] 665 activityList: []
660 }; 666 };
661 }, 667 },
662 methods: { 668 methods: {
663 async handleDayChanged(e) { 669 async handleDayChanged(e) {
664 console.log("date-changed - ", e); 670 console.log("date-changed - ", e);
665 await this.getParticularMeetingEvent({ 671 await this.getParticularMeetingEvent({
666 meetingEventId: e.events[0]._id 672 meetingEventId: e.events[0]._id
667 }); 673 });
668 this.viewEventDetails = true; 674 this.viewEventDetails = true;
669 }, 675 },
670 async seeEventDetails(params) { 676 async seeEventDetails(activity) {
671 await this.getParticularMeetingEvent(params); 677 if (this.$store.state.role === "TEACHER") {
672 this.viewEventDetails = true; 678 await this.getParticularMeetingEvent({ meetingEventId: activity._id });
679 this.viewEventDetails = true;
680 }
681 if (this.$store.state.role === "PARENT") {
682 await this.getParticularMeetingEvent({
683 meetingEventId: activity.meetingEvent._id
684 });
685 this.viewEventDetails = true;
686 }
673 }, 687 },
674 async routeToCourseDetails(courseId) { 688 async routeToCourseDetails(courseId) {
675 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 689 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
676 let response = await this.getParticularCourseDetail(courseId); 690 let response = await this.getParticularCourseDetail(courseId);
677 691
678 /* If the response is null then dont route */ 692 /* If the response is null then dont route */
679 if (response.data.data.length > 0) { 693 if (response.data.data.length > 0) {
680 this.$router.push({ 694 this.$router.push({
681 name: "Course Details", 695 name: "Course Details",
682 query: { courseId: courseId } 696 query: { courseId: courseId }
683 }); 697 });
684 } else { 698 } else {
685 this.seeSnackbar("No Data Available", "warning"); 699 this.seeSnackbar("No Data Available", "warning");
686 } 700 }
687 }, 701 },
688 702
689 closeNotice() { 703 closeNotice() {
690 this.dialogNotice = false; 704 this.dialogNotice = false;
691 }, 705 },
692 profile() { 706 profile() {
693 // this.editedIndex = this.desserts.indexOf(item); 707 // this.editedIndex = this.desserts.indexOf(item);
694 // this.notice = Object.assign({}, item); 708 // this.notice = Object.assign({}, item);
695 // this.dialogNotice = true; 709 // this.dialogNotice = true;
696 this.$router.push({ name: "NoticeBoard" }); 710 this.$router.push({ name: "NoticeBoard" });
697 }, 711 },
698 date: function(date) { 712 date: function(date) {
699 return moment(date).format("MMMM DD, YYYY HH:mm"); 713 return moment(date).format("MMMM DD, YYYY HH:mm");
700 }, 714 },
701 activityDate(date) { 715 activityDate(date) {
702 return moment(date).format("MMMM DD, YYYY"); 716 return moment(date).format("MMMM DD, YYYY");
703 }, 717 },
704 refreshEvents() { 718 refreshEvents() {
705 this.$refs.calendar.$emit("refetch-events"); 719 this.$refs.calendar.$emit("refetch-events");
706 }, 720 },
707 removeEvent() { 721 removeEvent() {
708 this.$refs.calendar.$emit("remove-event", this.selected); 722 this.$refs.calendar.$emit("remove-event", this.selected);
709 this.selected = {}; 723 this.selected = {};
710 }, 724 },
711 eventSelected(event) { 725 eventSelected(event) {
712 this.selected = event; 726 this.selected = event;
713 console.log("this.selected", this.selected); 727 console.log("this.selected", this.selected);
714 }, 728 },
715 // eventDropStart: function(event) { 729 // eventDropStart: function(event) {
716 // event.editable = false; 730 // event.editable = false;
717 // }, 731 // },
718 eventCreated(...test) { 732 eventCreated(...test) {
719 console.log(test); 733 console.log(test);
720 }, 734 },
721 getStudents() { 735 getStudents() {
722 http() 736 http()
723 .get("/getStudentsList", { 737 .get("/getStudentsList", {
724 headers: { 738 headers: {
725 Authorization: "Bearer " + this.token 739 Authorization: "Bearer " + this.token
726 } 740 }
727 }) 741 })
728 .then(response => { 742 .then(response => {
729 this.students = response.data.data; 743 this.students = response.data.data;
730 this.showLoader = false; 744 this.showLoader = false;
731 }) 745 })
732 .catch(error => { 746 .catch(error => {
733 // console.log("err====>", err); 747 // console.log("err====>", err);
734 this.showLoader = false; 748 this.showLoader = false;
735 if (error.response.status === 401) { 749 if (error.response.status === 401) {
736 this.$router.replace({ path: "/" }); 750 this.$router.replace({ path: "/" });
737 this.$store.dispatch("setToken", null); 751 this.$store.dispatch("setToken", null);
738 this.$store.dispatch("Id", null); 752 this.$store.dispatch("Id", null);
739 } 753 }
740 }); 754 });
741 }, 755 },
742 getParents() { 756 getParents() {
743 http() 757 http()
744 .get("/getParentsList", { 758 .get("/getParentsList", {
745 headers: { 759 headers: {
746 Authorization: "Bearer " + this.token 760 Authorization: "Bearer " + this.token
747 } 761 }
748 }) 762 })
749 .then(response => { 763 .then(response => {
750 this.parents = response.data.data; 764 this.parents = response.data.data;
751 this.showLoader = false; 765 this.showLoader = false;
752 }) 766 })
753 .catch(error => { 767 .catch(error => {
754 // console.log("err====>", err); 768 // console.log("err====>", err);
755 this.showLoader = false; 769 this.showLoader = false;
756 }); 770 });
757 }, 771 },
758 getTeachers() { 772 getTeachers() {
759 http() 773 http()
760 .get("/getTeachersList", { 774 .get("/getTeachersList", {
761 headers: { 775 headers: {
762 Authorization: "Bearer " + this.token 776 Authorization: "Bearer " + this.token
763 } 777 }
764 }) 778 })
765 .then(response => { 779 .then(response => {
766 this.teachers = response.data.data; 780 this.teachers = response.data.data;
767 this.showLoader = false; 781 this.showLoader = false;
768 }) 782 })
769 .catch(error => { 783 .catch(error => {
770 // console.log("err====>", err); 784 // console.log("err====>", err);
771 this.showLoader = false; 785 this.showLoader = false;
772 }); 786 });
773 }, 787 },
774 getClasses() { 788 getClasses() {
775 http() 789 http()
776 .get("/getClassesList", { 790 .get("/getClassesList", {
777 headers: { 791 headers: {
778 Authorization: "Bearer " + this.token 792 Authorization: "Bearer " + this.token
779 } 793 }
780 }) 794 })
781 .then(response => { 795 .then(response => {
782 this.classes = response.data.data; 796 this.classes = response.data.data;
783 this.showLoader = false; 797 this.showLoader = false;
784 }) 798 })
785 .catch(error => { 799 .catch(error => {
786 this.showLoader = false; 800 this.showLoader = false;
787 }); 801 });
788 }, 802 },
789 getNoticeData() { 803 getNoticeData() {
790 this.showLoader = true; 804 this.showLoader = true;
791 http() 805 http()
792 .get("/getEventsList", { 806 .get("/getEventsList", {
793 headers: { 807 headers: {
794 Authorization: "Bearer " + this.token 808 Authorization: "Bearer " + this.token
795 } 809 }
796 }) 810 })
797 .then(response => { 811 .then(response => {
798 this.noticeData = response.data.data; 812 this.noticeData = response.data.data;
799 this.showLoader = false; 813 this.showLoader = false;
800 }) 814 })
801 .catch(error => { 815 .catch(error => {
802 this.showLoader = false; 816 this.showLoader = false;
803 }); 817 });
804 }, 818 },
805 getUserData() { 819 getUserData() {
806 // this.showLoader = true; 820 // this.showLoader = true;
807 if (this.$store.state.role === "PARENT") { 821 if (this.$store.state.role === "PARENT") {
808 http() 822 http()
809 .get("/getParticularUserDetail", { 823 .get("/getParticularUserDetail", {
810 headers: { 824 headers: {
811 Authorization: "Bearer " + this.token 825 Authorization: "Bearer " + this.token
812 }, 826 },
813 params: { 827 params: {
814 studentId: localStorage.getItem("parentStudentId") 828 studentId: localStorage.getItem("parentStudentId")
815 } 829 }
816 }) 830 })
817 .then(response => { 831 .then(response => {
818 this.userData = response.data.data; 832 this.userData = response.data.data;
819 this.showLoader = false; 833 this.showLoader = false;
820 console.log("sdsdfsdfsd - ", response); 834 console.log("sdsdfsdfsd - ", response);
821 }) 835 })
822 .catch(error => { 836 .catch(error => {
823 this.showLoader = false; 837 this.showLoader = false;
824 }); 838 });
825 } else { 839 } else {
826 http() 840 http()
827 .get("/getParticularUserDetail", { 841 .get("/getParticularUserDetail", {
828 headers: { 842 headers: {
829 Authorization: "Bearer " + this.token 843 Authorization: "Bearer " + this.token
830 } 844 }
831 }) 845 })
832 .then(response => { 846 .then(response => {
833 this.userData = response.data.data; 847 this.userData = response.data.data;
834 this.showLoader = false; 848 this.showLoader = false;
835 }) 849 })
836 .catch(error => { 850 .catch(error => {
837 this.showLoader = false; 851 this.showLoader = false;
838 }); 852 });
839 } 853 }
840 }, 854 },
841 855
842 getFeesAndCollectionsData() { 856 getFeesAndCollectionsData() {
843 http() 857 http()
844 .get("/getTotalFeesAndCollections", { 858 .get("/getTotalFeesAndCollections", {
845 headers: { 859 headers: {
846 Authorization: "Bearer " + this.token 860 Authorization: "Bearer " + this.token
847 } 861 }
848 }) 862 })
849 .then(response => { 863 .then(response => {
850 this.feeData = response.data.data; 864 this.feeData = response.data.data;
851 // this.collectionData = response.data.data; 865 // this.collectionData = response.data.data;
852 this.series[0].data[0] = this.feeData.totalFees; 866 this.series[0].data[0] = this.feeData.totalFees;
853 this.series[0].data[1] = this.feeData.totalCollection; 867 this.series[0].data[1] = this.feeData.totalCollection;
854 // console.log("this.series====", this.series); 868 // console.log("this.series====", this.series);
855 869
856 this.showLoader = false; 870 this.showLoader = false;
857 }) 871 })
858 .catch(error => { 872 .catch(error => {
859 this.showLoader = false; 873 this.showLoader = false;
860 }); 874 });
861 }, 875 },
862 getExpensesData() { 876 getExpensesData() {
863 http() 877 http()
864 .get("/getTotalExpenses", { 878 .get("/getTotalExpenses", {
865 headers: { 879 headers: {
866 Authorization: "Bearer " + this.token 880 Authorization: "Bearer " + this.token
867 } 881 }
868 }) 882 })
869 .then(response => { 883 .then(response => {
870 this.expenseData = response.data.data; 884 this.expenseData = response.data.data;
871 // var array = response.data.data.sum; 885 // var array = response.data.data.sum;
872 this.series[0].data[2] = this.expenseData.sum; 886 this.series[0].data[2] = this.expenseData.sum;
873 // this.series = [ 887 // this.series = [
874 // { 888 // {
875 // name: "Total", 889 // name: "Total",
876 // data: array 890 // data: array
877 // } 891 // }
878 // ]; 892 // ];
879 // console.log("this.series====", this.series); 893 // console.log("this.series====", this.series);
880 this.showLoader = false; 894 this.showLoader = false;
881 }) 895 })
882 .catch(error => { 896 .catch(error => {
883 this.showLoader = false; 897 this.showLoader = false;
884 }); 898 });
885 }, 899 },
886 getparentStudents() { 900 getparentStudents() {
887 this.showLoader = true; 901 this.showLoader = true;
888 http() 902 http()
889 .get("/parentStudentsList") 903 .get("/parentStudentsList")
890 .then(response => { 904 .then(response => {
891 // console.log("resssssss", response.data.data.students[0].classId); 905 // console.log("resssssss", response.data.data.students[0].classId);
892 this.studentsData = response.data.data; 906 this.studentsData = response.data.data;
893 // localStorage.setItem( 907 // localStorage.setItem(
894 // "parentStudentId", 908 // "parentStudentId",
895 // this.studentsData.students[0]._id 909 // this.studentsData.students[0]._id
896 // ); 910 // );
897 // localStorage.setItem( 911 // localStorage.setItem(
898 // "parentClassId", 912 // "parentClassId",
899 // this.studentsData.students[0].classId 913 // this.studentsData.students[0].classId
900 // ); 914 // );
901 915
902 if (localStorage.getItem("parentStudentId") == null) { 916 if (localStorage.getItem("parentStudentId") == null) {
903 var parentStudentsId = response.data.data.students[0].classId; 917 var parentStudentsId = response.data.data.students[0].classId;
904 var classId = response.data.data.students[0]._id; 918 var classId = response.data.data.students[0]._id;
905 } 919 }
906 if (localStorage.getItem("parentStudentId")) { 920 if (localStorage.getItem("parentStudentId")) {
907 var parentStudentsId = localStorage.getItem("parentStudentId"); 921 var parentStudentsId = localStorage.getItem("parentStudentId");
908 var classId = localStorage.getItem("parentClassId"); 922 var classId = localStorage.getItem("parentClassId");
909 } 923 }
910 this.getCourses(parentStudentsId, classId); 924 this.getCourses(parentStudentsId, classId);
911 this.getAnnoucementes(classId); 925 this.getAnnoucementes(classId);
912 this.showLoader = false; 926 this.showLoader = false;
913 }) 927 })
914 .catch(err => { 928 .catch(err => {
915 console.log("err====>", err); 929 console.log("err====>", err);
916 this.showLoader = false; 930 this.showLoader = false;
917 }); 931 });
918 }, 932 },
919 async getCourses(parentStudentsId, classId) { 933 async getCourses(parentStudentsId, classId) {
920 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 934 /* getStudentCourses - to get courseData - defined in GetApis.js*/
921 await this.getStudentCourses({ 935 await this.getStudentCourses({
922 classId: classId, 936 classId: classId,
923 studentId: parentStudentsId 937 studentId: parentStudentsId
924 }); 938 });
925 }, 939 },
926 getAnnoucementes(classId) { 940 getAnnoucementes(classId) {
927 this.showLoader = true; 941 this.showLoader = true;
928 http() 942 http()
929 .get("/getAnnoucementesList", { 943 .get("/getAnnoucementesList", {
930 params: { 944 params: {
931 classId: classId 945 classId: classId
932 } 946 }
933 }) 947 })
934 .then(response => { 948 .then(response => {
935 this.annoucementData = response.data.data; 949 this.annoucementData = response.data.data;
936 this.showLoader = false; 950 this.showLoader = false;
937 }) 951 })
938 .catch(err => { 952 .catch(err => {
939 console.log("err====>", err); 953 console.log("err====>", err);
940 this.showLoader = false; 954 this.showLoader = false;
941 }); 955 });
942 }, 956 },
943 getMeetingEventes() { 957 getMeetingEventes() {
944 if (this.role == "TEACHER") { 958 if (this.role == "TEACHER") {
945 this.showLoader = true; 959 this.showLoader = true;
946 http() 960 http()
947 .get("/getMeetingEventesList", { 961 .get("/getMeetingEventesList", {
948 headers: { 962 headers: {
949 Authorization: "Bearer " + this.token 963 Authorization: "Bearer " + this.token
950 } 964 }
951 }) 965 })
952 .then(response => { 966 .then(response => {
953 var activityList = response.data.data; 967 var activityList = response.data.data;
954 this.activityList = activityList; 968 this.activityList = activityList;
955 this.showLoader = false; 969 this.showLoader = false;
970
971 /* set activityEvents array to highlight event dates in calender */
972 for (var i = 0; i < this.activityList.length; i++) {
973 let obj = {};
974 obj.date = moment(this.activityList[i].dateOfEvent).format(
975 "YYYY/MM/DD"
976 );
977 obj.title = this.activityList[i].title;
978 obj._id = this.activityList[i]._id;
979 this.activityEvents.push(obj);
980 }
956 }) 981 })
957 .catch(error => { 982 .catch(error => {
958 this.showLoader = false; 983 this.showLoader = false;
959 }); 984 });
960 } 985 }
961 } 986 }
962 }, 987 },
963 988
964 mounted() { 989 mounted() {
965 // = this.$store.state.schoolToken; 990 // = this.$store.state.schoolToken;
966 // console.log("this.$store.state.role", this.token); 991 // console.log("this.$store.state.role", this.token);
967 if (this.$store.state.role === "ADMIN") { 992 if (this.$store.state.role === "ADMIN") {
968 this.token = this.$store.state.token; 993 this.token = this.$store.state.token;
969 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 994 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
970 this.token = this.$store.state.schoolToken; 995 this.token = this.$store.state.schoolToken;
971 } else if (this.$store.state.role === "TEACHER") { 996 } else if (this.$store.state.role === "TEACHER") {
972 this.token = this.$store.state.token; 997 this.token = this.$store.state.token;
973 } else if (this.$store.state.role === "ACCOUNTANT") { 998 } else if (this.$store.state.role === "ACCOUNTANT") {
974 this.token = this.$store.state.token; 999 this.token = this.$store.state.token;
975 } else if (this.$store.state.role === "LIBRARIAN") { 1000 } else if (this.$store.state.role === "LIBRARIAN") {
976 this.token = this.$store.state.token; 1001 this.token = this.$store.state.token;
977 } else if (this.$store.state.role === "PARENT") { 1002 } else if (this.$store.state.role === "PARENT") {
978 this.token = this.$store.state.token; 1003 this.token = this.$store.state.token;
979 } 1004 }
980 this.role = this.$store.state.role; 1005 this.role = this.$store.state.role;
981 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); 1006 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
982 // this.getData(); 1007 // this.getData();
983 this.getStudents(); 1008 this.getStudents();
984 this.getTeachers(); 1009 this.getTeachers();
985 this.getParents(); 1010 this.getParents();
986 this.getClasses(); 1011 this.getClasses();
987 this.getNoticeData(); 1012 this.getNoticeData();
988 this.getUserData(); 1013 this.getUserData();
989 this.getFeesAndCollectionsData(); 1014 this.getFeesAndCollectionsData();
990 this.getExpensesData(); 1015 this.getExpensesData();
991 this.getparentStudents(); 1016 this.getparentStudents();
992 this.getMeetingEventes(); 1017 this.getMeetingEventes();
993 // this.getUsersList(); 1018 // this.getUsersList();
994 }, 1019 },
995 1020
996 async created() { 1021 async created() {
997 /* get Latest events list */ 1022 /* get Latest events list for student login*/
998 if (this.$store.state.role != "TEACHER") { 1023 if (this.$store.state.role != "TEACHER") {
999 let response = await this.studentMeetingEvents({ 1024 let response = await this.studentMeetingEvents({
1000 studentId: localStorage.getItem("parentStudentId") 1025 studentId: localStorage.getItem("parentStudentId")
1001 }); 1026 });
1002 this.activityList = response.data.data; 1027 this.activityList = response.data.data;
1003 1028
1004 /* set activityEvents array to highlight event dates in calender */ 1029 /* set activityEvents array to highlight event dates in calender */
1005 for (var i = 0; i < this.activityList.length; i++) { 1030 for (var i = 0; i < this.activityList.length; i++) {
1006 let obj = {}; 1031 let obj = {};
1007 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( 1032 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1008 "YYYY/MM/DD" 1033 "YYYY/MM/DD"
1009 ); 1034 );
1010 obj.title = this.activityList[i].meetingEvent.title; 1035 obj.title = this.activityList[i].meetingEvent.title;
1011 obj._id = this.activityList[i].meetingEvent._id; 1036 obj._id = this.activityList[i].meetingEvent._id;
1012 this.activityEvents.push(obj); 1037 this.activityEvents.push(obj);
1013 } 1038 }
1014 } 1039 }
1040 /* get Latest events list for teacher login*/
1041 // if(this.$store.state.role == "TEACHER"){
1042
1043 // }
1015 } 1044 }
1016 }; 1045 };
1017 </script> 1046 </script>
1018 1047
1019 <style scoped> 1048 <style scoped>
1020 @import "fullcalendar/dist/fullcalendar.css"; 1049 @import "fullcalendar/dist/fullcalendar.css";
1021 </style> 1050 </style>