pixelfed/resources/assets/js/components/ProfileDirectory.vue

124 lines
3.1 KiB
Vue

<template>
<div>
<div class="col-12">
<p class="font-weight-bold text-lighter text-uppercase">Profiles Directory</p>
<div v-if="loaded" class="">
<div class="row">
<div class="col-12 col-md-6 p-1" v-for="(profile, index) in profiles">
<div class="card card-body border shadow-none py-2">
<div class="media">
<a :href="profile.url"><img :src="profile.avatar" class="rounded-circle border mr-3" alt="..." width="40px" height="40px"></a>
<div class="media-body">
<p class="mt-0 mb-0 font-weight-bold">
<a :href="profile.url" class="text-dark">{{profile.username}}</a>
</p>
<p class="mb-1 small text-lighter d-flex justify-content-between font-weight-bold">
<span>
<span>{{prettyCount(profile.statuses_count)}}</span> POSTS
</span>
<span>
<span>{{postsPerDay(profile)}}</span> POSTS/DAY
</span>
<span>
<span>{{prettyCount(profile.followers_count)}}</span> FOLLOWERS
</span>
</p>
<p class="mb-1">
<span v-for="(post, i) in profile.posts" class="shadow-sm" :key="'profile_posts_'+i">
<a :href="post.url" class="text-decoration-none mr-1">
<img :src="thumbUrl(post)" width="62.3px" height="62.3px" class="border rounded">
</a>
</span>
</p>
</div>
</div>
</div>
</div>
<div v-if="showLoadMore" class="col-12">
<p class="text-center mb-0 pt-3">
<button class="btn btn-outline-secondary btn-sm px-4 py-1 font-weight-bold" @click="loadMore()">Load More</button>
</p>
</div>
</div>
</div>
<div v-else>
<div class="row">
<div class="col-12 d-flex justify-content-center align-items-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style type="text/css" scoped></style>
<script type="text/javascript">
export default {
data() {
return {
loaded: false,
showLoadMore: true,
profiles: [],
page: 1
}
},
beforeMount() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/api/pixelfed/v2/discover/profiles', {
params: {
page: this.page
}
})
.then(res => {
if(res.data.length == 0) {
this.showLoadMore = false;
this.loaded = true;
return;
}
this.profiles = res.data;
this.showLoadMore = this.profiles.length == 8;
this.loaded = true;
});
},
prettyCount(val) {
return App.util.format.count(val);
},
loadMore() {
this.loaded = false;
this.page++;
this.fetchData();
},
thumbUrl(p) {
return p.media_attachments[0].url;
},
postsPerDay(profile) {
let created = profile.created_at;
let now = Date.now();
let diff = Math.abs(created, now)
let day = 1000 * 60 * 60 * 24;
let days = Math.round(diff / day);
let statuses = profile.statuses_count;
let perDay = this.prettyCount(Math.floor(statuses / days));
return perDay;
}
}
}
</script>