Skip to content

GitLab

Commit 786d7309 authored by Bitcoin Please's avatar Bitcoin Please
Browse files

Updated supporters.

parent b52301f6
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 116 deletions
src/views/Campaign/Details/Content.vue
View file @ 786d7309
......@@ -70,23 +70,27 @@
<span></span>
</div>
<div class="process-info">
<div class="process-funded">
<span>$10000</span>funding goal
<div class="row process-info">
<div class="col">
<span>{{fundingGoal}}</span>
funding goal
</div>
<div class="process-pledged">
<span>$100</span>pledged
<div class="col">
<span>{{fundingPledged}}</span>
pledged
</div>
<div class="process-time">
<span>2</span>supporters
<div class="col">
<span>{{numSupporters}}</span>
supporters
</div>
<div class="process-time">
<span>1</span>days ago
<div class="col">
<span>{{lastUpdate}}</span>
{{lastUpdateSuffix}}
</div>
</div>
</div>
</div>
<div v-if="showActions" class="button">
......@@ -117,9 +121,8 @@
import { mapGetters } from 'vuex'
/* Import modules. */
import DOMPurify from 'dompurify'
import QRCode from 'qrcode'
import showdown from 'showdown'
import Nito from 'nitojs'
import numeral from 'numeral'
/* Import components. */
import Assurance from './Content/Assurance'
......@@ -164,6 +167,8 @@ export default {
},
data: () => {
return {
usd: null,
pledgeAmount: null,
name: null,
comment: null,
......@@ -314,43 +319,6 @@ export default {
}
},
/**
* QR Code
*
* Used with direct donations.
*/
qr() {
if (!this.pledgeAddress) {
return null
}
/* Initialize (string) value. */
let strValue = ''
/* Initialize scanner parameters. */
const params = {
type: 'svg',
width: 225,
height: 225,
color: {
dark: '#000',
light: '#fff'
}
}
QRCode.toString(this.pledgeAddress, params, (err, value) => {
if (err) {
return console.error('QR Code ERROR:', err)
}
/* Set (string) value. */
strValue = value
})
/* Return (string) value. */
return strValue
},
/**
* Owner Label
*/
......@@ -483,50 +451,63 @@ export default {
return Buffer.from(JSON.stringify(json)).toString('base64')
},
},
methods: {
/**
* Cleaner
*
* Uses DOM Purify to sanitize HTML.
* (source: https://github.com/cure53/DOMPurify)
* Funding Goal
*/
cleaner(_html) {
/* Return cleaned HTML. */
return DOMPurify.sanitize(_html)
fundingGoal() {
if (this.campaign && this.campaign.assurance) {
/* Set recipients. */
const recipients = this.campaign.assurance.recipients
/* Validate recipients. */
if (!recipients) {
return '$0.00'
}
const calc = (recipients[0].satoshis / 100000000 * this.usd)
return numeral(calc).format('$0,0[.]00')
}
return 'n/a'
},
/**
* Markdown Manager
*
* Generates HTML from markdown and vice-versa.
* (source: https://github.com/showdownjs/showdown)
* Funding Pledged
*/
markdown(_content) {
/* Initialize converter. */
const converter = new showdown.Converter()
fundingPledged() {
if (this.campaign && this.campaign.assurance) {
/* Set recipients. */
const recipients = this.campaign.assurance.recipients
/* Validate recipients. */
if (!recipients) {
return '$0.00'
}
/* Set converter to GitHub Flavored Markdown (GFM). */
converter.setFlavor('github')
// FOR DEV ONLY
const calc = (recipients[0].satoshis / 100000000 * this.usd) / 2.5
/* Generate HTML content. */
const html = converter.makeHtml(_content)
// console.log('HTML', html)
return numeral(calc).format('$0,0[.]00')
}
/* Sanitize HTML content. */
// const sanitized = this.cleaner(html)
return 'n/a'
},
/* Format HTML. */
// NOTE: Display fixes, probably related to our CSS.
const sanitized = html
.replace(/<ol>/gi, `<ol class="markdown-ul">`)
.replace(/<ul>/gi, `<ul class="markdown-ul">`)
numSupporters() {
return 50
},
/* Return sanitized content (for display). */
// return sanitized
return sanitized
lastUpdate() {
return 12
},
lastUpdateSuffix() {
return 'days ago'
}
},
methods: {
/**
* Show Backing
*/
......@@ -538,12 +519,15 @@ export default {
},
},
created: function () {
created: async function () {
/* Initialize flag. */
this.showActions = true
/* Initialize pledge amount. */
this.pledgeAmount = 0
this.usd = await Nito.Markets.getTicker('BCH', 'USD')
console.info(`Market price (USD)`, this.usd)
},
mounted: function () {
//
......@@ -561,26 +545,9 @@ export default {
border: 1pt solid rgba(90, 90, 90, 0.2);
}
.qr-code {
/* margin: 0 0 10px 10px; */
/* margin: 20px auto; */
padding: 0;
/* border: 1pt solid rgba(200, 200, 200, 0.2); */
/* float: right; */
}
.share {
float: right;
margin: 0;
padding: 0;
}
.pledge {
width: 100%;
height: 100px;
}
.name, .comment {
width: 100%;
}
</style>
src/views/Campaign/Details/Content/Assurance.vue
View file @ 786d7309
......@@ -4,7 +4,7 @@
<div class="row">
<div class="col-12 col-md-7">
<form>
<form action="javascript://">
<div class="text-center mb-3">
<a :href="'https://explorer.bitcoin.com/bch/address/' + pledgeAddress" target="_blank"><strong>{{pledgeAddress}}</strong></a>
<h4>Your <i class="fa fa-heart text-danger"></i> and support causes cash for this campaign <i class="fa fa-arrow-down text-danger"></i></h4>
......@@ -123,6 +123,7 @@
import { mapActions, mapGetters } from 'vuex'
/* Import modules. */
import numeral from 'numeral'
import QRCode from 'qrcode'
/* Import JQuery. */
......@@ -153,7 +154,10 @@ export default {
]),
pledgeAmount() {
return this.pledgeRange * 2
const goal = 6250.00 // FOR DEV ONLY
const remaining = goal / 2 // FOR DEV ONLY
return numeral((this.pledgeRange / 100.0) * remaining).format('$0,0.00')
},
pledgeAddress() {
......@@ -252,6 +256,7 @@ form {
.pledge-output {
width: 90%;
/* margin: 15px; */
height: 100px;
}
</style>
src/views/Campaign/Details/History/Events.vue
View file @ 786d7309
......@@ -23,7 +23,7 @@
</h4> -->
<div class="plan-desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
A new campaign was just created and a new team has been born.
</div>
<div class="plan-date">
......
src/views/Campaign/Details/History/Supporters.vue
View file @ 786d7309
......@@ -9,16 +9,11 @@
<th>Donate Amount</th>
<th>Date</th>
</tr>
<tr v-for="supporter of supporters" :key="supporter.txid">
<td>{{supporter.name}}</td>
<td>{{supporter.pledgeAmount}}</td>
<td>{{supporter.pledgedAt}}</td>
<tr v-for="pledge of pledges" :key="pledge.previousTransactionHash">
<td>{{pledge.alias}}</td>
<td>{{pledge.satoshis}}</td>
<td>{{formatDate(pledge.createdAt)}}</td>
</tr>
<!-- <tr>
<td>Andrew</td>
<td>$80</td>
<td>June 15, 2017</td>
</tr> -->
</tbody>
</table>
</div>
......@@ -27,6 +22,7 @@
<script>
/* Import modules. */
import moment from 'moment'
import numeral from 'numeral'
export default {
props: {
......@@ -34,19 +30,44 @@ export default {
},
data: () => {
return {
supporters: [],
pledges: [],
}
},
watch: {
campaign: function (_campaign) {
console.log('SUPPORTERS CAMPAIGN UPDATE', _campaign);
if (_campaign && _campaign.assurance) {
this.pledges = _campaign.assurance.pledges
}
},
},
methods: {
formatAmount(_value) {
if (_value) {
return numeral(_value).format('$0,0[.]00')
} else {
return '$0.00'
}
},
formatDate(_date) {
if (_date) {
return moment.unix(_date).format('lll')
} else {
return 'n/a'
}
},
},
created: function () {
/* Sample supporter. */
const supporter = {
/* Sample pledge. */
const pledge = {
txid: 'some-random-transaction-id',
name: 'Satoshi N.',
pledgeAmount: '$13.37',
pledgedAt: moment().subtract(3, 'hours').format('lll'),
}
this.supporters.push(supporter)
this.pledges.push(pledge)
},
}
</script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment