kehadiran maya and fizikal
This commit is contained in:
nurafrinaalimi16
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Kedatangan Fizikal</h4>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bil.</th>
|
||||
<th>Nama Anggota</th>
|
||||
<th>No. Kad Pengenalan</th>
|
||||
<th>No. Anggota</th>
|
||||
<th>Unit</th>
|
||||
<th>Kehadiran</th>
|
||||
<th>Tarikh/Masa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Display only physical attendees -->
|
||||
<template v-for="(voter, i) in filteredPhysicalAttendees">
|
||||
<tr>
|
||||
<td>{{ i + 1 }}</td> <!-- Display the serial number -->
|
||||
<td>{{ voter.name }}</td>
|
||||
<td>{{ voter.no_kp }}</td>
|
||||
<td>{{ voter.no_anggota }}</td>
|
||||
<td>{{ voter.unit }}</td>
|
||||
<td>{{ getKehadiranString(voter.kehadiran) }}</td>
|
||||
<td>{{ voter.updated_at }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Display attendance percentage -->
|
||||
<div class="text-right">
|
||||
<h5><b>{{ attendancePercentage }}% Kehadiran Pengundi Fizikal</b></h5>
|
||||
</div>
|
||||
|
||||
<ul class="pagination" v-if="pages.length > 1">
|
||||
<router-link tag="li" v-for="page in pages" :key="page['pages']" :to="{ query: { page: page['page'] } }"
|
||||
:class="{ 'active': current_page == page['page'] }" exact>
|
||||
<a href="#">{{ page['page'] }}</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
this.refreshVoter();
|
||||
},
|
||||
|
||||
methods: {
|
||||
search: function () {
|
||||
|
||||
},
|
||||
|
||||
refreshVoter: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Voter', 'loading');
|
||||
axios.get(config.API + 'voter?page=' + this.current_page)
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
$.notifyClose();
|
||||
vm.data.voters = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
},
|
||||
|
||||
getKehadiranString(kehadiran) {
|
||||
// Map integer values to corresponding string representations
|
||||
switch (kehadiran) {
|
||||
case 1:
|
||||
return 'Fizikal';
|
||||
case 2:
|
||||
return 'Maya';
|
||||
default:
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
|
||||
// downloadPDF() {
|
||||
// const table = document.getElementById('voterTable');
|
||||
|
||||
// html2canvas(table).then(canvas => {
|
||||
// const imgData = canvas.toDataURL('image/png');
|
||||
// const pdf = new jsPDF();
|
||||
// pdf.addImage(imgData, 'PNG', 0, 0);
|
||||
// pdf.save('kehadiran-pengundi.pdf');
|
||||
// });
|
||||
// },
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.query.page': function () {
|
||||
$.notifyClose();
|
||||
this.refreshVoter();
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
pages: function () {
|
||||
var pages = [];
|
||||
if (this.data.voters.last_page)
|
||||
for (var i = 1; i <= this.data.voters.last_page; i++) {
|
||||
let x = {};
|
||||
x['page'] = i;
|
||||
pages.push(x);
|
||||
}
|
||||
return pages;
|
||||
},
|
||||
|
||||
current_page: function () {
|
||||
return this.$route.query.page ? this.$route.query.page : 1;
|
||||
},
|
||||
|
||||
// Calculate total attendance percentage
|
||||
attendancePercentage() {
|
||||
// Count total physical attendees
|
||||
const fizikalCount = this.data.voters.data.reduce((total, voter) => {
|
||||
return voter.kehadiran === 1 ? total + 1 : total;
|
||||
}, 0);
|
||||
|
||||
// Total members who attended physically
|
||||
const totalMembers = this.data.voters.data.length;
|
||||
|
||||
// Calculate the percentage only if there are physical attendees
|
||||
return totalMembers === 0 ? 0 : ((fizikalCount / totalMembers) * 100).toFixed(2);
|
||||
},
|
||||
|
||||
filteredPhysicalAttendees() {
|
||||
return this.data.voters.data.filter(voter => voter.kehadiran === 1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -5,9 +5,17 @@
|
||||
<i class="fa fa-refresh"></i> Kemaskini Pengundi
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary" @click="downloadPDF()">
|
||||
<i class="fa fa-download"></i> Muat Turun PDF
|
||||
</button>
|
||||
<router-link class="btn btn-info" :to="{ name: 'Fizikal' }" >
|
||||
Fizikal
|
||||
</router-link>
|
||||
|
||||
<router-link class="btn btn-info" :to="{ name: 'Maya' }" >
|
||||
Maya
|
||||
</router-link>
|
||||
|
||||
<!-- <button class="btn btn-primary" @click="downloadPDF()">
|
||||
<i class="fa fa-download"></i> Muat Turun PDF
|
||||
</button> -->
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Kedatangan Maya</h4>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bil.</th>
|
||||
<th>Nama Anggota</th>
|
||||
<th>No. Kad Pengenalan</th>
|
||||
<th>No. Anggota</th>
|
||||
<th>Unit</th>
|
||||
<th>Kehadiran</th>
|
||||
<th>Tarikh/Masa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Display only physical attendees -->
|
||||
<template v-for="(voter, i) in filteredMayaAttendees">
|
||||
<tr>
|
||||
<td>{{ i + 1 }}</td> <!-- Display the serial number -->
|
||||
<td>{{ voter.name }}</td>
|
||||
<td>{{ voter.no_kp }}</td>
|
||||
<td>{{ voter.no_anggota }}</td>
|
||||
<td>{{ voter.unit }}</td>
|
||||
<td>{{ getKehadiranString(voter.kehadiran) }}</td>
|
||||
<td>{{ voter.updated_at }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Display attendance percentage -->
|
||||
<div class="text-right">
|
||||
<h5><b>{{ mayaAttendancePercentage }}% Kehadiran Maya</b></h5>
|
||||
</div>
|
||||
|
||||
<ul class="pagination" v-if="pages.length > 1">
|
||||
<router-link tag="li" v-for="page in pages" :key="page['pages']" :to="{ query: { page: page['page'] } }"
|
||||
:class="{ 'active': current_page == page['page'] }" exact>
|
||||
<a href="#">{{ page['page'] }}</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
this.refreshVoter();
|
||||
},
|
||||
|
||||
methods: {
|
||||
search: function () {
|
||||
|
||||
},
|
||||
|
||||
refreshVoter: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Voter', 'loading');
|
||||
axios.get(config.API + 'voter?page=' + this.current_page)
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
$.notifyClose();
|
||||
vm.data.voters = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
},
|
||||
|
||||
getKehadiranString(kehadiran) {
|
||||
// Map integer values to corresponding string representations
|
||||
switch (kehadiran) {
|
||||
case 1:
|
||||
return 'Fizikal';
|
||||
case 2:
|
||||
return 'Maya';
|
||||
default:
|
||||
return '-';
|
||||
}
|
||||
},
|
||||
|
||||
// downloadPDF() {
|
||||
// const table = document.getElementById('voterTable');
|
||||
|
||||
// html2canvas(table).then(canvas => {
|
||||
// const imgData = canvas.toDataURL('image/png');
|
||||
// const pdf = new jsPDF();
|
||||
// pdf.addImage(imgData, 'PNG', 0, 0);
|
||||
// pdf.save('kehadiran-pengundi.pdf');
|
||||
// });
|
||||
// },
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.query.page': function () {
|
||||
$.notifyClose();
|
||||
this.refreshVoter();
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
pages: function () {
|
||||
var pages = [];
|
||||
if (this.data.voters.last_page)
|
||||
for (var i = 1; i <= this.data.voters.last_page; i++) {
|
||||
let x = {};
|
||||
x['page'] = i;
|
||||
pages.push(x);
|
||||
}
|
||||
return pages;
|
||||
},
|
||||
|
||||
current_page: function () {
|
||||
return this.$route.query.page ? this.$route.query.page : 1;
|
||||
},
|
||||
|
||||
// Calculate total attendance percentage
|
||||
mayaAttendancePercentage() {
|
||||
// Count total members who attended virtually (Maya)
|
||||
const mayaCount = this.data.voters.data.reduce((total, voter) => {
|
||||
return voter.kehadiran === 2 ? total + 1 : total;
|
||||
}, 0);
|
||||
|
||||
// Calculate total attendance percentage for Maya attendees
|
||||
const totalMembers = this.data.voters.data.length;
|
||||
return totalMembers === 0 ? 0 : ((mayaCount / totalMembers) * 100).toFixed(2);
|
||||
},
|
||||
|
||||
attendancePercentage() {
|
||||
// Count total members who attended physically (Fizikal)
|
||||
const fizikalCount = this.data.voters.data.reduce((total, voter) => {
|
||||
return voter.kehadiran === 1 ? total + 1 : total;
|
||||
}, 0);
|
||||
|
||||
// Count total members who attended virtually (Maya)
|
||||
const mayaCount = this.data.voters.data.reduce((total, voter) => {
|
||||
return voter.kehadiran === 2 ? total + 1 : total;
|
||||
}, 0);
|
||||
|
||||
// Calculate total attendance percentage
|
||||
const totalAttendance = fizikalCount + mayaCount;
|
||||
const totalMembers = this.data.voters.data.length;
|
||||
return totalMembers === 0 ? 0 : ((totalAttendance / totalMembers) * 100).toFixed(2);
|
||||
},
|
||||
filteredMayaAttendees() {
|
||||
// Filter Maya attendees
|
||||
return this.data.voters.data.filter(voter => voter.kehadiran === 2);
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user