1
0

Memories.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <div class="discover-my-memories web-wrapper">
  3. <div v-if="isLoaded" class="container-fluid mt-3">
  4. <div class="row">
  5. <div class="col-md-4 col-lg-3">
  6. <sidebar :user="profile" />
  7. </div>
  8. <div v-if="tabIndex === 0" class="col-md-6 col-lg-6">
  9. <b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>
  10. <h1 class="font-default">My Memories</h1>
  11. <p class="font-default lead">Posts from this day in previous years</p>
  12. <hr>
  13. <b-spinner v-if="!feedLoaded" />
  14. <status-card
  15. v-for="(post, idx) in feed"
  16. :key="'ti0:'+idx+':'+post.id"
  17. :profile="profile"
  18. :status="post"
  19. />
  20. <p v-if="feedLoaded && feed.length == 0" class="lead">No memories found :(</p>
  21. </div>
  22. <div v-else-if="tabIndex === 1" class="col-md-6 col-lg-6">
  23. <b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>
  24. <h1 class="font-default">My Memories</h1>
  25. <p class="font-default lead">Posts I've liked from this day in previous years</p>
  26. <hr>
  27. <b-spinner v-if="!likedLoaded" />
  28. <status-card
  29. v-for="(post, idx) in liked"
  30. :key="'ti1:'+idx+':'+post.id"
  31. :profile="profile"
  32. :status="post"
  33. />
  34. <p v-if="likedLoaded && liked.length == 0" class="lead">No memories found :(</p>
  35. </div>
  36. <div class="col-md-2 col-lg-3">
  37. <div class="nav flex-column nav-pills font-default">
  38. <a class="nav-link" :class="{ active: tabIndex == 0 }" href="#" @click.prevent="toggleTab(0)">My Posts</a>
  39. <a class="nav-link" :class="{ active: tabIndex == 1 }" href="#" @click.prevent="toggleTab(1)">Posts I've Liked</a>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </template>
  46. <script type="text/javascript">
  47. import Drawer from './../partials/drawer.vue';
  48. import Sidebar from './../partials/sidebar.vue';
  49. import StatusCard from './../partials/TimelineStatus.vue';
  50. export default {
  51. components: {
  52. "drawer": Drawer,
  53. "sidebar": Sidebar,
  54. "status-card": StatusCard
  55. },
  56. data() {
  57. return {
  58. isLoaded: true,
  59. profile: window._sharedData.user,
  60. curDate: undefined,
  61. tabIndex: 0,
  62. feedLoaded: false,
  63. likedLoaded: false,
  64. feed: [],
  65. liked: [],
  66. breadcrumbItems: [
  67. {
  68. text: 'Discover',
  69. href: '/i/web/discover'
  70. },
  71. {
  72. text: 'My Memories',
  73. active: true
  74. }
  75. ]
  76. }
  77. },
  78. mounted() {
  79. this.curDate = new Date();
  80. this.fetchConfig();
  81. },
  82. methods: {
  83. fetchConfig() {
  84. if(
  85. window._sharedData.hasOwnProperty('discoverMeta') &&
  86. window._sharedData.discoverMeta
  87. ) {
  88. this.config = window._sharedData.discoverMeta;
  89. this.isLoaded = true;
  90. if(this.config.memories.enabled == false) {
  91. this.$router.push('/i/web/discover');
  92. } else {
  93. this.fetchMemories();
  94. }
  95. return;
  96. }
  97. axios.get('/api/pixelfed/v2/discover/meta')
  98. .then(res => {
  99. this.config = res.data;
  100. this.isLoaded = true;
  101. window._sharedData.discoverMeta = res.data;
  102. if(res.data.memories.enabled == false) {
  103. this.$router.push('/i/web/discover');
  104. } else {
  105. this.fetchMemories();
  106. }
  107. })
  108. },
  109. fetchMemories() {
  110. axios.get('/api/pixelfed/v2/discover/memories')
  111. .then(res => {
  112. this.feed = res.data;
  113. this.feedLoaded = true;
  114. });
  115. },
  116. fetchLiked() {
  117. axios.get('/api/pixelfed/v2/discover/memories?type=liked')
  118. .then(res => {
  119. this.liked = res.data;
  120. this.likedLoaded = true;
  121. });
  122. },
  123. toggleTab(idx) {
  124. if(idx == 1) {
  125. if(!this.likedLoaded) {
  126. this.fetchLiked();
  127. }
  128. }
  129. this.tabIndex = idx;
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="scss" scoped>
  135. .discover-my-memories {
  136. .bg-stellar {
  137. background: #7474BF;
  138. background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
  139. background: linear-gradient(to right, #348AC7, #7474BF);
  140. }
  141. .font-default {
  142. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  143. letter-spacing: -0.7px;
  144. }
  145. .active {
  146. font-weight: 700;
  147. }
  148. }
  149. </style>