pixelfed/resources/assets/components/discover/Insights.vue
2023-06-11 15:01:02 -06:00

191 lines
4.6 KiB
Vue

<template>
<div class="discover-insights-component">
<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 class="col-md-6 col-lg-6">
<b-breadcrumb class="font-default" :items="breadcrumbItems"></b-breadcrumb>
<h1 class="font-default">Account Insights</h1>
<p class="font-default lead">A brief overview of your account</p>
<hr>
<div class="row">
<div class="col-12 col-md-6 mb-3">
<div class="card bg-midnight">
<div class="card-body font-default text-white">
<h1 class="display-4 mb-n2">{{ formatCount(profile.statuses_count) }}</h1>
<p class="primary lead mb-0 font-weight-bold">Posts</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-3">
<div class="card bg-midnight">
<div class="card-body font-default text-white">
<h1 class="display-4 mb-n2">{{ formatCount(profile.followers_count) }}</h1>
<p class="primary lead mb-0 font-weight-bold">Followers</p>
</div>
</div>
</div>
</div>
<div v-if="profile.statuses_count" class="card my-3 bg-midnight">
<div class="card-header bg-dark border-bottom border-primary text-white font-default lead">Popular Posts</div>
<div v-if="!popularLoaded" class="card-body text-white">
<b-spinner/>
</div>
<ul v-else class="list-group list-group-flush font-default text-white">
<li v-for="post in popular" class="list-group-item bg-midnight">
<div class="media align-items-center">
<img
v-if="post.media_attachments.length"
:src="post.media_attachments[0].url"
onerror="this.onerror=null;this.src='/storage/no-preview.png?v=0'"
class="media-photo shadow">
<div class="media-body">
<p class="media-caption mb-0">{{ post.content_text.slice(0, 40) }}</p>
<p class="mb-0">
<span class="font-weight-bold">{{ post.favourites_count }} Likes</span>
<span class="mx-2">·</span>
<span class="text-muted">Posted {{ timeago(post.created_at) }} ago</span>
</p>
</div>
<button class="btn btn-primary primary font-weight-bold rounded-pill" @click="gotoPost(post)">View</button>
</div>
</li>
</ul>
</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,
isLoading: true,
profile: window._sharedData.user,
feed: [],
popular: [],
popularLoaded: false,
breadcrumbItems: [
{
text: 'Discover',
href: '/i/web/discover'
},
{
text: 'Account Insights',
active: true
}
]
}
},
mounted() {
this.fetchConfig();
},
methods: {
fetchConfig() {
axios.get('/api/pixelfed/v2/discover/meta')
.then(res => {
if(res.data.insights.enabled == false) {
this.$router.push('/i/web/discover');
}
this.fetchPopular();
})
},
fetchPopular() {
axios.get('/api/pixelfed/v2/discover/account-insights')
.then(res => {
this.popular = res.data.filter(p => {
return p.favourites_count;
});
this.popularLoaded = true;
})
},
formatCount(val) {
return App.util.format.count(val);
},
timeago(ts) {
return App.util.format.timeAgo(ts);
},
gotoPost(status) {
this.$router.push({
name: 'post',
path: `/i/web/post/${status.id}`,
params: {
id: status.id,
cachedStatus: status,
cachedProfile: this.profile
}
})
}
}
}
</script>
<style lang="scss" scoped>
.discover-insights-component {
.bg-stellar {
background: #7474BF;
background: -webkit-linear-gradient(to right, #348AC7, #7474BF);
background: linear-gradient(to right, #348AC7, #7474BF);
}
.bg-midnight {
background: #232526;
background: -webkit-linear-gradient(to right, #414345, #232526);
background: linear-gradient(to right, #414345, #232526);
}
.font-default {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
letter-spacing: -0.7px;
}
.active {
font-weight: 700;
}
.media-photo {
width: 70px;
height: 70px;
border-radius: 8px;
margin-right: 2rem;
object-fit: cover;
}
.media-caption {
letter-spacing: -0.3px;
font-size: 17px;
opacity: 0.7;
}
}
</style>