unknown
141 lines
3.1 KiB
Vue
141 lines
3.1 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<h4>Jawatan</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()">
|
|
Kemaskini Keputusan<i class="fa fa-refresh"></i>
|
|
</button>
|
|
</center>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<h4>Keputusan</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> |