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
|
<i class="fa fa-refresh"></i> Kemaskini Pengundi
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button class="btn btn-primary" @click="downloadPDF()">
|
<router-link class="btn btn-info" :to="{ name: 'Fizikal' }" >
|
||||||
<i class="fa fa-download"></i> Muat Turun PDF
|
Fizikal
|
||||||
</button>
|
</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">
|
<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