E-Vote/resources/assets/js/components/demo/admin/voter/maya.vue

<template>
    <div class="panel panel-default">
        <div class="panel-body">
            <h4>Kedatangan Maya</h4>

            <a class="btn btn-warning" :href="getMayaPDFurl(1)">Muat Turun PDF</a>

            <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 '-';
            }
        },

        getMayaPDFurl(Id) {
			// Construct and return the URL based on the item ID
			return `/mayapdf/1`;
		},

    },

    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>