Activity.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. <template>
  2. <div>
  3. <!-- <div class="bg-white py-4">
  4. <div class="container">
  5. <div class="d-flex justify-content-between align-items-center">
  6. <div></div>
  7. <a href="/account/activity" class="cursor-pointer font-weight-bold text-primary">Notifications</a>
  8. <a href="/account/direct" class="cursor-pointer font-weight-bold text-dark">Direct Messages</a>
  9. <a href="/account/following" class="cursor-pointer font-weight-bold text-dark">Following</a>
  10. <div></div>
  11. </div>
  12. </div>
  13. </div> -->
  14. <div class="container">
  15. <div class="row my-5">
  16. <div class="col-12 col-md-8 offset-md-2">
  17. <div v-if="notifications.length > 0" class="media mb-3 align-items-center px-3 border-bottom pb-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">
  20. <div v-if="n.type == 'favourite'">
  21. <p class="my-0">
  22. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> liked your <a class="font-weight-bold" v-bind:href="getPostUrl(n.status)">post</a>.
  23. </p>
  24. </div>
  25. <div v-else-if="n.type == 'comment'">
  26. <p class="my-0">
  27. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> commented on your <a class="font-weight-bold" v-bind:href="getPostUrl(n.status)">post</a>.
  28. </p>
  29. </div>
  30. <div v-else-if="n.type == 'mention'">
  31. <p class="my-0">
  32. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{n.account.local == false ? '@':''}}{{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="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{n.account.local == false ? '@':''}}{{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="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" data-placement="bottom" data-toggle="tooltip" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> shared your <a class="font-weight-bold" v-bind:href="getPostUrl(n.status)">post</a>.
  43. </p>
  44. </div>
  45. <div v-else-if="n.type == 'modlog'">
  46. <p class="my-0">
  47. <a :href="getProfileUrl(n.account)" 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>.
  48. </p>
  49. </div>
  50. <div v-else-if="n.type == 'tagged'">
  51. <p class="my-0">
  52. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> tagged you in a <a class="font-weight-bold" v-bind:href="n.tagged.post_url">post</a>.
  53. </p>
  54. </div>
  55. <div v-else-if="n.type == 'direct'">
  56. <p class="my-0">
  57. <a :href="getProfileUrl(n.account)" class="font-weight-bold text-dark word-break" :title="n.account.username">{{n.account.local == false ? '@':''}}{{truncate(n.account.username)}}</a> sent a <a class="font-weight-bold" v-bind:href="'/account/direct/t/'+n.account.id">dm</a>.
  58. </p>
  59. </div>
  60. <div class="align-items-center">
  61. <span class="small text-muted" data-toggle="tooltip" data-placement="bottom" :title="n.created_at">{{timeAgo(n.created_at)}}</span>
  62. </div>
  63. </div>
  64. <div>
  65. <div v-if="n.status && n.status && n.status.media_attachments && n.status.media_attachments.length">
  66. <a :href="getPostUrl(n.status)">
  67. <img :src="n.status.media_attachments[0].preview_url" width="32px" height="32px">
  68. </a>
  69. </div>
  70. <div v-else-if="n.status && n.status.parent && n.status.parent.media_attachments && n.status.parent.media_attachments.length">
  71. <a :href="n.status.parent.url">
  72. <img :src="n.status.parent.media_attachments[0].preview_url" width="32px" height="32px">
  73. </a>
  74. </div>
  75. <!-- <div v-else-if="n.status && n.status.parent && n.status.parent.media_attachments && n.status.parent.media_attachments.length">
  76. <a :href="n.status.parent.url">
  77. <img :src="n.status.parent.media_attachments[0].preview_url" width="32px" height="32px">
  78. </a>
  79. </div> -->
  80. <!-- <div v-else-if="n.type == 'follow' && n.relationship.following == false">
  81. <a href="#" class="btn btn-primary py-0 font-weight-bold" @click.prevent="followProfile(n);">
  82. Follow
  83. </a>
  84. </div> -->
  85. <!-- <div v-else-if="n.status && n.status.parent && !n.status.parent.media_attachments && n.type == 'like' && n.relationship.following == false">
  86. <a href="#" class="btn btn-primary py-0 font-weight-bold">
  87. Follow
  88. </a>
  89. </div> -->
  90. <div v-else>
  91. <a class="btn btn-outline-primary py-0 font-weight-bold" :href="viewContext(n)">View</a>
  92. </div>
  93. </div>
  94. </div>
  95. <div v-if="notifications.length">
  96. <infinite-loading @infinite="infiniteNotifications">
  97. <div slot="no-results" class="font-weight-bold"></div>
  98. <div slot="no-more" class="font-weight-bold"></div>
  99. </infinite-loading>
  100. </div>
  101. <div v-if="notifications.length == 0" class="text-lighter text-center py-3">
  102. <p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p>
  103. <p class="mb-0 small font-weight-bold">0 Notifications!</p>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </template>
  110. <script type="text/javascript">
  111. export default {
  112. data() {
  113. return {
  114. notifications: {},
  115. notificationCursor: 2,
  116. notificationMaxId: 0,
  117. };
  118. },
  119. mounted() {
  120. this.fetchNotifications();
  121. },
  122. updated() {
  123. $('[data-toggle="tooltip"]').tooltip()
  124. },
  125. methods: {
  126. fetchNotifications() {
  127. axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
  128. window._sharedData.curUser = res.data;
  129. window.App.util.navatar();
  130. });
  131. axios.get('/api/pixelfed/v1/notifications', {
  132. params: {
  133. pg: true
  134. }
  135. })
  136. .then(res => {
  137. let data = res.data.filter(n => {
  138. if(n.type == 'share' && !status) {
  139. return false;
  140. }
  141. return true;
  142. });
  143. let ids = res.data.map(n => n.id);
  144. this.notificationMaxId = Math.max(...ids);
  145. this.notifications = data;
  146. $('.notification-card .loader').addClass('d-none');
  147. $('.notification-card .contents').removeClass('d-none');
  148. });
  149. },
  150. infiniteNotifications($state) {
  151. if(this.notificationCursor > 10) {
  152. $state.complete();
  153. return;
  154. }
  155. axios.get('/api/pixelfed/v1/notifications', {
  156. params: {
  157. pg: true,
  158. page: this.notificationCursor
  159. }
  160. }).then(res => {
  161. if(res.data.length) {
  162. let data = res.data.filter(n => {
  163. if(n.type == 'share' && !status) {
  164. return false;
  165. }
  166. if(_.find(this.notifications, {id: n.id})) {
  167. return false;
  168. }
  169. return true;
  170. });
  171. this.notifications.push(...data);
  172. this.notificationCursor++;
  173. $state.loaded();
  174. } else {
  175. $state.complete();
  176. }
  177. });
  178. },
  179. truncate(text) {
  180. if(text.length <= 15) {
  181. return text;
  182. }
  183. return text.slice(0,15) + '...'
  184. },
  185. timeAgo(ts) {
  186. let date = Date.parse(ts);
  187. let seconds = Math.floor((new Date() - date) / 1000);
  188. let interval = Math.floor(seconds / 31536000);
  189. if (interval >= 1) {
  190. return interval + "y";
  191. }
  192. interval = Math.floor(seconds / 604800);
  193. if (interval >= 1) {
  194. return interval + "w";
  195. }
  196. interval = Math.floor(seconds / 86400);
  197. if (interval >= 1) {
  198. return interval + "d";
  199. }
  200. interval = Math.floor(seconds / 3600);
  201. if (interval >= 1) {
  202. return interval + "h";
  203. }
  204. interval = Math.floor(seconds / 60);
  205. if (interval >= 1) {
  206. return interval + "m";
  207. }
  208. return Math.floor(seconds) + "s";
  209. },
  210. mentionUrl(status) {
  211. let username = status.account.username;
  212. let id = status.id;
  213. return '/p/' + username + '/' + id;
  214. },
  215. followProfile(n) {
  216. let self = this;
  217. let id = n.account.id;
  218. axios.post('/i/follow', {
  219. item: id
  220. }).then(res => {
  221. self.notifications.map(notification => {
  222. if(notification.account.id === id) {
  223. notification.relationship.following = true;
  224. }
  225. });
  226. }).catch(err => {
  227. if(err.response.data.message) {
  228. swal('Error', err.response.data.message, 'error');
  229. }
  230. });
  231. },
  232. viewContext(n) {
  233. switch(n.type) {
  234. case 'follow':
  235. return n.account.url;
  236. break;
  237. case 'mention':
  238. return n.status.url;
  239. break;
  240. case 'like':
  241. case 'favourite':
  242. case 'comment':
  243. return n.status.url;
  244. break;
  245. case 'tagged':
  246. return n.tagged.post_url;
  247. break;
  248. case 'direct':
  249. return '/account/direct/t/'+n.account.id;
  250. break
  251. }
  252. return '/';
  253. },
  254. getProfileUrl(account) {
  255. if(account.local == true) {
  256. return account.url;
  257. }
  258. return '/i/web/profile/_/' + account.id;
  259. },
  260. getPostUrl(status) {
  261. if(status.local == true) {
  262. return status.url;
  263. }
  264. return '/i/web/post/_/' + status.account.id + '/' + status.id;
  265. }
  266. }
  267. }
  268. </script>