Commit 7a534bdf authored by Bitcoin Please's avatar Bitcoin Please
Browse files

Updated campaign manager, plus refactored detail tabs.

parent 1e1c6b12
......@@ -7,56 +7,44 @@
<!-- About -->
<div class="col-lg-3 col-sm-4 col-4">
<div class="footer-menu-item">
<h3>About Cash Causes</h3>
<h3>About Causes Cash</h3>
<ul>
<li>
<a href="javascript://">What is Startup Idea</a>
</li>
<li>
<a href="javascript://">About us</a>
</li>
<li>
<a href="javascript://">How It Works</a>
<a href="javascript://">Getting started</a>
</li>
<li>
<a href="javascript://">What Is This</a>
<a href="javascript://">How it works?</a>
</li>
<li>
<a href="javascript://">Jobs</a>
<a href="javascript://">Who can participate?</a>
</li>
<li>
<a href="javascript://">Press</a>
<a href="javascript://">How to contribute?</a>
</li>
<li>
<a href="javascript://">Starts</a>
<a href="javascript://">Press</a>
</li>
</ul>
</div>
</div>
<!-- Causes -->
<!-- Campaigns -->
<div class="col-lg-3 col-sm-4 col-4">
<div class="footer-menu-item">
<h3>Causes</h3>
<h3>Campaigns</h3>
<ul>
<li>
<a href="javascript://">Start Your Cause</a>
</li>
<li>
<a href="javascript://">Pricing Cause</a>
</li>
<li>
<a href="javascript://">Cause Support</a>
<a href="javascript://">Create a campaign</a>
</li>
<li>
......@@ -65,16 +53,16 @@
<li>
<a href="https://docs.causes.cash/legal/coc.html" target="_blank">
Code of Conduct
Code of conduct
</a>
</li>
<li>
<a href="javascript://">Terms of Use</a>
<a href="javascript://">Terms of use</a>
</li>
<li>
<a href="javascript://">Privacy Policy</a>
<a href="javascript://">Privacy policy</a>
</li>
</ul>
</div>
......@@ -87,31 +75,27 @@
<ul>
<li>
<a href="javascript://">Design &amp; Art</a>
</li>
<li>
<a href="javascript://">Crafts</a>
<a href="javascript://">Adoption</a>
</li>
<li>
<a href="javascript://">Film &amp; Video</a>
<a href="javascript://">Community</a>
</li>
<li>
<a href="javascript://">Food</a>
<a href="javascript://">DApp</a>
</li>
<li>
<a href="javascript://">Book</a>
<a href="javascript://">Privacy</a>
</li>
<li>
<a href="javascript://">Games</a>
<a href="javascript://">Security</a>
</li>
<li>
<a href="javascript://">Technology</a>
<a href="javascript://">Youth</a>
</li>
</ul>
</div>
......
......@@ -105,8 +105,8 @@
</li>
<li>
<router-link :to="'/@' + getNickname + '/causes'">
Causes
<router-link :to="'/@' + getNickname + '/campaigns'">
Campaigns
</router-link>
</li>
......
......@@ -4,6 +4,7 @@
/* Import modules (getters). */
import getAsset from './campaigns/getters/getAsset'
import getCampaign from './campaigns/getters/getCampaign'
import getCampaigns from './campaigns/getters/getCampaigns'
/* Import modules (actions). */
import updateAsset from './campaigns/actions/updateAsset'
......@@ -27,6 +28,7 @@ const state = {
const getters = {
getAsset,
getCampaign,
getCampaigns,
}
/* Actions. */
......
/* Import modules. */
import superagent from 'superagent'
/**
* Get Campaigns
*/
const getCampaigns = () => async (_ownerSlug) => {
// console.log('Retrieving campaign...', _ownerSlug, _campaignId)
/* Initialize campaign. */
// let campaign = null
/* Set target. */
const target = `http://localhost:6767/v1/campaigns/${_ownerSlug}`
// const target = `https://api.causes.cash/v1/campaigns/${_ownerSlug}`
// console.log('TARGET', target)
/* Request campaigns. */
const result = await superagent.get(target)
// console.log('RESULT', result)
/* Validate result. */
if (!result || !result.body) {
return null
}
/* Return campaign. */
return result.body
}
/* Export module. */
export default getCampaigns
......@@ -10,44 +10,75 @@
<div class="col-lg-9">
<div class="account-content account-table">
<h3 class="account-title">Campaigns</h3>
<div v-if="campaigns" class="campaigns">
<h2 class="campaign-title">My Campaigns</h2>
<div class="campaign-item">
<h3 class="account-title">My Campaigns</h3>
<div v-if="myCampaigns" class="campaigns">
<div
class="campaign-item"
v-for="campaign of myCampaigns"
:key="campaign.id"
>
<a class="campaign-image" href="javascript://">
<img src="@/assets/img/my-campaigns-01.jpg" alt=""></a>
<img :src="campaign.media ? campaign.media.main : null" alt=""></a>
<div class="campaign-box">
<div class="campaign-category"><a href="javascript://">Tecnology</a></div>
<div class="campaign-title"><a href="javascript://">Redefine Your VR Experience</a></div>
<div class="campaign-desc">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary.</div>
<div class="campaign-category">
<a href="javascript://">{{campaign.category}}</a>
</div>
<div class="campaign-title">
<router-link :to="campaign.slug + '-null'">
{{campaign.title}}
</router-link>
</div>
<div class="campaign-desc">
{{campaign.summary}}
</div>
</div>
</div>
</div>
<a href="javascript://" class="btn-primary mb-3">Create a New Campaign</a>
<div v-else class="campaigns">
You haven't created / joined any campaigns
</div>
<h2 class="campaign-title">Saved Campaigns</h2>
</div>
<div class="campaign-item">
<div class="account-content account-table">
<h3 class="account-title">Supported Campaigns</h3>
<div v-if="supportedCampaigns" class="campaigns">
<div
class="campaign-item"
v-for="campaign of supportedCampaigns"
:key="campaign.id"
>
<a class="campaign-image" href="javascript://">
<img src="@/assets/img/my-campaigns-02.jpg" alt=""></a>
<img :src="campaign.media ? campaign.media.main : null" alt=""></a>
<div class="campaign-box">
<div class="campaign-category"><a href="javascript://">Tecnology</a></div>
<div class="campaign-title"><a href="javascript://">Smart Wallet with Solar Charge</a></div>
<div class="campaign-desc">I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies.</div>
<div class="campaign-category">
<a href="javascript://">{{campaign.category}}</a>
</div>
<div class="campaign-title">
<a href="javascript://">{{campaign.title}}</a>
</div>
<div class="campaign-desc">
{{campaign.summary}}
</div>
</div>
</div>
</div>
<div v-else class="campaigns">
You haven't saved any campaigns
You haven't supported any campaigns
</div>
</div>
</div>
</div>
</div>
......@@ -58,6 +89,9 @@
</template>
<script>
/* Initialize vuex. */
import { mapActions, mapGetters } from 'vuex'
/* Import components. */
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
......@@ -80,9 +114,49 @@ export default {
campaigns: null,
}
},
created: function () {
computed: {
...mapGetters('campaigns', [
'getAsset',
'getCampaign',
'getCampaigns',
]),
...mapGetters('profile', [
'getSignedMessage',
]),
myCampaigns() {
if (this.campaigns) {
/* Set campaigns. */
const campaigns = []
this.campaigns.forEach(campaign => {
campaigns.push(campaign)
})
return campaigns
} else {
return null
}
},
supportedCampaigns() {
return null
},
},
methods: {
...mapActions('campaigns', [
'updateAsset',
]),
},
created: async function () {
/* Set owner slug. */
this.ownerSlug = this.$route.params.pathMatch.toLowerCase()
/* Retrieve campaigns. */
this.campaigns = await this.getCampaigns(this.ownerSlug)
console.log('ACCOUNT CAMAPAIGNS', this.campaigns)
},
}
</script>
......@@ -91,4 +165,9 @@ export default {
.campaigns {
margin: 20px 40px;
}
.campaign-item img {
width: 100px;
height: 100px;
}
</style>
......@@ -49,14 +49,14 @@
<ul>
<li>
<a href="javascript://"><img src="@/assets/img/my-campaigns-01.jpg" alt=""></a>
<a href="javascript://"><img src="@/assets/img/campaign-tabs.jpg" alt=""></a>
<div class="dashboard-latest-box">
<div class="category"><a href="javascript://">Film & Video</a></div>
<h4><a href="javascript://">Space Odyssey - The Video Game</a></h4>
</div>
</li>
<li>
<a href="javascript://"><img src="@/assets/img/my-campaigns-02.jpg" alt=""></a>
<a href="javascript://"><img src="@/assets/img/campaign-tabs.jpg" alt=""></a>
<div class="dashboard-latest-box">
<div class="category"><a href="javascript://">Box</a></div>
<h4><a href="javascript://">Unbuonded: A Feature Documentary</a></h4>
......
......@@ -57,12 +57,12 @@
<div class="field">
<label for="model">
Funding Model
Primary Funding Model
</label>
<span class="label-desc">
Please choose from 1 of 3 funding models.
How do you want to receive your donations?
Please choose from 1 of 3 funding models listed below.
You can can always add additional funding models at any time.
</span>
<div class="field-select">
......
......@@ -84,7 +84,7 @@
</div>
<div class="process-time">
<span>2</span>backers
<span>2</span>supporters
</div>
<div class="process-time">
......@@ -95,7 +95,7 @@
<div v-if="showActions" class="button">
<a href="javascript://" class="btn-primary" @click="showBacking">
Back this Campaign
Support this Campaign
</a>
<a href="javascript://" class="btn-secondary" @click="showActions = false; showReminder = true">
......
......@@ -10,12 +10,12 @@
<a href="javascript://">Story</a>
</li>
<li data-tab="backers">
<a href="javascript://">Backers</a>
<li data-tab="supporters">
<a href="javascript://">Supporters</a>
</li>
<li data-tab="financial">
<a href="javascript://">Financial</a>
<li data-tab="funds">
<a href="javascript://">Funds</a>
</li>
<li data-tab="news">
......@@ -25,15 +25,22 @@
<li data-tab="guide">
<a href="javascript://">Guide</a>
</li>
<li data-tab="premium">
<a href="javascript://">
<span class="text-danger">Premium</span>
</a>
</li>
</ul>
<a name="history"></a>
<div class="campaign-content">
<Story :campaign="campaign" />
<Backers :campaign="campaign" />
<Financial :campaign="campaign" />
<Supporters :campaign="campaign" />
<Funds :campaign="campaign" />
<News :campaign="campaign" />
<Guide :campaign="campaign" />
<Premium :campaign="campaign" />
</div>
</div>
</div>
......@@ -46,12 +53,13 @@
<script>
/* Import components. */
import Backers from './History/Backers'
import Events from './History/Events'
import Financial from './History/Financial'
import Funds from './History/Funds'
import Guide from './History/Guide'
import News from './History/News'
import Premium from './History/Premium'
import Story from './History/Story'
import Supporters from './History/Supporters'
/* Import jQuery. */
// FIXME: Remove ALL jQuery dependencies.
......@@ -62,12 +70,13 @@ export default {
campaign: Object,
},
components: {
Backers,
Events,
Financial,
Funds,
Guide,
News,
Premium,
Story,
Supporters,
},
data: () => {
return {
......
<template>
<div id="financial" class="tabs">
<div id="funds" class="tabs">
<h1>Use of Funds</h1>
<p>
......@@ -82,10 +82,10 @@ export default {
</script>
<style scoped>
#financial table {
#accounting table {
width: 100%;
}
#financial table tr th, #financial table tr td {
#accounting table tr th, #accounting table tr td {
border: 1px solid #ededed;
padding: 15px;
}
......
......@@ -37,6 +37,9 @@
</template>
<script>
/* Initialize vuex. */
import { mapActions, mapGetters } from 'vuex'
/* Import modules. */
import moment from 'moment'
......@@ -46,14 +49,26 @@ export default {
},
data: () => {
return {
ownerSlug: null,
extSlug: null,
articles: [],
}
},
computed: {
...mapGetters('campaigns', [
'getAsset',
'getCampaign',
]),
...mapGetters('profile', [
'getSignedMessage',
]),
articleList() {
const articles = this.articles.map(article => {
/* Format data. */
article.timeAgo = moment.unix(article.createdAt).format('lll')
article.timeAgo = moment.unix(article.createdAt).format('ll')
/* Return (formatted) article. */
return article
......@@ -61,17 +76,53 @@ export default {
/* Return (reversed) array. */
return articles.reverse()
}
},
},
created: function () {
this.articles.push({
id: 'an-og-dev-is-back-from-the-ashes-fb67b248',
title: 'An OG dev is back from the ashes...',
summary: `A quick thank you to the entire Bitcoin Cash BUIDL community for all the amazing (hard) work that everyone is doing. Read.cash in particular is a "technical" marvel (so impressed), it's also pretty easy on the eyes. Not sure how long this site has been alive, but it's inspired me to write/blog for the first time EVER.`,
avatar: 'https://i.imgur.com/NuHGJME.png',
url: 'https://read.cash/@nyusternie/an-og-dev-is-back-from-the-ashes-fb67b248',
createdAt: 1579472160,
})
methods: {
...mapActions('campaigns', [
'updateAsset',
]),
},
created: async function () {
/* Set owner slug. */
this.ownerSlug = this.$route.params.pathMatch.toLowerCase()
// console.log('OWNER SLUG', this.ownerSlug)
/* Set extended slug. */
this.extSlug = this.$route.params.extSlug
// console.log('EXT SLUG', this.extSlug)
/* Validate slug. */
if (this.ownerSlug && this.extSlug) {
/* Set slug. */
const slug = this.extSlug.slice(0, this.extSlug.lastIndexOf('-'))
/* Set campaign. */
this.campaign = await this.getCampaign(this.ownerSlug, slug)
// console.log('NEWS (campaign):', this.campaign)
/* Validate news. */
if (this.campaign && this.campaign.news) {
/* Set summary. */
this.news = this.campaign.news
// console.log('NEWS', this.news)
/* Add each news article. */
this.news.forEach(news => {
this.articles.push({
id: news.id,
title: news.title,
summary: news.summary,
avatar: news.avatar,
url: news.url,
createdAt: news.createdAt,
})
})
}
}
},
}
</script>
......@@ -89,4 +140,8 @@ export default {
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);