viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 88b7fd92ad55faf2a2338fc958314d6bd83412c6

Authored by Amber Dev
1 parent 874e8a70ee
Exists in master and in 1 other branch ui-design

added male female data

Showing 1 changed file with 114 additions and 38 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @88b7fd9
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" persistent lazy> 72 <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
73 <v-card flat class="card-style elevation-0" height="600" dark> 73 <v-card flat class="card-style elevation-0" height="600" dark>
74 <v-layout> 74 <v-layout>
75 <v-flex xs12> 75 <v-flex xs12>
76 <v-icon 76 <v-icon
77 size="24" 77 size="24"
78 class="right" 78 class="right"
79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false" 79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
80 >cancel</v-icon> 80 >cancel</v-icon>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0"> 83 <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
84 <v-tabs-slider color="yellow"></v-tabs-slider> 84 <v-tabs-slider color="yellow"></v-tabs-slider>
85 <v-tab v-for="(tab,index) in tabs" :key="index"> 85 <v-tab v-for="(tab,index) in tabs" :key="index">
86 <div class="subheading py-1">{{ tab.name }}</div> 86 <div class="subheading py-1">{{ tab.name }}</div>
87 </v-tab> 87 </v-tab>
88 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab> 88 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
89 <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>--> 89 <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->
90 90
91 <!-- SCHOOL EVENTS--> 91 <!-- SCHOOL EVENTS-->
92 <v-tab-item> 92 <v-tab-item>
93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0"> 93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
94 <v-container fluid> 94 <v-container fluid>
95 <v-divider class="white"></v-divider> 95 <v-divider class="white"></v-divider>
96 <v-card 96 <v-card
97 v-for="(particularEvent,index) in dialogSchoolEvents" 97 v-for="(particularEvent,index) in dialogSchoolEvents"
98 :key="index" 98 :key="index"
99 class="mt-3 pa-2 card-style white--text elevation-0" 99 class="mt-3 pa-2 card-style white--text elevation-0"
100 > 100 >
101 <div> 101 <div>
102 <div class="headline">{{particularEvent.title}}</div> 102 <div class="headline">{{particularEvent.title}}</div>
103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
106 <div v-if="particularEvent.link"> 106 <div v-if="particularEvent.link">
107 Link : 107 Link :
108 <a :href="particularEvent.link">{{particularEvent.link}}</a> 108 <a :href="particularEvent.link">{{particularEvent.link}}</a>
109 </div> 109 </div>
110 <div 110 <div
111 v-if="particularEvent.description" 111 v-if="particularEvent.description"
112 >Description : {{particularEvent.description}}</div> 112 >Description : {{particularEvent.description}}</div>
113 </div> 113 </div>
114 <v-divider class="white mt-3"></v-divider> 114 <v-divider class="white mt-3"></v-divider>
115 </v-card> 115 </v-card>
116 </v-container> 116 </v-container>
117 </v-card> 117 </v-card>
118 </v-tab-item> 118 </v-tab-item>
119 119
120 <!-- MEETING EVENTS --> 120 <!-- MEETING EVENTS -->
121 <v-tab-item> 121 <v-tab-item>
122 <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark> 122 <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
123 <v-container fluid> 123 <v-container fluid>
124 <v-divider class="white"></v-divider> 124 <v-divider class="white"></v-divider>
125 <v-card 125 <v-card
126 v-for="(particularEvent,index) in dialogMeetingEvents" 126 v-for="(particularEvent,index) in dialogMeetingEvents"
127 :key="index" 127 :key="index"
128 class="mt-3 pa-2 card-style white--text elevation-0" 128 class="mt-3 pa-2 card-style white--text elevation-0"
129 > 129 >
130 <div> 130 <div>
131 <div class="headline">{{particularEvent.title}}</div> 131 <div class="headline">{{particularEvent.title}}</div>
132 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 132 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
133 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 133 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
134 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 134 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
135 <div v-if="particularEvent.link"> 135 <div v-if="particularEvent.link">
136 Link : 136 Link :
137 <a :href="particularEvent.link">{{particularEvent.link}}</a> 137 <a :href="particularEvent.link">{{particularEvent.link}}</a>
138 </div> 138 </div>
139 <div 139 <div
140 v-if="particularEvent.description" 140 v-if="particularEvent.description"
141 >Description : {{particularEvent.description}}</div> 141 >Description : {{particularEvent.description}}</div>
142 </div> 142 </div>
143 <v-divider class="white mt-3"></v-divider> 143 <v-divider class="white mt-3"></v-divider>
144 </v-card> 144 </v-card>
145 </v-container> 145 </v-container>
146 </v-card> 146 </v-card>
147 </v-tab-item> 147 </v-tab-item>
148 </v-tabs> 148 </v-tabs>
149 149
150 <!-- IF NO MULTIPLE EVENTS ON SAME DATE --> 150 <!-- IF NO MULTIPLE EVENTS ON SAME DATE -->
151 <v-card flat class="card-style pa-2 elevation-0" dark v-else> 151 <v-card flat class="card-style pa-2 elevation-0" dark v-else>
152 <v-container fluid> 152 <v-container fluid>
153 <v-divider class="white"></v-divider> 153 <v-divider class="white"></v-divider>
154 <v-card 154 <v-card
155 v-for="(particularEvent,index) in displayEventsList" 155 v-for="(particularEvent,index) in displayEventsList"
156 :key="index" 156 :key="index"
157 class="mt-3 pa-2 card-style white--text elevation-0" 157 class="mt-3 pa-2 card-style white--text elevation-0"
158 > 158 >
159 <div> 159 <div>
160 <div class="headline">{{particularEvent.title}}</div> 160 <div class="headline">{{particularEvent.title}}</div>
161 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 161 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
162 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 162 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
163 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 163 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
164 <div v-if="particularEvent.link"> 164 <div v-if="particularEvent.link">
165 Link : 165 Link :
166 <a :href="particularEvent.link">{{particularEvent.link}}</a> 166 <a :href="particularEvent.link">{{particularEvent.link}}</a>
167 </div> 167 </div>
168 <div 168 <div
169 v-if="particularEvent.description" 169 v-if="particularEvent.description"
170 >Description : {{particularEvent.description}}</div> 170 >Description : {{particularEvent.description}}</div>
171 </div> 171 </div>
172 <v-divider class="white mt-3"></v-divider> 172 <v-divider class="white mt-3"></v-divider>
173 </v-card> 173 </v-card>
174 </v-container> 174 </v-container>
175 </v-card> 175 </v-card>
176 </v-card> 176 </v-card>
177 </v-dialog> 177 </v-dialog>
178 178
179 <v-layout wrap row> 179 <v-layout wrap row>
180 <v-flex xs12 sm12 md8> 180 <v-flex xs12 sm12 md8>
181 <v-container fluid grid-list-xl> 181 <v-container fluid grid-list-xl>
182 <!-- ***** Total Students ***** --> 182 <!-- ***** Total Students ***** -->
183 <v-layout wrap class v-if="$store.state.role != 'PARENT' "> 183 <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
184 <v-flex xs12 sm12 md3> 184 <v-flex xs12 sm12 md3>
185 <router-link :to="{ name:'Students' }"> 185 <router-link :to="{ name:'Students' }">
186 <v-card class="card pink-bgcolor"> 186 <v-card class="card pink-bgcolor">
187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
190 </v-card> 190 </v-card>
191 </router-link> 191 </router-link>
192 </v-flex> 192 </v-flex>
193 <!-- ***** Total Teachers***** --> 193 <!-- ***** Total Teachers***** -->
194 <v-flex xs12 sm12 md3> 194 <v-flex xs12 sm12 md3>
195 <router-link :to="{ name:'Teachers' }"> 195 <router-link :to="{ name:'Teachers' }">
196 <v-card flat class="card elevation-2 firozi-bgcolor"> 196 <v-card flat class="card elevation-2 firozi-bgcolor">
197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
199 199
200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
201 </v-card> 201 </v-card>
202 </router-link> 202 </router-link>
203 </v-flex> 203 </v-flex>
204 <!-- ***** Total Parents ***** --> 204 <!-- ***** Total Parents ***** -->
205 <v-flex xs12 sm12 md3> 205 <v-flex xs12 sm12 md3>
206 <router-link :to="{ name:'Parents' }"> 206 <router-link :to="{ name:'Parents' }">
207 <v-card flat class="card yellow darken-3"> 207 <v-card flat class="card yellow darken-3">
208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
211 </v-card> 211 </v-card>
212 </router-link> 212 </router-link>
213 </v-flex> 213 </v-flex>
214 <!-- ***** Total Class***** --> 214 <!-- ***** Total Class***** -->
215 <v-flex xs12 sm12 md3> 215 <v-flex xs12 sm12 md3>
216 <router-link :to="{ name:'Class' }"> 216 <router-link :to="{ name:'Class' }">
217 <v-card flat class="card darkBlue-bgcolor"> 217 <v-card flat class="card darkBlue-bgcolor">
218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
221 </v-card> 221 </v-card>
222 </router-link> 222 </router-link>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 225
226 <p 226 <p
227 v-if="studentsData.length === 0 && role == 'PARENT'" 227 v-if="studentsData.length === 0 && role == 'PARENT'"
228 class="text-center title grey lighten-4 error--text" 228 class="text-center title grey lighten-4 error--text"
229 >You have no student registered with school</p> 229 >You have no student registered with school</p>
230 <!-- ACCOUNT --> 230 <!-- ACCOUNT -->
231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'"> 231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
232 <v-flex xs12> 232 <v-flex xs12>
233 <v-card class="card mt-2 account-Card"> 233 <v-card class="card mt-2 account-Card">
234 <h4> 234 <h4>
235 <b>Account</b> 235 <b>Account</b>
236 </h4> 236 </h4>
237 <v-layout wrap> 237 <v-layout wrap>
238 <v-flex xs12 sm12 md3> 238 <v-flex xs12 sm12 md3>
239 <v-list two-line> 239 <v-list two-line>
240 <template> 240 <template>
241 <v-list-tile> 241 <v-list-tile>
242 <v-list-tile-avatar> 242 <v-list-tile-avatar>
243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
244 </v-list-tile-avatar> 244 </v-list-tile-avatar>
245 <v-list-tile-content> 245 <v-list-tile-content>
246 <v-list-tile-title class="mt-2"> 246 <v-list-tile-title class="mt-2">
247 <p class="subheading font-color">Fees</p> 247 <p class="subheading font-color">Fees</p>
248 </v-list-tile-title> 248 </v-list-tile-title>
249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> 249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
250 </v-list-tile-content> 250 </v-list-tile-content>
251 </v-list-tile> 251 </v-list-tile>
252 <v-list-tile> 252 <v-list-tile>
253 <v-list-tile-avatar> 253 <v-list-tile-avatar>
254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
255 </v-list-tile-avatar> 255 </v-list-tile-avatar>
256 <v-list-tile-content> 256 <v-list-tile-content>
257 <v-list-tile-title class="mt-2"> 257 <v-list-tile-title class="mt-2">
258 <p class="subheading font-color">Collection</p> 258 <p class="subheading font-color">Collection</p>
259 </v-list-tile-title> 259 </v-list-tile-title>
260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> 260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
261 </v-list-tile-content> 261 </v-list-tile-content>
262 </v-list-tile> 262 </v-list-tile>
263 <v-list-tile> 263 <v-list-tile>
264 <v-list-tile-avatar> 264 <v-list-tile-avatar>
265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
266 </v-list-tile-avatar> 266 </v-list-tile-avatar>
267 <v-list-tile-content> 267 <v-list-tile-content>
268 <v-list-tile-title class="mt-2"> 268 <v-list-tile-title class="mt-2">
269 <p class="subheading font-color">Expences</p> 269 <p class="subheading font-color">Expences</p>
270 </v-list-tile-title> 270 </v-list-tile-title>
271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> 271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
272 </v-list-tile-content> 272 </v-list-tile-content>
273 </v-list-tile> 273 </v-list-tile>
274 </template> 274 </template>
275 </v-list> 275 </v-list>
276 </v-flex> 276 </v-flex>
277 <v-flex xs12 sm12 md9 lg9> 277 <v-flex xs12 sm12 md9 lg9>
278 <div id="chart"> 278 <div id="chart">
279 <div v-if="showChart"> 279 <div v-if="showChart">
280 <apexchart 280 <apexchart
281 type="bar" 281 type="bar"
282 height="250" 282 height="250"
283 style="max-width: 800px !important" 283 style="max-width: 800px !important"
284 :options="chartOptions" 284 :options="chartOptions"
285 :series="series" 285 :series="series"
286 ></apexchart> 286 ></apexchart>
287 </div> 287 </div>
288 </div> 288 </div>
289 </v-flex> 289 </v-flex>
290 </v-layout> 290 </v-layout>
291 </v-card> 291 </v-card>
292 </v-flex> 292 </v-flex>
293 </v-layout> 293 </v-layout>
294 294
295 <!-- FOR ADMIN,TEACHER ROLE --> 295 <!-- FOR ADMIN,TEACHER ROLE -->
296 <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'"> 296 <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">
297 <!-- NOTICE --> 297 <!-- NOTICE -->
298 <v-flex xs12 sm6> 298 <v-flex xs12 sm6>
299 <v-card class="card"> 299 <v-card class="card">
300 <v-container> 300 <v-container>
301 <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title> 301 <v-card-title class="justify-center title font-weight-bold">Notice</v-card-title>
302 <v-layout column>
303 <v-flex
304 v-for="(item,index) in noticeData"
305 :key="index"
306 style="cursor: pointer;"
307 >
308 <v-layout column>
309 <!--Date-->
310 <v-flex class="pb-2 pl-2 pr-2">
311 <v-chip
312 :color="colorsArray[index%colorsArray.length]"
313 text-color="white"
314 class="ma-0"
315 >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
316 </v-flex>
317 <!-- title -->
318 <v-flex class="pa-2">
319 <div class="body-1 font-weight-bold px-2">{{item.title}}</div>
320 </v-flex>
302 321
303 <v-data-table 322 <!-- divider -->
323 <v-flex class="pa-2">
324 <v-divider></v-divider>
325 </v-flex>
326 </v-layout>
327 </v-flex>
328 </v-layout>
329
330 <!-- <v-data-table
304 :items="noticeData" 331 :items="noticeData"
305 class="elevation-0" 332 class="elevation-0"
306 flat 333 flat
307 hide-actions 334 hide-actions
308 hide-headers 335 hide-headers
309 style="border-spacing: 0 !important;" 336 style="border-spacing: 0 !important;"
310 > 337 >
311 <template 338 <template
312 slot="items" 339 slot="items"
313 slot-scope="props" 340 slot-scope="props"
314 v-if="props.index < 5" 341 v-if="props.index < 5"
315 style="border-spacing: 0 !important;" 342 style="border-spacing: 0 !important;"
316 > 343 >
317 <tr class="td-notice"> 344 <tr class="td-notice">
318 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 345 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
319 <td> 346 <td>
320 <span class="grey--text caption">{{ date(props.item.created) }}</span> 347 <span class="grey--text caption">{{ date(props.item.created) }}</span>
321 <br /> 348 <br />
322 <span class="body-2">{{ props.item.title}}</span> 349 <span class="body-2">{{ props.item.title}}</span>
323 </td> 350 </td>-->
324 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> --> 351 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
325 352 <!--
326 <td class="text-xs-center"> 353 <td class="text-xs-center">
327 <span> 354 <span>
328 <v-tooltip top> 355 <v-tooltip top>
329 <img 356 <img
330 slot="activator" 357 slot="activator"
331 style="cursor:pointer; width:25px; height:25px; " 358 style="cursor:pointer; width:25px; height:25px; "
332 @click="profile" 359 @click="profile"
333 src="/static/icon/view.png" 360 src="/static/icon/view.png"
334 /> 361 />
335 <span>View</span> 362 <span>View</span>
336 </v-tooltip> 363 </v-tooltip>
337 </span> 364 </span>
338 </td> 365 </td>
339 </tr> 366 </tr>
340 </template> 367 </template>
341 </v-data-table> 368 </v-data-table>-->
342 </v-container> 369 </v-container>
343 </v-card> 370 </v-card>
344 </v-flex> 371 </v-flex>
345 372
346 <!-- SCHOOL EVENTS --> 373 <!-- SCHOOL EVENTS -->
347
348 <v-flex xs12 sm6> 374 <v-flex xs12 sm6>
349 <v-card class="card"> 375 <v-layout column>
350 <v-container> 376 <!-- school events -->
351 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title> 377 <v-flex>
352 <div 378 <v-card class="card">
353 v-for="(schoolEvent,index) in schoolEvents" 379 <v-container>
354 :key="schoolEvent.title" 380 <v-card-title class="justify-center title font-weight-bold">School Events</v-card-title>
355 class="mt-2" 381 <div
356 style="cursor: pointer;" 382 v-for="(schoolEvent,index) in schoolEvents"
357 @click="seeEventDetails(schoolEvent,'schoolEvent')" 383 :key="schoolEvent.title"
358 > 384 class="mt-2"
359 <!-- color dot--> 385 style="cursor: pointer;"
360 <span 386 @click="seeEventDetails(schoolEvent,'schoolEvent')"
361 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 387 >
362 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 388 <!-- color dot-->
363 ></span> 389 <span
364 <div style="display: inline-block;" class="ml-2"> 390 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
365 <div> 391 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
366 <!-- date of event --> 392 ></span>
367 <div 393 <div style="display: inline-block;" class="ml-2">
368 class="grey--text lighten-1 caption" 394 <div>
369 v-if="schoolEvent.dateOfEvent" 395 <!-- date of event -->
370 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 396 <div
371 <!-- event title--> 397 class="grey--text lighten-1 caption"
372 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div> 398 v-if="schoolEvent.dateOfEvent"
399 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
400 <!-- event title-->
401 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
402 </div>
403 </div>
373 </div> 404 </div>
405 <div v-if="schoolEvents.length == 0">
406 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
407 </div>
408 </v-container>
409 </v-card>
410 </v-flex>
411 <!-- apex charts - Male Female data -->
412 <v-flex>
413 <v-card>
414 <div id="chart">
415 <apexcharts
416 type="donut"
417 :options="maleFemaleData"
418 :series="maleFemaleSeries"
419 />
374 </div> 420 </div>
375 </div> 421 </v-card>
376 <div v-if="schoolEvents.length == 0"> 422 </v-flex>
377 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 423 </v-layout>
378 </div>
379 </v-container>
380 </v-card>
381 </v-flex> 424 </v-flex>
382 </v-layout> 425 </v-layout>
383 426
384 <!-- FOR TEACHER ROLE --> 427 <!-- FOR TEACHER ROLE -->
385 <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'"> 428 <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
386 <v-layout> 429 <v-layout>
387 <v-flex xs6 sm6 md6> 430 <v-flex xs6 sm6 md6>
388 <h4 class="pa-3"> 431 <h4 class="pa-3">
389 <b>Notice</b> 432 <b>Notice</b>
390 </h4> 433 </h4>
391 <v-data-table 434 <v-data-table
392 :items="noticeData" 435 :items="noticeData"
393 class="elevation-0" 436 class="elevation-0"
394 flat 437 flat
395 hide-actions 438 hide-actions
396 hide-headers 439 hide-headers
397 style="border-spacing: 0 !important;" 440 style="border-spacing: 0 !important;"
398 > 441 >
399 <template 442 <template
400 slot="items" 443 slot="items"
401 slot-scope="props" 444 slot-scope="props"
402 v-if="props.index < 5" 445 v-if="props.index < 5"
403 style="border-spacing: 0 !important;" 446 style="border-spacing: 0 !important;"
404 > 447 >
405 <tr class="td-notice"> 448 <tr class="td-notice">
406 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 449 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
407 <td> 450 <td>
408 <span class="grey--text caption">{{ date(props.item.created) }}</span> 451 <span class="grey--text caption">{{ date(props.item.created) }}</span>
409 <br /> 452 <br />
410 <span class="body-2">{{ props.item.title}}</span> 453 <span class="body-2">{{ props.item.title}}</span>
411 </td> 454 </td>
412 <td class="grey--text mt-2">{{ props.item.description}}</td> 455 <td class="grey--text mt-2">{{ props.item.description}}</td>
413 456
414 <td class="text-xs-center"> 457 <td class="text-xs-center">
415 <span> 458 <span>
416 <v-tooltip top> 459 <v-tooltip top>
417 <img 460 <img
418 slot="activator" 461 slot="activator"
419 style="cursor:pointer; width:25px; height:25px; " 462 style="cursor:pointer; width:25px; height:25px; "
420 @click="profile" 463 @click="profile"
421 src="/static/icon/view.png" 464 src="/static/icon/view.png"
422 /> 465 />
423 <span>View</span> 466 <span>View</span>
424 </v-tooltip> 467 </v-tooltip>
425 </span> 468 </span>
426 </td> 469 </td>
427 </tr> 470 </tr>
428 </template> 471 </template>
429 </v-data-table> 472 </v-data-table>
430 </v-flex> 473 </v-flex>
431 474
432 <v-flex xs6 sm6 md6> 475 <v-flex xs6 sm6 md6>
433 <v-card-text> 476 <v-card-text>
434 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 477 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
435 <div 478 <div
436 v-for="(activity,index) in activityList" 479 v-for="(activity,index) in activityList"
437 :key="index" 480 :key="index"
438 class="mt-2" 481 class="mt-2"
439 style="cursor: pointer;" 482 style="cursor: pointer;"
440 @click="seeEventDetails(activity)" 483 @click="seeEventDetails(activity)"
441 > 484 >
442 <span 485 <span
443 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 486 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
444 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 487 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
445 ></span> 488 ></span>
446 <div style="display: inline-block;" class="ml-2"> 489 <div style="display: inline-block;" class="ml-2">
447 <div> 490 <div>
448 <div 491 <div
449 class="grey--text lighten-1 caption" 492 class="grey--text lighten-1 caption"
450 v-if="activity.dateOfEvent" 493 v-if="activity.dateOfEvent"
451 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 494 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
452 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 495 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
453 </div> 496 </div>
454 </div> 497 </div>
455 </div> 498 </div>
456 <div v-if="activityList.length == 0"> 499 <div v-if="activityList.length == 0">
457 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 500 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
458 </div> 501 </div>
459 </v-card-text> 502 </v-card-text>
460 </v-flex> 503 </v-flex>
461 </v-layout> 504 </v-layout>
462 </v-card>--> 505 </v-card>-->
463 506
464 <!-- ROLE == PARENT, MY COURSES --> 507 <!-- ROLE == PARENT, MY COURSES -->
465 <v-layout v-if="role == 'PARENT'"> 508 <v-layout v-if="role == 'PARENT'">
466 <v-flex xs12> 509 <v-flex xs12>
467 <v-card class="elevation-0 account-Card"> 510 <v-card class="elevation-0 account-Card">
468 <v-container> 511 <v-container>
469 <v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title> 512 <v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>
470 <v-layout wrap> 513 <v-layout wrap>
471 <v-flex xs12 sm12> 514 <v-flex xs12 sm12>
472 <v-list two-line> 515 <v-list two-line>
473 <template> 516 <template>
474 <v-list-tile v-for="(course,i) in courseData" :key="i"> 517 <v-list-tile v-for="(course,i) in courseData" :key="i">
475 <v-list-tile-avatar> 518 <v-list-tile-avatar>
476 <!-- <v-icon 519 <!-- <v-icon
477 class="account-circle darkBlue-color" 520 class="account-circle darkBlue-color"
478 style="cursor: pointer;" 521 style="cursor: pointer;"
479 @click="routeToCourseDetails(course._id)" 522 @click="routeToCourseDetails(course._id)"
480 >panorama_fish_eye</v-icon>--> 523 >panorama_fish_eye</v-icon>-->
481 <span> 524 <span>
482 <v-tooltip top> 525 <v-tooltip top>
483 <img 526 <img
484 slot="activator" 527 slot="activator"
485 style="cursor:pointer; width:25px; height:25px; " 528 style="cursor:pointer; width:25px; height:25px; "
486 src="/static/icon/view.png" 529 src="/static/icon/view.png"
487 @click="routeToCourseDetails(course._id)" 530 @click="routeToCourseDetails(course._id)"
488 /> 531 />
489 <span>View</span> 532 <span>View</span>
490 </v-tooltip> 533 </v-tooltip>
491 </span> 534 </span>
492 </v-list-tile-avatar> 535 </v-list-tile-avatar>
493 <v-list-tile-content> 536 <v-list-tile-content>
494 <v-list-tile-title 537 <v-list-tile-title
495 style="cursor: pointer;" 538 style="cursor: pointer;"
496 @click="routeToCourseDetails(course._id)" 539 @click="routeToCourseDetails(course._id)"
497 >{{ course.courseName }}</v-list-tile-title> 540 >{{ course.courseName }}</v-list-tile-title>
498 </v-list-tile-content> 541 </v-list-tile-content>
499 </v-list-tile> 542 </v-list-tile>
500 </template> 543 </template>
501 </v-list> 544 </v-list>
502 </v-flex> 545 </v-flex>
503 </v-layout> 546 </v-layout>
504 </v-container> 547 </v-container>
505 </v-card> 548 </v-card>
506 </v-flex> 549 </v-flex>
507 </v-layout> 550 </v-layout>
508 551
509 <v-layout row wrap v-if="role == 'PARENT'"> 552 <v-layout row wrap v-if="role == 'PARENT'">
510 <!-- LATEST ANNOUNCEMENTSS , IF ROLE == PARENT --> 553 <!-- LATEST ANNOUNCEMENTSS , IF ROLE == PARENT -->
511 <v-flex xs6> 554 <v-flex xs6>
512 <v-card class="card"> 555 <v-card class="card">
513 <v-container> 556 <v-container>
514 <v-card-title 557 <v-card-title
515 class="justify-center subheading font-weight-bold" 558 class="justify-center subheading font-weight-bold"
516 >Latest Announcements</v-card-title> 559 >Latest Announcements</v-card-title>
517 560
518 <v-data-table 561 <v-data-table
519 :items="annoucementData" 562 :items="annoucementData"
520 class="elevation-0" 563 class="elevation-0"
521 flat 564 flat
522 hide-actions 565 hide-actions
523 hide-headers 566 hide-headers
524 style="border-spacing: 0 !important;" 567 style="border-spacing: 0 !important;"
525 > 568 >
526 <template 569 <template
527 slot="items" 570 slot="items"
528 slot-scope="props" 571 slot-scope="props"
529 v-if="props.index < 5" 572 v-if="props.index < 5"
530 style="border-spacing: 0 !important;" 573 style="border-spacing: 0 !important;"
531 > 574 >
532 <tr class="td-notice"> 575 <tr class="td-notice">
533 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 576 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
534 <td> 577 <td>
535 <span class="grey--text caption">{{ date(props.item.created) }}</span> 578 <span class="grey--text caption">{{ date(props.item.created) }}</span>
536 <br /> 579 <br />
537 <span class="body-2">{{ props.item.discussionType}}</span> 580 <span class="body-2">{{ props.item.discussionType}}</span>
538 </td> 581 </td>
539 <td class="text-xs-center"> 582 <td class="text-xs-center">
540 <span> 583 <span>
541 <v-tooltip top> 584 <v-tooltip top>
542 <img 585 <img
543 slot="activator" 586 slot="activator"
544 style="cursor:pointer; width:25px; height:25px; " 587 style="cursor:pointer; width:25px; height:25px; "
545 src="/static/icon/view.png" 588 src="/static/icon/view.png"
546 /> 589 />
547 <span>View</span> 590 <span>View</span>
548 </v-tooltip> 591 </v-tooltip>
549 </span> 592 </span>
550 </td> 593 </td>
551 </tr> 594 </tr>
552 </template> 595 </template>
553 </v-data-table> 596 </v-data-table>
554 </v-container> 597 </v-container>
555 </v-card> 598 </v-card>
556 </v-flex> 599 </v-flex>
557 <!-- IF ROLE == PARENT, SCHOOL EVENTS --> 600 <!-- IF ROLE == PARENT, SCHOOL EVENTS -->
558 <v-flex xs6> 601 <v-flex xs6>
559 <v-card class="card"> 602 <v-card class="card">
560 <v-container> 603 <v-container>
561 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title> 604 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
562 <div 605 <div
563 v-for="(schoolEvent,index) in schoolEvents" 606 v-for="(schoolEvent,index) in schoolEvents"
564 :key="schoolEvent.title" 607 :key="schoolEvent.title"
565 class="mt-2" 608 class="mt-2"
566 style="cursor: pointer;" 609 style="cursor: pointer;"
567 @click="seeEventDetails(schoolEvent,'schoolEvent')" 610 @click="seeEventDetails(schoolEvent,'schoolEvent')"
568 > 611 >
569 <!-- color dot--> 612 <!-- color dot-->
570 <span 613 <span
571 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 614 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
572 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 615 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
573 ></span> 616 ></span>
574 <div style="display: inline-block;" class="ml-2"> 617 <div style="display: inline-block;" class="ml-2">
575 <div> 618 <div>
576 <!-- date of event --> 619 <!-- date of event -->
577 <div 620 <div
578 class="grey--text lighten-1 caption" 621 class="grey--text lighten-1 caption"
579 v-if="schoolEvent.dateOfEvent" 622 v-if="schoolEvent.dateOfEvent"
580 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 623 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
581 <!-- event title--> 624 <!-- event title-->
582 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div> 625 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
583 </div> 626 </div>
584 </div> 627 </div>
585 </div> 628 </div>
586 <div v-if="schoolEvents.length == 0"> 629 <div v-if="schoolEvents.length == 0">
587 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 630 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
588 </div> 631 </div>
589 </v-container> 632 </v-container>
590 </v-card> 633 </v-card>
591 </v-flex> 634 </v-flex>
592 <!-- ONLINE USER , IF ROLE == PARENT --> 635 <!-- ONLINE USER , IF ROLE == PARENT -->
593 <!-- <v-flex xs6> 636 <!-- <v-flex xs6>
594 <v-card class="card"> 637 <v-card class="card">
595 <v-container> 638 <v-container>
596 <v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title> 639 <v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>
597 640
598 <v-data-table 641 <v-data-table
599 :items="onlineUser" 642 :items="onlineUser"
600 class="elevation-0" 643 class="elevation-0"
601 flat 644 flat
602 hide-actions 645 hide-actions
603 hide-headers 646 hide-headers
604 style="border-spacing: 0 !important;" 647 style="border-spacing: 0 !important;"
605 > 648 >
606 <template 649 <template
607 slot="items" 650 slot="items"
608 slot-scope="props" 651 slot-scope="props"
609 v-if="props.index < 5" 652 v-if="props.index < 5"
610 style="border-spacing: 0 !important;" 653 style="border-spacing: 0 !important;"
611 > 654 >
612 <tr class="td-notice"> 655 <tr class="td-notice">
613 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 656 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
614 <td> 657 <td>
615 <span class="body-2">{{ props.item.user }}</span> 658 <span class="body-2">{{ props.item.user }}</span>
616 </td> 659 </td>
617 <td class="text-xs-center"> 660 <td class="text-xs-center">
618 <span> 661 <span>
619 <v-tooltip top> 662 <v-tooltip top>
620 <img 663 <img
621 slot="activator" 664 slot="activator"
622 style="cursor:pointer; width:25px; height:25px; " 665 style="cursor:pointer; width:25px; height:25px; "
623 src="/static/icon/view.png" 666 src="/static/icon/view.png"
624 /> 667 />
625 <span>View</span> 668 <span>View</span>
626 </v-tooltip> 669 </v-tooltip>
627 </span> 670 </span>
628 </td> 671 </td>
629 </tr> 672 </tr>
630 </template> 673 </template>
631 </v-data-table> 674 </v-data-table>
632 </v-container> 675 </v-container>
633 </v-card> 676 </v-card>
634 </v-flex>--> 677 </v-flex>-->
635 </v-layout> 678 </v-layout>
636 </v-container> 679 </v-container>
637 </v-flex> 680 </v-flex>
638 <v-spacer></v-spacer> 681 <v-spacer></v-spacer>
639 <!-- SIDE BAR --> 682 <!-- SIDE BAR -->
640 <v-flex xs12 sm12 md4> 683 <v-flex xs12 sm12 md4>
641 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 684 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
642 <v-card-text class="px-2"> 685 <v-card-text class="px-2">
643 <h4 class="text-xs-center py-3"> 686 <h4 class="text-xs-center py-3">
644 <b>Profile</b> 687 <b>Profile</b>
645 </h4> 688 </h4>
646 <v-flex xs12 class="py-3"> 689 <v-flex xs12 class="py-3">
647 <v-layout wrap> 690 <v-layout wrap>
648 <v-flex xs12 sm12 md4> 691 <v-flex xs12 sm12 md4>
649 <img 692 <img
650 src="/static/icon/user.png" 693 src="/static/icon/user.png"
651 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" 694 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"
652 width="80" 695 width="80"
653 /> 696 />
654 <img 697 <img
655 :src="userData.profilePicUrl" 698 :src="userData.profilePicUrl"
656 onerror="this.src='/static/icon/user.png';" 699 onerror="this.src='/static/icon/user.png';"
657 v-if="userData.profilePicUrl" 700 v-if="userData.profilePicUrl"
658 width="80" 701 width="80"
659 /> 702 />
660 <img 703 <img
661 :src="userData.schoolLogoUrl" 704 :src="userData.schoolLogoUrl"
662 onerror="this.src='/static/icon/user.png';" 705 onerror="this.src='/static/icon/user.png';"
663 v-if="userData.schoolLogoUrl" 706 v-if="userData.schoolLogoUrl"
664 width="80" 707 width="80"
665 /> 708 />
666 </v-flex> 709 </v-flex>
667 <v-flex xs12 sm12 md6> 710 <v-flex xs12 sm12 md6>
668 <p class="mb-0 body-1"> 711 <p class="mb-0 body-1">
669 <i>{{ userData.name }}</i> 712 <i>{{ userData.name }}</i>
670 </p> 713 </p>
671 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 714 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
672 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 715 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
673 <address class="caption grey--text mb-3">{{ userData.address }}</address> 716 <address class="caption grey--text mb-3">{{ userData.address }}</address>
674 </v-flex> 717 </v-flex>
675 </v-layout> 718 </v-layout>
676 </v-flex> 719 </v-flex>
677 <hr /> 720 <hr />
678 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 721 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
679 722
680 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 723 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
681 724
682 <!-- MEETING EVENTS --> 725 <!-- MEETING EVENTS -->
683 <!-- IF ROLE IS ADMIN --> 726 <!-- IF ROLE IS ADMIN -->
684 <v-card class="my-3 elevation-0"> 727 <v-card class="my-3 elevation-0">
685 <v-card-text v-if="$store.state.role === 'ADMIN' "> 728 <v-card-text v-if="$store.state.role === 'ADMIN' ">
686 <!-- MEETING EVENTS --> 729 <!-- MEETING EVENTS -->
687 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 730 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
688 <div 731 <div
689 v-for="(activity,index) in activityList" 732 v-for="(activity,index) in activityList"
690 :key="index" 733 :key="index"
691 class="mt-2" 734 class="mt-2"
692 style="cursor: pointer;" 735 style="cursor: pointer;"
693 @click="seeEventDetails(activity)" 736 @click="seeEventDetails(activity)"
694 > 737 >
695 <span 738 <span
696 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 739 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
697 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 740 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
698 ></span> 741 ></span>
699 <div style="display: inline-block;" class="ml-2"> 742 <div style="display: inline-block;" class="ml-2">
700 <div> 743 <div>
701 <div 744 <div
702 class="grey--text lighten-1 caption" 745 class="grey--text lighten-1 caption"
703 v-if="activity.dateOfEvent" 746 v-if="activity.dateOfEvent"
704 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 747 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
705 <div class="body-1" v-if="activity.title">{{activity.title}}</div> 748 <div class="body-1" v-if="activity.title">{{activity.title}}</div>
706 </div> 749 </div>
707 </div> 750 </div>
708 </div> 751 </div>
709 <div v-if="activityList.length == 0"> 752 <div v-if="activityList.length == 0">
710 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 753 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
711 </div> 754 </div>
712 </v-card-text> 755 </v-card-text>
713 756
714 <!-- ROLE IS NOT ADMIN --> 757 <!-- ROLE IS NOT ADMIN -->
715 <v-card-text v-if="$store.state.role != 'ADMIN'"> 758 <v-card-text v-if="$store.state.role != 'ADMIN'">
716 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 759 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
717 <div 760 <div
718 v-for="(activity,index) in activityList" 761 v-for="(activity,index) in activityList"
719 :key="index" 762 :key="index"
720 class="mt-2" 763 class="mt-2"
721 style="cursor: pointer;" 764 style="cursor: pointer;"
722 @click="seeEventDetails(activity)" 765 @click="seeEventDetails(activity)"
723 > 766 >
724 <span 767 <span
725 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 768 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
726 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 769 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
727 ></span> 770 ></span>
728 <div style="display: inline-block;" class="ml-2"> 771 <div style="display: inline-block;" class="ml-2">
729 <!-- MEETING EVENTS FOR PARENT --> 772 <!-- MEETING EVENTS FOR PARENT -->
730 <div v-if="$store.state.role === 'PARENT' "> 773 <div v-if="$store.state.role === 'PARENT' ">
731 <div 774 <div
732 class="grey--text lighten-1 caption" 775 class="grey--text lighten-1 caption"
733 v-if="activity.meetingEvent" 776 v-if="activity.meetingEvent"
734 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 777 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
735 <div 778 <div
736 class="body-2" 779 class="body-2"
737 v-if="activity.meetingEvent" 780 v-if="activity.meetingEvent"
738 >{{activity.meetingEvent.title}}</div> 781 >{{activity.meetingEvent.title}}</div>
739 </div> 782 </div>
740 783
741 <!-- MEETING EVENTS FOR TEACHER --> 784 <!-- MEETING EVENTS FOR TEACHER -->
742 <div v-if="role === 'TEACHER'"> 785 <div v-if="role === 'TEACHER'">
743 <div 786 <div
744 class="grey--text lighten-1 caption" 787 class="grey--text lighten-1 caption"
745 v-if="activity.dateOfEvent" 788 v-if="activity.dateOfEvent"
746 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 789 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
747 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 790 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
748 </div> 791 </div>
749 </div> 792 </div>
750 <div v-if="activityList.length == 0"> 793 <div v-if="activityList.length == 0">
751 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 794 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
752 </div> 795 </div>
753 </div> 796 </div>
754 </v-card-text> 797 </v-card-text>
755 </v-card> 798 </v-card>
756 </v-card-text> 799 </v-card-text>
757 </v-card> 800 </v-card>
758 </v-flex> 801 </v-flex>
759 </v-layout> 802 </v-layout>
760 803
761 <v-dialog v-model="dialog" max-width="500" persistent> 804 <v-dialog v-model="dialog" max-width="500" persistent>
762 <v-card color="grey lighten-4" flat> 805 <v-card color="grey lighten-4" flat>
763 <v-toolbar dark color="fixcolors"> 806 <v-toolbar dark color="fixcolors">
764 <v-spacer></v-spacer> 807 <v-spacer></v-spacer>
765 <v-btn icon @click="dialog= false"> 808 <v-btn icon @click="dialog= false">
766 <v-icon>close</v-icon> 809 <v-icon>close</v-icon>
767 </v-btn> 810 </v-btn>
768 </v-toolbar> 811 </v-toolbar>
769 <v-flex class="py-4"> 812 <v-flex class="py-4">
770 <v-list-tile> 813 <v-list-tile>
771 <v-list-tile-action> 814 <v-list-tile-action>
772 <v-icon>edit</v-icon> 815 <v-icon>edit</v-icon>
773 </v-list-tile-action> 816 </v-list-tile-action>
774 <v-list-tile-content> 817 <v-list-tile-content>
775 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 818 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
776 </v-list-tile-content> 819 </v-list-tile-content>
777 </v-list-tile> 820 </v-list-tile>
778 <v-list-tile> 821 <v-list-tile>
779 <v-list-tile-action> 822 <v-list-tile-action>
780 <v-icon>access_time</v-icon> 823 <v-icon>access_time</v-icon>
781 </v-list-tile-action> 824 </v-list-tile-action>
782 <v-list-tile-content> 825 <v-list-tile-content>
783 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 826 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
784 </v-list-tile-content> 827 </v-list-tile-content>
785 </v-list-tile> 828 </v-list-tile>
786 </v-flex> 829 </v-flex>
787 </v-card> 830 </v-card>
788 </v-dialog> 831 </v-dialog>
789 </v-app> 832 </v-app>
790 </template> 833 </template>
791 834
792 <script> 835 <script>
793 import http from "@/Services/http.js"; 836 import http from "@/Services/http.js";
794 import moment from "moment"; 837 import moment from "moment";
795 import AllApiCalls from "@/Services/AllApiCalls.js"; 838 import AllApiCalls from "@/Services/AllApiCalls.js";
839 import VueApexCharts from "vue-apexcharts";
796 // import { FunctionalCalendar } from "vue-functional-calendar"; 840 // import { FunctionalCalendar } from "vue-functional-calendar";
797 841
798 export default { 842 export default {
799 components: { 843 components: {
800 // FunctionalCalendar 844 apexcharts: VueApexCharts,
801 }, 845 },
802 mixins: [AllApiCalls], 846 mixins: [AllApiCalls],
803 data() { 847 data() {
804 return { 848 return {
849 today: new Date(),
805 // data: { 850 // data: {
806 // clieckedToday: false 851 // clieckedToday: false
807 // }, 852 // },
808 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 853 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
809 // calendarData: {}, 854 // calendarData: {},
810 // calendar: {}, 855 // calendar: {},
811 856
812 // DIALOG BOX EVENT DETAILS 857 // DIALOG BOX EVENT DETAILS
813 tabs: [ 858 tabs: [
814 { name: "School Events", icon: "mdi-account" }, 859 { name: "School Events", icon: "mdi-account" },
815 { name: "Meeting Events", icon: "mdi-account-outline" }, 860 { name: "Meeting Events", icon: "mdi-account-outline" },
816 ], 861 ],
817 viewEventDetails: false, 862 viewEventDetails: false,
818 active: 0, 863 active: 0,
819 particularEvent: [], 864 particularEvent: [],
820 displayEventsList: [], 865 displayEventsList: [],
821 dialogSchoolEvents: [], 866 dialogSchoolEvents: [],
822 dialogMeetingEvents: [], 867 dialogMeetingEvents: [],
823 868
869 // apexCharts
870 maleFemaleSeries: [20, 30],
871 maleFemaleData: {
872 labels: ["Male", "Female"],
873 legend: {
874 formatter: function (val, opts) {
875 return val + " - " + opts.w.globals.series[opts.seriesIndex];
876 },
877 position: 'bottom',
878 },
879 dataLabels: {
880 enabled: true,
881 formatter: function (val,opts) {
882 return opts.w.globals.series[opts.seriesIndex];
883 },
884 },
885 },
886
824 // CALENDER 887 // CALENDER
825 moment: moment, 888 moment: moment,
826 activityEvents: [], 889 activityEvents: [],
827 onlineUser: [ 890 onlineUser: [
828 { 891 {
829 user: "Student Demo", 892 user: "Student Demo",
830 }, 893 },
831 { 894 {
832 user: "Teacher Demo", 895 user: "Teacher Demo",
833 }, 896 },
834 { 897 {
835 user: "Priyansh Gupta", 898 user: "Priyansh Gupta",
836 }, 899 },
837 { 900 {
838 user: "Gaurav Aggarwal", 901 user: "Gaurav Aggarwal",
839 }, 902 },
840 { 903 {
841 user: "Approve Arorra", 904 user: "Approve Arorra",
842 }, 905 },
843 ], 906 ],
844 showLoader: false, 907 showLoader: false,
845 calendarData: {}, 908 calendarData: {},
846 dialog: false, 909 dialog: false,
847 dialogNotice: false, 910 dialogNotice: false,
848 HolidaysList: [], 911 HolidaysList: [],
849 EventsList: [], 912 EventsList: [],
850 events: [], 913 events: [],
851 config: { 914 config: {
852 eventClick: (event) => { 915 eventClick: (event) => {
853 this.selected = event; 916 this.selected = event;
854 this.dialog = true; 917 this.dialog = true;
855 }, 918 },
856 }, 919 },
857 selected: {}, 920 selected: {},
858 barGraph: [], 921 barGraph: [],
859 // notice: {}, 922 // notice: {},
860 userData: {}, 923 userData: {},
861 dated: new Date(2018, 0, 9), 924 dated: new Date(2018, 0, 9),
862 userList: [], 925 userList: [],
863 sectionList: [], 926 sectionList: [],
864 students: "", 927 students: "",
865 parents: "", 928 parents: "",
866 teachers: "", 929 teachers: "",
867 classes: "", 930 classes: "",
868 noticeData: [], 931 noticeData: [],
869 expenseData: [], 932 expenseData: [],
870 feeData: [], 933 feeData: [],
871 collectionData: [], 934 collectionData: [],
872 courseData: [], 935 courseData: [],
873 studentsData: [], 936 studentsData: [],
874 annoucementData: [], 937 annoucementData: [],
875 role: "", 938 role: "",
876 attrs: [ 939 attrs: [
877 { 940 {
878 key: "today", 941 key: "today",
879 highlight: true, 942 highlight: true,
880 dates: new Date(), 943 dates: new Date(),
881 }, 944 },
882 ], 945 ],
883 drawer: true, 946 drawer: true,
884 items: [ 947 items: [
885 { title: "Home", icon: "dashboard" }, 948 { title: "Home", icon: "dashboard" },
886 { title: "About", icon: "question_answer" }, 949 { title: "About", icon: "question_answer" },
887 ], 950 ],
888 right: null, 951 right: null,
889 952
890 series: [ 953 series: [
891 { 954 {
892 name: "Total", 955 name: "Total",
893 data: [], 956 data: [],
894 }, 957 },
895 ], 958 ],
896 showChart: false, 959 showChart: false,
897 chartOptions: { 960 chartOptions: {
898 chart: { 961 chart: {
899 type: "bar", 962 type: "bar",
900 height: 150, 963 height: 150,
901 stacked: true, 964 stacked: true,
902 // animations: { 965 // animations: {
903 // enabled: true, 966 // enabled: true,
904 // easing: "easeinout", 967 // easing: "easeinout",
905 // speed: 1200, 968 // speed: 1200,
906 // animateGradually: { 969 // animateGradually: {
907 // enabled: true, 970 // enabled: true,
908 // delay: 450 971 // delay: 450
909 // }, 972 // },
910 // dynamicAnimation: { 973 // dynamicAnimation: {
911 // enabled: true, 974 // enabled: true,
912 // speed: 450 975 // speed: 450
913 // } 976 // }
914 // } 977 // }
915 }, 978 },
916 plotOptions: { 979 plotOptions: {
917 bar: { 980 bar: {
918 horizontal: false, 981 horizontal: false,
919 columnWidth: "25%", 982 columnWidth: "25%",
920 // endingShape: "rounded", 983 // endingShape: "rounded",
921 distributed: true, 984 distributed: true,
922 }, 985 },
923 }, 986 },
924 responsive: [ 987 responsive: [
925 { 988 {
926 breakpoint: 480, 989 breakpoint: 480,
927 options: { 990 options: {
928 legend: { 991 legend: {
929 position: "bottom", 992 position: "bottom",
930 offsetX: -10, 993 offsetX: -10,
931 offsetY: 0, 994 offsetY: 0,
932 }, 995 },
933 }, 996 },
934 }, 997 },
935 ], 998 ],
936 legend: { 999 legend: {
937 show: false, 1000 show: false,
938 }, 1001 },
939 colors: ["#7852cc", "#f9a825", "#ff8a89"], 1002 colors: ["#7852cc", "#f9a825", "#ff8a89"],
940 dataLabels: { 1003 dataLabels: {
941 enabled: false, 1004 enabled: false,
942 }, 1005 },
943 stroke: { 1006 stroke: {
944 show: true, 1007 show: true,
945 width: 2, 1008 width: 2,
946 colors: ["transparent"], 1009 colors: ["transparent"],
947 }, 1010 },
948 xaxis: { 1011 xaxis: {
949 categories: ["Fee", "Collections", "Expences"], 1012 categories: ["Fee", "Collections", "Expences"],
950 }, 1013 },
951 yaxis: { 1014 yaxis: {
952 title: { 1015 title: {
953 text: "", 1016 text: "",
954 }, 1017 },
955 }, 1018 },
956 fill: { 1019 fill: {
957 opacity: 1, 1020 opacity: 1,
958 }, 1021 },
959 tooltip: { 1022 tooltip: {
960 y: { 1023 y: {
961 formatter: function (val, opts) { 1024 formatter: function (val, opts) {
962 return "" + val + " "; 1025 return "" + val + " ";
963 }, 1026 },
964 }, 1027 },
965 }, 1028 },
966 }, 1029 },
967 1030
968 // LATEST ACTIVITY 1031 // LATEST ACTIVITY
969 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 1032 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
970 activityList: [], 1033 activityList: [],
971 }; 1034 };
972 }, 1035 },
973 1036
974 methods: { 1037 methods: {
975 test(e) { 1038 test(e) {
976 // console.log(" test - ", e); 1039 // console.log(" test - ", e);
977 }, 1040 },
978 1041
979 /*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */ 1042 /*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */
980 async handleDayChanged(e) { 1043 async handleDayChanged(e) {
981 // console.log("event calender - ", e); 1044 // console.log("event calender - ", e);
982 /*the list of events that will be used in dialog box to display events */ 1045 /*the list of events that will be used in dialog box to display events */
983 1046
984 this.dialogMeetingEvents = []; 1047 this.dialogMeetingEvents = [];
985 this.dialogSchoolEvents = []; 1048 this.dialogSchoolEvents = [];
986 1049
987 for (var i = 0; i < e.events.length; i++) { 1050 for (var i = 0; i < e.events.length; i++) {
988 if (e.events[i].eventType == "meetingEvent") { 1051 if (e.events[i].eventType == "meetingEvent") {
989 let meetingEventResponse = await this.getParticularMeetingEvent({ 1052 let meetingEventResponse = await this.getParticularMeetingEvent({
990 meetingEventId: e.events[i]._id, 1053 meetingEventId: e.events[i]._id,
991 }); 1054 });
992 this.dialogMeetingEvents.push(meetingEventResponse.data.data); 1055 this.dialogMeetingEvents.push(meetingEventResponse.data.data);
993 } 1056 }
994 if (e.events[i].eventType == "schoolEvent") { 1057 if (e.events[i].eventType == "schoolEvent") {
995 let schoolEventResponse = await this.getParticularSchoolEvent({ 1058 let schoolEventResponse = await this.getParticularSchoolEvent({
996 schoolEventId: e.events[i]._id, 1059 schoolEventId: e.events[i]._id,
997 }); 1060 });
998 this.dialogSchoolEvents.push(schoolEventResponse.data.data); 1061 this.dialogSchoolEvents.push(schoolEventResponse.data.data);
999 } 1062 }
1000 } 1063 }
1001 /* Opens the dialog box */ 1064 /* Opens the dialog box */
1002 this.viewEventDetails = true; 1065 this.viewEventDetails = true;
1003 }, 1066 },
1004 1067
1005 /* see meeting events, school events individually (when calender is not clicked) */ 1068 /* see meeting events, school events individually (when calender is not clicked) */
1006 async seeEventDetails(activity, message) { 1069 async seeEventDetails(activity, message) {
1007 // if (this.$store.state.role === "TEACHER") { 1070 // if (this.$store.state.role === "TEACHER") {
1008 // let response = await this.getParticularMeetingEvent({ 1071 // let response = await this.getParticularMeetingEvent({
1009 // meetingEventId: activity._id, 1072 // meetingEventId: activity._id,
1010 // }); 1073 // });
1011 // this.displayEventsList = []; 1074 // this.displayEventsList = [];
1012 // this.displayEventsList.push(response.data.data); 1075 // this.displayEventsList.push(response.data.data);
1013 // this.viewEventDetails = true; 1076 // this.viewEventDetails = true;
1014 // } 1077 // }
1015 if (this.$store.state.role === "PARENT") { 1078 if (this.$store.state.role === "PARENT") {
1016 if (message == "schoolEvent") { 1079 if (message == "schoolEvent") {
1017 let response = await this.getParticularSchoolEvent({ 1080 let response = await this.getParticularSchoolEvent({
1018 schoolEventId: activity._id, 1081 schoolEventId: activity._id,
1019 }); 1082 });
1020 this.displayEventsList = []; 1083 this.displayEventsList = [];
1021 this.displayEventsList.push(response.data.data); 1084 this.displayEventsList.push(response.data.data);
1022 } else { 1085 } else {
1023 let response = await this.getParticularMeetingEvent({ 1086 let response = await this.getParticularMeetingEvent({
1024 meetingEventId: activity.meetingEvent._id, 1087 meetingEventId: activity.meetingEvent._id,
1025 }); 1088 });
1026 this.displayEventsList = []; 1089 this.displayEventsList = [];
1027 this.displayEventsList.push(response.data.data); 1090 this.displayEventsList.push(response.data.data);
1028 } 1091 }
1029 this.viewEventDetails = true; 1092 this.viewEventDetails = true;
1030 } 1093 }
1031 if ( 1094 if (
1032 this.$store.state.role === "ADMIN" || 1095 this.$store.state.role === "ADMIN" ||
1033 this.$store.state.role === "TEACHER" 1096 this.$store.state.role === "TEACHER"
1034 ) { 1097 ) {
1035 if (message == "schoolEvent") { 1098 if (message == "schoolEvent") {
1036 let response = await this.getParticularSchoolEvent({ 1099 let response = await this.getParticularSchoolEvent({
1037 schoolEventId: activity._id, 1100 schoolEventId: activity._id,
1038 }); 1101 });
1039 this.displayEventsList = []; 1102 this.displayEventsList = [];
1040 this.displayEventsList.push(response.data.data); 1103 this.displayEventsList.push(response.data.data);
1041 } else { 1104 } else {
1042 let response = await this.getParticularMeetingEvent({ 1105 let response = await this.getParticularMeetingEvent({
1043 meetingEventId: activity._id, 1106 meetingEventId: activity._id,
1044 }); 1107 });
1045 this.displayEventsList = []; 1108 this.displayEventsList = [];
1046 this.displayEventsList.push(response.data.data); 1109 this.displayEventsList.push(response.data.data);
1047 } 1110 }
1048 this.viewEventDetails = true; 1111 this.viewEventDetails = true;
1049 } 1112 }
1050 }, 1113 },
1051 async routeToCourseDetails(courseId) { 1114 async routeToCourseDetails(courseId) {
1052 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 1115 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
1053 let response = await this.getParticularCourseDetail(courseId); 1116 let response = await this.getParticularCourseDetail(courseId);
1054 1117
1055 /* If the response is null then dont route */ 1118 /* If the response is null then dont route */
1056 if (response.data.data.length > 0) { 1119 if (response.data.data.length > 0) {
1057 this.$router.push({ 1120 this.$router.push({
1058 name: "Course Details", 1121 name: "Course Details",
1059 query: { courseId: courseId }, 1122 query: { courseId: courseId },
1060 }); 1123 });
1061 } else { 1124 } else {
1062 this.seeSnackbar("No Data Available", "warning"); 1125 this.seeSnackbar("No Data Available", "warning");
1063 } 1126 }
1064 }, 1127 },
1065 1128
1066 closeNotice() { 1129 closeNotice() {
1067 this.dialogNotice = false; 1130 this.dialogNotice = false;
1068 }, 1131 },
1069 profile() { 1132 profile() {
1070 // this.editedIndex = this.desserts.indexOf(item); 1133 // this.editedIndex = this.desserts.indexOf(item);
1071 // this.notice = Object.assign({}, item); 1134 // this.notice = Object.assign({}, item);
1072 // this.dialogNotice = true; 1135 // this.dialogNotice = true;
1073 this.$router.push("/noticeBoard"); 1136 this.$router.push("/noticeBoard");
1074 }, 1137 },
1075 date: function (date) { 1138 date: function (date) {
1076 return moment(date).format("MMMM DD, YYYY HH:mm"); 1139 return moment(date).format("MMMM DD, YYYY HH:mm");
1077 }, 1140 },
1078 activityDate(date) { 1141 activityDate(date) {
1079 return moment(date).format("MMMM DD, YYYY"); 1142 return moment(date).format("MMMM DD, YYYY");
1080 }, 1143 },
1081 refreshEvents() { 1144 refreshEvents() {
1082 this.$refs.calendar.$emit("refetch-events"); 1145 this.$refs.calendar.$emit("refetch-events");
1083 }, 1146 },
1084 removeEvent() { 1147 removeEvent() {
1085 this.$refs.calendar.$emit("remove-event", this.selected); 1148 this.$refs.calendar.$emit("remove-event", this.selected);
1086 this.selected = {}; 1149 this.selected = {};
1087 }, 1150 },
1088 eventSelected(event) { 1151 eventSelected(event) {
1089 this.selected = event; 1152 this.selected = event;
1090 }, 1153 },
1091 // eventDropStart: function(event) { 1154 // eventDropStart: function(event) {
1092 // event.editable = false; 1155 // event.editable = false;
1093 // }, 1156 // },
1094 eventCreated(...test) { 1157 eventCreated(...test) {
1095 // console.log(test); 1158 // console.log(test);
1096 }, 1159 },
1097 getStudents() { 1160 getStudents() {
1098 http() 1161 http()
1099 .get("/getStudentsList") 1162 .get("/getStudentsList")
1100 .then((response) => { 1163 .then((response) => {
1101 this.students = response.data.data; 1164 this.students = response.data.data;
1102 this.showLoader = false; 1165 this.showLoader = false;
1103 }) 1166 })
1104 .catch((error) => { 1167 .catch((error) => {
1105 // console.log("err====>", err); 1168 // console.log("err====>", err);
1106 this.showLoader = false; 1169 this.showLoader = false;
1107 if (error.response.status === 401) { 1170 if (error.response.status === 401) {
1108 this.$router.replace({ path: "/" }); 1171 this.$router.replace({ path: "/" });
1109 this.$store.dispatch("setToken", null); 1172 this.$store.dispatch("setToken", null);
1110 this.$store.dispatch("Id", null); 1173 this.$store.dispatch("Id", null);
1111 } 1174 }
1112 }); 1175 });
1113 }, 1176 },
1114 getParents() { 1177 getParents() {
1115 http() 1178 http()
1116 .get("/getParentsList") 1179 .get("/getParentsList")
1117 .then((response) => { 1180 .then((response) => {
1118 this.parents = response.data.data; 1181 this.parents = response.data.data;
1119 this.showLoader = false; 1182 this.showLoader = false;
1120 }) 1183 })
1121 .catch((error) => { 1184 .catch((error) => {
1122 // console.log("err====>", err); 1185 // console.log("err====>", err);
1123 this.showLoader = false; 1186 this.showLoader = false;
1124 }); 1187 });
1125 }, 1188 },
1126 getTeachers() { 1189 getTeachers() {
1127 http() 1190 http()
1128 .get("/getTeachersList") 1191 .get("/getTeachersList")
1129 .then((response) => { 1192 .then((response) => {
1130 this.teachers = response.data.data; 1193 this.teachers = response.data.data;
1131 this.showLoader = false; 1194 this.showLoader = false;
1132 }) 1195 })
1133 .catch((error) => { 1196 .catch((error) => {
1134 // console.log("err====>", err); 1197 // console.log("err====>", err);
1135 this.showLoader = false; 1198 this.showLoader = false;
1136 }); 1199 });
1137 }, 1200 },
1138 getClasses() { 1201 getClasses() {
1139 http() 1202 http()
1140 .get("/getClassesList") 1203 .get("/getClassesList")
1141 .then((response) => { 1204 .then((response) => {
1142 this.classes = response.data.data; 1205 this.classes = response.data.data;
1143 this.showLoader = false; 1206 this.showLoader = false;
1144 }) 1207 })
1145 .catch((error) => { 1208 .catch((error) => {
1146 this.showLoader = false; 1209 this.showLoader = false;
1147 }); 1210 });
1148 }, 1211 },
1149 getNoticeData() { 1212 getNoticeData() {
1150 this.showLoader = true; 1213 this.showLoader = true;
1151 http() 1214 http()
1152 .get("/getEventsList") 1215 .get("/getEventsList")
1153 .then((response) => { 1216 .then((response) => {
1154 this.noticeData = response.data.data; 1217 this.noticeData = response.data.data;
1155 this.showLoader = false; 1218 this.showLoader = false;
1156 }) 1219 })
1157 .catch((error) => { 1220 .catch((error) => {
1158 this.showLoader = false; 1221 this.showLoader = false;
1159 }); 1222 });
1160 }, 1223 },
1161 getUserData() { 1224 getUserData() {
1162 // this.showLoader = true; 1225 // this.showLoader = true;
1163 if (this.$store.state.role === "PARENT") { 1226 if (this.$store.state.role === "PARENT") {
1164 http() 1227 http()
1165 .get("/getParticularUserDetail", { 1228 .get("/getParticularUserDetail", {
1166 params: { 1229 params: {
1167 studentId: localStorage.getItem("parentStudentId"), 1230 studentId: localStorage.getItem("parentStudentId"),
1168 }, 1231 },
1169 }) 1232 })
1170 .then((response) => { 1233 .then((response) => {
1171 this.userData = response.data.data; 1234 this.userData = response.data.data;
1172 this.showLoader = false; 1235 this.showLoader = false;
1173 }) 1236 })
1174 .catch((error) => { 1237 .catch((error) => {
1175 this.showLoader = false; 1238 this.showLoader = false;
1176 }); 1239 });
1177 } else { 1240 } else {
1178 http() 1241 http()
1179 .get("/getParticularUserDetail") 1242 .get("/getParticularUserDetail")
1180 .then((response) => { 1243 .then((response) => {
1181 this.userData = response.data.data; 1244 this.userData = response.data.data;
1182 this.showLoader = false; 1245 this.showLoader = false;
1183 }) 1246 })
1184 .catch((error) => { 1247 .catch((error) => {
1185 this.showLoader = false; 1248 this.showLoader = false;
1186 }); 1249 });
1187 } 1250 }
1188 }, 1251 },
1189 1252
1190 getFeesAndCollectionsData() { 1253 getFeesAndCollectionsData() {
1191 http() 1254 http()
1192 .get("/getTotalFeesAndCollections") 1255 .get("/getTotalFeesAndCollections")
1193 .then((response) => { 1256 .then((response) => {
1194 this.feeData = response.data.data; 1257 this.feeData = response.data.data;
1195 // this.collectionData = response.data.data; 1258 // this.collectionData = response.data.data;
1196 this.series[0].data[0] = this.feeData.totalFees; 1259 this.series[0].data[0] = this.feeData.totalFees;
1197 this.series[0].data[1] = this.feeData.totalCollection; 1260 this.series[0].data[1] = this.feeData.totalCollection;
1198 this.showLoader = false; 1261 this.showLoader = false;
1199 }) 1262 })
1200 .catch((error) => { 1263 .catch((error) => {
1201 this.showLoader = false; 1264 this.showLoader = false;
1202 }); 1265 });
1203 }, 1266 },
1204 getExpensesData() { 1267 getExpensesData() {
1205 http() 1268 http()
1206 .get("/getTotalExpenses") 1269 .get("/getTotalExpenses")
1207 .then((response) => { 1270 .then((response) => {
1208 this.expenseData = response.data.data; 1271 this.expenseData = response.data.data;
1209 // var array = response.data.data.sum; 1272 // var array = response.data.data.sum;
1210 this.series[0].data[2] = this.expenseData.sum; 1273 this.series[0].data[2] = this.expenseData.sum;
1211 this.showChart = true; 1274 this.showChart = true;
1212 // this.series = [ 1275 // this.series = [
1213 // { 1276 // {
1214 // name: "Total", 1277 // name: "Total",
1215 // data: array 1278 // data: array
1216 // } 1279 // }
1217 // ]; 1280 // ];
1218 this.showLoader = false; 1281 this.showLoader = false;
1219 }) 1282 })
1220 .catch((error) => { 1283 .catch((error) => {
1221 this.showLoader = false; 1284 this.showLoader = false;
1222 }); 1285 });
1223 }, 1286 },
1224 // async getparentStudents() { 1287 // async getparentStudents() {
1225 // this.showLoader = true; 1288 // this.showLoader = true;
1226 // await http() 1289 // await http()
1227 // .get("/parentStudentsList") 1290 // .get("/parentStudentsList")
1228 // .then((response) => { 1291 // .then((response) => {
1229 1292
1230 // /* set values in local storage */ 1293 // /* set values in local storage */
1231 // this.studentsData = response.data.data.students; 1294 // this.studentsData = response.data.data.students;
1232 // this.showLoader = false; 1295 // this.showLoader = false;
1233 // }) 1296 // })
1234 // .catch((err) => { 1297 // .catch((err) => {
1235 // console.log("err====>", err); 1298 // console.log("err====>", err);
1236 // this.showLoader = false; 1299 // this.showLoader = false;
1237 // }); 1300 // });
1238 // await this.getCourses(parentStudentsId, classId); 1301 // await this.getCourses(parentStudentsId, classId);
1239 // await this.getAnnoucementes(classId); 1302 // await this.getAnnoucementes(classId);
1240 // }, 1303 // },
1241 async getCourses(parentStudentsId, classId) { 1304 async getCourses(parentStudentsId, classId) {
1242 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 1305 /* getStudentCourses - to get courseData - defined in GetApis.js*/
1243 await this.getStudentCourses({ 1306 await this.getStudentCourses({
1244 classId: localStorage.getItem("parentClassId"), 1307 classId: localStorage.getItem("parentClassId"),
1245 studentId: localStorage.getItem("parentStudentId"), 1308 studentId: localStorage.getItem("parentStudentId"),
1246 }); 1309 });
1247 }, 1310 },
1248 getAnnoucementes(classId) { 1311 getAnnoucementes(classId) {
1249 this.showLoader = true; 1312 this.showLoader = true;
1250 http() 1313 http()
1251 .get("/getAnnoucementesList", { 1314 .get("/getAnnoucementesList", {
1252 params: { 1315 params: {
1253 classId: localStorage.getItem("parentClassId"), 1316 classId: localStorage.getItem("parentClassId"),
1254 }, 1317 },
1255 }) 1318 })
1256 .then((response) => { 1319 .then((response) => {
1257 this.annoucementData = response.data.data; 1320 this.annoucementData = response.data.data;
1258 this.showLoader = false; 1321 this.showLoader = false;
1259 }) 1322 })
1260 .catch((err) => { 1323 .catch((err) => {
1261 // console.log("err====>", err); 1324 // console.log("err====>", err);
1262 this.showLoader = false; 1325 this.showLoader = false;
1263 this.snackbar = true; 1326 this.snackbar = true;
1264 this.color = "error"; 1327 this.color = "error";
1265 this.text = error.response.data.message; 1328 this.text = error.response.data.message;
1266 }); 1329 });
1267 }, 1330 },
1268 1331
1269 /* MEETING EVENTS, SCHOOL EVENTS */ 1332 /* MEETING EVENTS, SCHOOL EVENTS */
1270 async getMeetingEventes() { 1333 async getMeetingEventes() {
1271 if (this.role == "TEACHER" || this.role === "ADMIN") { 1334 if (this.role == "TEACHER" || this.role === "ADMIN") {
1272 this.showLoader = true; 1335 this.showLoader = true;
1273 await http() 1336 await http()
1274 .get("/getMeetingEventesList") 1337 .get("/getMeetingEventesList")
1275 .then((response) => { 1338 .then((response) => {
1276 var activityList = response.data.data; 1339 var activityList = response.data.data;
1277 this.activityList = activityList; 1340 this.activityList = activityList;
1278 this.showLoader = false; 1341 this.showLoader = false;
1279 1342
1280 /* set meetingEvents in activityEvents array to highlight event dates in calender */ 1343 /* set meetingEvents in activityEvents array to highlight event dates in calender */
1281 for (var i = 0; i < this.activityList.length; i++) { 1344 for (var i = 0; i < this.activityList.length; i++) {
1282 let obj = {}; 1345 let obj = {};
1283 obj.date = moment(this.activityList[i].dateOfEvent).format( 1346 obj.date = moment(this.activityList[i].dateOfEvent).format(
1284 "YYYY/MM/DD" 1347 "YYYY/MM/DD"
1285 ); 1348 );
1286 obj.title = this.activityList[i].title; 1349 obj.title = this.activityList[i].title;
1287 obj._id = this.activityList[i]._id; 1350 obj._id = this.activityList[i]._id;
1288 obj.eventType = "meetingEvent"; 1351 obj.eventType = "meetingEvent";
1289 /* activityEvents is an array used to display events in calender on particular dates */ 1352 /* activityEvents is an array used to display events in calender on particular dates */
1290 this.activityEvents.push(obj); 1353 this.activityEvents.push(obj);
1291 } 1354 }
1292 }) 1355 })
1293 .catch((error) => { 1356 .catch((error) => {
1294 this.showLoader = false; 1357 this.showLoader = false;
1295 }); 1358 });
1296 } 1359 }
1297 /* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */ 1360 /* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */
1298 if ( 1361 if (
1299 this.role === "ADMIN" || 1362 this.role === "ADMIN" ||
1300 this.role === "TEACHER" || 1363 this.role === "TEACHER" ||
1301 this.role === "PARENT" 1364 this.role === "PARENT"
1302 ) { 1365 ) {
1303 /* this will get data in a "schoolEvents" data property */ 1366 /* this will get data in a "schoolEvents" data property */
1304 await this.getSchoolEventsList(); 1367 await this.getSchoolEventsList();
1305 /* set schoolEvents in activityEvents array to highlight event dates in calender */ 1368 /* set schoolEvents in activityEvents array to highlight event dates in calender */
1306 for (var i = 0; i < this.schoolEvents.length; i++) { 1369 for (var i = 0; i < this.schoolEvents.length; i++) {
1307 let obj = {}; 1370 let obj = {};
1308 obj.date = moment(this.schoolEvents[i].dateOfEvent).format( 1371 obj.date = moment(this.schoolEvents[i].dateOfEvent).format(
1309 "YYYY/MM/DD" 1372 "YYYY/MM/DD"
1310 ); 1373 );
1311 obj.title = this.schoolEvents[i].title; 1374 obj.title = this.schoolEvents[i].title;
1312 obj._id = this.schoolEvents[i]._id; 1375 obj._id = this.schoolEvents[i]._id;
1313 obj.eventType = "schoolEvent"; 1376 obj.eventType = "schoolEvent";
1314 /* activityEvents is an array used to display events in calender on particular dates */ 1377 /* activityEvents is an array used to display events in calender on particular dates */
1315 this.activityEvents.push(obj); 1378 this.activityEvents.push(obj);
1316 } 1379 }
1317 } 1380 }
1318 }, 1381 },
1382 async getMaleFemaleData(){
1383 await http()
1384 .get("/getStudentsByGender")
1385 .then((response) => {
1386 console.log("gender response - ", response)
1387 })
1388 .catch((error) => {
1389 this.showLoader = false;
1390 });
1391 }
1319 }, 1392 },
1320 1393
1321 mounted() { 1394 mounted() {
1322 // = this.$store.state.schoolToken; 1395 // = this.$store.state.schoolToken;
1323 // console.log("this.$store.state.role", this.token); 1396 // console.log("this.$store.state.role", this.token);
1324 // this.getUsersList(); 1397 // this.getUsersList();
1325 }, 1398 },
1326 1399
1327 async created() { 1400 async created() {
1328 if (this.$store.state.role === "ADMIN") { 1401 if (this.$store.state.role === "ADMIN") {
1329 // this.token = this.$store.state.token; 1402 // this.token = this.$store.state.token;
1330 await this.getFeesAndCollectionsData(); 1403 await this.getFeesAndCollectionsData();
1331 await this.getExpensesData(); 1404 await this.getExpensesData();
1405 await this.getMaleFemaleData();
1332 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 1406 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1333 // this.token = this.$store.state.schoolToken; 1407 // this.token = this.$store.state.schoolToken;
1334 await this.getFeesAndCollectionsData(); 1408 await this.getFeesAndCollectionsData();
1335 await this.getExpensesData(); 1409 await this.getExpensesData();
1410 await this.getMaleFemaleData();
1336 } else if (this.$store.state.role === "TEACHER") { 1411 } else if (this.$store.state.role === "TEACHER") {
1337 // this.token = this.$store.state.token; 1412 // this.token = this.$store.state.token;
1413 await this.getMaleFemaleData();
1338 } else if (this.$store.state.role === "ACCOUNTANT") { 1414 } else if (this.$store.state.role === "ACCOUNTANT") {
1339 // this.token = this.$store.state.token; 1415 // this.token = this.$store.state.token;
1340 } else if (this.$store.state.role === "LIBRARIAN") { 1416 } else if (this.$store.state.role === "LIBRARIAN") {
1341 // this.token = this.$store.state.token; 1417 // this.token = this.$store.state.token;
1342 } else if (this.$store.state.role === "PARENT") { 1418 } else if (this.$store.state.role === "PARENT") {
1343 // this.token = this.$store.state.token; 1419 // this.token = this.$store.state.token;
1344 // await this.getparentStudents(); 1420 // await this.getparentStudents();
1345 this.studentsData = this.$store.getters.GET_STUDENTS_DATA; 1421 this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
1346 // console.log("students data - ", this.studentsData); 1422 // console.log("students data - ", this.studentsData);
1347 await this.getCourses(); 1423 await this.getCourses();
1348 await this.getAnnoucementes(); 1424 await this.getAnnoucementes();
1349 } 1425 }
1350 this.role = this.$store.state.role; 1426 this.role = this.$store.state.role;
1351 1427
1352 await this.getStudents(); 1428 await this.getStudents();
1353 await this.getTeachers(); 1429 await this.getTeachers();
1354 await this.getParents(); 1430 await this.getParents();
1355 await this.getClasses(); 1431 await this.getClasses();
1356 await this.getNoticeData(); 1432 await this.getNoticeData();
1357 await this.getUserData(); 1433 await this.getUserData();
1358 1434
1359 /* get Latest events list for student login*/ 1435 /* get Latest events list for student login*/
1360 if (this.$store.state.role == "PARENT") { 1436 if (this.$store.state.role == "PARENT") {
1361 let response = await this.studentMeetingEvents({ 1437 let response = await this.studentMeetingEvents({
1362 studentId: localStorage.getItem("parentStudentId"), 1438 studentId: localStorage.getItem("parentStudentId"),
1363 }); 1439 });
1364 this.activityList = response.data.data; 1440 this.activityList = response.data.data;
1365 1441
1366 /* set activityEvents array to highlight event dates in calender */ 1442 /* set activityEvents array to highlight event dates in calender */
1367 for (var i = 0; i < this.activityList.length; i++) { 1443 for (var i = 0; i < this.activityList.length; i++) {
1368 let obj = {}; 1444 let obj = {};
1369 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( 1445 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1370 "YYYY/MM/DD" 1446 "YYYY/MM/DD"
1371 ); 1447 );
1372 obj.title = this.activityList[i].meetingEvent.title; 1448 obj.title = this.activityList[i].meetingEvent.title;
1373 obj._id = this.activityList[i].meetingEvent._id; 1449 obj._id = this.activityList[i].meetingEvent._id;
1374 obj.eventType = "meetingEvent"; 1450 obj.eventType = "meetingEvent";
1375 this.activityEvents.push(obj); 1451 this.activityEvents.push(obj);
1376 } 1452 }
1377 } 1453 }
1378 1454
1379 /* get Latest events list for teacher login*/ 1455 /* get Latest events list for teacher login*/
1380 if ( 1456 if (
1381 this.role == "TEACHER" || 1457 this.role == "TEACHER" ||
1382 this.role == "ADMIN" || 1458 this.role == "ADMIN" ||
1383 this.role == "PARENT" 1459 this.role == "PARENT"
1384 ) { 1460 ) {
1385 await this.getMeetingEventes(); 1461 await this.getMeetingEventes();
1386 } 1462 }
1387 }, 1463 },
1388 }; 1464 };
1389 </script> 1465 </script>
1390 1466
1391 <style scoped> 1467 <style scoped>
1392 @import "fullcalendar/dist/fullcalendar.css"; 1468 @import "fullcalendar/dist/fullcalendar.css";
1393 .wrap-text { 1469 .wrap-text {
1394 -webkit-line-clamp: unset !important; 1470 -webkit-line-clamp: unset !important;
1395 } 1471 }
1396 1472