NotificationCard.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <template>
  2. <div>
  3. <div class="card notification-card shadow-none border">
  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-white"></i></span>
  7. <span class="small text-dark text-uppercase font-weight-bold">Notifications</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 py-0 contents" style="max-height: 230px; overflow-y: scroll;">
  17. <div v-if="notifications.length > 0" class="media align-items-center px-3 py-2 border-bottom border-light" 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" :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" :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" :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" :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" :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 font-weight-bold" :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. notificationMaxId: 0,
  70. };
  71. },
  72. mounted() {
  73. this.fetchNotifications();
  74. },
  75. updated() {
  76. },
  77. methods: {
  78. fetchNotifications() {
  79. axios.get('/api/pixelfed/v1/notifications')
  80. .then(res => {
  81. let data = res.data.filter(n => {
  82. if(n.type == 'share' && !status) {
  83. return false;
  84. }
  85. return true;
  86. });
  87. let ids = res.data.map(n => n.id);
  88. this.notificationMaxId = Math.min(...ids);
  89. this.notifications = data;
  90. $('.notification-card .loader').addClass('d-none');
  91. $('.notification-card .contents').removeClass('d-none');
  92. //this.notificationPoll();
  93. });
  94. },
  95. infiniteNotifications($state) {
  96. if(this.notificationCursor > 5) {
  97. $state.complete();
  98. return;
  99. }
  100. axios.get('/api/pixelfed/v1/notifications', {
  101. params: {
  102. page: this.notificationCursor
  103. }
  104. }).then(res => {
  105. if(res.data.length) {
  106. let data = res.data.filter(n => {
  107. if(n.type == 'share' && !status) {
  108. return false;
  109. }
  110. if(_.find(this.notifications, {id: n.id})) {
  111. return false;
  112. }
  113. return true;
  114. });
  115. this.notifications.push(...data);
  116. this.notificationCursor++;
  117. $state.loaded();
  118. } else {
  119. $state.complete();
  120. }
  121. });
  122. },
  123. truncate(text) {
  124. if(text.length <= 15) {
  125. return text;
  126. }
  127. return text.slice(0,15) + '...'
  128. },
  129. timeAgo(ts) {
  130. let date = Date.parse(ts);
  131. let seconds = Math.floor((new Date() - date) / 1000);
  132. let interval = Math.floor(seconds / 31536000);
  133. if (interval >= 1) {
  134. return interval + "y";
  135. }
  136. interval = Math.floor(seconds / 604800);
  137. if (interval >= 1) {
  138. return interval + "w";
  139. }
  140. interval = Math.floor(seconds / 86400);
  141. if (interval >= 1) {
  142. return interval + "d";
  143. }
  144. interval = Math.floor(seconds / 3600);
  145. if (interval >= 1) {
  146. return interval + "h";
  147. }
  148. interval = Math.floor(seconds / 60);
  149. if (interval >= 1) {
  150. return interval + "m";
  151. }
  152. return Math.floor(seconds) + "s";
  153. },
  154. mentionUrl(status) {
  155. let username = status.account.username;
  156. let id = status.id;
  157. return '/p/' + username + '/' + id;
  158. },
  159. notificationPoll() {
  160. let interval = this.notifications.length > 5 ? 15000 : 120000;
  161. let self = this;
  162. setInterval(function() {
  163. axios.get('/api/pixelfed/v1/notifications')
  164. .then(res => {
  165. let data = res.data.filter(n => {
  166. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  167. return false;
  168. }
  169. return true;
  170. });
  171. if(data.length) {
  172. let ids = data.map(n => n.id);
  173. self.notificationMaxId = Math.max(...ids);
  174. self.notifications.unshift(...data);
  175. let beep = new Audio('/static/beep.mp3');
  176. beep.volume = 0.7;
  177. beep.play();
  178. $('.notification-card .far.fa-bell').addClass('fas text-danger').removeClass('far text-muted');
  179. }
  180. });
  181. }, interval);
  182. }
  183. }
  184. }
  185. </script>