KoPKB/E-Vote
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updatekad_ui

Browse Source
This commit is contained in:
hayatie
2025-12-08 15:55:43 +08:00
parent d33224ef8a
commit 57cb5d0053
1 changed files with 197 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/voter/home/index.vue
+130 -26
View File
@@ -1,4 +1,8 @@
<template>
<div class="row col-md-10 col-md-offset-1">
<!-- Banner -->
<div class="text-center mb-4">
@@ -49,19 +53,19 @@
<!-- Membership Card -->
<div class="kad-keahlian">
<div class="kad-logo" style="margin: 1px 0; text-align: center;">
<!-- Vertical MEMBER CARD on left -->
<div class="member-card-vertical">MEMBER CARD </div>
<!-- Top-right logo -->
<div class="kad-logo" style="text-align: right; margin: 0; padding: 0;">
<img src="/images/logo_kad.png" alt="Logo"
style="width: 130px; height: auto; filter: drop-shadow(3px 3px 4px black);">
style="width: 124px; height: auto; filter: drop-shadow(3px 3px 4px black); margin-right: 0;">
</div>
<div class="no-anggota" style="text-align: right; ">
<span class="detail-label" style="font-size: 10px;">NO ANGGOTA:</span>
<span class="detail-value" style="font-size: 11px;">{{ data.user.no_anggota }}</span>
</div>
<br>
<div class="kad-title">KAD KEANGGOTAAN <br> KOPERASI</div>
<div class="kad-content">
<img src="images/KOPKB_Final.png" class="watermark" alt="Watermark">
<br>
<div class="member-details">
<div class="detail-item">
<span class="detail-label">NAMA:</span>
@@ -72,14 +76,28 @@
<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 class="detail-item">
<svg id="barcode" class="detail-value">{{ data.user.no_kp }}</svg>
</div>
</div>
</div>
<!-- <div class="contact-info">
<p>admin@koppkb.com <i class="bi bi-envelope"></i></p> <br>
<p>09-7414331 <i class="bi bi-telephone"></i></p><br>
<p>09-7414334 <i class="bi bi-printer-fill"></i></p><br>
<p>www.koppkb.com <i class="bi bi-globe"></i></p>
</div> -->
</div>
</div>
@@ -109,8 +127,7 @@
<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;">
<img :src="createBase64ImageUrl(nominee.photo)" class="thumbnail" style="height: 60px; width: 60px;">
</td>
<td>{{ nominee.no_calon }}</td>
<td>{{ nominee.name }}</td>
@@ -162,24 +179,32 @@
</template>
<script>
import JsBarcode from "jsbarcode";
export default {
data() {
return {
// NOMINEE SECTION
nomineeViewed: {},
showNomineeModal: false,
previewData: {},
showPreview: false,
// BARCODE SECTION
noKp: ""
};
},
filters: {
formatNumberWithCommas(value) {
if (!value) return "";
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
mounted() {
if (this.data?.user?.no_kp) {
this.noKp = this.data.user.no_kp; // set noKp
this.generateBarcode();
}
},
methods: {
// -------------------------------
// NOMINEE FUNCTIONS
// -------------------------------
viewNomineeDetails(nominee) {
this.nomineeViewed = { ...nominee };
this.nomineeViewed.photo = this.createBase64ImageUrl(nominee.photo);
@@ -192,6 +217,20 @@ export default {
createBase64ImageUrl(photo) {
return `data:image/jpeg;base64,${photo}`;
},
// -------------------------------
// BARCODE FUNCTION
// -------------------------------
generateBarcode() {
if (!this.noKp) return;
JsBarcode("#barcode", this.noKp, {
format: "CODE128",
width: 1.3,
height: 30,
displayValue: false // hides text below the barcode
});
}
}
};
@@ -325,7 +364,7 @@ export default {
.kad-keahlian {
width: 93mm;
width: 88mm;
/* padding: 0; */
/* adjust size */
height: 60mm;
@@ -343,9 +382,40 @@ export default {
font-weight: bold;
font-size: 13px;
color: whitesmoke;
background: linear-gradient(90deg, rgba(23, 76, 97, 1) 0%, rgba(37, 48, 105, 1) 50%, rgba(36, 35, 34, 1) 100%);
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
background-image: url('/images/kad_bg.jpeg');
/* path to your image */
background-size: cover;
/* cover whole div */
}
.kad-logo {
position: absolute;
/* place inside kad-anggota */
top: 10px;
/* distance from top */
right: 10px;
/* distance from right */
}
.member-card-vertical {
position: absolute;
top: 20px;
left: 0;
writing-mode: vertical-rl;
/* makes text vertical from top to bottom */
text-orientation: mixed;
/* normal letters upright */
font-weight: bold;
font-size: 17px;
letter-spacing: 2px;
/* space between letters */
padding: 5px;
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
.kad-keahlian::before {
content: "";
@@ -360,10 +430,15 @@ export default {
height: 100%;
}
.kad-keahlian:hover {
transform: scale(1.03);
transition: 0.2s ease;
}
.kad-title {
text-align: center;
font-size: 13px;
font-size: 12px;
font-weight: bold;
color: white;
text-shadow: 3px 3px 4px rgb(244, 241, 241);
@@ -373,12 +448,13 @@ export default {
.member-details {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 13px;
font-weight: normal;
font-size: 12px;
line-height: 1.4;
display: flex;
flex-direction: column;
gap: 2mm;
margin-left: 35px;
}
@@ -396,14 +472,15 @@ export default {
}
.kad-details {
font-size: 11px;
font-weight: bold;
font-size: 10px;
font-weight: normal;
margin-bottom: 4px;
display: flex;
flex-direction: column;
gap: 4px;
}
.kad-details .row {
display: flex;
justify-content: space-between;
@@ -418,6 +495,11 @@ export default {
text-align: left;
}
#barcode {
transform: scaleX(2.0);
/* 1.0 = normal, 2.0 = 2x longer */
transform-origin: left;
}
.detail-label {
@@ -438,4 +520,26 @@ export default {
z-index: 10;
/* keeps text above watermark */
}
.contact-info i {
/* Bootstrap primary blue */
margin-right: 6px; text-align: right; /* right-align text next to barcode */
font-size: 6px;
line-height: 1.3;
font-weight: normal;
}/* space between icon and text */
/* .kad-bottom {
display: flex;
justify-content: space-between; /* barcode left, contact info right */
/* align-items: flex-end; /* align vertically at bottom */
/* padding: 10px; */
/* .contact-info i {
margin-right: 4px;
color: #f5f6f7;
font-size: 6px;
} */
</style>