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

fix modal bootstrap

Browse Source
This commit is contained in:
nurafrinaalimi16
2024-03-26 15:08:52 +08:00
parent aef1324eef
commit 3ca2855c1d
2 changed files with 209 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/admin/home/index.vue
+75 -50
View File
@@ -1,15 +1,17 @@
<template> <template>
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<h4> Recent Elections</h4> <h4> Recent Elections</h4>
<div class="form-group"> <div class="form-group">
<button class="btn btn-success" v-if="data.election.status == 1" @click="util.showModal('#start-election-modal')">Start Election</button> <button class="btn btn-success" v-if="data.election.status == 1 && data.user.role==1"
@click="util.showModal('#start-election-modal')">Start Election</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 View Results
</router-link> </router-link>
<button class="btn btn-danger" v-if="data.election.status == 2" @click="util.showModal('#stop-election-modal')">End Election</button> <button class="btn btn-danger" v-if="data.election.status == 2"
@click="util.showModal('#stop-election-modal')">End Election</button>
<label v-if="data.election.status == 2">Election has Started {{ start_date }}</label> <label v-if="data.election.status == 2">Election has Started {{ start_date }}</label>
@@ -30,10 +32,12 @@
<tr v-for="election in data.elections"> <tr v-for="election in data.elections">
<td>{{ election.id }}</td> <td>{{ election.id }}</td>
<td>{{ election.name }}</td> <td>{{ election.name }}</td>
<td>{{ election.start}}</td> <td>{{ election.start }}</td>
<td>{{ election.end}}</td> <td>{{ election.end }}</td>
<td> <td>
<router-link :to="{name: 'Election Result', params:{election_id:election.id}}" class="btn btn-info">View Result</router-link></td> <router-link :to="{ name: 'Election Result', params: { election_id: election.id } }"
class="btn btn-info">View Result</router-link>
</td>
</tr> </tr>
<tr v-if="data.elections.length < 1"> <tr v-if="data.elections.length < 1">
<td colspan="5">No elections yet</td> <td colspan="5">No elections yet</td>
@@ -43,76 +47,96 @@
</div> </div>
<form @submit.prevent="start" id="start_form"> <form @submit.prevent="start" id="start_form">
<modal id="start-election-modal"> <div class="modal fade" id="start-election-modal" tabindex="-1" role="dialog"
<modal-header>Start Election</modal-header> aria-labelledby="start-election-modal" aria-hidden="true">
<modal-body> <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Start Election</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="form-group"> <div class="form-group">
<label for="name">Election Name</label> <label for="name">Election Name</label>
<input type="text" name="name" class="form-control" placeholder="(Optional)"/> <input type="text" name="name" autocomplete="on" class="form-control" placeholder="(Optional)" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Confirm Password</label> <label for="password">Confirm Password</label>
<input type="password" name="password" class="form-control" required/> <input type="password" name="password" class="form-control" required />
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-info" value="Start" />
<input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel" />
</div>
</div>
</div>
</div> </div>
</modal-body>
<modal-footer>
<input type="submit" class="btn btn-info" value="Start"/>
<input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel"/>
</modal-footer>
</modal>
</form> </form>
<form @submit.prevent="stop" id="stop_form"> <form @submit.prevent="stop" id="stop_form">
<modal id="stop-election-modal"> <div class="modal fade" id="stop-election-modal" tabindex="-1" role="dialog"
<modal-header>Stop Election</modal-header> aria-labelledby="stop-election-modal" aria-hidden="true">
<modal-body> <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Stop Election</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="form-group"> <div class="form-group">
<label for="name">Election Name</label> <label for="name">Election Name</label>
<input type="text" name="name" :value="data.election.name" class="form-control" placeholder="(Optional)"/> <input type="text" name="name" :value="data.election.name" autocomplete="on" class="form-control" placeholder="(Optional)" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">Confirm Password</label> <label for="password">Confirm Password</label>
<input type="password" name="password" class="form-control" required/> <input type="password" name="password" autocomplete="on" class="form-control" required />
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-info" value="Stop Election" />
<input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel" />
</div>
</div>
</div>
</div> </div>
</modal-body>
<modal-footer>
<input type="submit" class="btn btn-danger" value="Stop Election"/>
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel"/>
</modal-footer>
</modal>
</form> </form>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default{ export default {
data: ()=>({ data: () => ({
start_date: null start_date: null
}), }),
created: function () { created: function () {
this.refreshElection(); this.refreshElection();
var vm = this; var vm = this;
setInterval(()=>{ setInterval(() => {
vm.start_date = moment(vm.data.election.start).fromNow(); vm.start_date = moment(vm.data.election.start).fromNow();
},1000); }, 1000);
}, },
methods: { methods: {
stop: function () { stop: function () {
var vm = this; var vm = this;
this.util.hideModal('#stop-election-modal'); // this.util.hideModal('#stop-election-modal');
this.util.notify('Stopping Election', 'loading'); this.util.notify('Stopping Election', 'loading');
axios.post(config.API+'election/stop', $('#stop_form').serialize()) axios.post(config.API + 'election/stop', $('#stop_form').serialize())
.then(response=>{ .then(response => {
$.notifyClose(); $.notifyClose();
if (vm.util.showResult(response,'success')) { if (vm.util.showResult(response, 'success')) {
vm.refreshElection(); vm.refreshElection();
vm.data.election =response.data.election; vm.data.election = response.data.election;
vm.data.positions = []; vm.data.positions = [];
vm.data.partylists = []; vm.data.partylists = [];
vm.data.voters = []; vm.data.voters = [];
@@ -120,7 +144,7 @@ export default{
vm.data.results = []; vm.data.results = [];
} }
}) })
.catch(error=>{ .catch(error => {
$.notifyClose(); $.notifyClose();
vm.util.showResult(error, 'error'); vm.util.showResult(error, 'error');
}) })
@@ -128,31 +152,32 @@ export default{
start: function () { start: function () {
var vm = this; var vm = this;
this.util.hideModal('#start-election-modal'); // this.util.hideModal('#start-election-modal');
console.log('this');
this.util.notify('Loading please wait', 'loading'); this.util.notify('Loading please wait', 'loading');
axios.post(config.API+'election/start', $('#start_form').serialize()) axios.post(config.API + 'election/start', $('#start_form').serialize())
.then(response=>{ .then(response => {
$.notifyClose(); $.notifyClose();
if(vm.util.showResult(response, 'success')){ if (vm.util.showResult(response, 'success')) {
vm.refreshElection(); vm.refreshElection();
vm.data.election = response.data.election; vm.data.election = response.data.election;
} }
}) })
.catch(error=>{ .catch(error => {
$.notifyClose(); $.notifyClose();
vm.util.showResult(error, 'error'); vm.util.showResult(error, 'error');
}) })
}, },
refreshElection: function(){ refreshElection: function () {
this.util.notify('Refreshing Election', 'loading'); this.util.notify('Refreshing Election', 'loading');
var vm = this; var vm = this;
axios.get(config.API+'election') axios.get(config.API + 'election')
.then(response=>{ .then(response => {
$.notifyClose(); $.notifyClose();
vm.data.elections = response.data; vm.data.elections = response.data;
}) })
.catch(error=>{ .catch(error => {
$.notifyClose(); $.notifyClose();
vm.util.showResult(error, 'error'); vm.util.showResult(error, 'error');
}) })
resources/assets/js/components/demo/voter/home/vote.vue
+39 -23
View File
@@ -1,7 +1,8 @@
<template> <template>
<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>Vote Information</h4><hr/> <h4>Vote Information</h4>
<hr />
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item" v-for="position in data.positions"> <li class="list-group-item" v-for="position in data.positions">
<b>{{ position.name }} : </b>{{ getName(position.id) }} <b>{{ position.name }} : </b>{{ getName(position.id) }}
@@ -15,7 +16,8 @@
</ul> </ul>
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<h4>Select Candidates</h4><hr/> <h4>Select Candidates</h4>
<hr />
<div class="panel panel-info" v-for="position in data.positions"> <div class="panel panel-info" v-for="position in data.positions">
<div class="panel-heading">{{ position.name }}</div> <div class="panel-heading">{{ position.name }}</div>
<div class="panel-body table-responsive"> <div class="panel-body table-responsive">
@@ -29,7 +31,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="nominee in data.nominees" v-if="nominee.position_id==position.id" @click="vote(position.id,nominee.id)"> <tr v-for="nominee in data.nominees" v-if="nominee.position_id==position.id"
@click="vote(position.id,nominee.id)">
<td><input type="radio" :name="position.id" :id="nominee.id"/></td> <td><input type="radio" :name="position.id" :id="nominee.id"/></td>
<td>{{ nominee.name }}</td> <td>{{ nominee.name }}</td>
<td>{{ getPartylist(nominee.partylist_id) }}</td> <td>{{ getPartylist(nominee.partylist_id) }}</td>
@@ -41,25 +44,35 @@
</div> </div>
</div> </div>
<modal id="vote-modal"> <div class="modal fade" id="vote-modal" tabindex="-2" role="dialog" aria-labelledby="exampleModalLabel"
<modal-header>Vote</modal-header> aria-hidden="true">
<modal-body> <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Vote</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>Note: You can only vote once, so vote wisely.</h3> <h3>Note: You can only vote once, so vote wisely.</h3>
</modal-body> </div>
<modal-footer> <div class="modal-footer">
<button class="btn btn-success" @click="submit()">Submit Vote</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" @click="submit()">Submit Vote</button>
</modal-footer> </div>
</modal> </div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
export default{ export default {
created: function () { created: function () {
if (this.data.result.length > 0 || this.data.election.status != 2) if (this.data.result.length > 0 || this.data.election.status != 2)
this.$router.push({name: 'Voter Home'}) this.$router.push({ name: 'Voter Home' })
for (var i in this.data.positions) { for (var i in this.data.positions) {
this.selected.push({ this.selected.push({
position_id: this.data.positions[i]['id'], position_id: this.data.positions[i]['id'],
@@ -76,9 +89,12 @@ export default{
}, },
methods: { methods: {
test: function(){
console.log('tab');
this.util.showModal('#vote-modal')
},
submit: function () { submit: function () {
this.util.hideModal('#vote-modal'); // this.util.hideModal('#vote-modal');
if (this.hasNullVote()) return; if (this.hasNullVote()) return;
var vm = this; var vm = this;
this.util.notify('Submitting your vote, please wait...', 'loading'); this.util.notify('Submitting your vote, please wait...', 'loading');
@@ -87,9 +103,9 @@ export default{
axios.post(config.API+'election/vote', data) axios.post(config.API+'election/vote', data)
.then(response=>{ .then(response=>{
$.notifyClose(); $.notifyClose();
if (vm.util.showResult(response, 'success')){ if (vm.util.showResult(response, 'success')) {
vm.data.result = response.data.result; vm.data.result = response.data.result;
vm.$router.push({name: 'Voter Home'}); vm.$router.push({ name: 'Voter Home' });
} }
}) })
@@ -103,7 +119,7 @@ export default{
hasNullVote: function () { hasNullVote: function () {
let selected = this.selected; let selected = this.selected;
for (var i in selected) for (var i in selected)
if (selected[i]['nominee_id'] == null){ if (selected[i]['nominee_id'] == null) {
this.util.notify('You must vote on all position', 'error'); this.util.notify('You must vote on all position', 'error');
return true; return true;
} }
@@ -112,7 +128,7 @@ export default{
reset: function () { reset: function () {
let selected = this.selected; let selected = this.selected;
for (var i in selected){ for (var i in selected) {
$('#'+selected[i]['nominee_id']).selected(false); $('#'+selected[i]['nominee_id']).selected(false);
selected[i]['nominee_id'] = null; selected[i]['nominee_id'] = null;
} }
@@ -144,7 +160,7 @@ export default{
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';
} }
} }