viithiisys / School-Management-dashboard

Blame view

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