communityPostsCarousel, communityFeedCarousel, transfer dialog bugfix

ausbitbank · Feb 4, 2021 · 25d2923 · 25d2923
1 parent ad4383f
commit 25d2923
Show file tree

Hide file tree

Showing 6 changed files with 295 additions and 40 deletions.
diff --git a/src/components/communityFeedCarousel.vue b/src/components/communityFeedCarousel.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div v-if="!loading">
+      <q-card flat bordered>
+      <div class="text-h6 text-center">
+        <q-icon name="forum" color="teal" /> Community Feed for {{ this.account }}
+      </div>
+      <q-carousel
+        v-if="posts.length > 0"
+        v-model="slide"
+        transition-prev="jump-left"
+        transition-next="jump-right"
+        swipeable
+        animated
+        control-color="primary"
+        padding
+        arrows
+        infinite
+        :autoplay="autoplaySlides"
+        height="250px"
+        width="450px"
+        @mouseenter="autoplaySlides = false"
+        class="bg-dark text-white shadow-2 rounded-borders"
+      >
+        <q-carousel-slide :name="post.permlink" class="column no-wrap flex-center" v-for="post in posts" :key="post.index" :img-src="returnPostImage(post)">
+          <div class="custom-caption">
+            <router-link :to="returnPostPath(post.author, post.permlink)">{{ s(post.title).substr(0,100) }}</router-link><br />
+            by <span class="text-bold"><router-link :to="linkAccount(post.author)">@{{ post.author }}</router-link></span><br />
+            <span class="text-caption">{{ timeDelta(post.created) }}</span><br />
+            <span class="text-caption wrap" v-if="post.json_metadata.description"> {{s(post.json_metadata.description).substr(0,100)}}</span>
+            <span class="text-caption wrap" v-else> {{ returnPostSummary(post) }}</span>
+          </div>
+          <div class="absolute-bottom text-center"><q-avatar size="3em"><q-img :src="getHiveAvatarUrl(post.author)" /></q-avatar></div>
+        </q-carousel-slide>
+      </q-carousel>
+      </q-card>
+    </div>
+  </div>
+</template>
+<style scoped>
+a {text-decoration: none; color: #1d8ce0 }
+a:link { color: #1d8ce0; font-weight: normal; text-decoration: none; }
+a:visited { color: #1d8ce0; }
+.custom-caption { text-align: center; padding: 12px; font-weight: normal; color: white; background-color: rgba(0, 0, 0, .9) }
+</style>
+<script>
+import moment from 'moment'
+import sanitize from 'sanitize-html'
+import { postBodySummary, catchPostImage } from '@ecency/render-helper'
+export default {
+  name: 'communityFeedCarousel',
+  data () {
+    return {
+      posts: [],
+      showResteems: true,
+      slide: null,
+      limit: 10,
+      settings: false,
+      loading: false,
+      autoplaySlides: this.autoplay,
+      postType: this.type
+    }
+  },
+  watch: {
+    $route: function () {
+      this.getRecentPosts()
+    }
+  },
+  props: {
+    account: String,
+    autoplay: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  computed: {
+    firstPermlink: function () {
+      if (this.posts.length > 0) {
+        return this.posts[0].permlink
+      } else {
+        return null
+      }
+    },
+    autoplayProp: function () {
+      return this.autoplay
+    }
+  },
+  methods: {
+    returnPostImage (post) {
+      return catchPostImage(post)
+    },
+    returnPostPath (author, permlink) {
+      return '/@' + author + '/' + permlink
+    },
+    returnPostSummary (post) {
+      return postBodySummary(post, 150)
+    },
+    linkAccount (author) {
+      return '/@' + author
+    },
+    getHiveAvatarUrl (user) {
+      return 'https://images.hive.blog/u/' + user + '/avatar'
+    },
+    timeDelta (timestamp) {
+      var now = moment.utc()
+      var stamp = moment.utc(timestamp)
+      var diff = stamp.diff(now, 'minutes')
+      return moment.duration(diff, 'minutes').humanize(true)
+    },
+    async getCommunityFeed () {
+      this.loading = true
+      this.posts = []
+      var params = { sort: 'created', limit: this.limit, observer: this.account, tag: 'my' }
+      this.$hive.api.callAsync('bridge.get_ranked_posts', params)
+        .then(res => {
+          this.loading = false
+          this.posts = res
+          this.slide = this.firstPermlink
+        })
+    },
+    s (input) {
+      var options = { allowedTags: [], allowedAttributes: [], disallowedTagsMode: 'discard' }
+      return sanitize(input, options)
+    },
+    init () {
+      this.getCommunityFeed()
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
diff --git a/src/components/communityPostsCarousel.vue b/src/components/communityPostsCarousel.vue
@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <div v-if="!loading">
+      <q-card flat bordered>
+      <div class="text-h6 text-center">
+        <q-icon name="forum" color="teal" /> Community Posts for {{ this.account }}
+      </div>
+      <q-carousel
+        v-if="posts.length > 0"
+        v-model="slide"
+        transition-prev="jump-left"
+        transition-next="jump-right"
+        swipeable
+        animated
+        control-color="primary"
+        padding
+        arrows
+        infinite
+        :autoplay="autoplaySlides"
+        height="250px"
+        width="450px"
+        @mouseenter="autoplaySlides = false"
+        class="bg-dark text-white shadow-2 rounded-borders"
+      >
+        <q-carousel-slide :name="post.permlink" class="column no-wrap flex-center" v-for="post in posts" :key="post.index" :img-src="returnPostImage(post)">
+          <div class="custom-caption">
+            <router-link :to="returnPostPath(post.author, post.permlink)">{{ s(post.title).substr(0,100) }}</router-link><br />
+            by <span class="text-bold"><router-link :to="linkAccount(post.author)">@{{ post.author }}</router-link></span><br />
+            <span class="text-caption">{{ timeDelta(post.created) }}</span><br />
+            <span class="text-caption wrap" v-if="post.json_metadata.description"> {{s(post.json_metadata.description).substr(0,100)}}</span>
+            <span class="text-caption wrap" v-else> {{ returnPostSummary(post) }}</span>
+          </div>
+          <div class="absolute-bottom text-center"><q-avatar size="3em"><q-img :src="getHiveAvatarUrl(post.author)" /></q-avatar></div>
+        </q-carousel-slide>
+      </q-carousel>
+      </q-card>
+    </div>
+  </div>
+</template>
+<style scoped>
+a {text-decoration: none; color: #1d8ce0 }
+a:link { color: #1d8ce0; font-weight: normal; text-decoration: none; }
+a:visited { color: #1d8ce0; }
+.custom-caption { text-align: center; padding: 12px; font-weight: normal; color: white; background-color: rgba(0, 0, 0, .9) }
+</style>
+<script>
+import moment from 'moment'
+import sanitize from 'sanitize-html'
+import { postBodySummary, catchPostImage } from '@ecency/render-helper'
+export default {
+  name: 'communityPostsCarousel',
+  data () {
+    return {
+      posts: [],
+      showResteems: true,
+      slide: null,
+      limit: 10,
+      settings: false,
+      loading: false,
+      autoplaySlides: this.autoplay,
+      postType: this.type
+    }
+  },
+  watch: {
+    $route: function () {
+      this.getRecentPosts()
+    }
+  },
+  props: {
+    account: String,
+    autoplay: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  computed: {
+    firstPermlink: function () {
+      if (this.posts.length > 0) {
+        return this.posts[0].permlink
+      } else {
+        return null
+      }
+    },
+    autoplayProp: function () {
+      return this.autoplay
+    }
+  },
+  methods: {
+    returnPostImage (post) {
+      return catchPostImage(post)
+    },
+    returnPostPath (author, permlink) {
+      return '/@' + author + '/' + permlink
+    },
+    returnPostSummary (post) {
+      return postBodySummary(post, 150)
+    },
+    linkAccount (author) {
+      return '/@' + author
+    },
+    getHiveAvatarUrl (user) {
+      return 'https://images.hive.blog/u/' + user + '/avatar'
+    },
+    timeDelta (timestamp) {
+      var now = moment.utc()
+      var stamp = moment.utc(timestamp)
+      var diff = stamp.diff(now, 'minutes')
+      return moment.duration(diff, 'minutes').humanize(true)
+    },
+    async getCommunityFeed () {
+      this.loading = true
+      this.posts = []
+      var params = { sort: 'created', limit: this.limit, observer: this.account, tag: 'my' }
+      this.$hive.api.callAsync('bridge.get_ranked_posts', params)
+        .then(res => {
+          this.loading = false
+          this.posts = res
+          this.slide = this.firstPermlink
+        })
+    },
+    s (input) {
+      var options = { allowedTags: [], allowedAttributes: [], disallowedTagsMode: 'discard' }
+      return sanitize(input, options)
+    },
+    init () {
+      this.getCommunityFeed()
+    }
+  },
+  mounted () {
+    this.init()
+  }
+}
+</script>
diff --git a/src/components/recentPostsCarousel.vue b/src/components/recentPostsCarousel.vue
@@ -59,7 +59,6 @@ export default {
     return {
       posts: [],
       showResteems: true,
-      api: 'https://rpc.ausbit.dev',
       slide: null,
       limit: 10,
       settings: false,
@@ -119,25 +118,14 @@ export default {
       var diff = stamp.diff(now, 'minutes')
       return moment.duration(diff, 'minutes').humanize(true)
     },
-    getRecentPosts () {
+    async getRecentPosts () {
       this.loading = true
       this.posts = []
-      this.$axios.post(this.api, {
-        id: 1,
-        jsonrpc: '2.0',
-        method: 'bridge.get_account_posts',
-        params: {
-          sort: this.postType, // blog or posts
-          account: this.account,
-          limit: this.limit,
-          observer: this.loggedInUser || this.account,
-          start_author: null,
-          start_permlink: null
-        }
-      })
-        .then((res) => {
+      var params = { sort: this.postType, account: this.account, limit: this.limit, observer: this.loggedInUser || this.account, start_author: null, start_permlink: null }
+      this.$hive.api.callAsync('bridge.get_account_posts', params)
+        .then(res => {
           this.loading = false
-          this.posts = res.data.result
+          this.posts = res
           this.slide = this.firstPermlink
         })
     },

diff --git a/src/components/transferDialog.vue b/src/components/transferDialog.vue
@@ -3,6 +3,15 @@
       <div>Transfer {{ tokenName }}</div>
       <user-search-box :username="toAccount" @selectUsername="setUsername" label="To account" />
       <div v-if="false"><q-input label="To account" v-model="toAccount" /></div>
+      <q-btn label="Deposit to Exchange" color="primary" glossy v-if="toAccount === '' && network === 'hive'" dense>
+        <q-popup-proxy>
+          <q-card>
+          Common Exchange Accounts :<br />
+          <q-btn v-for="ea in exchanges" :key="ea.index" :label="ea" @click="setUsername(ea)" v-close-popup />
+          </q-card>
+        </q-popup-proxy>
+      </q-btn>
+      {{ toAccount }}
       <div><q-input label="Amount" v-model="amount" /></div>
       <div class="text-center text-caption" v-if="balance">Available: <span class="cursor-pointer text-bold" @click="amount = parseFloat(balance)">{{ balance }}</span> {{ tokenName }}</div>
       <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 {
   },
   methods: {
     setUsername (u) {
-      console.log('set username ' + u)
       this.toAccount = u
     },
     checkEncryption () {

diff --git a/src/components/userSearchBox.vue b/src/components/userSearchBox.vue
@@ -1,31 +1,25 @@
 <template>
   <span>
-    <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)">
+    <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)">
     </q-select>
-    <q-btn label="Deposit to Exchange" color="primary" glossy v-if="input === ''" dense>
-      <q-popup-proxy>
-        <q-card>
-        Common Exchange Accounts :<br />
-        <q-btn label="deepcrypto8 (binance)" @click="input = 'deepcrypto8'" v-close-popup />
-        <q-btn label="bittrex" @click="input = 'bittrex'" v-close-popup />
-        <q-btn label="ionomy" @click="input = 'ionomy'" v-close-popup />
-        <q-btn label="huobi-pro" @click="input = 'huobi-pro'" v-close-popup />
-        </q-card>
-      </q-popup-proxy>
-    </q-btn>
   </span>
 </template>
 <script>
 export default {
   name: 'userSearchBox',
   data () {
     return {
-      input: this.username || '',
+      input: this.username,
       usernameSuggestions: [],
       badActors: badActorList
     }
   },
   props: ['username', 'label'],
+  watch: {
+    username: function (newState) {
+      this.input = newState
+    }
+  },
   methods: {
     filterFn (val, update, abort) {
       update(() => {