E-Vote/resources/assets/js/components/demo/voter/home/index.vue

<template>
    <div class="row col-md-10 col-md-offset-1">
        <div class="col-md-4">
            <h4>Maklumat Anggota</h4>
            <hr />
            <ul class="list-group">
                <li class="list-group-item"><b>Nama : </b>{{ data.user.name }}</li>
                <li class="list-group-item"><b>No. Kad Pengenalan : </b>{{ data.user.no_kp }}</li>
                <li class="list-group-item"><b>No. Anggota : </b>{{ data.user.no_anggota }}
                <li class="list-group-item"><b>Unit : </b>{{ data.user.unit }}</li>
                <li class="list-group-item"><b>Saham :</b> RM {{ data.user.saham | formatNumberWithCommas() }}</li>
                <li class="list-group-item"><b>Yuran :</b> RM {{ data.user.yuran | formatNumberWithCommas() }}</li>
                <li class="list-group-item" v-if="data.election.status == 1">
                    <center>Undian belum bermula</center>
                </li>
                <li class="list-group-item" v-if="data.election.status == 2 && !hasVoted()">
                    <center>
                        <router-link v-if="data.user.saham >= 500 && data.user.kehadiran != 0" :to="{ name: 'Vote' }" class="btn btn-primary">
                            Undi Sekarang
                        </router-link>
                        <router-link v-if="data.user.saham >= 500" :to="{ name: 'Attendance' }" class="btn btn-info">
                            Daftar Kehadiran Sekarang
                        </router-link>
                        <div v-else class="alert alert-danger" role="alert">
                            Saham minima tidak mencukupi untuk pengundian
                        </div>
                    </center>
                </li>
            </ul>
            <div v-if="hasVoted()">
                <hr />
                <h4>Maklumat Undian Anda</h4>
                <hr />
                <ul class="list-group">
                    <li class="list-group-item" v-for="result in data.result">
                        <b>{{ getPosition(result.position_id) }} : </b>{{ getNominee(result.nominee_id) }}
                    </li>
                </ul>
            </div>
        </div>

        <div class="col-md-8">
            <h4>Maklumat Calon</h4>
            <hr />
            <small>Tekan gambar untuk maklumat calon</small>
            <div class="panel panel-primary" v-for="position in data.positions">
                <div class="panel-heading">{{ position.name }}</div>
                <div class="panel-body table-responsive">
                    <table id="table-nominee" class="table table-hover">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Bil.</th>
                                <th>Nama</th>
                                <th>No. Anggota</th>
                                <th>Unit</th>
                                <!-- <th>Taraf Pendidikan</th>
                                <th>Pengalaman Kerja </th> -->
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(nominee, i) in data.nominees" v-if="nominee.position_id == position.id"
                                v-on:click="viewNomineeDetails(nominee)">
                                <td><img @click="view(nominee, i)" :src="createBase64ImageUrl(nominee.photo)"
                                        class="thumbnail" style="height: 60px;width: 60px;" />
                                </td>
                                <td>{{ nominee.no_calon }}</td>
                                <td>{{ nominee.name }}</td>
                                <td>{{ nominee.no_anggota }}</td>
                                <td>{{ nominee.unit }}</td>
                                <!-- <td>{{ nominee.education }}</td>
                                <td>{{ nominee.experience }}</td> -->
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div id="view-nominee-modal" class="modal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="display: inline;">Maklumat Calon</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="content">
                            <div class="photo-section">
                                <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
                            </div>
                            <div class="detail-section">
                                <span><b> Nama : </b>{{ nomineeViewed.name }}</span>
                                <span><b> Unit : </b>{{ nomineeViewed.unit }}</span>
                                <span> <b>Taraf Pendidikan :</b> </span>
                                <ol>
                                    <li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
                                </ol>

                                <span><b> Pengalaman Kerja : </b></span>
                                <ol>
                                    <li v-for="(item, index) in nomineeViewed.experience" :key="index">{{ item }}</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import { R } from '@bachdgvn/vue-otp-input';

Vue.filter('formatNumberWithCommas', function (value) {
    if (!value) return '';
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});

export default {
    created: function () {
        //console.log(this)
    },

    data: function () {
        return {
            x: {},
            selectedNomineeId: null,
            nomineeViewed: {},
        }
    },

    filters: {
        formatNumberWithCommas: function (value) {
            if (!value) return '';
            return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    },

    methods: {
        hasVoted: function () {
            return this.data.result.length > 0;
        },

        getPartylist: function (id) {
            let partylists = this.data.partylists;
            for (var i in partylists)
                if (partylists[i]['id'] == id) return partylists[i]['name'];
            return 'No Partylist';
        },

        getPosition: function (id) {
            let positions = this.data.positions;
            for (var i in positions)
                if (positions[i].id == id) return positions[i].name;
            return '';
        },

        getNominee: function (id) {
            let nominees = this.data.nominees;
            for (var i in nominees)
                if (nominees[i]['id'] == id) return nominees[i].name;
            return '';
        },

        view: function (nominee, index) {
            this.x = nominee;
            this.selectedNomineeId = index; // Assuming index is the ID
            this.util.showModal('#nominee-information-modal');
        },

        createBase64ImageUrl: function (base64ImageData) {
            return "data:image/png;base64," + base64ImageData;
        },

        viewNomineeDetails: function (nominee) {
            this.nomineeViewed = {...nominee};
            this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
            $('#view-nominee-modal').modal();
        },



    },

    computed: {
        header: function () {
            return this.x.name + ' for ' + this.getPosition(this.x.position_id);
        }
    }
}
</script>


<style>
#view-nominee-modal .modal-dialog {
    max-width: 850px; /* Set a maximum width */
    width: 100%; /* Ensure full width on smaller screens */
}

#view-nominee-modal .nominee-viewed-photo {
    width: 100%; /* Ensure the photo fills the container */
    height: auto; /* Maintain aspect ratio */
}

#view-nominee-modal .content {
    display: flex;
    flex-wrap: wrap; /* Allow content to wrap on smaller screens */
}

#view-nominee-modal .photo-section {
    flex: 0 0 40%; /* Set a flexible width for the photo section */
    max-width: 300px; /* Set a maximum width */
    margin-right: 20px; /* Add space between photo and details */
}

#view-nominee-modal .detail-section {
    flex: 1; /* Take remaining space */
}

#view-nominee-modal span {
    display: block;
    padding: 5px 0;
}

/* Mobile styles */
@media (max-width: 576px) {
    #view-nominee-modal .modal-dialog {
        max-width: none;
        padding-left: 10px;
        padding-right: 20px;
        margin-bottom: 50px;
        margin-left: 0px;
    }

    #view-nominee-modal .photo-section {
        flex: 0 0 100%; /* Set photo section to full width */
        max-width: none; /* Remove max-width */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 20px; /* Add space between photo and details */
    }

    #view-nominee-modal .detail-section {
        flex: 0 0 100%; /* Set detail section to full width */
    }
}

#table-nominee tbody tr {
    cursor: pointer;
}

@keyframes pulseBackground {
    0% { background-color: #FFFFBF; } /* Start color */
    50% { background-color: #ffffff; } /* Middle color (white) */
    100% { background-color: #FFFFBF; } /* End color (same as start) */
}

#table-nominee tbody tr:hover {
    animation: pulseBackground 3s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; /* Animation duration, timing function, and repetition */
}

</style>