Commit 73af60ac authored by Bitcoin Please's avatar Bitcoin Please
Browse files

Added content windows.

parent df7c67cb
......@@ -439,6 +439,43 @@ button {
background: #08aded;
background-color: #0094d2;
} */
.btn-outline-danger {
background-color: #ffffff;
padding: 0 20px;
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
height: 46px;
line-height: 46px;
border: 1pt solid #dc3545;
display: inline-block;
}
.btn-warning {
background-color: #ffc108;
padding: 0 20px;
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
height: 46px;
line-height: 46px;
border: none;
display: inline-block;
}
/* .btn-danger:hover{
background: #08aded;
background-color: #0094d2;
} */
.btn-outline-warning {
background-color: #ffffff;
padding: 0 20px;
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
height: 46px;
line-height: 46px;
border: 1pt solid #ffc108;
display: inline-block;
}
.markdown a, .campaigns a {
display: inline-block;
......
......@@ -70,7 +70,7 @@
<span></span>
</div>
<div class="row process-info">
<div v-if="campaignModel == 'Community Pledge'" class="row process-info">
<div class="col">
<span>{{fundingGoal}}</span>
funding goal
......@@ -91,10 +91,57 @@
{{lastUpdateSuffix}}
</div>
</div>
<div v-if="campaignModel == 'Cash Payouts'" class="row process-info">
<div class="col">
<span>{{fundingGoal}}</span>
<i class="fa fa-bitcoin" aria-hidden="true"></i>
IN <small>(last 30 days)</small>
</div>
<div class="col">
<span>{{fundingPledged}}</span>
<i class="fa fa-bitcoin" aria-hidden="true"></i>
OUT <small>(last 30 days)</small>
</div>
<div class="col">
<span>{{numSupporters}}</span>
supporters
</div>
<div class="col">
<span>{{lastUpdate}}</span>
{{lastUpdateSuffix}}
</div>
</div>
<div v-if="campaignModel == 'Direct Donation'" class="row process-info">
<div class="col">
<span>{{fundingGoal}}</span>
last 24hrs
</div>
<div class="col">
<span>{{fundingPledged}}</span>
last 30 days
</div>
<div class="col">
<span>{{numSupporters}}</span>
supporters
</div>
<div class="col">
<span>{{lastUpdate}}</span>
{{lastUpdateSuffix}}
</div>
</div>
</div>
<div v-if="showActions" class="button">
<a href="javascript://" class="btn-primary" @click="showBacking">
<a href="javascript://" class="btn-primary" @click="displaySupport">
Support this Campaign
</a>
......@@ -118,7 +165,7 @@
<script>
/* Initialize vuex. */
import { mapGetters } from 'vuex'
import { mapActions, mapGetters } from 'vuex'
/* Import modules. */
import Nito from 'nitojs'
......@@ -245,7 +292,7 @@ export default {
case 'assurance':
return 'Community Pledge'
case 'payouts':
return 'Daily Payouts'
return 'Cash Payouts'
default:
return 'Unknown campaign type'
}
......@@ -508,14 +555,34 @@ export default {
},
methods: {
...mapActions('utils', [
'toast',
]),
/**
* Show Backing
* Display Support
*/
showBacking() {
displaySupport() {
/* Hide actions. */
this.showActions = false
this.showAssurance = true
/* Handle support window. */
if (this.campaign.assurance) {
/* Show assurance window. */
this.showAssurance = true
} else if (this.campaign.direct) {
/* Show direct window. */
this.showDirect = true
} else if (this.campaign.payouts) {
/* Show payouts window. */
this.showPayouts = true
} else {
/* Show actions. */
this.showActions = true
/* Show error notif. */
return this.toast(['Oops!', 'There is NO support for this campaign.', 'error'])
}
},
},
......@@ -550,4 +617,9 @@ export default {
margin: 0;
padding: 0;
}
.process-info small {
font-size: 0.7em;
font-style: italic;
}
</style>
......@@ -99,7 +99,7 @@
Pledge Details
</label>
<textarea v-model="pledgeDetails" class="pledge-output" id="pledge-details" />
<textarea :value="pledgeDetails" class="pledge-output" id="pledge-details" />
</div>
<div class="form-group row pledge-group">
......@@ -151,10 +151,6 @@ import Nito from 'nitojs'
import numeral from 'numeral'
import QRCode from 'qrcode'
/* Import JQuery. */
// FIXME: Remove ALL jQuery dependencies.
// const $ = window.jQuery
export default {
props: {
campaign: Object,
......@@ -210,6 +206,11 @@ export default {
},
pledgeDetails() {
/* Validate assurance. */
if (!this.campaign.assurance) {
return null
}
/* Build (pledge) package. */
const pkg = {
outputs: [
......@@ -303,6 +304,11 @@ export default {
onPledgeUpdate() {
// console.log('UPDATE THE PLEDGE AMOUNT (USD)', this.pledgeUSD)
/* Validate USD pledge. */
if (!this.pledgeUSD) {
return null
}
// TODO Perform a smart calculation of value units
// 1. satoshis (no comma, decimal)
// 2. USD (has comma or decimal)
......@@ -433,15 +439,18 @@ export default {
// console.info(`Market price (USD)`, this.usd)
/* Initialize pledge range. */
this.pledgeRange = 5
this.pledgeRange = 5 // FIXME
/* Initialize pledge. */
this.pledgeUSD = 1
this.pledgeUSD = 1 // FIXME
this.onPledgeUpdate()
/* Set pledge goal. */
this.pledgeGoal = this.campaign.assurance.recipients[0].satoshis
console.log('PLEDGE GOAL', this.pledgeGoal)
/* Validate assurance. */
if (this.campaign.assurance) {
/* Set pledge goal. */
this.pledgeGoal = this.campaign.assurance.recipients[0].satoshis
console.log('PLEDGE GOAL', this.pledgeGoal)
}
},
mounted: function () {
//
......
<template>
<main>
<div class="qr-code text-center" v-html="qr" />
<hr />
<div>
Satoshis {{satoshis}}
</div>
<div class="row">
<div class="col-12 col-md-7">
<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>
</div>
<div class="code-area float-right">
<div class="qr-code" v-html="qr" />
<div class="text-center ml-2">
<i class="fa fa-arrow-up text-danger"></i>
instant pledge address
<i class="fa fa-arrow-up text-danger"></i>
</div>
</div>
<div class="form-group row">
<div class="col-6">
<div class="form-group">
<label for="form-pledge-amount">
Pledge Amount in USD
</label>
<input
type="range"
class="form-control-range"
id="form-pledge-amount"
v-model="pledgeRange"
@change="onRangeChange($event)"
>
</div>
</div>
<div class="col-6">
<input
class="form-control"
type="text"
placeholder="pledge amount (usd)"
v-model="pledgeUSD"
@blur="onPledgeUpdate"
@keyup.enter="$refs.pledgeName.focus()"
/>
</div>
</div>
<div class="form-group row mt-3">
<label for="input-name" class="col-md-4 col-form-label text-right">
Name
</label>
<div class="col-md-8">
<input
ref="pledgeName"
class="form-control"
type="text"
id="input-name"
placeholder="(optional)"
v-model="pledgeName"
@keyup.enter="$refs.pledgeComment.focus()"
/>
</div>
</div>
<div class="form-group row">
<label for="input-comment" class="col-md-4 col-form-label text-right">
Comment
</label>
<div class="col-md-8">
<input
ref="pledgeComment"
class="form-control"
type="text"
id="input-comment"
placeholder="(optional)"
v-model="pledgeComment"
/>
</div>
</div>
<div class="form-group row">
<div class="col">
<button class="btn btn-primary btn-block" @click="setClipboard">Copy Details</button>
</div>
<ul>
<li>
<h4>Please <i class="fa fa-heart text-danger"></i> and support our cause <i class="fa fa-arrow-down"></i></h4>
<a :href="'https://explorer.bitcoin.com/bch/address/' + pledgeAddress" target="_blank"><strong>{{pledgeAddress}}</strong></a>
</li>
<hr />
<li>
<h4>Direct Donation</h4>
<!-- <pre>
{{details}}
</pre> -->
<div class="fee-desc">
<p>
3% + €0.20 per pledge
</p>
<p>
Pledges under €10 have a discounted micropledge fee of 5% + €0.05 per pledge
</p>
</div>
</li>
</ul>
<div class="button">
<a href="javascript://" class="btn-danger" @click="$emit('cancel')">
<i class="fa fa-times-circle" aria-hidden="true"></i>
Cancel Backing
</a>
<div class="col">
<button class="btn btn-primary btn-block">Use Wallet</button>
</div>
</div>
<div class="form-group row pledge-group">
<label for="pledge-details">
Pledge Details
</label>
<textarea :value="pledgeDetails" class="pledge-output" id="pledge-details" />
</div>
<div class="form-group row pledge-group">
<label for="pledge-auth">
Pledge Authorization
</label>
<input
ref="pledgeAuth"
class="form-control pledge-auth"
type="text"
id="pledge-auth"
placeholder="waiting for authorization message..."
v-model="pledgeAuth"
/>
</div>
</form>
</div>
<div class="col-12 col-md-5">
<a href="javascript://" class="btn-danger float-right" @click="$emit('cancel')">
<i class="fa fa-times-circle" aria-hidden="true"></i>
Cancel Direct Donation
</a>
<h3>Direct Donation</h3>
<p class="mt-3">
Make a pledge that will ONLY be fullfilled if the rest of the community also contributes to the full amount requrested by this campaign.
</p>
<p class="mt-3">
Install the plugin for the Electron-Cash desktop wallet and use the flipstarter tab to prepare your pledge.
</p>
</div>
</div>
</main>
</template>
......@@ -46,15 +143,10 @@
/* Initialize vuex. */
import { mapActions, mapGetters } from 'vuex'
/* Import components. */
// import Name from '@/components/Name.vue'
/* Import icons. */
// import '@/compiled-icons/<icon-name>'
/* Import JQuery. */
// FIXME: Remove ALL jQuery dependencies.
// const $ = window.jQuery
/* Import modules. */
import Nito from 'nitojs'
import numeral from 'numeral'
import QRCode from 'qrcode'
export default {
props: {
......@@ -65,7 +157,16 @@ export default {
},
data: () => {
return {
//
usd: null,
satoshis: null,
pledgeUSD: null,
pledgeSatoshis: null,
pledgeName: null,
pledgeComment: null,
pledgeRange: null,
pledgeGoal: null,
pledgeAuth: null,
}
},
computed: {
......@@ -73,18 +174,215 @@ export default {
'getHelp',
]),
// ...mapGetters('campaigns', [
// 'getCampaign',
// ]),
...mapGetters('campaigns', [
'getFullfillment',
]),
...mapGetters('wallet', [
'getAddress',
]),
pledgeAddress() {
// FIXME
return this.getAddress('deposit')
},
pledgedValue() {
/* Calculate pledged (satoshis). */
const pledged = this.campaign.direct.pledges
.reduce((accumulator, pledge) => {
if (pledge.isSpent === true) {
return accumulator
} else {
return accumulator + pledge.satoshis
}
}, 0)
console.log('PLEDGED', pledged)
return pledged
},
pledgeDetails() {
/* Validate direct. */
if (!this.campaign.direct) {
return null
}
/* Build (pledge) package. */
const pkg = {
outputs: [
{
value: this.campaign.direct.recipients[0].satoshis,
address: this.campaign.direct.recipients[0].address
}
],
data: {
alias: this.pledgeName || '',
comment: this.pledgeComment || ''
},
donation: {
amount: this.pledgeSatoshis
},
expires: this.campaign.direct.expiresAt
}
/* Format to base-64. */
const formatted = Buffer.from(JSON.stringify(pkg, null, 2)).toString('base64')
/* Return formatted. */
return formatted
},
qr() {
if (!this.getAddress('deposit')) {
return null
}
/* Initialize (string) value. */
let strValue = ''
/* Initialize scanner parameters. */
const params = {
type: 'svg',
width: 250,
height: 250,
color: {
dark: '#000',
light: '#fff'
}
}
QRCode.toString(this.getAddress('deposit'), params, (err, value) => {
if (err) {
return console.error('QR Code ERROR:', err)
}
/* Set (string) value. */
strValue = value
})
/* Return (string) value. */
return strValue
},
},
methods: {
...mapActions('campaigns', [
'addCampaign',
'addAssurance',
]),
...mapActions('utils', [
'toast',
]),
_setPledgeUSD(_satoshis) {
/* Calculate USD. */
const usd = (_satoshis / 100000000) * this.usd
/* Set (formatted) value. */
this.pledgeUSD = numeral(usd).format('$0,0.00')
},
onRangeChange() {
/* Calculate remaining (satoshis). */
const remaining = this.pledgeGoal - this.pledgedValue
console.log('REMAINING', remaining)
/* Calculate satoshis. */
const satoshis = parseInt(remaining * (this.pledgeRange / 100.0))
/* Update pledge amount (satoshis). */
this.pledgeSatoshis = satoshis
/* Set pledge (USD). */
this._setPledgeUSD(satoshis)
},
onPledgeUpdate() {
// console.log('UPDATE THE PLEDGE AMOUNT (USD)', this.pledgeUSD)
/* Validate USD pledge. */
if (!this.pledgeUSD) {
return null
}
// TODO Perform a smart calculation of value units
// 1. satoshis (no comma, decimal)
// 2. USD (has comma or decimal)
/* Retrieve pledge amount (usd). */
const pledgeUSD = numeral(this.pledgeUSD).value()
console.log('PLEDGE AMOUNT (usd)', pledgeUSD)
/* Calculate satoshis. */
const satoshis = parseInt((pledgeUSD / this.usd) * 100000000)