Skip to content

Commit

Permalink
Implement upvote on report modal view + append report data including …
Browse files Browse the repository at this point in the history 
…STEEM+SBD+AFIT payout amount and relevant data
  • Loading branch information
Greateck committed Feb 7, 2019
1 parent eed7392 commit fd80765
Showing 1 changed file with 170 additions and 4 deletions.
174 changes: 170 additions & 4 deletions components/ReportModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,66 @@
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ report.title }}</h5><br/>
<a :href="'https://busy.org/@' + report.author" target="_blank">
<h5 class="modal-author modal-title text-brand" >@{{ report.author}}</h5></a>
<h5 class="modal-author modal-title text-brand" >@{{ report.author}} <small class="text-brand numberCircle">{{ getUserRank }}</small></h5></a>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<vue-markdown class="modal-body" v-html="body"></vue-markdown>
<div class="modal-body">
<div>
<small>
<a href="#" @click.prevent="votePrompt($event)" data-toggle="modal" class="text-brand"
data-target="#voteModal" v-if="this.$parent.user && userVotedThisPost()==true">
<i class="far fa-thumbs-up"></i> {{getVoteCount }}
</a>
<a href="#" @click.prevent="votePrompt($event)" data-toggle="modal"
data-target="#voteModal" class="actifit-link-plain" v-else>
<i class="far fa-thumbs-up"></i> {{ getVoteCount }}
</a>
<i class="far fa-comments ml-2"></i> {{ report.children }}
</small>
</div>
<div class="modal-body">
<small>
{{ postPayout }}
</small>
<small>
{{ afitReward }} AFIT
</small>
</div>
</div>
<!-- adding section to display additional FULL Payout option -->
<div class="modal-body" v-if="this.meta.full_afit_pay=='on'">
<div class="col-8">
<i class="fas fa-star"></i>
<small>
Full AFIT Payout Mode
</small>
<i class="fas fa-star"></i>
</div>
<div class="col-4 text-right" v-if="!postPaid()">
<small>
Pending Pay
</small>
</div>
<div class="col-4 text-right" v-else>
<small>
{{ fullAFITReward }} AFIT
</small>
</div>
</div>
<!-- adding section to display charity info if available -->
<div class="modal-body" v-if="this.meta.charity">
<i class="fas fa-dove"></i>
<small>
Charity Post
</small>
<i class="fas fa-dove"></i>
<small>
<a :href="'https://busy.org/@' + this.meta.charity[0]" target="_blank">@{{this.meta.charity[0]}}</a>
</small>
</div>
<div class="report-comments">
</div>
</div>
Expand All @@ -21,16 +75,26 @@
<script>
import VueMarkdown from 'vue-markdown'
import steem from 'steem'
import {mapGetters} from 'vuex'
export default {
data: function(){
return {
afitReward: '',
userRank: '',
fullAFITReward: '',
postUpvoted: false,
}
},
watch: {
report : 'fetchComments'
report : 'fetchReportData'
},
props: ['report'],
components: {
VueMarkdown,
},
computed: {
...mapGetters(['newlyVotedPosts']),
body () {
let report_content = this.report.body;
Expand All @@ -48,10 +112,77 @@
/* regex to match @ words and convert them to steem user links */
let user_name = /(@([\a-zA-Z0-9-.]+)(?![\a-zA-Z0-9-.]))([,.|() ])/g;
return report_content.replace(user_name,'[$1](https://busy.org/$1)$3')
}
},
getVoteCount(){
return Array.isArray(this.report.active_votes)?this.report.active_votes.length:0;
},
meta() {
return JSON.parse(this.report.json_metadata)
},
postPayout() {
if (this.postPaid()){
return this.report.total_payout_value.replace('SBD','').replace('STEEM','')+' STEEM/SBD'
}else{
return this.report.pending_payout_value.replace('SBD','').replace('STEEM','')+' STEEM/SBD'
}
},
getUserRank() {
//proper formatting issue to display circle for smaller numbers
if (this.userRank<10){
return ' '+parseFloat(this.userRank).toFixed(1);
}else{
return parseFloat(this.userRank).toFixed(1);
}
},
},
methods: {
fetchComments () {
/* function checks to see if post reached its payout period */
postPaid() {
//compare today v/s payout date calculated based on 7 days payout time
let reportDate = new Date()
let payoutDays = 7;
let reportPayout = new Date(this.report.created);
reportPayout.setDate(reportPayout.getDate() + payoutDays);
let today = new Date();
if (today.getTime() > reportPayout.getTime()){
return true;
}
return false;
},
/* function checks if logged in user has upvoted current report */
userVotedThisPost() {
let curUser = this.$parent.user.account.name;
//check if the post contains in its original voters current user, or if it has been upvoted in current session
this.postUpvoted = this.report.active_votes.filter(voter => (voter.voter === curUser)).length > 0 || this.newlyVotedPosts.indexOf(this.report.post_id)!==-1;
console.log(this.postUpvoted);
return this.postUpvoted;
},
/* function handles confirming if the user had voted already to prevent issues */
votePrompt(e) {
//if no user is logged in, prompt to login
if (!this.$parent.user){
alert('You need to login or signup first');
e.stopPropagation();
}
//if this post is already voted by the user, we need to show a confirmation
else if (this.userVotedThisPost()){
var confirmPopup = confirm("You already had voted before on this post. Are you sure you want to change your vote?");
if (confirmPopup){
this.$store.commit('setPostToVote', this.report)
}else{
e.stopPropagation();
}
}else{
//proceed normally showing vote popup
this.$store.commit('setPostToVote', this.report)
}
},
fetchReportData () {
//function handling propagating calls to grab key report data and comment info
this.fetchReportKeyData()
this.fetchReportCommentData()
},
fetchReportCommentData () {
//handles grabbing related comments to current post
if (typeof this.report != undefined && this.report != 'undefined' && this.report != null){
console.log(this.report);
Expand All @@ -69,6 +200,24 @@
});
}
},
fetchReportKeyData () {
fetch(process.env.actiAppUrl+'getPostReward?user=' + this.report.author+'&url='+this.report.url).then(res => {
//grab the post's reward to display it properly
res.json().then(json => this.afitReward = json.token_count)}).catch(e => reject(e))
//grab the author's rank
fetch(process.env.actiAppUrl+'getRank/' + this.report.author).then(res => {
res.json().then(json => this.userRank = json.user_rank)}).catch(e => reject(e))
//grab post full pay if full pay mode enabled
fetch(process.env.actiAppUrl+'getPostFullAFITPayReward?user=' + this.report.author+'&url='+this.report.url).then(res => {
res.json().then(json => this.fullAFITReward = json.token_count)}).catch(e => reject(e))
}
},
async mounted () {
if (this.report != null){
this.fetchReportKeyData();
}
}
}
</script>
Expand All @@ -77,4 +226,21 @@
.modal-author{
margin-left: 10px !important;
}
.actifit-link-plain{
color: black;
}
.modal-author:hover, .text-brand:hover, .actifit-link-plain:hover{
text-decoration: none;
}
.numberCircle {
border-radius: 50%;
width: 10px;
line-height: 10px;
padding: 4px 2px 4px 2px;
margin-left: 4px;
background: #fff;
border: 2px solid;
text-align: center;
vertical-align:middle;
}
</style>

0 comments on commit fd80765

Please sign in to comment.