NotificationCard.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <template>
  2. <div>
  3. <div class="card notification-card">
  4. <div class="card-header bg-white">
  5. <p class="mb-0 d-flex align-items-center justify-content-between">
  6. <span class="text-muted">Notifications</span>
  7. <a class="text-dark small" href="/account/activity">See All</a>
  8. </p>
  9. </div>
  10. <div class="card-body loader text-center" style="height: 230px;">
  11. <div class="spinner-border" role="status">
  12. <span class="sr-only">Loading...</span>
  13. </div>
  14. </div>
  15. <div class="card-body pt-2 contents" style="max-height: 230px; overflow-y: scroll;">
  16. <div v-if="notifications.length > 0" class="media mb-3 align-items-center" v-for="(n, index) in notifications">
  17. <img class="mr-2 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px">
  18. <div class="media-body font-weight-light small">
  19. <div v-if="n.type == 'favourite'">
  20. <p class="my-0">
  21. <a :href="n.account.url" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{truncate(n.account.username)}}</a> liked your <a class="font-weight-bold" v-bind:href="n.status.url">post</a>.
  22. </p>
  23. </div>
  24. <div v-else-if="n.type == 'comment'">
  25. <p class="my-0">
  26. <a :href="n.account.url" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{truncate(n.account.username)}}</a> commented on your <a class="font-weight-bold" v-bind:href="n.status.url">post</a>.
  27. </p>
  28. </div>
  29. <div v-else-if="n.type == 'mention'">
  30. <p class="my-0">
  31. <a :href="n.account.url" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{truncate(n.account.username)}}</a> <a class="font-weight-bold" v-bind:href="mentionUrl(n.status)">mentioned</a> you.
  32. </p>
  33. </div>
  34. <div v-else-if="n.type == 'follow'">
  35. <p class="my-0">
  36. <a :href="n.account.url" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{truncate(n.account.username)}}</a> followed you.
  37. </p>
  38. </div>
  39. <div v-else-if="n.type == 'share'">
  40. <p class="my-0">
  41. <a :href="n.account.url" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{truncate(n.account.username)}}</a> shared your <a class="font-weight-bold" v-bind:href="n.status.reblog.url">post</a>.
  42. </p>
  43. </div>
  44. </div>
  45. <div class="small text-muted" data-toggle="tooltip" data-placement="bottom" :title="n.created_at">{{timeAgo(n.created_at)}}</div>
  46. </div>
  47. <div v-if="notifications.length">
  48. <infinite-loading @infinite="infiniteNotifications">
  49. <div slot="no-results" class="font-weight-bold"></div>
  50. <div slot="no-more" class="font-weight-bold"></div>
  51. </infinite-loading>
  52. </div>
  53. <div v-if="notifications.length == 0" class="text-lighter text-center py-3">
  54. <p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p>
  55. <p class="mb-0 small font-weight-bold">0 Notifications!</p>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </template>
  61. <style type="text/css" scoped></style>
  62. <script type="text/javascript">
  63. export default {
  64. data() {
  65. return {
  66. notifications: {},
  67. notificationCursor: 2
  68. };
  69. },
  70. mounted() {
  71. if(window.outerWidth > 767) {
  72. this.fetchNotifications();
  73. }
  74. },
  75. updated() {
  76. $('[data-toggle="tooltip"]').tooltip()
  77. },
  78. methods: {
  79. fetchNotifications() {
  80. axios.get('/api/v1/notifications')
  81. .then(res => {
  82. let data = res.data.filter(n => {
  83. if(n.type == 'share' && !status) {
  84. return false;
  85. }
  86. return true;
  87. });
  88. this.notifications = data;
  89. $('.notification-card .loader').addClass('d-none');
  90. $('.notification-card .contents').removeClass('d-none');
  91. });
  92. },
  93. infiniteNotifications($state) {
  94. if(this.notificationCursor > 10) {
  95. $state.complete();
  96. return;
  97. }
  98. axios.get('/api/v1/notifications', {
  99. params: {
  100. page: this.notificationCursor
  101. }
  102. }).then(res => {
  103. if(res.data.length) {
  104. let data = res.data.filter(n => {
  105. if(n.type == 'share' && !status) {
  106. return false;
  107. }
  108. return true;
  109. });
  110. this.notifications.push(...data);
  111. this.notificationCursor++;
  112. $state.loaded();
  113. } else {
  114. $state.complete();
  115. }
  116. });
  117. },
  118. truncate(text) {
  119. if(text.length <= 15) {
  120. return text;
  121. }
  122. return text.slice(0,15) + '...'
  123. },
  124. timeAgo(ts) {
  125. let date = Date.parse(ts);
  126. let seconds = Math.floor((new Date() - date) / 1000);
  127. let interval = Math.floor(seconds / 31536000);
  128. if (interval >= 1) {
  129. return interval + "y";
  130. }
  131. interval = Math.floor(seconds / 604800);
  132. if (interval >= 1) {
  133. return interval + "w";
  134. }
  135. interval = Math.floor(seconds / 86400);
  136. if (interval >= 1) {
  137. return interval + "d";
  138. }
  139. interval = Math.floor(seconds / 3600);
  140. if (interval >= 1) {
  141. return interval + "h";
  142. }
  143. interval = Math.floor(seconds / 60);
  144. if (interval >= 1) {
  145. return interval + "m";
  146. }
  147. return Math.floor(seconds) + "s";
  148. },
  149. mentionUrl(status) {
  150. let username = status.account.username;
  151. let id = status.id;
  152. return '/p/' + username + '/' + id;
  153. }
  154. }
  155. }
  156. </script>