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

<template>
  <div class="row col-md-10 col-md-offset-1">
    <!-- Banner -->
    <div class="text-center mb-4">
      <img src="/images/banner-mat28-new.jpg" alt="Banner" class="img-fluid"
        style="width: 100%; max-height: 400px; object-fit: cover;">
    </div>

    <!-- Member Info -->
    <div class="col-md-4">
      <div class="p-2 mb-3 text-center"
        style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
        Maklumat Anggota
      </div>
      <hr />
      <ul class="list-group" style="font-weight: bold;">
        <li class="list-group-item">
          <span class="info-label">NAMA</span>
          <span class="info-separator">:</span>
          <span class="info-value">{{ data.user.name }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">NO KAD PENGENALAN</span>
          <span class="info-separator">:</span>
          <span class="info-value">{{ data.user.no_kp }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">NO ANGGOTA</span>
          <span class="info-separator">:</span>
          <span class="info-value">{{ data.user.no_anggota }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">UNIT</span>
          <span class="info-separator">:</span>
          <span class="info-value">{{ data.user.unit }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">SAHAM</span>
          <span class="info-separator">:</span>
          <span class="info-value">RM {{ data.user.saham | formatNumberWithCommas }}</span>
        </li>
        <li class="list-group-item">
          <span class="info-label">YURAN</span>
          <span class="info-separator">:</span>
          <span class="info-value">RM {{ data.user.yuran | formatNumberWithCommas }}</span>
        </li>
      </ul>

      <!-- Membership Card -->
      <div id="kad-keahlian" class="kad-keahlian">
        <div class="kad-logo text-center" style="margin: 1px 0;">
          <img src="/images/KOPKB_Final.png" alt="Logo" style="width: 80px; height: auto;">
        </div>
        <br>
        <div class="kad-title">KAD KEANGGOTAAN KOPERASI</div>
        <div class="kad-content">
          <img src="images/KOPKB_Final.png" class="watermark" alt="Watermark">
          <div class="member-details">
            <div class="detail-item">
              <span class="detail-label">NAMA:</span>
              <span class="detail-value">{{ data.user.name }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">NO KAD PENGENALAN:</span>
              <span class="detail-value">{{ data.user.no_kp }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">NO ANGGOTA:</span>
              <span class="detail-value">{{ data.user.no_anggota }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">UNIT:</span>
              <span class="detail-value">{{ data.user.unit }}</span>
            </div>
          </div>
        </div>
        <!-- <div class="text-center mt-2">
          <button class="btn btn-success" onclick="downloadKadKeahlian()" >Muat Turun</button>
        </div> -->
      </div>
    </div>

    <!-- Nominee Info Section -->
    <div class="col-md-8">
      <div class="p-2 mb-3 text-center"
        style="background-color: #007bff; color: white; font-weight: bold; font-size: 1.6rem; border-radius: 4px;">
        Maklumat Calon
      </div>
      <hr />
      <small>Tekan gambar untuk maklumat calon</small>

      <div class="panel panel-primary" v-for="position in data.positions" :key="position.id">
        <div class="panel-heading">{{ position.name }}</div>
        <div class="panel-body table-responsive">
          <table class="table table-hover">
            <thead>
              <tr>
                <th></th>
                <th>Bil.</th>
                <th>Nama</th>
                <th>No. Anggota</th>
                <th>Unit</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(nominee, i) in data.nominees" :key="nominee.id" v-if="nominee.position_id == position.id"
                @click="viewNomineeDetails(nominee)">
                <td>
                  <img :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>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Nominee Modal -->
    <div v-if="showNomineeModal" class="modal-backdrop">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Maklumat Calon</h5>
            <button type="button" class="close" @click="closeNomineeModal">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="photo-section">
              <img :src="nomineeViewed.photo" class="thumbnail nominee-viewed-photo" />
            </div>
            <div class="detail-section">
              <p><b>Nama:</b> {{ nomineeViewed.name }}</p>
              <p><b>Unit:</b> {{ nomineeViewed.unit }}</p>
              <p><b>Umur:</b> {{ nomineeViewed.umur }}</p>
              <p><b>Jawatan Sekarang:</b> {{ nomineeViewed.jawatan_sekarang }}</p>
              <p><b>Taraf Pendidikan:</b></p>
              <ol>
                <li v-for="(item, index) in nomineeViewed.education" :key="index">{{ item }}</li>
              </ol>
              <p><b>Pengalaman Kerja:</b></p>
              <ol>
                <li v-for="(item, index) in nomineeViewed.experience" :key="index">{{ item }}</li>
              </ol>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" @click="closeNomineeModal">Tutup</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2pdf from "html2pdf.js";

export default {
  data() {
    return {
      nomineeViewed: {},
      showNomineeModal: false,
    };
  },
  filters: {
    formatNumberWithCommas(value) {
      if (!value) return "";
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
  },
  methods: {
    createBase64ImageUrl(base64) {
      return "data:image/png;base64," + base64;
    },
    viewNomineeDetails(nominee) {
      this.nomineeViewed = { ...nominee };
      this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
      this.showNomineeModal = true;
    },
    closeNomineeModal() {
      this.showNomineeModal = false;
    },

  },
}
</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 */
 }

 .info-label {
   display: inline-block;
   width: 100px;
 }

 .info-separator {
   display: inline-block;
   width: 5px;
 }

 .info-value {
   display: inline-block;
 }

 .small-text {
   font-size: 1.0rem;
   /* or try 0.85rem if you want even smaller */
 }

 .watermark {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 60mm;
   /* adjust size */
   opacity: 0.08;
   transform: translate(-50%, -50%);
   z-index: 0;
 }

 /* ===== CUSTOM CARD SIZE ===== */
 .kad-keahlian {
   width: 93mm;
   padding: 0;
   /* adjust size */
   height: 60mm;
   /* adjust size */
   border-radius: 12px;
   border: 3px solid #3252f0;
   background: #F2F3F4;
   /* background: linear-gradient(135deg, #f2f2f2 50%, #413e3e 50%);// /* WHITE BACKGROUND */
   position: relative;
   overflow: hidden;
   font-family: Arial, sans-serif;
   position: relative;
   /* standard card width */
   padding: 8mm;
   box-sizing: border-box;
   font-weight: bold;
   font-size: 14px;
   background-color: #fff;
 }

 /* ===== WATERMARK LOGO ONLY ===== */
 .kad-keahlian::before {
   content: "";
   position: absolute;
   /* background: url('/images/KOPKB_Final.png') no-repeat center; */
   background-size: 100%;
   /* adjust watermark size */
   opacity: 0.08;
   /* faint watermark */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 }

 /* Title */
 .kad-title {
   text-align: center;
   font-size: 14px;
   font-weight: bold;
   color: #004aad;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
   position: relative;
   z-index: 5;
 }

 /* Content layout */
 .kad-content {
   display: flex;
   padding: 0;
   gap: 10px;
   margin-top: 5px;
   position: relative;
   z-index: 5;
   /* background-color: #5d8aa8; your desired background color */
   border-radius: 18px;
   /* optional: rounded corners */
 }

 .kad-details {
   font-size: 11px;
   font-weight: bold;
 }

 .kad-details div {
   margin-bottom: 4px;
 }

 /* Hide print button during printing */
 .member-details {
   font-family: Arial, sans-serif;
   font-weight: bold;
   font-size: 13px;
   line-height: 1.4;
   display: flex;
   flex-direction: column;
   /* vertical stacking */
   gap: 2mm;
 }

 .detail-label {
   display: inline-block;
 }
</style>