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
+50 -25
View File
@@ -3,13 +3,15 @@
<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>
@@ -33,7 +35,9 @@
<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,45 +47,65 @@
</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>
</modal-body> </div>
<modal-footer> <div class="modal-footer">
<input type="submit" class="btn btn-info" value="Start" /> <input type="submit" class="btn btn-info" value="Start" />
<input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel" /> <input type="button" data-dismiss="modal" class="btn btn-default" value="Cancel" />
</modal-footer> </div>
</modal> </div>
</div>
</div>
</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>
@@ -105,7 +129,7 @@ export default{
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 => {
@@ -128,7 +152,8 @@ 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 => {
resources/assets/js/components/demo/voter/home/vote.vue
+30 -14
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,16 +44,26 @@
</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>
@@ -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');