viithiisys / School-Management-dashboard

Blame view

src/pages/Attendence/viewStudentsAttendence.vue 9.54 KB
edit raw normal view history
687e0b929   Neeraj Sharma   add user,attenden... 
1
2
 
  <template>
    <v-container fluid grid-list-md>
6ae46ca27   Neeraj Sharma   implement upload ... 
3
4
5
6
7
8
9
10
11
12
13
14
15
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
 
      <v-layout row>
        <v-dialog v-model="dialogExport" max-width="500px">
          <v-btn slot="activator" color="grey" class="right" dark>
            Export
            <v-icon dark right size="20">save_alt</v-icon>
          </v-btn>
          <v-card>
            <h3 class="text-xs-center py-2 grey lighten-1 white--text">Export</h3>
            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12>
                    <!-- <v-text-field label="Email" required></v-text-field> -->
                    <v-menu
                      ref="menuStartDate"
                      :close-on-content-click="false"
                      v-model="menuStartDate"
                      :nudge-right="40"
                      :return-value.sync="startDate"
                      lazy
                      transition="scale-transition"
                      offset-y
                      full-width
                      min-width="290px"
                    >
                      <v-text-field
                        slot="activator"
                        v-model="startDate"
                        label="Select Start Date"
                        prepend-icon="event"
                        readonly
                      ></v-text-field>
                      <v-date-picker v-model="startDate" @input="$refs.menuStartDate.save(startDate)"></v-date-picker>
                    </v-menu>
                  </v-flex>
                  <v-flex xs12>
                    <v-menu
                      ref="menuEndDate"
                      :close-on-content-click="false"
                      v-model="menuEndDate"
                      :nudge-right="40"
                      :return-value.sync="endDate"
                      lazy
                      transition="scale-transition"
                      offset-y
                      full-width
                      min-width="290px"
                    >
                      <v-text-field
                        slot="activator"
                        v-model="endDate"
                        label="Select End Date"
                        prepend-icon="event"
                        readonly
                      ></v-text-field>
                      <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker>
                    </v-menu>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" flat @click.native="dialogExport = false">Close</v-btn>
              <download-csv :data="json_data">
                <v-btn color="blue darken-1" flat @click.native="exportData">Export</v-btn>
              </download-csv>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-layout>
687e0b929   Neeraj Sharma   add user,attenden... 
74
75
76
 
      <v-layout wrap>
        <v-flex xs12 sm4>
          <v-card flat>
cf94564ea   Neeraj Sharma   fixed toolbar sid... 
77
 
            <h3 class="text-xs-center py-2 grey lighten-1 white--text">Profile</h3>
687e0b929   Neeraj Sharma   add user,attenden... 
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
 
            <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="160px">
                          <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 sm8>
          <v-card flat>
cf94564ea   Neeraj Sharma   fixed toolbar sid... 
139
 
            <h3 class="py-2 text-xs-center grey lighten-1 white--text">
687e0b929   Neeraj Sharma   add user,attenden... 
140
141
 
              Attendence
              <span class="ml-4">
a99e002d3   Neeraj Sharma   solve bygs atten... 
142
 
                <v-avatar class="green caption" size="12"></v-avatar>
687e0b929   Neeraj Sharma   add user,attenden... 
143
144
145
146
147
148
149
 
                <span class="subheading">Present</span>
              </span>
              <span class="ml-4">
                <v-avatar color="red caption" size="12" class></v-avatar>
                <span class="subheading">Absent</span>
              </span>
            </h3>
687e0b929   Neeraj Sharma   add user,attenden... 
150
151
 
            <YearCalendar
              v-model="year"
a99e002d3   Neeraj Sharma   solve bygs atten... 
152
 
              :activeDates="activeDates"
687e0b929   Neeraj Sharma   add user,attenden... 
153
154
155
156
157
158
 
              prefixClass="your_customized_wrapper_class"
              :activeClass="activeClass"
            ></YearCalendar>
          </v-card>
        </v-flex>
      </v-layout>
6ae46ca27   Neeraj Sharma   implement upload ... 
159
160
161
 
      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>
687e0b929   Neeraj Sharma   add user,attenden... 
162
163
164
165
166
167
168
169
170
171
172
173
174
 
    </v-container>
  </template>
  
  <script>
  import moment from "moment";
  import http from "@/Services/http.js";
  import YearCalendar from "vue-material-year-calendar";
  
  export default {
    components: { YearCalendar },
    data() {
      return {
        studentsList: [],
6ae46ca27   Neeraj Sharma   implement upload ... 
175
176
177
178
179
180
181
 
        json_data: [],
        dialogExport: false,
        startDate: "",
        endDate: "",
        menuEndDate: false,
        menuStartDate: false,
        showLoader: false,
687e0b929   Neeraj Sharma   add user,attenden... 
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
 
        token: "",
        year: new Date().getFullYear(),
        activeDates: [],
        activeClass: "",
        studentData: {}
      };
    },
    mounted() {
      this.token = this.$store.state.token;
      this.getStudentAttendence();
      this.getStudentData();
    },
    methods: {
      dates: function(date) {
        return moment(date).format("MMMM DD, YYYY");
      },
      getStudentAttendence() {
6ae46ca27   Neeraj Sharma   implement upload ... 
199
 
        this.showLoader = true;
687e0b929   Neeraj Sharma   add user,attenden... 
200
201
202
203
204
205
206
207
208
 
        http()
          .get(
            "/studentAttendance",
            { params: { studentId: this.$route.params.id } },
            {
              headers: { Authorization: "Bearer " + this.token }
            }
          )
          .then(response => {
6ae46ca27   Neeraj Sharma   implement upload ... 
209
 
            this.showLoader = false;
687e0b929   Neeraj Sharma   add user,attenden... 
210
211
212
213
214
 
            let array = [];
            for (let i = 0; i < response.data.data.length; i++) {
              if (response.data.data[i].students[0].isPresent == true) {
                array.push({
                  date: response.data.data[i].date,
a99e002d3   Neeraj Sharma   solve bygs atten... 
215
 
                  className: "green"
687e0b929   Neeraj Sharma   add user,attenden... 
216
217
218
219
220
221
222
223
224
225
 
                });
              } else if (response.data.data[i].students[0].isPresent == false) {
                array.push({
                  date: response.data.data[i].date,
                  className: "red"
                });
              }
            }
            this.activeDates = array;
          })
ab54b5656   Neeraj Sharma   implement library... 
226
 
          .catch(error => {
687e0b929   Neeraj Sharma   add user,attenden... 
227
 
            console.log("err====>", err);
6ae46ca27   Neeraj Sharma   implement upload ... 
228
229
230
231
232
233
 
            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }
687e0b929   Neeraj Sharma   add user,attenden... 
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
 
          });
      },
      getStudentData() {
        http()
          .get(
            "/getParticularStudentDetail",
            { params: { studentId: this.$route.params.id } },
            {
              headers: { Authorization: "Bearer " + this.token }
            }
          )
          .then(response => {
            this.studentData = response.data.data;
          })
          .catch(err => {
            console.log("err====>", err);
            // this.$router.replace({ path: '/' });
          });
6ae46ca27   Neeraj Sharma   implement upload ... 
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
 
      },
      exportData() {
        http()
          .get(
            "/studentAttendanceByMonth",
            {
              params: {
                studentId: this.$route.params.id,
                startDate: this.startDate,
                endDate: this.endDate
              }
            },
            {
              headers: { Authorization: "Bearer " + this.token }
            }
          )
          .then(response => {
            this.json_data = response.data.data;
          })
          .catch(err => {
            console.log("err====>", err);
            // this.$router.replace({ path: '/' });
          });
687e0b929   Neeraj Sharma   add user,attenden... 
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
304
 
      }
    }
  };
  </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>