NotificationCard.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <template>
  2. <div>
  3. <transition name="fade">
  4. <div class="card notification-card shadow-none border">
  5. <div class="card-header bg-white">
  6. <p class="mb-0 d-flex align-items-center justify-content-between">
  7. <span data-toggle="tooltip" data-placement="bottom"><i class="fas fa-redo fa-lg text-white"></i></span>
  8. <span class="small text-dark text-uppercase font-weight-bold">Alerts</span>
  9. <a class="text-decoration-none text-muted" href="/account/activity"><i class="fas fa-inbox fa-lg"></i></a>
  10. </p>
  11. </div>
  12. <div class="card-body loader text-center" style="height: 200px;">
  13. <div class="spinner-border" role="status">
  14. <span class="sr-only">Loading...</span>
  15. </div>
  16. </div>
  17. <div class="card-body pt-2 px-0 py-0 contents" style="max-height: 200px; overflow-y: scroll;">
  18. <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">
  19. <img class="mr-2 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png';">
  20. <div class="media-body font-weight-light small">
  21. <div v-if="n.type == 'favourite'">
  22. <p class="my-0">
  23. <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>.
  24. </p>
  25. </div>
  26. <div v-else-if="n.type == 'comment'">
  27. <p class="my-0">
  28. <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>.
  29. </p>
  30. </div>
  31. <div v-else-if="n.type == 'mention'">
  32. <p class="my-0">
  33. <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.
  34. </p>
  35. </div>
  36. <div v-else-if="n.type == 'follow'">
  37. <p class="my-0">
  38. <a :href="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{truncate(n.account.username)}}</a> followed you.
  39. </p>
  40. </div>
  41. <div v-else-if="n.type == 'share'">
  42. <p class="my-0">
  43. <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>.
  44. </p>
  45. </div>
  46. <div v-else-if="n.type == 'modlog'">
  47. <p class="my-0">
  48. <a :href="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{truncate(n.account.username)}}</a> updated a <a class="font-weight-bold" v-bind:href="n.modlog.url">modlog</a>.
  49. </p>
  50. </div>
  51. </div>
  52. <div class="small text-muted font-weight-bold" :title="n.created_at">{{timeAgo(n.created_at)}}</div>
  53. </div>
  54. <div v-if="notifications.length">
  55. <infinite-loading @infinite="infiniteNotifications">
  56. <div slot="no-results" class="font-weight-bold"></div>
  57. <div slot="no-more" class="font-weight-bold"></div>
  58. </infinite-loading>
  59. </div>
  60. <div v-if="notifications.length == 0" class="text-lighter text-center py-3">
  61. <p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p>
  62. <p class="mb-0 small font-weight-bold">0 Notifications!</p>
  63. </div>
  64. </div>
  65. </div>
  66. </transition>
  67. </div>
  68. </template>
  69. <style type="text/css" scoped></style>
  70. <script type="text/javascript">
  71. export default {
  72. data() {
  73. return {
  74. notifications: {},
  75. notificationCursor: 2,
  76. notificationMaxId: 0,
  77. };
  78. },
  79. mounted() {
  80. this.fetchNotifications();
  81. },
  82. updated() {
  83. },
  84. methods: {
  85. fetchNotifications() {
  86. axios.get('/api/pixelfed/v1/notifications')
  87. .then(res => {
  88. let data = res.data.filter(n => {
  89. if(n.type == 'share' && !status) {
  90. return false;
  91. }
  92. return true;
  93. });
  94. let ids = res.data.map(n => n.id);
  95. this.notificationMaxId = Math.min(...ids);
  96. this.notifications = data;
  97. $('.notification-card .loader').addClass('d-none');
  98. $('.notification-card .contents').removeClass('d-none');
  99. //this.notificationPoll();
  100. });
  101. },
  102. infiniteNotifications($state) {
  103. if(this.notificationCursor > 5) {
  104. $state.complete();
  105. return;
  106. }
  107. axios.get('/api/pixelfed/v1/notifications', {
  108. params: {
  109. page: this.notificationCursor
  110. }
  111. }).then(res => {
  112. if(res.data.length) {
  113. let data = res.data.filter(n => {
  114. if(n.type == 'share' && !status) {
  115. return false;
  116. }
  117. if(_.find(this.notifications, {id: n.id})) {
  118. return false;
  119. }
  120. return true;
  121. });
  122. this.notifications.push(...data);
  123. this.notificationCursor++;
  124. $state.loaded();
  125. } else {
  126. $state.complete();
  127. }
  128. });
  129. },
  130. truncate(text) {
  131. if(text.length <= 15) {
  132. return text;
  133. }
  134. return text.slice(0,15) + '...'
  135. },
  136. timeAgo(ts) {
  137. let date = Date.parse(ts);
  138. let seconds = Math.floor((new Date() - date) / 1000);
  139. let interval = Math.floor(seconds / 31536000);
  140. if (interval >= 1) {
  141. return interval + "y";
  142. }
  143. interval = Math.floor(seconds / 604800);
  144. if (interval >= 1) {
  145. return interval + "w";
  146. }
  147. interval = Math.floor(seconds / 86400);
  148. if (interval >= 1) {
  149. return interval + "d";
  150. }
  151. interval = Math.floor(seconds / 3600);
  152. if (interval >= 1) {
  153. return interval + "h";
  154. }
  155. interval = Math.floor(seconds / 60);
  156. if (interval >= 1) {
  157. return interval + "m";
  158. }
  159. return Math.floor(seconds) + "s";
  160. },
  161. mentionUrl(status) {
  162. let username = status.account.username;
  163. let id = status.id;
  164. return '/p/' + username + '/' + id;
  165. },
  166. notificationPoll() {
  167. let interval = this.notifications.length > 5 ? 15000 : 120000;
  168. let self = this;
  169. setInterval(function() {
  170. axios.get('/api/pixelfed/v1/notifications')
  171. .then(res => {
  172. let data = res.data.filter(n => {
  173. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  174. return false;
  175. }
  176. return true;
  177. });
  178. if(data.length) {
  179. let ids = data.map(n => n.id);
  180. self.notificationMaxId = Math.max(...ids);
  181. self.notifications.unshift(...data);
  182. let beep = new Audio('/static/beep.mp3');
  183. beep.volume = 0.7;
  184. beep.play();
  185. $('.notification-card .far.fa-bell').addClass('fas text-danger').removeClass('far text-muted');
  186. }
  187. });
  188. }, interval);
  189. },
  190. refreshNotifications() {
  191. let self = this;
  192. axios.get('/api/pixelfed/v1/notifications')
  193. .then(res => {
  194. let data = res.data.filter(n => {
  195. if(n.type == 'share' || self.notificationMaxId >= n.id) {
  196. return false;
  197. }
  198. return true;
  199. });
  200. if(data.length > 0) {
  201. let ids = data.map(n => n.id);
  202. let max = Math.max(ids);
  203. if(max <= self.notificationMaxId) {
  204. return;
  205. } else {
  206. self.notificationMaxId = max;
  207. self.notifications = data;
  208. let beep = new Audio('/static/beep.mp3');
  209. beep.volume = 0.7;
  210. beep.play();
  211. }
  212. }
  213. });
  214. }
  215. }
  216. }
  217. </script>