viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 575d7949244031c6103503f5875dd61b51481cc0

Authored by Shikha Mishra
1 parent d9bc992f03
Exists in master and in 1 other branch ui-design

show only students whose status is true in course attendance screen and fix issu… 

…e of same student detail while viewing
Showing 2 changed files with 4 additions and 4 deletions   Show diff stats
src/pages/Attendence/courseAttendance.vue
Diff comments   View file @575d794
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-toolbar color="transparent" flat> 3 <v-toolbar color="transparent" flat>
4 <v-spacer></v-spacer> 4 <v-spacer></v-spacer>
5 <v-flex xs12 sm4 md2> 5 <v-flex xs12 sm4 md2>
6 <v-select 6 <v-select
7 small 7 small
8 :items="classList" 8 :items="classList"
9 label="Select Class" 9 label="Select Class"
10 v-model="getAttendance.classId" 10 v-model="getAttendance.classId"
11 item-text="classNum" 11 item-text="classNum"
12 item-value="_id" 12 item-value="_id"
13 name="Select Class" 13 name="Select Class"
14 class="px-2" 14 class="px-2"
15 @change="getSection(getAttendance.classId)" 15 @change="getSection(getAttendance.classId)"
16 required 16 required
17 ></v-select> 17 ></v-select>
18 </v-flex> 18 </v-flex>
19 <v-flex xs12 sm4 md2> 19 <v-flex xs12 sm4 md2>
20 <v-select 20 <v-select
21 small 21 small
22 :items="addSection" 22 :items="addSection"
23 label="Select Section" 23 label="Select Section"
24 v-model="getAttendance.sectionId" 24 v-model="getAttendance.sectionId"
25 item-text="name" 25 item-text="name"
26 item-value="_id" 26 item-value="_id"
27 name="Select Section" 27 name="Select Section"
28 @change="getStudentsDetail(getAttendance.sectionId)" 28 @change="getStudentsDetail(getAttendance.sectionId)"
29 class="px-2" 29 class="px-2"
30 required 30 required
31 ></v-select> 31 ></v-select>
32 </v-flex> 32 </v-flex>
33 </v-toolbar> 33 </v-toolbar>
34 <v-data-table 34 <v-data-table
35 :headers="headers" 35 :headers="headers"
36 :items="studentsData" 36 :items="studentsData"
37 :pagination.sync="pagination" 37 :pagination.sync="pagination"
38 :search="search" 38 :search="search"
39 > 39 >
40 <template slot="items" slot-scope="props"> 40 <template slot="items" slot-scope="props">
41 <tr class="tr"> 41 <tr class="tr">
42 <td class="td td-row">{{ props.index + 1}}</td> 42 <td class="td td-row">{{ props.index + 1}}</td>
43 <td class="text-xs-center td td-row"> 43 <td class="text-xs-center td td-row">
44 <v-avatar size="40"> 44 <v-avatar size="40">
45 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 45 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
46 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 46 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
47 </v-avatar> 47 </v-avatar>
48 </td> 48 </td>
49 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 49 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
50 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td> 50 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
51 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 51 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
52 <td class="text-xs-center td td-row"> 52 <td class="text-xs-center td td-row">
53 <router-link :to="{ name:'View Course Attendance',params: { id:props.item._id } }"> 53 <router-link :to="{ name:'View Course Attendance',params: { id:props.item._id } }">
54 <v-tooltip top> 54 <v-tooltip top>
55 <img 55 <img
56 slot="activator" 56 slot="activator"
57 style="cursor:pointer; width:20px; height:25px; " 57 style="cursor:pointer; width:20px; height:25px; "
58 class="mr-3" 58 class="mr-3"
59 src="/static/icon/view.png" 59 src="/static/icon/view.png"
60 /> 60 />
61 <span>View</span> 61 <span>View</span>
62 </v-tooltip> 62 </v-tooltip>
63 </router-link> 63 </router-link>
64 </td> 64 </td>
65 </tr> 65 </tr>
66 </template> 66 </template>
67 </v-data-table> 67 </v-data-table>
68 <v-snackbar 68 <v-snackbar
69 :timeout="timeout" 69 :timeout="timeout"
70 :top="y === 'top'" 70 :top="y === 'top'"
71 :right="x === 'right'" 71 :right="x === 'right'"
72 :vertical="mode === 'vertical'" 72 :vertical="mode === 'vertical'"
73 v-model="snackbar" 73 v-model="snackbar"
74 color="color" 74 color="color"
75 >{{ text }}</v-snackbar> 75 >{{ text }}</v-snackbar>
76 </v-container> 76 </v-container>
77 </template> 77 </template>
78 78
79 <script> 79 <script>
80 import http from "@/Services/http.js"; 80 import http from "@/Services/http.js";
81 import moment from "moment"; 81 import moment from "moment";
82 82
83 export default { 83 export default {
84 data: () => ({ 84 data: () => ({
85 snackbar: false, 85 snackbar: false,
86 y: "top", 86 y: "top",
87 x: "right", 87 x: "right",
88 mode: "", 88 mode: "",
89 timeout: 3000, 89 timeout: 3000,
90 text: "", 90 text: "",
91 color: "", 91 color: "",
92 show: true, 92 show: true,
93 93
94 classList: [], 94 classList: [],
95 addSection: [], 95 addSection: [],
96 studentsData: [], 96 studentsData: [],
97 97
98 pagination: { 98 pagination: {
99 rowsPerPage: 10, 99 rowsPerPage: 10,
100 }, 100 },
101 101
102 role: "", 102 role: "",
103 schoolRole: "", 103 schoolRole: "",
104 search: "", 104 search: "",
105 getAttendance: {}, 105 getAttendance: {},
106 headers: [ 106 headers: [
107 { 107 {
108 text: "No", 108 text: "No",
109 align: "", 109 align: "",
110 sortable: false, 110 sortable: false,
111 value: "index", 111 value: "index",
112 }, 112 },
113 { 113 {
114 text: "Profile Pic", 114 text: "Profile Pic",
115 value: "profilprofilePicUrlePicUrl", 115 value: "profilprofilePicUrlePicUrl",
116 sortable: false, 116 sortable: false,
117 align: "center", 117 align: "center",
118 }, 118 },
119 { text: "Name", value: "name", sortable: false, align: "center" }, 119 { text: "Name", value: "name", sortable: false, align: "center" },
120 { 120 {
121 text: "Mobile No", 121 text: "Mobile No",
122 value: "fatherCellNo", 122 value: "fatherCellNo",
123 sortable: false, 123 sortable: false,
124 align: "center", 124 align: "center",
125 }, 125 },
126 { text: "Email", value: "email", sortable: false, align: "center" }, 126 { text: "Email", value: "email", sortable: false, align: "center" },
127 { text: "Attendance", value: "", sortable: false, align: "center" }, 127 { text: "Attendance", value: "", sortable: false, align: "center" },
128 ], 128 ],
129 }), 129 }),
130 methods: { 130 methods: {
131 getAllClass() { 131 getAllClass() {
132 http() 132 http()
133 .get("/getClassesList", { 133 .get("/getClassesList", {
134 headers: { Authorization: "Bearer " + this.token }, 134 headers: { Authorization: "Bearer " + this.token },
135 }) 135 })
136 .then((response) => { 136 .then((response) => {
137 this.classList = response.data.data; 137 this.classList = response.data.data;
138 }) 138 })
139 .catch((error) => { 139 .catch((error) => {
140 this.snackbar = true; 140 this.snackbar = true;
141 this.color = "error"; 141 this.color = "error";
142 this.text = error.response.data.message; 142 this.text = error.response.data.message;
143 }); 143 });
144 }, 144 },
145 getSection(_id) { 145 getSection(_id) {
146 this.showLoader = true; 146 this.showLoader = true;
147 this.studentsData = []; 147 this.studentsData = [];
148 http() 148 http()
149 .get( 149 .get(
150 "/getSectionsList", 150 "/getSectionsList",
151 { params: { classId: _id } }, 151 { params: { classId: _id } },
152 { 152 {
153 headers: { Authorization: "Bearer " + this.token }, 153 headers: { Authorization: "Bearer " + this.token },
154 } 154 }
155 ) 155 )
156 .then((response) => { 156 .then((response) => {
157 this.addSection = response.data.data; 157 this.addSection = response.data.data;
158 this.showLoader = false; 158 this.showLoader = false;
159 }) 159 })
160 .catch((err) => { 160 .catch((err) => {
161 this.showLoader = false; 161 this.showLoader = false;
162 this.snackbar = true; 162 this.snackbar = true;
163 this.color = "error"; 163 this.color = "error";
164 this.text = error.response.data.message; 164 this.text = error.response.data.message;
165 // console.log("err====>", err); 165 // console.log("err====>", err);
166 }); 166 });
167 }, 167 },
168 getStudentsDetail(_id) { 168 getStudentsDetail(_id) {
169 this.showLoader = true; 169 this.showLoader = true;
170 http() 170 http()
171 .get("/getStudentWithClass", { 171 .get("/getStudentWithClass", {
172 params: { 172 params: {
173 classId: this.getAttendance.classId, 173 classId: this.getAttendance.classId,
174 sectionId: this.getAttendance.sectionId, 174 sectionId: this.getAttendance.sectionId,
175 }, 175 },
176 }) 176 })
177 .then((response) => { 177 .then((response) => {
178 this.studentsData = response.data.data; 178 this.studentsData = response.data.data.filter((item) => item.status);
179 this.showLoader = false; 179 this.showLoader = false;
180 var attendance = ""; 180 var attendance = "";
181 for (let i = 0; i < this.studentsData.length; i++) { 181 for (let i = 0; i < this.studentsData.length; i++) {
182 this.studentsData[i].attendance = true; 182 this.studentsData[i].attendance = true;
183 } 183 }
184 }) 184 })
185 .catch((error) => { 185 .catch((error) => {
186 // console.log("err====>", error); 186 // console.log("err====>", error);
187 this.showLoader = false; 187 this.showLoader = false;
188 this.snackbar = true; 188 this.snackbar = true;
189 this.color = "error"; 189 this.color = "error";
190 this.text = error.response.data.message; 190 this.text = error.response.data.message;
191 }); 191 });
192 }, 192 },
193 }, 193 },
194 mounted() { 194 mounted() {
195 this.token = this.$store.state.token; 195 this.token = this.$store.state.token;
196 this.getAllClass(); 196 this.getAllClass();
197 this.role = this.$store.state.role; 197 this.role = this.$store.state.role;
198 }, 198 },
199 }; 199 };
200 </script> 200 </script>
src/pages/Attendence/viewCourseAttendance.vue
Diff comments   View file @575d794
1 <template> 1 <template>
2 <v-container fluid grid-list-md class="body-color"> 2 <v-container fluid grid-list-md class="body-color">
3 <v-dialog v-model="viewCourseAttendance" max-width="1000" scrollable persistent> 3 <v-dialog v-model="viewCourseAttendance" max-width="1000" scrollable persistent>
4 <v-card flat class="pa-3"> 4 <v-card flat class="pa-3">
5 <v-layout> 5 <v-layout>
6 <v-flex xs12> 6 <v-flex xs12>
7 <label class="title text-xs-center">Course Attendance</label> 7 <label class="title text-xs-center">Course Attendance</label>
8 <v-icon size="24" class="right" @click="viewCourseAttendance = false">cancel</v-icon> 8 <v-icon size="24" class="right" @click="viewCourseAttendance = false">cancel</v-icon>
9 </v-flex> 9 </v-flex>
10 </v-layout> 10 </v-layout>
11 <v-card-text> 11 <v-card-text>
12 <v-data-table :headers="headers" :items="courseAttendanceList"> 12 <v-data-table :headers="headers" :items="courseAttendanceList">
13 <template slot="items" slot-scope="props"> 13 <template slot="items" slot-scope="props">
14 <tr class="tr"> 14 <tr class="tr">
15 <td class="td td-row">{{ props.index + 1}}</td> 15 <td class="td td-row">{{ props.index + 1}}</td>
16 <td class="text-xs-center td td-row">{{ props.item.courseId.courseName}}</td> 16 <td class="text-xs-center td td-row">{{ props.item.courseId.courseName}}</td>
17 <td class="text-xs-center td td-row">{{ props.item.startTime}}</td> 17 <td class="text-xs-center td td-row">{{ props.item.startTime}}</td>
18 <td class="text-xs-center td td-row">{{ props.item.endTime }}</td> 18 <td class="text-xs-center td td-row">{{ props.item.endTime }}</td>
19 </tr> 19 </tr>
20 </template> 20 </template>
21 </v-data-table> 21 </v-data-table>
22 </v-card-text> 22 </v-card-text>
23 </v-card> 23 </v-card>
24 </v-dialog> 24 </v-dialog>
25 <div> 25 <div>
26 <v-layout wrap> 26 <v-layout wrap>
27 <v-flex xs12 sm12 md4> 27 <v-flex xs12 sm12 md4>
28 <v-card flat> 28 <v-card flat>
29 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3> 29 <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
30 <v-card-text> 30 <v-card-text>
31 <v-container> 31 <v-container>
32 <v-layout wrap> 32 <v-layout wrap>
33 <v-flex xs12> 33 <v-flex xs12>
34 <v-layout> 34 <v-layout>
35 <v-flex 35 <v-flex
36 xs12 36 xs12
37 class="text-xs-center text-sm-center text-md-center text-lg-center" 37 class="text-xs-center text-sm-center text-md-center text-lg-center"
38 > 38 >
39 <v-avatar size="80px"> 39 <v-avatar size="80px">
40 <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" /> 40 <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />
41 <img 41 <img
42 :src="studentData.profilePicUrl" 42 :src="studentData.profilePicUrl"
43 v-else-if="studentData.profilePicUrl" 43 v-else-if="studentData.profilePicUrl"
44 /> 44 />
45 </v-avatar> 45 </v-avatar>
46 </v-flex> 46 </v-flex>
47 </v-layout> 47 </v-layout>
48 <v-layout> 48 <v-layout>
49 <v-flex xs12 sm12> 49 <v-flex xs12 sm12>
50 <h3 class="text-xs-center"> 50 <h3 class="text-xs-center">
51 <b>{{ studentData.name }}</b> 51 <b>{{ studentData.name }}</b>
52 </h3> 52 </h3>
53 <p class="text-xs-center grey--text">Student</p> 53 <p class="text-xs-center grey--text">Student</p>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 <v-layout style="border: 1px solid lightgrey;"> 56 <v-layout style="border: 1px solid lightgrey;">
57 <v-flex xs6 sm6 class="pa-0"> 57 <v-flex xs6 sm6 class="pa-0">
58 <h4 class="right"> 58 <h4 class="right">
59 <b>Roll No :</b> 59 <b>Roll No :</b>
60 </h4> 60 </h4>
61 </v-flex> 61 </v-flex>
62 <v-flex sm6 xs6 class="pa-0"> 62 <v-flex sm6 xs6 class="pa-0">
63 <h4>{{ studentData.rollNo }}</h4> 63 <h4>{{ studentData.rollNo }}</h4>
64 </v-flex> 64 </v-flex>
65 </v-layout> 65 </v-layout>
66 <v-layout style="border: 1px solid lightgrey;"> 66 <v-layout style="border: 1px solid lightgrey;">
67 <v-flex xs6 sm6 class="pa-0"> 67 <v-flex xs6 sm6 class="pa-0">
68 <h4 class="right"> 68 <h4 class="right">
69 <b>Class :</b> 69 <b>Class :</b>
70 </h4> 70 </h4>
71 </v-flex> 71 </v-flex>
72 <v-flex sm6 xs6 class="right pa-0"> 72 <v-flex sm6 xs6 class="right pa-0">
73 <h4>{{ studentData.classId.classNum }}</h4> 73 <h4>{{ studentData.classId.classNum }}</h4>
74 </v-flex> 74 </v-flex>
75 </v-layout> 75 </v-layout>
76 <v-layout style="border: 1px solid lightgrey;"> 76 <v-layout style="border: 1px solid lightgrey;">
77 <v-flex xs6 sm6 class="right pa-0"> 77 <v-flex xs6 sm6 class="right pa-0">
78 <h4 class="right"> 78 <h4 class="right">
79 <b>Section :</b> 79 <b>Section :</b>
80 </h4> 80 </h4>
81 </v-flex> 81 </v-flex>
82 <v-flex sm6 xs6 class="right pa-0"> 82 <v-flex sm6 xs6 class="right pa-0">
83 <h4>{{ studentData.sectionId.name}}</h4> 83 <h4>{{ studentData.sectionId.name}}</h4>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-flex> 86 </v-flex>
87 </v-layout> 87 </v-layout>
88 </v-container> 88 </v-container>
89 </v-card-text> 89 </v-card-text>
90 </v-card> 90 </v-card>
91 </v-flex> 91 </v-flex>
92 <v-flex xs12 sm12 md8> 92 <v-flex xs12 sm12 md8>
93 <v-card flat> 93 <v-card flat>
94 <h3 class="py-2 text-xs-center card-style white--text">Attendence</h3> 94 <h3 class="py-2 text-xs-center card-style white--text">Attendence</h3>
95 <YearCalendar 95 <YearCalendar
96 v-model="year" 96 v-model="year"
97 :activeDates="activeDates" 97 :activeDates="activeDates"
98 prefixClass="your_customized_wrapper_class" 98 prefixClass="your_customized_wrapper_class"
99 :activeClass="activeClass" 99 :activeClass="activeClass"
100 @toggleDate="toggleDate" 100 @toggleDate="toggleDate"
101 ></YearCalendar> 101 ></YearCalendar>
102 </v-card> 102 </v-card>
103 </v-flex> 103 </v-flex>
104 </v-layout> 104 </v-layout>
105 </div> 105 </div>
106 <img :src="output" v-show="false" /> 106 <img :src="output" v-show="false" />
107 <div class="loader" v-if="showLoader"> 107 <div class="loader" v-if="showLoader">
108 <v-progress-circular indeterminate color="white"></v-progress-circular> 108 <v-progress-circular indeterminate color="white"></v-progress-circular>
109 </div> 109 </div>
110 </v-container> 110 </v-container>
111 </template> 111 </template>
112 112
113 <script lang="js"> 113 <script lang="js">
114 import moment from "moment"; 114 import moment from "moment";
115 import http from "@/Services/http.js"; 115 import http from "@/Services/http.js";
116 import YearCalendar from "vue-material-year-calendar"; 116 import YearCalendar from "vue-material-year-calendar";
117 import jsPDF from 'jspdf'; 117 import jsPDF from 'jspdf';
118 // eslint-disable-next-line 118 // eslint-disable-next-line
119 import autoTable from 'jspdf-autotable'; 119 import autoTable from 'jspdf-autotable';
120 120
121 export default { 121 export default {
122 components: { YearCalendar }, 122 components: { YearCalendar },
123 data() { 123 data() {
124 return { 124 return {
125 output:null, 125 output:null,
126 showLoader: false, 126 showLoader: false,
127 token: "", 127 token: "",
128 year: new Date().getFullYear(), 128 year: new Date().getFullYear(),
129 activeDates: [], 129 activeDates: [],
130 activeClass: "", 130 activeClass: "",
131 studentData: { 131 studentData: {
132 classId: { 132 classId: {
133 classNum: "" 133 classNum: ""
134 }, 134 },
135 sectionId: { 135 sectionId: {
136 name: "" 136 name: ""
137 }, 137 },
138 }, 138 },
139 courseAttendanceData:{}, 139 courseAttendanceData:{},
140 courseAttendanceList: [], 140 courseAttendanceList: [],
141 viewCourseAttendance: false, 141 viewCourseAttendance: false,
142 headers: [ 142 headers: [
143 { 143 {
144 text: "No", 144 text: "No",
145 align: "", 145 align: "",
146 sortable: false, 146 sortable: false,
147 value: "index", 147 value: "index",
148 }, 148 },
149 { text: "Course Name", value: "courseName", sortable: false, align: "center" }, 149 { text: "Course Name", value: "courseName", sortable: false, align: "center" },
150 { 150 {
151 text: "Start Time", 151 text: "Start Time",
152 value: "startTime", 152 value: "startTime",
153 sortable: false, 153 sortable: false,
154 align: "center", 154 align: "center",
155 }, 155 },
156 { text: "End Time", value: "endTime", sortable: false, align: "center" }, 156 { text: "End Time", value: "endTime", sortable: false, align: "center" },
157 ], 157 ],
158 selectedDates: [], 158 selectedDates: [],
159 }; 159 };
160 }, 160 },
161 mounted() { 161 mounted() {
162 this.token = this.$store.state.token; 162 this.token = this.$store.state.token;
163 this.getStudentAttendence(); 163 this.getStudentAttendence();
164 this.getStudentData(); 164 this.getStudentData();
165 }, 165 },
166 methods: { 166 methods: {
167 toggleDate (dateInfo) { 167 toggleDate (dateInfo) {
168 if (this.selectedDates.includes(dateInfo.date)) { 168 if (this.selectedDates.includes(dateInfo.date)) {
169 this.viewCourseAttendance = true; 169 this.viewCourseAttendance = true;
170 } 170 }
171 }, 171 },
172 dates: function(date) { 172 dates: function(date) {
173 return moment(date).format("MMMM DD, YYYY"); 173 return moment(date).format("MMMM DD, YYYY");
174 }, 174 },
175 getStudentAttendence() { 175 getStudentAttendence() {
176 this.showLoader = true; 176 this.showLoader = true;
177 var studentId = localStorage.getItem("parentStudentId"); 177 var studentId = this.$route.params.id || localStorage.getItem("parentStudentId");
178 http() 178 http()
179 .get( 179 .get(
180 "/studentAttendance", 180 "/studentAttendance",
181 { params: { studentId: studentId } }, 181 { params: { studentId: studentId } },
182 { 182 {
183 headers: { Authorization: "Bearer " + this.token } 183 headers: { Authorization: "Bearer " + this.token }
184 } 184 }
185 ) 185 )
186 .then(response => { 186 .then(response => {
187 this.showLoader = false; 187 this.showLoader = false;
188 }) 188 })
189 .catch(error => { 189 .catch(error => {
190 this.showLoader = false; 190 this.showLoader = false;
191 if (error.response.status === 401) { 191 if (error.response.status === 401) {
192 this.$router.replace({ path: "/" }); 192 this.$router.replace({ path: "/" });
193 this.$store.dispatch("setToken", null); 193 this.$store.dispatch("setToken", null);
194 this.$store.dispatch("Id", null); 194 this.$store.dispatch("Id", null);
195 this.$store.dispatch("Role", null); 195 this.$store.dispatch("Role", null);
196 } 196 }
197 }); 197 });
198 }, 198 },
199 getStudentData() { 199 getStudentData() {
200 var particularStudentId = localStorage.getItem("parentStudentId"); 200 var particularStudentId = this.$route.params.id || localStorage.getItem("parentStudentId");
201 http() 201 http()
202 .get( 202 .get(
203 "/getParticularStudentDetail", 203 "/getParticularStudentDetail",
204 { params: { studentId: particularStudentId } }, 204 { params: { studentId: particularStudentId } },
205 { 205 {
206 headers: { Authorization: "Bearer " + this.token } 206 headers: { Authorization: "Bearer " + this.token }
207 } 207 }
208 ) 208 )
209 .then(response => { 209 .then(response => {
210 this.studentData = response.data.data; 210 this.studentData = response.data.data;
211 this.getCourseAttendance(response.data.data.classId._id); 211 this.getCourseAttendance(response.data.data.classId._id);
212 }) 212 })
213 .catch(err => { 213 .catch(err => {
214 // console.log("err====>", err); 214 // console.log("err====>", err);
215 this.snackbar = true; 215 this.snackbar = true;
216 this.color = "error"; 216 this.color = "error";
217 this.text = error.response.data.message; 217 this.text = error.response.data.message;
218 // this.$router.replace({ path: '/' }); 218 // this.$router.replace({ path: '/' });
219 }); 219 });
220 }, 220 },
221 getCourseAttendance(classId) { 221 getCourseAttendance(classId) {
222 var particularCourseStudentId = localStorage.getItem("parentStudentId"); 222 var particularCourseStudentId = this.$route.params.id || localStorage.getItem("parentStudentId");
223 http() 223 http()
224 .get( 224 .get(
225 "/getStudentCourseAttendance", 225 "/getStudentCourseAttendance",
226 { params: { studentId: particularCourseStudentId, 226 { params: { studentId: particularCourseStudentId,
227 classId: classId } 227 classId: classId }
228 }, 228 },
229 { 229 {
230 headers: { Authorization: "Bearer " + this.token } 230 headers: { Authorization: "Bearer " + this.token }
231 } 231 }
232 ) 232 )
233 .then(response => { 233 .then(response => {
234 this.courseAttendanceData = response.data.data; 234 this.courseAttendanceData = response.data.data;
235 this.courseAttendanceList = response.data.data[0].studentAttendance; 235 this.courseAttendanceList = response.data.data[0].studentAttendance;
236 // console.log("===this.courseAttendanceList===", this.courseAttendanceList) 236 // console.log("===this.courseAttendanceList===", this.courseAttendanceList)
237 let array = []; 237 let array = [];
238 for (let i = 0; i < this.courseAttendanceData.length; i++) { 238 for (let i = 0; i < this.courseAttendanceData.length; i++) {
239 if (this.courseAttendanceData[i].date) { 239 if (this.courseAttendanceData[i].date) {
240 this.selectedDates.push(this.courseAttendanceData[i].date) 240 this.selectedDates.push(this.courseAttendanceData[i].date)
241 array.push({ 241 array.push({
242 date: this.courseAttendanceData[i].date, 242 date: this.courseAttendanceData[i].date,
243 className: "green" 243 className: "green"
244 }); 244 });
245 } 245 }
246 } 246 }
247 this.activeDates = array; 247 this.activeDates = array;
248 }) 248 })
249 .catch(err => { 249 .catch(err => {
250 this.snackbar = true; 250 this.snackbar = true;
251 this.color = "error"; 251 this.color = "error";
252 this.text = error.response.data.message; 252 this.text = error.response.data.message;
253 }); 253 });
254 }, 254 },
255 profile(item) { 255 profile(item) {
256 this.viewCourseAttendance = true; 256 this.viewCourseAttendance = true;
257 }, 257 },
258 } 258 }
259 }; 259 };
260 </script> 260 </script>
261 261
262 <style lang="stylus"> 262 <style lang="stylus">
263 .your_customized_wrapper_class { 263 .your_customized_wrapper_class {
264 background-color: #0aa; 264 background-color: #0aa;
265 color: white; 265 color: white;
266 266
267 &.red { 267 &.red {
268 background-color: red; 268 background-color: red;
269 color: white; 269 color: white;
270 270
271 &:after { 271 &:after {
272 background-size: 100% 100%; 272 background-size: 100% 100%;
273 } 273 }
274 } 274 }
275 275
276 &.blue { 276 &.blue {
277 background-color: #0000aa; 277 background-color: #0000aa;
278 color: white; 278 color: white;
279 } 279 }
280 280
281 &.your_customized_classname { 281 &.your_customized_classname {
282 background-color: yellow; 282 background-color: yellow;
283 color: black; 283 color: black;
284 } 284 }
285 } 285 }
286 </style> 286 </style>
287 <style scoped> 287 <style scoped>
288 .card-style { 288 .card-style {
289 background: #7f62f8 !important; 289 background: #7f62f8 !important;
290 border-color: #7f62f8 !important; 290 border-color: #7f62f8 !important;
291 border-radius: 12px; 291 border-radius: 12px;
292 } 292 }
293 </style> 293 </style>