Blame view
src/pages/Attendence/viewStudentsAttendence.vue
5.84 KB
687e0b929
add user,attenden...
|
1 2 3 4 5 |
<template>
<v-container fluid grid-list-md>
<v-layout wrap>
<v-flex xs12 sm4>
<v-card flat>
|
|
cf94564ea
fixed toolbar sid...
|
6 |
<h3 class="text-xs-center py-2 grey lighten-1 white--text">Profile</h3> |
|
687e0b929
add user,attenden...
|
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 |
<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
fixed toolbar sid...
|
68 |
<h3 class="py-2 text-xs-center grey lighten-1 white--text"> |
|
687e0b929
add user,attenden...
|
69 70 |
Attendence
<span class="ml-4">
|
|
cf94564ea
fixed toolbar sid...
|
71 |
<v-avatar class="grey darken-1 caption" size="12"></v-avatar> |
|
687e0b929
add user,attenden...
|
72 73 74 75 76 77 78 |
<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
add user,attenden...
|
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 |
<YearCalendar
v-model="year"
:activeDates.sync="activeDates"
@toggleDate="toggleDate"
prefixClass="your_customized_wrapper_class"
:activeClass="activeClass"
></YearCalendar>
</v-card>
</v-flex>
</v-layout>
</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: [],
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() {
http()
.get(
"/studentAttendance",
{ params: { studentId: this.$route.params.id } },
{
headers: { Authorization: "Bearer " + this.token }
}
)
.then(response => {
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,
|
|
cf94564ea
fixed toolbar sid...
|
133 |
className: "grey" |
|
687e0b929
add user,attenden...
|
134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 |
});
} else if (response.data.data[i].students[0].isPresent == false) {
array.push({
date: response.data.data[i].date,
className: "red"
});
}
}
this.activeDates = array;
})
.catch(err => {
console.log("err====>", err);
// this.$router.replace({ path: '/' });
});
},
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: '/' });
});
},
toggleDate(dateInfo) {
console.log(dateInfo); // { date: '2010-10-23', selected: 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>
|