pixelfed/resources/assets/components/discover/Insights.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>