From b8ae06e62ba8f77f87ff9cac7784df584db1f12d Mon Sep 17 00:00:00 2001
From: nurafrinaalimi16 <nurafrinaalimi16@gmail.com>
Date: Tue, 16 Apr 2024 09:28:15 +0800
Subject: [PATCH] add gambar nominee on voting page

---
 .../js/components/demo/voter/home/vote.vue    | 56 +++++++++++--------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/resources/assets/js/components/demo/voter/home/vote.vue b/resources/assets/js/components/demo/voter/home/vote.vue
index 656f45c..bea47dc 100644
--- a/resources/assets/js/components/demo/voter/home/vote.vue
+++ b/resources/assets/js/components/demo/voter/home/vote.vue
@@ -7,28 +7,25 @@
 				<li class="list-group-item" v-for="position in data.positions">
 					<b>{{ position.name }} : </b>
 				</li>
-                <ul class="list-group">
-                    <li class="list-group-item" v-for="nominee_id in selected[0].nominee_id">
-                        <b> - {{ getSelectedNomineeName(nominee_id) }}</b>
-                    </li>
-                </ul>
-
-				<!-- <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) }}
+				<ul class="list-group">
+					<li class="list-group-item" v-for="nominee_id in selected[0].nominee_id">
+						<b> - {{ getSelectedNomineeName(nominee_id) }}</b>
 					</li>
-				</ul> -->
+				</ul>
 
 				<li class="list-group-item">
 					<center>
-						<button class="btn btn-success" @click="util.showModal('#vote-modal')">Submit Vote</button>
-						<button class="btn btn-default" @click="reset()">Reset</button>
+						<button class="btn btn-success" @click="util.showModal('#vote-modal')">Hantar</button>
+						<!-- <button class="btn btn-default" @click="reset()">Reset</button> -->
 					</center>
 				</li>
 			</ul>
 		</div>
 		<div class="col-md-8">
 			<h4>Pilih Calon</h4>
+			<div class="alert alert-warning " role="alert">
+				Boleh mengundi (2) calon sahaja!
+			</div>
 			<hr />
 			<div class="panel panel-info" v-for="position in data.positions">
 				<div class="panel-heading">{{ position.name }}</div>
@@ -37,8 +34,9 @@
 						<thead>
 							<tr>
 								<th></th>
-								<th>Name</th>
-								<th>No. Anggota</th>
+								<th>Bil.</th>
+								<th></th>
+								<th>Nama</th>
 								<th>Unit</th>
 							</tr>
 						</thead>
@@ -47,8 +45,11 @@
 								:key="nominee.id">
 								<td><input type="checkbox" :id="nominee.id" @change="vote(position.id, nominee.id)" />
 								</td>
+								<td>{{ nominee.no_calon }}</td>
+								<td><img @click="view(i)" :src="createBase64ImageUrl(nominee.photo)" class="thumbnail"
+										style="height: 60px;width: 60px;" />
+								</td>
 								<td>{{ nominee.name }}</td>
-								<td>{{ nominee.no_anggota }}</td>
 								<td>{{ nominee.unit }}</td>
 							</tr>
 						</tbody>
@@ -62,17 +63,17 @@
 			<div class="modal-dialog" role="document">
 				<div class="modal-content">
 					<div class="modal-header">
-						<h5 class="modal-title" id="exampleModalLabel">AGM</h5>
+						<h5 class="modal-title" id="exampleModalLabel"></h5>
 						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
 							<span aria-hidden="true">&times;</span>
 						</button>
 					</div>
 					<div class="modal-body">
-						<h3>Nota: You can only vote once, so vote wisely.</h3>
+						<h5>Nota: Sila pastikan anda telah membuat undian dengan betul.</h5>
 					</div>
 					<div class="modal-footer">
-						<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-						<button type="button" class="btn btn-primary" @click="submit()">Submit Vote</button>
+						<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
+						<button type="button" class="btn btn-primary" @click="submit()">Hantar</button>
 					</div>
 				</div>
 			</div>
@@ -132,7 +133,7 @@ export default {
 					if (vm.util.showResult(response, 'success')) {
 						vm.data.result = response.data.result;
 						vm.$router.push({ name: 'Voter Home' });
-                        $('.modal').modal('hide');
+						$('.modal').modal('hide');
 					}
 				})
 				.catch(error => {
@@ -176,9 +177,9 @@ export default {
 			console.log(this.selected[0])
 		},
 
-        getSelectedNomineeName: function(id) {
+		getSelectedNomineeName: function (id) {
 			return this.getNominee(id);
-        },
+		},
 
 		getName: function (id) {
 			let positions = this.data.positions;
@@ -194,7 +195,7 @@ export default {
 			let positions = this.data.positions;
 			let nominees = this.data.nominees;
 			for (var i in nominees)
-				if (nominees[i]['id']==id) return nominees[i].name;
+				if (nominees[i]['id'] == id) return nominees[i].name;
 			return '';
 		},
 
@@ -211,6 +212,15 @@ export default {
 			return 'No Partylist';
 		},
 
+		view: function (index) {
+			this.x = this.data.nominees[index];
+			this.util.showModal('#nominee-information-modal');
+		},
+
+		createBase64ImageUrl: function (base64ImageData) {
+			return "data:image/png;base64," + base64ImageData;
+		}
+
 		// uncheck: function (checkedName) {
 		// 	this.checkedName = this.checkedNames.filter(name => name !== checkedName);
 		// }