initialize project
This commit is contained in:
Afrina Alimi
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<form id="add_form" @submit.prevent="add()">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm_password">Confirm Password</label>
|
||||
<input type="password" name="confirm_password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-info"/>
|
||||
<router-link :to="{name: 'Manage Account'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: () => ({
|
||||
loading: false
|
||||
}),
|
||||
|
||||
methods:{
|
||||
add: function () {
|
||||
if (this.loading || !this.isPasswordMatch()) return;
|
||||
var vm = this;
|
||||
this.loading = true;
|
||||
this.util.notify('Adding Admin', 'loading');
|
||||
axios.post(config.API+'admin', $('#add_form').serialize())
|
||||
.then(response=>{
|
||||
vm.loading = false;
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name: 'Manage Account'});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
vm.loading = false;
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error')
|
||||
})
|
||||
},
|
||||
|
||||
isPasswordMatch: function () {
|
||||
var isMatch = $('[name=password]').val() == $('[name=confirm_password]').val();
|
||||
if (!isMatch) this.util.notify('Password not match', 'error');
|
||||
return isMatch;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container col-md-8 col-md-offset-2">
|
||||
<h4>Manage Account</h4>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Manage Account');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Update Account</h4>
|
||||
<form @submit.prevent="edit()" id="edit_form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" :value="data.user.name" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail</label>
|
||||
<input type="email" name="email" class="form-control" :value="data.user.email" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-info"/>
|
||||
<router-link :to="{name: 'Update Password'}" class="btn btn-default">Change Password</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
refreshUser: function () {
|
||||
var vm = this;
|
||||
axios.get(config.API+'admin/'+this.data.user.id)
|
||||
.then(response=>{
|
||||
vm.data.user = response.data;
|
||||
})
|
||||
},
|
||||
|
||||
edit: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Updating account', 'loading');
|
||||
axios.put(config.API+'admin/'+this.data.user.id, $('#edit_form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.refreshUser();
|
||||
vm.$router.push({name:'Admin Home'});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error, 'error')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body table-responsive">
|
||||
|
||||
<div class="form-group">
|
||||
<router-link :to="{name: 'Add Account'}" class="btn btn-success">
|
||||
<i class="fa fa-plus"></i> Add Account</router-link>
|
||||
<button class="btn btn-default" @click="refreshAdmin()">
|
||||
<i class="fa fa-refresh"></i> Refresh</button>
|
||||
</div>
|
||||
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="admin in data.admins">
|
||||
<td>{{ admin.id }}</td>
|
||||
<td>{{ admin.name }}</td>
|
||||
<td>{{ admin.email }}</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" @click="id=admin.id;util.showModal('#delete-admin-modal')">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<modal id="delete-admin-modal">
|
||||
<modal-header>Delete Admin</modal-header>
|
||||
<modal-body>
|
||||
<h3>Are you sure to delete this admin?</h3>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button @click="deleteAdmin()" class="btn btn-danger">Delete</button>
|
||||
<button @click="util.hideModal('#delete-admin-modal')" class="btn btn-default">Cancel</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
|
||||
data: () => ({
|
||||
id:0
|
||||
}),
|
||||
|
||||
created: function () {
|
||||
this.refreshAdmin();
|
||||
},
|
||||
|
||||
methods: {
|
||||
deleteAdmin: function () {
|
||||
this.util.hideModal('#delete-admin-modal');
|
||||
this.util.notify('Deleting admin', 'loading');
|
||||
var vm = this;
|
||||
axios.delete(config.API+'admin/'+this.id)
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success'))
|
||||
vm.refreshAdmin();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
},
|
||||
|
||||
refreshAdmin: function () {
|
||||
this.util.notify('Refreshing admin', 'loading');
|
||||
var vm = this;
|
||||
axios.get(config.API+'admin')
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if (response.data.status == 'failed')
|
||||
vm.util.showResult(response, 'success');
|
||||
else
|
||||
vm.data.admins = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Update Password</h4>
|
||||
<form @submit.prevent="edit()" id="edit_form">
|
||||
<div class="form-group">
|
||||
<label for="old_password">Old Password</label>
|
||||
<input type="password" name="old_password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">New Password</label>
|
||||
<input type="password" name="password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm_password">Confirm Password</label>
|
||||
<input type="password" name="confirm_password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-info"/>
|
||||
<router-link :to="{name: 'Update Account'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit: function () {
|
||||
if (this.loading || !this.checkPassword()) return;
|
||||
var vm = this;
|
||||
vm.loading = true;
|
||||
vm.util.notify('Updating Password', 'loading');
|
||||
axios.put(config.API+'admin/password/'+this.data.user.id, $('#edit_form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(response, 'success');
|
||||
vm.$router.push({name:'Admin Home'});
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
},
|
||||
|
||||
checkPassword: function () {
|
||||
var isMatch = $("[name=password]").val() == $("[name=confirm_password]").val();
|
||||
if (!isMatch) {
|
||||
this.util.notify('Password not match', 'error');
|
||||
}
|
||||
return isMatch;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,112 @@
|
||||
<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%">Student ID</th>
|
||||
<th width="30%">Name</th>
|
||||
<th width="20%">Partylist</th>
|
||||
<th width="20%">Course</th>
|
||||
<th width="20%">Votes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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)['name'] }}</td>
|
||||
<td>{{ getPartylist(getNominee(result.nominee_id)['partylist_id']) }}</td>
|
||||
<td>{{ getNominee(result.nominee_id)['course'] }}</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.course }}</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>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container col-md-8 col-md-offset-2">
|
||||
<h4>Manage Election</h4>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Manage Election');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4> Recent Elections</h4>
|
||||
<div class="form-group">
|
||||
<button class="btn btn-success" v-if="data.election.status == 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">
|
||||
View Results
|
||||
</router-link>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Election Name</th>
|
||||
<th>Election Start</th>
|
||||
<th>Election End</th>
|
||||
<th>View</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="election in data.elections">
|
||||
<td>{{ election.id }}</td>
|
||||
<td>{{ election.name }}</td>
|
||||
<td>{{ election.start}}</td>
|
||||
<td>{{ election.end}}</td>
|
||||
<td>
|
||||
<router-link :to="{name: 'Election Result', params:{election_id:election.id}}" class="btn btn-info">View Result</router-link></td>
|
||||
</tr>
|
||||
<tr v-if="data.elections.length < 1">
|
||||
<td colspan="5">No elections yet</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="start" id="start_form">
|
||||
<modal id="start-election-modal">
|
||||
<modal-header>Start Election</modal-header>
|
||||
<modal-body>
|
||||
<div class="form-group">
|
||||
<label for="name">Election Name</label>
|
||||
<input type="text" name="name" class="form-control" placeholder="(Optional)"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Confirm Password</label>
|
||||
<input type="password" name="password" class="form-control" required/>
|
||||
</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 @submit.prevent="stop" id="stop_form">
|
||||
<modal id="stop-election-modal">
|
||||
<modal-header>Stop Election</modal-header>
|
||||
<modal-body>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Election Name</label>
|
||||
<input type="text" name="name" :value="data.election.name" class="form-control" placeholder="(Optional)"/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Confirm Password</label>
|
||||
<input type="password" name="password" class="form-control" required/>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: ()=>({
|
||||
start_date: null
|
||||
}),
|
||||
created: function () {
|
||||
this.refreshElection();
|
||||
var vm = this;
|
||||
setInterval(()=>{
|
||||
vm.start_date = moment(vm.data.election.start).fromNow();
|
||||
},1000);
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
stop: function () {
|
||||
var vm = this;
|
||||
this.util.hideModal('#stop-election-modal');
|
||||
this.util.notify('Stopping Election', 'loading');
|
||||
axios.post(config.API+'election/stop', $('#stop_form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response,'success')) {
|
||||
vm.refreshElection();
|
||||
vm.data.election =response.data.election;
|
||||
vm.data.positions = [];
|
||||
vm.data.partylists = [];
|
||||
vm.data.voters = [];
|
||||
vm.data.nominees = [];
|
||||
vm.data.results = [];
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
},
|
||||
|
||||
start: function () {
|
||||
var vm = this;
|
||||
this.util.hideModal('#start-election-modal');
|
||||
this.util.notify('Loading please wait', 'loading');
|
||||
axios.post(config.API+'election/start', $('#start_form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if(vm.util.showResult(response, 'success')){
|
||||
vm.refreshElection();
|
||||
vm.data.election = response.data.election;
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
},
|
||||
|
||||
refreshElection: function(){
|
||||
this.util.notify('Refreshing Election', 'loading');
|
||||
var vm = this;
|
||||
axios.get(config.API+'election')
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.data.elections = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h4>Positions</h4><hr/>
|
||||
<ul class="list-group">
|
||||
<router-link :key="position.id" v-for="position in data.positions" class="list-group-item" :class="{'active':position.id==position_id}" tag="li" :to="{query:{position_id:position.id}}" exact replace>
|
||||
{{ position.name }}
|
||||
</router-link>
|
||||
<li class="list-group-item">
|
||||
<center>
|
||||
<button class="btn btn-info" @click="refreshNominees()">
|
||||
Refresh results <i class="fa fa-refresh"></i>
|
||||
</button>
|
||||
</center>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h4>Results</h4><hr/>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">{{ getPosition(position_id) }} - Results as of : {{ last_update }}</div>
|
||||
<div class="panel-body">
|
||||
<div id="chart" style="height: 300px; width: 300px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
|
||||
created: function () {
|
||||
console.log(this)
|
||||
this.refreshNominees();
|
||||
this.$nextTick(function(){
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
|
||||
watch: {
|
||||
position_id : function () {
|
||||
this.initChart();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
refreshNominees: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing results', 'loading');
|
||||
axios.get(config.API+'nominee')
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.data.nominees = response.data;
|
||||
vm.refreshResults();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
},
|
||||
|
||||
refreshResults: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing results', 'loading');
|
||||
axios.get(config.API+'election/results')
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.data.results = response.data;
|
||||
vm.data.last_update= new Date();
|
||||
vm.initChart();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
},
|
||||
|
||||
initChart: function () {
|
||||
$.plot($('#chart'), this.datas, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
innerRadius: 0.5
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getPosition: function (id) {
|
||||
let positions = this.data.positions;
|
||||
for (var i in positions)
|
||||
if (id == positions[i]['id']) return positions[i]['name'];
|
||||
return '';
|
||||
},
|
||||
|
||||
getNominee: function (id) {
|
||||
let nominees = this.data.nominees;
|
||||
for (var i in nominees)
|
||||
if (id == nominees[i]['id']) return nominees[i]['name'];
|
||||
return '';
|
||||
},
|
||||
|
||||
getVotes: function (id) {
|
||||
let results = this.data.results;
|
||||
for (var i in results) {
|
||||
if (results[i]['nominee_id'] == id) return results[i]['votes'];
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
last_update: function () {
|
||||
let x = this.data.last_update;
|
||||
return x.toDateString() +' '+x.toLocaleTimeString();
|
||||
},
|
||||
|
||||
position_id: function () {
|
||||
return this.$route.query.position_id ?
|
||||
this.$route.query.position_id :
|
||||
this.data.positions[0]['id'];
|
||||
},
|
||||
|
||||
datas: function () {
|
||||
//var results =
|
||||
var data = [];
|
||||
var nominees = this.data.nominees;
|
||||
for (var i in nominees) {
|
||||
if (nominees[i]['position_id']== this.position_id){
|
||||
let row = [];
|
||||
row['label'] = nominees[i]['name'];
|
||||
row['data'] = [[1, this.getVotes(nominees[i]['id'])]];
|
||||
data.push(row);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="!loading">
|
||||
<nav class="navbar navbar-default navbar-fixed-top" id="nav">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" :href="data.baseURL" >Voting System</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="myNavbar">
|
||||
|
||||
<ul class="nav navbar-nav">
|
||||
|
||||
<router-link :to="{name: 'Admin Home'}" tag="li" exact><a href="#">Home</a></router-link>
|
||||
|
||||
<router-link :to="{name: 'Manage Position'}" tag="li">
|
||||
<a href="#">Jawatan</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Manage Partylist'}" tag="li">
|
||||
<a href="#">Manage Partylist</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Manage Voter'}" tag="li">
|
||||
<a href="#">Ahli Koperasi</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Manage Nominee'}" tag="li">
|
||||
<a href="#">Calon</a>
|
||||
</router-link>
|
||||
|
||||
</ul>
|
||||
<ul class="nav navbar-right navbar-nav">
|
||||
<li class="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
role="button" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="fa fa-user"></span> {{ data.user.name }} <span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
|
||||
<router-link :to="{name:'Update Account'}" tag="li" exact>
|
||||
<a href="#">Update Account</a>
|
||||
</router-link>
|
||||
|
||||
<router-link :to="{name: 'Manage Account'}" tag="li" v-if="data.user.id==1">
|
||||
<a href="#">Manage Account</a>
|
||||
</router-link>
|
||||
|
||||
<li @click="logout()"><a>Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div v-if="loading" class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Loading <i class="fa fa-refresh fa-spin"></i></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
|
||||
data: () =>({
|
||||
loading: true
|
||||
}),
|
||||
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Administrator');
|
||||
var vm = this;
|
||||
if (this.util.isLogin()) {
|
||||
this.util.setAuthorization();
|
||||
axios.get(config.API+'admin/information')
|
||||
.then(response=>{
|
||||
console.log(response);
|
||||
vm.data.user = response.data.user;
|
||||
vm.data.election = response.data.election;
|
||||
vm.data.partylists = response.data.partylist;
|
||||
vm.data.positions = response.data.position;
|
||||
vm.loading = false;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
if (this.util.showResult(error) == 401) {
|
||||
vm.logout();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$router.push({name:'Admin Login'});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
logout: function () {
|
||||
localStorage.clear();
|
||||
this.$router.push({name: 'Admin Login'});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body{
|
||||
padding: 70px 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="col-md-5 col-md-offset-3">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4>Admin Login</h4>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<form @submit.prevent="login" id="login_form">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail</label>
|
||||
<input type="email" name="email" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" class="form-control" id="password" required/>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="visibility"
|
||||
onclick=" $(this)[0].checked ?
|
||||
$('#password').attr('type','text'):
|
||||
$('#password').attr('type','password')"/> Show Password
|
||||
</label>
|
||||
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="submit"
|
||||
class="btn btn-primary form-control"
|
||||
:class="{'disabled': loading.isLoading}"
|
||||
:value="loading.value"/>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
loading: {
|
||||
value: 'Login',
|
||||
isLoading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
if (this.util.isLogin())
|
||||
return this.$router.push({name:'Admin Home'})
|
||||
this.util.setTitle('Admin Login');
|
||||
},
|
||||
|
||||
methods: {
|
||||
login: function () {
|
||||
if (this.loading.isLoading) return;
|
||||
|
||||
let vm = this;
|
||||
|
||||
this.startLoading();
|
||||
|
||||
axios.post(config.API+'admin/login', $('#login_form').serialize())
|
||||
.then(response => {
|
||||
vm.stopLoading();
|
||||
if (this.util.showResult(response, 'success')) {
|
||||
localStorage['Access Token'] = `Bearer ${response.data.token}`;
|
||||
this.util.setAuthorization();
|
||||
vm.$router.push({name: 'Admin Home'});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
vm.stopLoading();
|
||||
this.util.showResult(error, 'error');
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
startLoading: function () {
|
||||
this.util.notify('Logging in', 'loading');
|
||||
this.loading = {
|
||||
value: 'Loading...',
|
||||
isLoading: true
|
||||
}
|
||||
},
|
||||
|
||||
stopLoading: function () {
|
||||
$.notifyClose();
|
||||
this.loading = {
|
||||
value: 'Login',
|
||||
isLoading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 50px 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<form
|
||||
class="row"
|
||||
method="POST"
|
||||
id="add_form"
|
||||
:action="data.API+'nominee'"
|
||||
enctype="mutlipart/formdata"
|
||||
@submit.prevent="add()">
|
||||
<div class="col-md-4">
|
||||
<uploader file-name="image" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="student_id">Student ID</label>
|
||||
<input type="text" name="student_id" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="course">Course</label>
|
||||
<input type="text" name="course" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="motto">Motto</label>
|
||||
<input type="text" name="motto" class="form-control" placeholder="(Optional)" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea name="description" class="form-control" placeholder="(Optional)"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="position_id">Position</label>
|
||||
<select class="form-control" v-model="position_id" name="position_id" required>
|
||||
<option value="0" disabled>--- Select Position ---</option>
|
||||
<option v-for="position in data.positions" :value="position.id">{{ position.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="partylist_id">Partylist</label>
|
||||
<select class="form-control" name="partylist_id">
|
||||
<option value="">--- Select Partylist (Optional) ---</option>
|
||||
<option v-for="partylist in data.partylists" :value="partylist.id">{{ partylist.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group pull-right">
|
||||
<input type="submit" value="Submit" class="btn btn-info">
|
||||
<router-link
|
||||
:to="{name:'Manage Nominee', query:{position_id:position_id}}"
|
||||
class="btn btn-default">
|
||||
Submit
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
add: function () {
|
||||
if (this.loading) return;
|
||||
var vm = this;
|
||||
this.loading = true;
|
||||
this.util.notify('Adding Nominee', 'progress', 0);
|
||||
$('#add_form').ajaxSubmit({
|
||||
success: function (response) {
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success', 'ajax'))
|
||||
vm.$router.push({name: 'Manage Nominee'});
|
||||
},
|
||||
error: function (error) {
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error, 'error', 'ajax');
|
||||
},
|
||||
uploadProgress: function (a, b, c, progress) {
|
||||
vm.util.notify('Adding Nominee', 'progress', progress);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
position_id: {
|
||||
get: function () {
|
||||
return this.$route.query.position_id;
|
||||
},
|
||||
|
||||
set: function (id) {
|
||||
this.$router.replace({query: {position_id: id}});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<form
|
||||
method="POST"
|
||||
class="row"
|
||||
id="edit_form"
|
||||
:action="data.API+'nominee/'+id"
|
||||
enctype="multipart/form-data"
|
||||
@submit.prevent="edit()">
|
||||
<input type="hidden" name="_method" value="PUT"/>
|
||||
|
||||
<div class="col-md-4">
|
||||
<uploader file-name="image" :image-src="data.storageURL+nominee.image"/>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" :value="nominee.name" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="student_id">Student ID</label>
|
||||
<input type="text" name="student_id" class="form-control" :value="nominee.student_id" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="course">Course</label>
|
||||
<input type="text" name="course" class="form-control" :value="nominee.course" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="motto">Motto</label>
|
||||
<input type="text" name="motto" class="form-control" :value="nominee.motto" placeholder="(Optional)" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea name="description" class="form-control" placeholder="(Optional)">{{ nominee.description}}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="position_id">Position</label>
|
||||
<select class="form-control" name="position_id" :value="nominee.position_id" required>
|
||||
<option value="0" disabled>--- Select Position ---</option>
|
||||
<option v-for="position in data.positions" :value="position.id">{{ position.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="partylist_id">Partylist</label>
|
||||
<select class="form-control" name="partylist_id" :value="nominee.partylist_id">
|
||||
<option value="">--- Select Partylist (Optional) ---</option>
|
||||
<option v-for="partylist in data.partylists" :value="partylist.id">{{ partylist.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group pull-right">
|
||||
<input type="submit" value="Submit" class="btn btn-info">
|
||||
<router-link
|
||||
:to="{name:'Manage Nominee'}"
|
||||
class="btn btn-default">
|
||||
Back
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
if (!this.nominee.id)
|
||||
this.$router.push({name:'Manage Nominee'});
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit: function () {
|
||||
if (this.loading) return;
|
||||
var vm = this;
|
||||
this.loading = true;
|
||||
this.util.notify('Updating nominee', 'progress', 0);
|
||||
$('#edit_form').ajaxSubmit({
|
||||
success: function (response) {
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success', 'ajax'))
|
||||
vm.$router.push({name: 'Manage Nominee'});
|
||||
},
|
||||
error: function (error) {
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error, 'error', 'ajax');
|
||||
},
|
||||
uploadProgress: function (a, b, c, progress) {
|
||||
vm.util.notify('Updating Nominee', 'progress', progress);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
id: function () {
|
||||
return this.$route.params.id;
|
||||
},
|
||||
|
||||
nominee: function () {
|
||||
for (var i in this.data.nominees)
|
||||
if(this.data.nominees[i].id == this.id)
|
||||
return this.data.nominees[i];
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="max-width: 250px;">
|
||||
<ul class="list-group">
|
||||
<router-link
|
||||
tag="li"
|
||||
class="list-group-item"
|
||||
:to="{name: 'Manage Nominee'}"
|
||||
exact
|
||||
replace
|
||||
:class="{'active':position_id==0}">
|
||||
All Position
|
||||
</router-link>
|
||||
<router-link
|
||||
v-for="position in data.positions"
|
||||
:key="position.id"
|
||||
tag="li"
|
||||
class="list-group-item"
|
||||
:to="{query: {position_id:position.id}}"
|
||||
exact
|
||||
replace>
|
||||
{{ position.name }}
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-9 panel panel-default">
|
||||
<div class="panel-body table-responsive">
|
||||
<div class="form-group">
|
||||
<router-link :to="{name: 'Add Nominee', query:{position_id:position_id}}" class="btn btn-success"><i class="fa fa-plus"></i> Add Nominee</router-link>
|
||||
</div>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>No. Anggota</th>
|
||||
<th>Course</th>
|
||||
<th>Position</th>
|
||||
<th>Partylist</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="nominee in nominees">
|
||||
<td>
|
||||
<img :alt="nominee.name" :src="data.storageURL+nominee.image" class="thumbnail" style="height: 60px;width: 60px;">
|
||||
</td>
|
||||
<td>{{ nominee.name}}</td>
|
||||
<td>{{ nominee.student_id}}</td>
|
||||
<td>{{ nominee.course}}</td>
|
||||
<td>{{ nominee.position}}</td>
|
||||
<td>{{ nominee.partylist}}</td>
|
||||
<td>
|
||||
<router-link :to="{name: 'Edit Nominee', params:{id:nominee.id}}" class="btn btn-info">
|
||||
<i class="fa fa-edit"></i> Edit
|
||||
</router-link>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="util.showModal('#delete-nominee-modal');id=nominee.id">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="nominees.length < 1">
|
||||
<td colspan="7">No nominees</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal id="delete-nominee-modal">
|
||||
<modal-header>Delete Nominee</modal-header>
|
||||
<modal-body>
|
||||
<h3>Are you sure to delete this nominee?</h3>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button class="btn btn-danger" @click="deleteNominee()">Delete</button>
|
||||
<button class="btn btn-default" @click="util.hideModal('#delete-nominee-modal')">
|
||||
Back
|
||||
</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
this.refreshNominee();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
deleteNominee: function () {
|
||||
this.util.hideModal('#delete-nominee-modal');
|
||||
var vm = this;
|
||||
this.util.notify('Deleting nominee', 'loading');
|
||||
axios.delete(config.API+'nominee/'+this.id)
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if(vm.util.showResult(response, 'success'))
|
||||
vm.refreshNominee();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
},
|
||||
|
||||
refreshNominee: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Nominees', 'loading');
|
||||
axios.get(config.API+'nominee')
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
console.log(response);
|
||||
vm.data.nominees = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.showResult(error);
|
||||
})
|
||||
},
|
||||
|
||||
getPosition: function (id) {
|
||||
var positions = this.data.positions;
|
||||
for (var i in positions)
|
||||
if (positions[i].id == id)
|
||||
return positions[i]['name'];
|
||||
},
|
||||
|
||||
getPartylist: function (id) {
|
||||
var partylists = this.data.partylists;
|
||||
for (var i in partylists)
|
||||
if (partylists[i].id == id)
|
||||
return partylists[i]['name'];
|
||||
return 'No partylists';
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
nominees: function () {
|
||||
var nominees = [];
|
||||
var y = this.data.nominees;
|
||||
for (var nominee in this.data.nominees) {
|
||||
if (y[nominee].position_id == this.position_id || this.position_id == 0) {
|
||||
var x = y[nominee];
|
||||
x.position = this.getPosition(y[nominee].position_id);
|
||||
x.partylist = this.getPartylist(y[nominee].partylist_id);
|
||||
nominees.push(x);
|
||||
}
|
||||
}
|
||||
return nominees;
|
||||
},
|
||||
|
||||
position_id: function () {
|
||||
return this.$route.query.position_id ? this.$route.query.position_id : 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container col-md-10 col-md-offset-1">
|
||||
<h4>Manage Nominee</h4>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Manage Nominee');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Add Partylist</h4>
|
||||
<form @submit.prevent="add()" id="add-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-success">Submit</button>
|
||||
<router-link :to="{name: 'Manage Partylist'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Adding Partylist', 'loading')
|
||||
axios.post(config.API+'partylist', $('#add-form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name:'Manage Partylist', query: {refresh:true}});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Edit Partylist</h4>
|
||||
<form @submit.prevent="edit()" id="edit-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" :value="data.partylist.name" required/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-success"/>
|
||||
<router-link :to="{name: 'Manage Partylist'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
if (!this.data.partylist.id) {
|
||||
this.$router.push({name:'Manage Partylist'});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Updating partylist', 'loading');
|
||||
axios.put(config.API+'partylist/'+this.data.partylist.id, $('#edit-form').serialize())
|
||||
.then(response=>{
|
||||
vm.loading = false;
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name:'Manage Partylist', query: {refresh:true}});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="form-group">
|
||||
<router-link class="btn btn-success" :to="{name:'Add Partylist'}">
|
||||
<i class="fa fa-plus"></i> Add Partylist
|
||||
</router-link>
|
||||
<button class="btn btn-default" @click="refreshPartylist()">
|
||||
<i class="fa fa-refresh"></i> Refresh Partylist
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="partylist_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(partylist,i) in data.partylists">
|
||||
<td>{{ partylist.id }}</td>
|
||||
<td>{{ partylist.name }}</td>
|
||||
<td>
|
||||
<button class="btn btn-info" @click="edit(i)">
|
||||
<i class="fa fa-edit"></i> Edit
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="util.showModal('#delete-partylist-modal');id=partylist.id">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="data.partylists.length < 1">
|
||||
<td colspan="3">No Partylist</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal id="delete-partylist-modal">
|
||||
<modal-header>Delete Partylist</modal-header>
|
||||
<modal-body>
|
||||
<h2>Are you sure to delete Partylist?</h2>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button class="btn btn-danger" @click="deletePartylist()">Delete</button>
|
||||
<button class="btn btn-default" @click="util.hideModal('#delete-partylist-modal')">Cancel</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
if (this.$route.query.refresh) {
|
||||
this.refreshPartylist();
|
||||
this.$router.replace({name: 'Manage Partylist'});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
refreshPartylist: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Partylist', 'loading');
|
||||
axios.get(config.API+'partylist')
|
||||
.then(response=>{
|
||||
console.log(response)
|
||||
$.notifyClose();
|
||||
vm.data.partylists = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
},
|
||||
|
||||
edit: function (i) {
|
||||
var vm = this;
|
||||
this.data.partylist = this.data.partylists[i];
|
||||
this.$router.push({name: 'Edit Partylist', params:{id:vm.data.partylist.id}})
|
||||
},
|
||||
|
||||
deletePartylist: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Deleting partylist', 'loading');
|
||||
this.util.hideModal('#delete-partylist-modal');
|
||||
axios.delete(config.API+'partylist/'+this.id)
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) vm.refreshPartylist();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container col-md-8 col-md-offset-2">
|
||||
<h4>Manage Partylist</h4>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Manage Partylist');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Add Position</h4>
|
||||
<form @submit.prevent="add()" id="add-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-success">Submit</button>
|
||||
<router-link :to="{name: 'Manage Position'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Adding Position', 'loading')
|
||||
axios.post(config.API+'position', $('#add-form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name:'Manage Position', query:{refresh:true}});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Edit Position</h4>
|
||||
<form @submit.prevent="edit()" id="edit-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" :value="data.position.name" required/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-success"/>
|
||||
<router-link :to="{name: 'Manage Position'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
if (!this.data.position.id) {
|
||||
this.$router.push({name:'Manage Position'});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Updating position', 'loading');
|
||||
axios.put(config.API+'position/'+this.data.position.id, $('#edit-form').serialize())
|
||||
.then(response=>{
|
||||
vm.loading = false;
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name:'Manage Position', query:{refresh:true}});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="form-group">
|
||||
<router-link class="btn btn-success" :to="{name:'Add Position'}">
|
||||
<i class="fa fa-plus"></i> Add Position
|
||||
</router-link>
|
||||
<button class="btn btn-default" @click="refreshPosition()">
|
||||
<i class="fa fa-refresh"></i> Refresh Position
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="position_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(position,i) in data.positions">
|
||||
<td>{{ position.id }}</td>
|
||||
<td>{{ position.name }}</td>
|
||||
<td>
|
||||
<button class="btn btn-info" @click="edit(i)">
|
||||
<i class="fa fa-edit"></i> Edit
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="util.showModal('#delete-position-modal');id=position.id">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="data.positions.length < 1">
|
||||
<td colspan="3">No Positions</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<modal id="delete-position-modal">
|
||||
<modal-header>Delete Position</modal-header>
|
||||
<modal-body>
|
||||
<h2>Are you sure to delete Position?</h2>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button class="btn btn-danger" @click="deletePosition()">Delete</button>
|
||||
<button class="btn btn-default" @click="util.hideModal('#delete-position-modal')">Cancel</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
id: 0
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
if (this.$route.query.refresh) {
|
||||
this.refreshPosition();
|
||||
this.$router.replace({name: 'Manage Position'})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
refreshPosition: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Refreshing Position', 'loading');
|
||||
axios.get(config.API+'position')
|
||||
.then(response=>{
|
||||
console.log(response)
|
||||
$.notifyClose();
|
||||
vm.data.positions = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
},
|
||||
|
||||
initDatatable: function () {
|
||||
var vm = this;
|
||||
$('#position_table').DataTable({
|
||||
destroy: true,
|
||||
searching: false,
|
||||
info: false,
|
||||
autoWidth: false,
|
||||
dom: 'Bfrtip'
|
||||
});
|
||||
},
|
||||
|
||||
edit: function (i) {
|
||||
var vm = this;
|
||||
this.data.position = this.data.positions[i];
|
||||
this.$router.push({name: 'Edit Position', params:{id:vm.data.position.id}})
|
||||
},
|
||||
|
||||
deletePosition: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Deleting position', 'loading');
|
||||
this.util.hideModal('#delete-position-modal');
|
||||
axios.delete(config.API+'position/'+this.id)
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) vm.refreshPosition();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container col-md-8 col-md-offset-2">
|
||||
<h4>Manage Position</h4>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Manage Position');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<table id="sample_table" class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>A</th>
|
||||
<th>B</th>
|
||||
<th>C</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
let fakeData = [
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>'],
|
||||
['Column1', 'Column2', '<button v-on:click="x()">click me</button>']
|
||||
]
|
||||
this.$nextTick(()=>{
|
||||
$('#sample_table').dataTable({
|
||||
aaData: fakeData
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
x: function () {
|
||||
console.log('clicked');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Add Voter</h4>
|
||||
<form @submit.prevent="add()" id="add-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="student_id">Student ID</label>
|
||||
<input type="text" name="student_id" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="course">Course</label>
|
||||
<input type="text" name="course" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-success">Submit</button>
|
||||
<router-link :to="{name: 'Manage Voter'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Adding Voter', 'loading')
|
||||
axios.post(config.API+'voter', $('#add-form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name:'Manage Voter'});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Edit Voter</h4>
|
||||
<form @submit.prevent="edit()" id="edit-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" :value="data.voter.name" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="student_id">Student ID</label>
|
||||
<input type="text" name="student_id" class="form-control" :value="data.voter.student_id" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="course">Course</label>
|
||||
<input type="text" name="course" class="form-control" :value="data.voter.course" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-success"/>
|
||||
<router-link :to="{name: 'Manage Voter'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
if (!this.data.voter.id) {
|
||||
this.$router.push({name:'Manage Voter'});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Updating voter', 'loading');
|
||||
axios.put(config.API+'voter/'+this.data.voter.id, $('#edit-form').serialize())
|
||||
.then(response=>{
|
||||
vm.loading = false;
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name:'Manage Voter'});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="form-group">
|
||||
<router-link class="btn btn-success" :to="{name:'Add Voter'}">
|
||||
<i class="fa fa-plus"></i> Add Voter
|
||||
</router-link>
|
||||
<button class="btn btn-default" @click="refreshVoter()">
|
||||
<i class="fa fa-refresh"></i> Refresh Voter
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover" id="position_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Student ID</th>
|
||||
<th>Course</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(voter,i) in data.voters.data">
|
||||
<td>{{ voter.name }}</td>
|
||||
<td>{{ voter.student_id }}</td>
|
||||
<td>{{ voter.course }}</td>
|
||||
<td>
|
||||
<button class="btn btn-info" @click="edit(i)">
|
||||
<i class="fa fa-edit"></i> Edit
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="util.showModal('#delete-voter-modal');id=voter.id">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="data.voters.data && data.voters.data.length < 1">
|
||||
<td colspan="3">No Voters</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
|
||||
<modal id="delete-voter-modal">
|
||||
<modal-header>Delete Voter</modal-header>
|
||||
<modal-body>
|
||||
<h2>Are you sure to delete voter?</h2>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button class="btn btn-danger" @click="deleteVoter()">Delete</button>
|
||||
<button class="btn btn-default" @click="util.hideModal('#delete-voter-modal')">Cancel</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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);
|
||||
})
|
||||
},
|
||||
|
||||
edit: function (i) {
|
||||
var vm = this;
|
||||
this.data.voter = this.data.voters.data[i];
|
||||
this.$router.push({name: 'Edit Voter', params:{id:vm.data.voter.id}})
|
||||
},
|
||||
|
||||
deleteVoter: function () {
|
||||
var vm = this;
|
||||
this.util.notify('Deleting voter', 'loading');
|
||||
this.util.hideModal('#delete-voter-modal');
|
||||
axios.delete(config.API+'voter/'+this.id)
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) vm.refreshVoter();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error);
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container col-md-8 col-md-offset-2">
|
||||
<h4>Manage Voters</h4>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Manage Voters');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user