pixelfed/resources/assets/components/discover/Memories.vue

173 lines
4.3 KiB
Vue
Raw Normal View History

2023-06-11 21:01:02 +00:00
<template>
<div class="discover-my-memories web-wrapper">
<div v-if="isLoaded" class="container-fluid mt-3">
<div class="row">
<div class="col-md-4 col-lg-3">
<sidebar :user="profile" />
</div>
<div v-if="tabIndex === 0" class="col-md-6 col-lg-6">
<b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>
<h1 class="font-default">My Memories</h1>
<p class="font-default lead">Posts from this day in previous years</p>
<hr>
<b-spinner v-if="!feedLoaded" />
<status-card
v-for="(post, idx) in feed"
:key="'ti0:'+idx+':'+post.id"
:profile="profile"
:status="post"
/>
<p v-if="feedLoaded && feed.length == 0" class="lead">No memories found :(</p>
</div>
<div v-else-if="tabIndex === 1" class="col-md-6 col-lg-6">
<b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>
<h1 class="font-default">My Memories</h1>
<p class="font-default lead">Posts I've liked from this day in previous years</p>
<hr>
<b-spinner v-if="!likedLoaded" />
<status-card
v-for="(post, idx) in liked"
:key="'ti1:'+idx+':'+post.id"
:profile="profile"
:status="post"
/>
<p v-if="likedLoaded && liked.length == 0" class="lead">No memories found :(</p>
</div>
<div class="col-md-2 col-lg-3">
<div class="nav flex-column nav-pills font-default">
<a class="nav-link" :class="{ active: tabIndex == 0 }" href="#" @click.prevent="toggleTab(0)">My Posts</a>
<a class="nav-link" :class="{ active: tabIndex == 1 }" href="#" @click.prevent="toggleTab(1)">Posts I've Liked</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import Drawer from './../partials/drawer.vue';
import Sidebar from './../partials/sidebar.vue';
import StatusCard from './../partials/TimelineStatus.vue';
export default {
components: {
"drawer": Drawer,
"sidebar": Sidebar,
"status-card": StatusCard
},
data() {
return {
isLoaded: true,
profile: window._sharedData.user,
curDate: undefined,
tabIndex: 0,
feedLoaded: false,
likedLoaded: false,
feed: [],
liked: [],
breadcrumbItems: [
{
text: 'Discover',
href: '/i/web/discover'
},
{
text: 'My Memories',
active: true
}
]
}
},
mounted() {
this.curDate = new Date();
this.fetchConfig();
},
methods: {
fetchConfig() {
if(
window._sharedData.hasOwnProperty('discoverMeta') &&
window._sharedData.discoverMeta
) {
this.config = window._sharedData.discoverMeta;
this.isLoaded = true;
if(this.config.memories.enabled == false) {
this.$router.push('/i/web/discover');
} else {
this.fetchMemories();
}
return;
}
axios.get('/api/pixelfed/v2/discover/meta')
.then(res => {
this.config = res.data;
this.isLoaded = true;
window._sharedData.discoverMeta = res.data;
if(res.data.memories.enabled == false) {
this.$router.push('/i/web/discover');
} else {
this.fetchMemories();
}
})
},
fetchMemories() {
axios.get('/api/pixelfed/v2/discover/memories')
.then(res => {
this.feed = res.data;
this.feedLoaded = true;
});
},
fetchLiked() {
axios.get('/api/pixelfed/v2/discover/memories?type=liked')
.then(res => {
this.liked = res.data;
this.likedLoaded = true;
});
},
toggleTab(idx) {
if(idx == 1) {
if(!this.likedLoaded) {
this.fetchLiked();
}
}
this.tabIndex = idx;
}
}
}
</script>
<style lang="scss" scoped>
.discover-my-memories {
.bg-stellar {
background: #7474BF;
background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
background: linear-gradient(to right, #348AC7, #7474BF);
}
.font-default {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
letter-spacing: -0.7px;
}
.active {
font-weight: 700;
}
}
</style>