Skip to content

Commit 25d2923

Browse files
ausbitbankausbitbank
committed
communityPostsCarousel, communityFeedCarousel, transfer dialog bugfix
1 parent ad4383f commit 25d2923

File tree

6 files changed

+295
-40
lines changed

6 files changed

+295
-40
lines changed

‎src/components/communityFeedCarousel.vue‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<template>
2+
<div>
3+
<div v-if="!loading">
4+
<q-card flat bordered>
5+
<div class="text-h6 text-center">
6+
<q-icon name="forum" color="teal" /> Community Feed for {{ this.account }}
7+
</div>
8+
<q-carousel
9+
v-if="posts.length > 0"
10+
v-model="slide"
11+
transition-prev="jump-left"
12+
transition-next="jump-right"
13+
swipeable
14+
animated
15+
control-color="primary"
16+
padding
17+
arrows
18+
infinite
19+
:autoplay="autoplaySlides"
20+
height="250px"
21+
width="450px"
22+
@mouseenter="autoplaySlides = false"
23+
class="bg-dark text-white shadow-2 rounded-borders"
24+
>
25+
<q-carousel-slide :name="post.permlink" class="column no-wrap flex-center" v-for="post in posts" :key="post.index" :img-src="returnPostImage(post)">
26+
<div class="custom-caption">
27+
<router-link :to="returnPostPath(post.author, post.permlink)">{{ s(post.title).substr(0,100) }}</router-link><br />
28+
by <span class="text-bold"><router-link :to="linkAccount(post.author)">@{{ post.author }}</router-link></span><br />
29+
<span class="text-caption">{{ timeDelta(post.created) }}</span><br />
30+
<span class="text-caption wrap" v-if="post.json_metadata.description"> {{s(post.json_metadata.description).substr(0,100)}}</span>
31+
<span class="text-caption wrap" v-else> {{ returnPostSummary(post) }}</span>
32+
</div>
33+
<div class="absolute-bottom text-center"><q-avatar size="3em"><q-img :src="getHiveAvatarUrl(post.author)" /></q-avatar></div>
34+
</q-carousel-slide>
35+
</q-carousel>
36+
</q-card>
37+
</div>
38+
</div>
39+
</template>
40+
<style scoped>
41+
a {text-decoration: none; color: #1d8ce0 }
42+
a:link { color: #1d8ce0; font-weight: normal; text-decoration: none; }
43+
a:visited { color: #1d8ce0; }
44+
.custom-caption { text-align: center; padding: 12px; font-weight: normal; color: white; background-color: rgba(0, 0, 0, .9) }
45+
</style>
46+
<script>
47+
import moment from 'moment'
48+
import sanitize from 'sanitize-html'
49+
import { postBodySummary, catchPostImage } from '@ecency/render-helper'
50+
export default {
51+
name: 'communityFeedCarousel',
52+
data () {
53+
return {
54+
posts: [],
55+
showResteems: true,
56+
slide: null,
57+
limit: 10,
58+
settings: false,
59+
loading: false,
60+
autoplaySlides: this.autoplay,
61+
postType: this.type
62+
}
63+
},
64+
watch: {
65+
$route: function () {
66+
this.getRecentPosts()
67+
}
68+
},
69+
props: {
70+
account: String,
71+
autoplay: {
72+
type: Boolean,
73+
required: false,
74+
default: true
75+
}
76+
},
77+
computed: {
78+
firstPermlink: function () {
79+
if (this.posts.length > 0) {
80+
return this.posts[0].permlink
81+
} else {
82+
return null
83+
}
84+
},
85+
autoplayProp: function () {
86+
return this.autoplay
87+
}
88+
},
89+
methods: {
90+
returnPostImage (post) {
91+
return catchPostImage(post)
92+
},
93+
returnPostPath (author, permlink) {
94+
return '/@' + author + '/' + permlink
95+
},
96+
returnPostSummary (post) {
97+
return postBodySummary(post, 150)
98+
},
99+
linkAccount (author) {
100+
return '/@' + author
101+
},
102+
getHiveAvatarUrl (user) {
103+
return 'https://images.hive.blog/u/' + user + '/avatar'
104+
},
105+
timeDelta (timestamp) {
106+
var now = moment.utc()
107+
var stamp = moment.utc(timestamp)
108+
var diff = stamp.diff(now, 'minutes')
109+
return moment.duration(diff, 'minutes').humanize(true)
110+
},
111+
async getCommunityFeed () {
112+
this.loading = true
113+
this.posts = []
114+
var params = { sort: 'created', limit: this.limit, observer: this.account, tag: 'my' }
115+
this.$hive.api.callAsync('bridge.get_ranked_posts', params)
116+
.then(res => {
117+
this.loading = false
118+
this.posts = res
119+
this.slide = this.firstPermlink
120+
})
121+
},
122+
s (input) {
123+
var options = { allowedTags: [], allowedAttributes: [], disallowedTagsMode: 'discard' }
124+
return sanitize(input, options)
125+
},
126+
init () {
127+
this.getCommunityFeed()
128+
}
129+
},
130+
mounted () {
131+
this.init()
132+
}
133+
}
134+
</script>

‎src/components/communityPostsCarousel.vue‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<template>
2+
<div>
3+
<div v-if="!loading">
4+
<q-card flat bordered>
5+
<div class="text-h6 text-center">
6+
<q-icon name="forum" color="teal" /> Community Posts for {{ this.account }}
7+
</div>
8+
<q-carousel
9+
v-if="posts.length > 0"
10+
v-model="slide"
11+
transition-prev="jump-left"
12+
transition-next="jump-right"
13+
swipeable
14+
animated
15+
control-color="primary"
16+
padding
17+
arrows
18+
infinite
19+
:autoplay="autoplaySlides"
20+
height="250px"
21+
width="450px"
22+
@mouseenter="autoplaySlides = false"
23+
class="bg-dark text-white shadow-2 rounded-borders"
24+
>
25+
<q-carousel-slide :name="post.permlink" class="column no-wrap flex-center" v-for="post in posts" :key="post.index" :img-src="returnPostImage(post)">
26+
<div class="custom-caption">
27+
<router-link :to="returnPostPath(post.author, post.permlink)">{{ s(post.title).substr(0,100) }}</router-link><br />
28+
by <span class="text-bold"><router-link :to="linkAccount(post.author)">@{{ post.author }}</router-link></span><br />
29+
<span class="text-caption">{{ timeDelta(post.created) }}</span><br />
30+
<span class="text-caption wrap" v-if="post.json_metadata.description"> {{s(post.json_metadata.description).substr(0,100)}}</span>
31+
<span class="text-caption wrap" v-else> {{ returnPostSummary(post) }}</span>
32+
</div>
33+
<div class="absolute-bottom text-center"><q-avatar size="3em"><q-img :src="getHiveAvatarUrl(post.author)" /></q-avatar></div>
34+
</q-carousel-slide>
35+
</q-carousel>
36+
</q-card>
37+
</div>
38+
</div>
39+
</template>
40+
<style scoped>
41+
a {text-decoration: none; color: #1d8ce0 }
42+
a:link { color: #1d8ce0; font-weight: normal; text-decoration: none; }
43+
a:visited { color: #1d8ce0; }
44+
.custom-caption { text-align: center; padding: 12px; font-weight: normal; color: white; background-color: rgba(0, 0, 0, .9) }
45+
</style>
46+
<script>
47+
import moment from 'moment'
48+
import sanitize from 'sanitize-html'
49+
import { postBodySummary, catchPostImage } from '@ecency/render-helper'
50+
export default {
51+
name: 'communityPostsCarousel',
52+
data () {
53+
return {
54+
posts: [],
55+
showResteems: true,
56+
slide: null,
57+
limit: 10,
58+
settings: false,
59+
loading: false,
60+
autoplaySlides: this.autoplay,
61+
postType: this.type
62+
}
63+
},
64+
watch: {
65+
$route: function () {
66+
this.getRecentPosts()
67+
}
68+
},
69+
props: {
70+
account: String,
71+
autoplay: {
72+
type: Boolean,
73+
required: false,
74+
default: true
75+
}
76+
},
77+
computed: {
78+
firstPermlink: function () {
79+
if (this.posts.length > 0) {
80+
return this.posts[0].permlink
81+
} else {
82+
return null
83+
}
84+
},
85+
autoplayProp: function () {
86+
return this.autoplay
87+
}
88+
},
89+
methods: {
90+
returnPostImage (post) {
91+
return catchPostImage(post)
92+
},
93+
returnPostPath (author, permlink) {
94+
return '/@' + author + '/' + permlink
95+
},
96+
returnPostSummary (post) {
97+
return postBodySummary(post, 150)
98+
},
99+
linkAccount (author) {
100+
return '/@' + author
101+
},
102+
getHiveAvatarUrl (user) {
103+
return 'https://images.hive.blog/u/' + user + '/avatar'
104+
},
105+
timeDelta (timestamp) {
106+
var now = moment.utc()
107+
var stamp = moment.utc(timestamp)
108+
var diff = stamp.diff(now, 'minutes')
109+
return moment.duration(diff, 'minutes').humanize(true)
110+
},
111+
async getCommunityFeed () {
112+
this.loading = true
113+
this.posts = []
114+
var params = { sort: 'created', limit: this.limit, observer: this.account, tag: 'my' }
115+
this.$hive.api.callAsync('bridge.get_ranked_posts', params)
116+
.then(res => {
117+
this.loading = false
118+
this.posts = res
119+
this.slide = this.firstPermlink
120+
})
121+
},
122+
s (input) {
123+
var options = { allowedTags: [], allowedAttributes: [], disallowedTagsMode: 'discard' }
124+
return sanitize(input, options)
125+
},
126+
init () {
127+
this.getCommunityFeed()
128+
}
129+
},
130+
mounted () {
131+
this.init()
132+
}
133+
}
134+
</script>

‎src/components/recentPostsCarousel.vue‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ export default {
5959
return {
6060
posts: [],
6161
showResteems: true,
62-
api: 'https://rpc.ausbit.dev',
6362
slide: null,
6463
limit: 10,
6564
settings: false,
@@ -119,25 +118,14 @@ export default {
119118
var diff = stamp.diff(now, 'minutes')
120119
return moment.duration(diff, 'minutes').humanize(true)
121120
},
122-
getRecentPosts () {
121+
async getRecentPosts () {
123122
this.loading = true
124123
this.posts = []
125-
this.$axios.post(this.api, {
126-
id: 1,
127-
jsonrpc: '2.0',
128-
method: 'bridge.get_account_posts',
129-
params: {
130-
sort: this.postType, // blog or posts
131-
account: this.account,
132-
limit: this.limit,
133-
observer: this.loggedInUser || this.account,
134-
start_author: null,
135-
start_permlink: null
136-
}
137-
})
138-
.then((res) => {
124+
var params = { sort: this.postType, account: this.account, limit: this.limit, observer: this.loggedInUser || this.account, start_author: null, start_permlink: null }
125+
this.$hive.api.callAsync('bridge.get_account_posts', params)
126+
.then(res => {
139127
this.loading = false
140-
this.posts = res.data.result
128+
this.posts = res
141129
this.slide = this.firstPermlink
142130
})
143131
},

‎src/components/transferDialog.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@
33
<div>Transfer {{ tokenName }}</div>
44
<user-search-box :username="toAccount" @selectUsername="setUsername" label="To account" />
55
<div v-if="false"><q-input label="To account" v-model="toAccount" /></div>
6+
<q-btn label="Deposit to Exchange" color="primary" glossy v-if="toAccount === '' && network === 'hive'" dense>
7+
<q-popup-proxy>
8+
<q-card>
9+
Common Exchange Accounts :<br />
10+
<q-btn v-for="ea in exchanges" :key="ea.index" :label="ea" @click="setUsername(ea)" v-close-popup />
11+
</q-card>
12+
</q-popup-proxy>
13+
</q-btn>
14+
{{ toAccount }}
615
<div><q-input label="Amount" v-model="amount" /></div>
716
<div class="text-center text-caption" v-if="balance">Available: <span class="cursor-pointer text-bold" @click="amount = parseFloat(balance)">{{ balance }}</span> {{ tokenName }}</div>
817
<div class="text-center text-caption" v-else-if="availableBalance">Available: <span class="cursor-pointer text-bold" @click="amount = parseFloat(availableBalance)">{{ availableBalance }}</span> {{ tokenName }}</div>
@@ -73,7 +82,6 @@ export default {
7382
},
7483
methods: {
7584
setUsername (u) {
76-
console.log('set username ' + u)
7785
this.toAccount = u
7886
},
7987
checkEncryption () {

‎src/components/userSearchBox.vue‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,25 @@
11
<template>
22
<span>
3-
<q-select new-value-mode="add" filled :value="input" use-input hide-selected fill-input input-debounce="250" v-model="input" :label="label" :options="usernameSuggestions" @filter="filterFn" @filter-abort="abortFilterFn" style="width: 250px; padding-bottom: 32px" @input="$emit('selectUsername', input)">
3+
<q-select clearable new-value-mode="add" filled :value="input" use-input hide-selected fill-input input-debounce="250" v-model="input" :label="label" :options="usernameSuggestions" @filter="filterFn" @filter-abort="abortFilterFn" style="width: 250px; padding-bottom: 32px" @input="$emit('selectUsername', input)">
44
</q-select>
5-
<q-btn label="Deposit to Exchange" color="primary" glossy v-if="input === ''" dense>
6-
<q-popup-proxy>
7-
<q-card>
8-
Common Exchange Accounts :<br />
9-
<q-btn label="deepcrypto8 (binance)" @click="input = 'deepcrypto8'" v-close-popup />
10-
<q-btn label="bittrex" @click="input = 'bittrex'" v-close-popup />
11-
<q-btn label="ionomy" @click="input = 'ionomy'" v-close-popup />
12-
<q-btn label="huobi-pro" @click="input = 'huobi-pro'" v-close-popup />
13-
</q-card>
14-
</q-popup-proxy>
15-
</q-btn>
165
</span>
176
</template>
187
<script>
198
export default {
209
name: 'userSearchBox',
2110
data () {
2211
return {
23-
input: this.username || '',
12+
input: this.username,
2413
usernameSuggestions: [],
2514
badActors: badActorList
2615
}
2716
},
2817
props: ['username', 'label'],
18+
watch: {
19+
username: function (newState) {
20+
this.input = newState
21+
}
22+
},
2923
methods: {
3024
filterFn (val, update, abort) {
3125
update(() => {

0 commit comments

Comments
 (0)