viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 4dfee996479254283147aa209ddf06bb725a591a

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

added school events for parent

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