ProfileDirectory.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <div>
  3. <div class="col-12">
  4. <p class="font-weight-bold text-lighter text-uppercase">Profiles Directory</p>
  5. <div v-if="loaded" class="">
  6. <div class="row">
  7. <div class="col-12 col-md-6 p-1" v-for="(profile, index) in profiles">
  8. <div class="card card-body border shadow-none py-2">
  9. <div class="media">
  10. <a :href="profile.url"><img :src="profile.avatar" class="rounded-circle border mr-3" alt="..." width="40px" height="40px"></a>
  11. <div class="media-body">
  12. <p class="mt-0 mb-0 font-weight-bold">
  13. <a :href="profile.url" class="text-dark">{{profile.username}}</a>
  14. </p>
  15. <p class="mb-1 small text-lighter d-flex justify-content-between font-weight-bold">
  16. <span>
  17. <span>{{prettyCount(profile.statuses_count)}}</span> POSTS
  18. </span>
  19. <span>
  20. <span>{{postsPerDay(profile)}}</span> POSTS/DAY
  21. </span>
  22. <span>
  23. <span>{{prettyCount(profile.followers_count)}}</span> FOLLOWERS
  24. </span>
  25. </p>
  26. <p class="mb-1">
  27. <span v-for="(post, i) in profile.posts" class="shadow-sm" :key="'profile_posts_'+i">
  28. <a :href="post.url" class="text-decoration-none mr-1">
  29. <img :src="thumbUrl(post)" width="62.3px" height="62.3px" class="border rounded">
  30. </a>
  31. </span>
  32. </p>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div v-if="showLoadMore" class="col-12">
  38. <p class="text-center mb-0 pt-3">
  39. <button class="btn btn-outline-secondary btn-sm px-4 py-1 font-weight-bold" @click="loadMore()">Load More</button>
  40. </p>
  41. </div>
  42. </div>
  43. </div>
  44. <div v-else>
  45. <div class="row">
  46. <div class="col-12 d-flex justify-content-center align-items-center">
  47. <div class="spinner-border" role="status">
  48. <span class="sr-only">Loading...</span>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </template>
  56. <style type="text/css" scoped></style>
  57. <script type="text/javascript">
  58. export default {
  59. data() {
  60. return {
  61. loaded: false,
  62. showLoadMore: true,
  63. profiles: [],
  64. page: 1
  65. }
  66. },
  67. beforeMount() {
  68. this.fetchData();
  69. },
  70. methods: {
  71. fetchData() {
  72. axios.get('/api/pixelfed/v2/discover/profiles', {
  73. params: {
  74. page: this.page
  75. }
  76. })
  77. .then(res => {
  78. if(res.data.length == 0) {
  79. this.showLoadMore = false;
  80. this.loaded = true;
  81. return;
  82. }
  83. this.profiles = res.data;
  84. this.showLoadMore = this.profiles.length == 8;
  85. this.loaded = true;
  86. });
  87. },
  88. prettyCount(val) {
  89. return App.util.format.count(val);
  90. },
  91. loadMore() {
  92. this.loaded = false;
  93. this.page++;
  94. this.fetchData();
  95. },
  96. thumbUrl(p) {
  97. return p.media_attachments[0].url;
  98. },
  99. postsPerDay(profile) {
  100. let created = profile.created_at;
  101. let now = Date.now();
  102. let diff = Math.abs(created, now)
  103. let day = 1000 * 60 * 60 * 24;
  104. let days = Math.round(diff / day);
  105. let statuses = profile.statuses_count;
  106. let perDay = this.prettyCount(Math.floor(statuses / days));
  107. return perDay;
  108. }
  109. }
  110. }
  111. </script>