NotificationCard.vue 5.5 KB

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