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

Merge branch 'finadev' of https://gitlab.com/erahn/voting into Hayatie

Browse Source
This commit is contained in:
hayatie
2024-04-22 10:25:32 +08:00
parent 842f4a2386 4c0415dcb2
commit 86be94def2
12 changed files with 600 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/API/v1/Voter/GetController.php
+1 -1
View File
@@ -11,6 +11,6 @@ class GetController extends Controller
{ {
public function __invoke() public function __invoke()
{ {
return Voter::where('election_id', Util::getCurrentElection())->paginate(10); return Voter::where('election_id', Util::getCurrentElection())->paginate(50);
} }
} }
config/onewaysms.php
+2 -2
View File
@@ -1,8 +1,8 @@
<?php <?php
return [ return [
'message' => 'KoPKB : %s is your TAC to log in to your myKoPKB Member account. It will expire in 3 minutes.', 'message' => 'KoPKB : %s is your TAC to log in to your myKoPKB Member account. It will expire in 1 minutes.',
'minutes' => 3 'minutes' => 1
]; ];
?> ?>
resources/assets/js/components/demo/admin/home/final.vue
+47 -40
View File
@@ -1,48 +1,47 @@
<template> <template>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div v-for="position in positions"> <div v-for="position in positions">
<h5>{{ position.name }}</h5> <h5>{{ position.name }}</h5>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped table-condensed"> <table class="table table-striped table-condensed">
<thead> <thead>
<tr> <tr>
<th width="10%">No. Anggota</th> <th width="20%">No. Anggota</th>
<th width="30%">Nama</th> <th width="30%">Nama</th>
<th width="20%">Partylist</th> <th width="20%">Unit</th>
<th width="20%">Unit</th> <th width="10%">Undian</th>
<th width="20%">Undian</th> <th width="20%">Peratus (%)</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="result in results" v-if="result.position_id==position.id"> <tr v-for="result in results" v-if="result.position_id == position.id">
<td>{{ getNominee(result.nominee_id)['student_id'] }}</td> <td>{{ getNominee(result.nominee_id)['no_anggota'] }}</td>
<td>{{ getNominee(result.nominee_id)['name'] }}</td> <td>{{ getNominee(result.nominee_id)['name'] }}</td>
<td>{{ getPartylist(getNominee(result.nominee_id)['partylist_id']) }}</td> <td>{{ getNominee(result.nominee_id)['unit'] }}</td>
<td>{{ getNominee(result.nominee_id)['Unit'] }}</td> <td>{{ result.votes }}</td>
<td>{{ result.votes}}</td> <td>{{ calculatePercentage(result.votes, position.id) }}</td>
</tr> </tr>
<tr v-for="no_vote in no_votes" v-if="no_vote.position_id==position.id"> <tr v-for="no_vote in no_votes" v-if="no_vote.position_id == position.id">
<td>{{ no_vote.student_id }}</td> <td>{{ no_vote.no_anggota }}</td>
<td>{{ no_vote.name }}</td> <td>{{ no_vote.name }}</td>
<td>{{ getPartylist(no_vote.partylist_id) }}</td> <td>{{ no_vote.unit }}</td>
<td>{{ no_vote.unit }}</td> <td>0</td>
<td>0</td> </tr>
</tr> </tbody>
</tbody> </table>
</table> </div>
<hr />
</div> </div>
<hr/>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default{ export default {
data: function() { data: function () {
return { return {
nominees: [], nominees: [],
results: [], results: [],
@@ -66,21 +65,29 @@ export default{
if (id == partylists[i]['id']) if (id == partylists[i]['id'])
return partylists[i]['name']; return partylists[i]['name'];
return 'No Partylist'; return 'No Partylist';
},
calculatePercentage(votes, positionId) {
const totalVotes = this.results
.filter(result => result.position_id === positionId)
.reduce((total, result) => total + result.votes, 0);
return ((votes / totalVotes) * 100).toFixed(2);
} }
}, },
created: function () { created: function () {
this.util.notify('Loading please wait...', 'loading'); this.util.notify('Loading please wait...', 'loading');
var vm = this; var vm = this;
axios.get(config.API+'election/result/'+this.election_id) axios.get(config.API + 'election/result/' + this.election_id)
.then(response=>{ .then(response => {
$.notifyClose(); $.notifyClose();
vm.nominees = response.data.nominee; vm.nominees = response.data.nominee;
vm.results = response.data.result; vm.results = response.data.result;
vm.partylists = response.data.partylist; vm.partylists = response.data.partylist;
vm.positions = response.data.position; vm.positions = response.data.position;
}) })
.catch(error=>{ .catch(error => {
$.notifyClose(); $.notifyClose();
vm.util.showResult(error, 'error'); vm.util.showResult(error, 'error');
}) })
resources/assets/js/components/demo/admin/home/index.vue
+10 -10
View File
@@ -1,19 +1,19 @@
<template> <template>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<h4> Undian Terkini</h4> <h4>Undian Terkini</h4>
<div class="form-group"> <div class="form-group">
<button class="btn btn-success" v-if="data.election.status == 1 && data.user.role==1" <button class="btn btn-success" v-if="data.election.status == 1 && data.user.role==1"
@click="util.showModal('#start-election-modal')">Undian bermula</button> @click="util.showModal('#start-election-modal')">Mula Undian</button>
<router-link :to="{ name: 'Current Result' }" class="btn btn-info" v-if="data.election.status == 2"> <router-link :to="{ name: 'Current Result' }" class="btn btn-info" v-if="data.election.status == 2">
View Results Papar Keputusan
</router-link> </router-link>
<button class="btn btn-danger" v-if="data.election.status == 2" <button class="btn btn-danger" v-if="data.election.status == 2"
@click="util.showModal('#stop-election-modal')">End Election</button> @click="util.showModal('#stop-election-modal')">Tamat Undian</button>
<label v-if="data.election.status == 2">Undian bermula {{ start_date }}</label> <label v-if="data.election.status == 2">Undian bermula {{ start_date }}</label>
</div> </div>
@@ -22,10 +22,10 @@
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Election Name</th> <th>Nama Undian</th>
<th>Election Start</th> <th>Undian Mula</th>
<th>Election End</th> <th>Undian Tamat</th>
<th>View</th> <th>Papar</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -36,7 +36,7 @@
<td>{{ election.end }}</td> <td>{{ election.end }}</td>
<td> <td>
<router-link :to="{ name: 'Election Result', params: { election_id: election.id } }" <router-link :to="{ name: 'Election Result', params: { election_id: election.id } }"
class="btn btn-info">View Result</router-link> class="btn btn-info">Keputusan Undian</router-link>
</td> </td>
</tr> </tr>
<tr v-if="data.elections.length < 1"> <tr v-if="data.elections.length < 1">
resources/assets/js/components/demo/admin/index.vue
+1 -1
View File
@@ -16,7 +16,7 @@
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<!-- {{ users }} --> <!-- {{ users }} -->
<router-link :to="{name: 'Admin Home'}" tag="li" exact><a href="#">LAMAN UTAMA </a></router-link> <router-link :to="{name: 'Admin Home'}" tag="li" exact><a href="#">Laman Utama</a></router-link>
<router-link :to="{name: 'Kemaskini Jawatan'}" v-if="data.user.role==1" tag="li"> <router-link :to="{name: 'Kemaskini Jawatan'}" v-if="data.user.role==1" tag="li">
<a href="#">JAWATAN</a> <a href="#">JAWATAN</a>
</router-link> </router-link>
resources/assets/js/components/demo/admin/voter/index.vue
+3 -1
View File
@@ -9,13 +9,14 @@
<i class="fa fa-plus"></i> Tambah Pengundi <i class="fa fa-plus"></i> Tambah Pengundi
</router-link> </router-link>
<button class="btn btn-default" @click="refreshVoter()"> <button class="btn btn-default" @click="refreshVoter()">
<i class="fa fa-refresh"></i> Kemaskini <i class="fa fa-refresh"></i> Kemaskini Pengundi
</button> </button>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover" id="position_table"> <table class="table table-hover" id="position_table">
<thead> <thead>
<tr> <tr>
<th>Bil.</th>
<th>Nama Anggota</th> <th>Nama Anggota</th>
<th>No. Kad Pengenalan</th> <th>No. Kad Pengenalan</th>
<th>No. Anggota</th> <th>No. Anggota</th>
@@ -27,6 +28,7 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="(voter,i) in data.voters.data"> <tr v-for="(voter,i) in data.voters.data">
<td>{{ i + 1 }}</td>
<td>{{ voter.name }}</td> <td>{{ voter.name }}</td>
<td>{{ voter.no_kp }}</td> <td>{{ voter.no_kp }}</td>
<td>{{ voter.no_anggota }}</td> <td>{{ voter.no_anggota }}</td>
resources/assets/js/components/demo/admin/voter/kehadiran.vue
+187
View File
@@ -0,0 +1,187 @@
<template>
<div class="panel panel-default">
<div class="panel-body">
<button class="btn btn-success" @click="refreshVoter()">
<i class="fa fa-refresh"></i> Kemaskini Pengundi
</button>
<button class="btn btn-primary" @click="downloadPDF()">
<i class="fa fa-download"></i> Muat Turun PDF
</button>
<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 Fizikal attendees -->
<template v-for="(voter, i) in data.voters.data">
<tr v-if="voter.kehadiran === 1">
<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>
<!-- Display Maya attendees -->
<template v-for="(voter, i) in data.voters.data">
<tr v-if="voter.kehadiran === 2">
<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>
<template v-for="(voter, i) in data.voters.data">
<tr v-if="voter.kehadiran === 0">
<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>{{ attendancePercentage }}% Kehadiran Pengundi</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>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
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 '-';
}
},
downloadPDF() {
const table = document.getElementById('voterTable');
html2canvas(table).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('kehadiran-pengundi.pdf');
});
},
},
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
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);
}
}
}
</script>
resources/assets/js/components/demo/admin/voter/viewkehadiran.vue
+113
View File
@@ -0,0 +1,113 @@
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<div v-for="position in positions">
<h5>{{ position.name }}</h5>
<div class="table-responsive">
<table class="table table-striped table-condensed">
<thead>
<tr>
<th width="10%">No. Anggota</th>
<th width="30%">Name</th>
<th width="20%">No. Kad Pengenalan</th>
<th width="20%">Unit</th>
<th width="20%">No. Telefon</th>
<th width="20%">Kehadiran</th>
</tr>
</thead>
<tbody>
<tr v-for="result in results" v-if="result.position_id==position.id">
<td>{{ getVoter(result.nominee_id)['no_anggota'] }}</td>
<td>{{ getNominee(result.nominee_id)['name'] }}</td>
<td>{{ getPartylist(getNominee(result.nominee_id)['partylist_id']) }}</td>
<td>{{ getNominee(result.nominee_id)['unit'] }}</td>
<td>{{ result.votes}}</td>
</tr>
<tr v-for="no_vote in no_votes" v-if="no_vote.position_id==position.id">
<td>{{ no_vote.student_id }}</td>
<td>{{ no_vote.name }}</td>
<td>{{ getPartylist(no_vote.partylist_id) }}</td>
<td>{{ no_vote.unit }}</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
<hr/>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
data: function() {
return {
nominees: [],
results: [],
partylists: [],
positions: []
}
},
methods: {
getNominee: function (id) {
let nominees = this.nominees;
for (var i in nominees)
if (id == nominees[i]['id'])
return nominees[i];
return {};
},
getPartylist: function (id) {
let partylists = this.partylists;
for (var i in partylists)
if (id == partylists[i]['id'])
return partylists[i]['name'];
return 'No Partylist';
}
},
created: function () {
this.util.notify('Loading please wait...', 'loading');
var vm = this;
axios.get(config.API+'election/result/'+this.election_id)
.then(response=>{
$.notifyClose();
vm.nominees = response.data.nominee;
vm.results = response.data.result;
vm.partylists = response.data.partylist;
vm.positions = response.data.position;
})
.catch(error=>{
$.notifyClose();
vm.util.showResult(error, 'error');
})
},
computed: {
election_id: function () {
return this.$route.params.election_id;
},
no_votes: function () {
let nominees = this.nominees;
let results = this.results;
let no_votes = [];
for (var i in nominees) {
var hasvote = false;
for (var y in results) {
if (results[y]['nominee_id'] == nominees[i]['id'])
hasvote = true;
}
if (!hasvote)
no_votes.push(nominees[i]);
}
return no_votes;
}
}
}
</script>
resources/assets/js/components/demo/voter/home/attendance.vue
+14 -5
View File
@@ -16,7 +16,8 @@
<div class="form-group"> <div class="form-group">
<label for="no_anggota">No. Anggota : </label> <label for="no_anggota">No. Anggota : </label>
<input type="text" name="no_anggota" class="form-control" readonly :value="data.user.no_anggota" required /> <input type="text" name="no_anggota" class="form-control" readonly :value="data.user.no_anggota"
required />
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -37,7 +38,8 @@
<p> <i>*Pendaftaran online sehingga jam 10 pagi</i></p> <p> <i>*Pendaftaran online sehingga jam 10 pagi</i></p>
</div> </div>
<center><input type="submit" value="SAYA TERIMA" class="btn btn-primary" v-if="data.election.status==1"/></center> <center><input type="submit" value="SAYA TERIMA" class="btn btn-primary"
v-if="data.election.status == 1 && data.user.kehadiran == 0" /></center>
</form> </form>
</div> </div>
</div> </div>
@@ -49,19 +51,24 @@
export default { export default {
data: function () { data: function () {
return { return {
loading: false loading: false,
userSubmitted: false // Add a flag to track if the user has already submitted
} }
}, },
methods: { methods: {
// refreshUser: function () { // refreshUser: function () {
// var vm = this; // var vm = this;
// axios.get(config.API + 'voter/' + this.data.user.id) // axios.get(config.API + 'voter/' + this.data.user.id)
// .then(response => { // .then(response => {
// vm.data.user = response.data; // vm.data.user = response.data;
// console.log(response.data)
// }) // })
// }, // },
edit: function () { edit: function () {
if (this.loading) return; if (this.loading) return;
this.loading = true; this.loading = true;
@@ -72,8 +79,10 @@ export default {
$.notifyClose(); $.notifyClose();
vm.loading = false; vm.loading = false;
if (vm.util.showResult(response, 'success')) { if (vm.util.showResult(response, 'success')) {
vm.refreshUser(); // vm.refreshUser();
vm.$router.push({ name: 'Voter Home' }); location.reload();
} }
}) })
.catch(error => { .catch(error => {
resources/assets/js/components/demo/voter/home/index.vue
+200 -205
View File
@@ -1,223 +1,218 @@
<template> <template>
<<<<<<< HEAD <div class="row col-md-10 col-md-offset-1">
<div class="row col-md-10 col-md-offset-1"> <div class="col-md-4">
<div class="col-md-4"> <h4>Maklumat Anggota</h4>
<h4>Maklumat Anggota</h4><hr/> <hr />
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"><b>No. Kad Pengenalan : </b>{{ data.user.no_kp }}</li> <li class="list-group-item"><b>Nama : </b>{{ data.user.name }}</li>
<li class="list-group-item"><b>No. Anggota : </b>{{ data.user.no_anggota }}</li> <li class="list-group-item"><b>No. Kad Pengenalan : </b>{{ data.user.no_kp }}</li>
<li class="list-group-item"><b>Nama : </b>{{ data.user.name }}</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>Unit : </b>{{ data.user.unit }}</li>
<li class="list-group-item"><b>Saham : </b>{{ data.user.saham }}</li> <li class="list-group-item"><b>Saham : </b>{{ data.user.saham }}</li>
<li class="list-group-item"><b>Yuran : </b>{{ data.user.yuran }}</li> <li class="list-group-item"><b>Yuran : </b>{{ data.user.yuran }}</li>
<li class="list-group-item" v-if="data.election.status==1"> <li class="list-group-item" v-if="data.election.status == 1">
<center>Undian belum bermula</center> <center>Undian belum bermula</center>
</li> </li>
<li class="list-group-item" v-if="data.election.status==2"> <li class="list-group-item" v-if="data.election.status == 2 && !hasVoted()">
<center> <center>
<router-link v-if="!hasVoted()" :to="{name: 'Vote'}" class="btn btn-info"> <router-link v-if="data.user.saham >= 500" :to="{ name: 'Vote' }" class="btn btn-info">
Undi Sekarang Undi Sekarang
</router-link> </router-link>
<router-link v-else :to="{name: 'Result'}" class="btn btn-info"> <div v-else class="alert alert-danger" role="alert">
Papar Keputusan Saham minima tidak mencukupi untuk pengundian
</router-link> </div>
</center> </center>
</li> </li>
</ul> </ul>
<div v-if="hasVoted()"> <div v-if="hasVoted()">
<hr/> <hr />
<h4>Your votes information</h4><hr/> <h4>Maklumat Undian Anda</h4>
======= <hr />
<div class="row col-md-10 col-md-offset-1"> <ul class="list-group">
<div class="col-md-4"> <li class="list-group-item" v-for="result in data.result">
<h4>Maklumat Anggota</h4> <b>{{ getPosition(result.position_id) }} : </b>{{ getNominee(result.nominee_id) }}
<hr /> </li>
>>>>>>> 5d1d05717ec58a685bba0b6393ad934904cba077 </ul>
<ul class="list-group"> </div>
<li class="list-group-item"><b>Nama : </b>{{ data.user.name }}</li> </div>
<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>{{ data.user.saham }}</li>
<li class="list-group-item"><b>Yuran : </b>{{ data.user.yuran }}</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">
<center>
<router-link v-if="data.user.saham >= 500 && !hasVoted()" :to="{ name: 'Vote' }"
class="btn btn-info">
Undi Sekarang
</router-link>
<div v-else class="alert alert-danger" role="alert">
Saham minima tidak mencukupi untuk pengundian
</div>
</center>
</li>
</ul>
<<<<<<< HEAD
</div>
</div>
<div class="col-md-8"> <div class="col-md-8">
<h4>Maklumat Calon</h4><hr/> <h4>Maklumat Calon</h4>
<small>Click Picture to see details</small> <hr />
<div class="panel panel-primary" v-for="position in data.positions"> <!-- <small>Click Picture to see details</small> -->
<div class="panel-heading">{{ position.name }}</div> <div class="panel panel-primary" v-for="position in data.positions">
<div class="panel-body table-responsive"> <div class="panel-heading">{{ position.name }}</div>
<table class="table table-hover"> <div class="panel-body table-responsive">
<thead> <table id="table-nominee" class="table table-hover">
<tr> <thead>
<th></th> <tr>
<th>Nama</th> <th></th>
<th>Unit</th> <th>Nama</th>
<th>Taraf Pendidikan</th> <th>No. Anggota</th>
<th>Pengalaman Kerja </th> <th>Unit</th>
</tr> <th>Taraf Pendidikan</th>
</thead> <th>Pengalaman Kerja </th>
<tbody> </tr>
<tr v-for="(nominee,i) in data.nominees" v-if="nominee.position_id==position.id"> </thead>
<td><img <tbody>
@click="view(i)" <tr v-for="(nominee, i) in data.nominees" v-if="nominee.position_id == position.id"
:src="createBase64ImageUrl(nominee.photo)" v-on:click="viewNomineeDetails(nominee)">
class="thumbnail" <td><img @click="view(nominee, i)" :src="createBase64ImageUrl(nominee.photo)"
style="height: 60px;width: 60px;" /> class="thumbnail" style="height: 60px;width: 60px;" />
</td> </td>
<td>{{ nominee.name }}</td> <td>{{ nominee.name }}</td>
<td>{{ nominee.unit }}</td> <td>{{ nominee.no_anggota }}</td>
<td>{{ nominee.education}}</td> <td>{{ nominee.unit }}</td>
<td>{{ nominee.experience}}</td> <td>{{ nominee.education }}</td>
</tr> <td>{{ nominee.experience }}</td>
</tbody> </tr>
</table> </tbody>
======= </table>
<div v-if="hasVoted()"> </div>
<hr /> </div>
<h4>Maklumat Undian Anda</h4> </div>
<hr /> <div id="view-nominee-modal" class="modal" tabindex="-1">
<ul class="list-group"> <div class="modal-dialog">
<li class="list-group-item" v-for="result in data.result"> <div class="modal-content">
<b>{{ getPosition(result.position_id) }} : </b>{{ getNominee(result.nominee_id) }} <div class="modal-header">
</li> <h5 class="modal-title" style="display: inline;">Maklumat Calon</h5>
</ul> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
>>>>>>> 5d1d05717ec58a685bba0b6393ad934904cba077 <span aria-hidden="true">&times;</span>
</div> </button>
</div> </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> Name : </b>{{ nomineeViewed.name }}</span>
<span><b> Unit : </b>{{ nomineeViewed.unit }}</span>
<span><b> Education : </b>{{ nomineeViewed.education }}</span>
<span><b> Experience : </b>{{ nomineeViewed.experience }}</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<h4>Maklumat Calon</h4>
<hr />
<!-- <small>Click Picture to see details</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 class="table table-hover">
<thead>
<tr>
<th></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">
<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>
<td>{{ nominee.education }}</td>
<td>{{ nominee.experience }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<modal id="nominee-information-modal" aClass="primary">
<modal-header>{{ header }}</modal-header>
<modal-body>
<div class="row">
<div class="col-md-3">
<img :src="data.storageURL + x.image" style="height: 150px; width: 150px"
class="thumbnail" />
</div>
<div class="col-md-9" style="margin-left: 5px;">
<h3><strong><em>"{{ x.motto }}"</em></strong></h3>
<b> Name : </b>{{ x.name }}<br />
<b> Unit : </b>{{ x.unit }}<br />
<b> education : </b>{{ getPartylist(x.education) }}<br />
<hr />
{{ x.experience }}
</div>
</div>
</modal-body>
<modal-footer>
<button data-dismiss="modal" class="btn btn-default">Close</button>
</modal-footer>
</modal>
</div>
</div>
</template> </template>
<script> <script>
import { R } from '@bachdgvn/vue-otp-input';
export default { export default {
created: function () { created: function () {
//console.log(this) //console.log(this)
}, },
data: function () { data: function () {
return { return {
x: {} x: {},
} selectedNomineeId: null,
}, nomineeViewed: {},
}
},
methods: { methods: {
hasVoted: function () { hasVoted: function () {
return this.data.result.length > 0; return this.data.result.length > 0;
}, },
getPartylist: function (id) { getPartylist: function (id) {
let partylists = this.data.partylists; let partylists = this.data.partylists;
for (var i in partylists) for (var i in partylists)
if (partylists[i]['id'] == id) return partylists[i]['name']; if (partylists[i]['id'] == id) return partylists[i]['name'];
return 'No Partylist'; return 'No Partylist';
}, },
getPosition: function (id) { getPosition: function (id) {
let positions = this.data.positions; let positions = this.data.positions;
for (var i in positions) for (var i in positions)
if (positions[i].id == id) return positions[i].name; if (positions[i].id == id) return positions[i].name;
return ''; return '';
}, },
getNominee: function (id) { getNominee: function (id) {
let nominees = this.data.nominees; let nominees = this.data.nominees;
for (var i in 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 ''; return '';
}, },
view: function (index) { view: function (nominee, index) {
this.x = this.data.nominees[index]; this.x = nominee;
this.util.showModal('#nominee-information-modal'); this.selectedNomineeId = index; // Assuming index is the ID
}, this.util.showModal('#nominee-information-modal');
},
createBase64ImageUrl: function (base64ImageData) { createBase64ImageUrl: function (base64ImageData) {
return "data:image/png;base64," + 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); computed: {
} header: function () {
} return this.x.name + ' for ' + this.getPosition(this.x.position_id);
}
}
} }
</script> </script>
<style>
#view-nominee-modal .modal-dialog {
width: 850px;
}
#view-nominee-modal .nominee-viewed-photo {
height:320px;
width:280px;
}
#view-nominee-modal .content {
display: flex;
}
#view-nominee-modal .photo-section {
flex: 4;
}
#view-nominee-modal .detail-section {
flex: 8;
}
#view-nominee-modal span {
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 18px;
}
#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>
resources/assets/js/components/demo/voter/home/vote.vue
+19 -15
View File
@@ -24,7 +24,7 @@
<div class="col-md-8"> <div class="col-md-8">
<h4>Pilih Calon</h4> <h4>Pilih Calon</h4>
<div class="alert alert-warning " role="alert"> <div class="alert alert-warning " role="alert">
Boleh mengundi (2) calon sahaja! Boleh mengundi <b> dua (2) calon</b> sahaja!
</div> </div>
<hr /> <hr />
<div class="panel panel-info" v-for="position in data.positions"> <div class="panel panel-info" v-for="position in data.positions">
@@ -161,21 +161,25 @@ export default {
selected[i]['nominee_id'] = null; selected[i]['nominee_id'] = null;
} }
}, },
vote: function (position_id, nominee_id) { vote: function (position_id, nominee_id) {
if (!this.selected[0]['position_id']) { if (!this.selected[0]['position_id']) {
this.$set(this.selected[0], position_id, []); this.$set(this.selected[0], position_id, []);
} }
const index = this.selected[0]['nominee_id'].indexOf(nominee_id); const index = this.selected[0]['nominee_id'].indexOf(nominee_id);
if (index === -1) { if (index === -1) {
// Nominee not found, add it // Nominee not found, add it
this.selected[0]['nominee_id'].push(nominee_id); if (this.selected[0]['nominee_id'].length < 2) {
} else { this.selected[0]['nominee_id'].push(nominee_id);
// Nominee found, remove it } else {
this.selected[0]['nominee_id'].splice(index, 1); // Display warning message if more than 2 nominees are selected
} this.util.notify('Boleh mengundi (2) calon sahaja!', 'warning');
console.log(this.selected[0]) }
}, } else {
// Nominee found, remove it
this.selected[0]['nominee_id'].splice(index, 1);
}
console.log(this.selected[0])
},
getSelectedNomineeName: function (id) { getSelectedNomineeName: function (id) {
return this.getNominee(id); return this.getNominee(id);
resources/assets/js/components/demo/voter/index.vue
+3 -1
View File
@@ -39,7 +39,9 @@
<a href="#"><b>UNDIAN</b></a> <a href="#"><b>UNDIAN</b></a>
</router-link> </router-link>
<!-- <router-link :to="{name: 'Result'}" v-if="data.election.status==2 && hasVoted()" tag="li">
<a href="#">Keputusan</a>
</router-link> -->
</ul> </ul>
<ul class="nav navbar-right navbar-nav"> <ul class="nav navbar-right navbar-nav">