forked from mirror/pixelfed
228 lines
7.9 KiB
Vue
228 lines
7.9 KiB
Vue
|
<template>
|
||
|
|
<div class="bg-dark text-white">
|
||
|
|
<div v-if="!loaded" style="height: 100vh;" class="d-flex justify-content-center align-items-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<div class="spinner-border text-light" role="status">
|
||
|
|
<span class="sr-only">Loading...</span>
|
||
|
|
</div>
|
||
|
|
<p class="mb-0 lead mt-2">Loading</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="loaded && notEnoughData" style="height: 100vh;" class="d-flex justify-content-center align-items-center">
|
||
|
|
<div class="text-center">
|
||
|
|
<p class="display-4">Oops!</p>
|
||
|
|
<p class="h3 font-weight-light py-3">We don't have enough data to display your <span class="font-weight-bold">#my2020</span>.</p>
|
||
|
|
<p class="mb-0 h5 font-weight-light">We hope to see you next year!</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="loaded && !notEnoughData" class="d-flex justify-content-center align-items-center" style="width:100%;height:100vh;min-height:500px; padding: 0 15px;">
|
||
|
|
|
||
|
|
<div v-if="page == 1" class="text-center">
|
||
|
|
<p class="h1 font-weight-light">Hello {{user.username}}!</p>
|
||
|
|
<p class="h1 py-4">Your 2020 on Pixelfed.</p>
|
||
|
|
<p class="h4 font-weight-light mb-0 animate__animated animate__bounceInDown">Use the buttons below to navigate.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="page == 2" class="text-center mw-500">
|
||
|
|
<p class="display-4">User #<span class="font-weight-bold">{{stats.account.user_id}}</span></p>
|
||
|
|
<p class="h3 font-weight-light mb-0">You joined Pixelfed on {{stats.account.created_at}}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="page == 3" class="text-center mw-500">
|
||
|
|
<p class="display-4">You created <span class="font-weight-bold">{{stats.account.posts_count}}</span> posts</p>
|
||
|
|
<p class="h3 font-weight-light mb-0">The average user created <span class="font-weight-bold">{{stats.average.posts}}</span> posts this year.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="page == 4" class="text-center mw-500">
|
||
|
|
<p class="display-4">You liked <span class="font-weight-bold">{{stats.account.likes_count}}</span> posts</p>
|
||
|
|
<p class="h3 font-weight-light mb-0">The average user liked <span class="font-weight-bold">{{stats.average.likes}}</span> posts this year.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="page == 5" class="text-center mw-500">
|
||
|
|
<div v-if="stats.account.most_popular">
|
||
|
|
<p class="h1 font-weight-light mb-0 text-break md-line-height">Your most popular post of 2020 was created on <span class="font-weight-bold">{{stats.account.most_popular.created_at}}</span> with <span class="font-weight-bold">{{stats.account.most_popular.likes_count}}</span> likes.</p>
|
||
|
|
<p class="mt-4 mb-0">
|
||
|
|
<a class="btn btn-outline-light btn-lg btn-block rounded-pill" :href="stats.account.most_popular.url">View Post</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<p class="h1 font-weight-light mb-0 text-break md-line-height">The most popular post of 2020 was created by <span class="font-weight-bold">{{stats.popular.post.username}}</span> on <span class="font-weight-bold">{{stats.popular.post.created_at}}</span> with <span class="font-weight-bold">{{stats.popular.post.likes_count}}</span> likes.</p>
|
||
|
|
<p class="mt-4 mb-0">
|
||
|
|
<a class="btn btn-outline-light btn-lg btn-block rounded-pill" :href="stats.popular.post.url">View Post</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="page == 6" class="text-center mw-500">
|
||
|
|
<p class="display-4"><span class="font-weight-bold">{{stats.account.followers_this_year}}</span> New Followers</p>
|
||
|
|
<p class="h3 font-weight-light mb-0">You followed <span class="font-weight-bold">{{stats.account.followed_this_year}}</span> accounts this year!</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="page == 7" class="text-center mw-500">
|
||
|
|
<div v-if="stats.account.hashtag">
|
||
|
|
<p class="h1 text-break">Your favourite hashtag was <span class="font-weight-bold">#{{stats.account.hashtag.name}}</span>.</p>
|
||
|
|
<p class="h3 font-weight-light mb-0">You used it <span class="font-weight-bold">{{stats.account.hashtag.count}}</span> times!</p>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
<p class="h1 text-break">The most popular hashtag was <span class="font-weight-bold">#{{stats.popular.hashtag.name}}</span></p>
|
||
|
|
<p class="h3 font-weight-light mb-0">It was used <span class="font-weight-bold">{{stats.popular.hashtag.count}}</span> times!</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="page == 8" class="text-center mw-500">
|
||
|
|
<p class="display-4">You tagged <span class="font-weight-bold">{{stats.account.places_total}}</span> places.</p>
|
||
|
|
<p v-if="stats.account.places_total" class="h3 font-weight-light mb-0">You tagged <span class="font-weight-bold">{{stats.account.places.name}}</span> a total of <span class="font-weight-bold">{{stats.account.places.count}}</span> times!</p>
|
||
|
|
<p v-else class="h3 font-weight-light mb-0">The most tagged place was <span class="font-weight-bold">{{stats.popular.places.name}}</span> that was tagged a total of <span class="font-weight-bold">{{stats.popular.places.count}}</span> times!</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="page == 9" class="text-center">
|
||
|
|
<p class="display-4">Happy 2021!</p>
|
||
|
|
<p class="h3 font-weight-light mb-0">We wish you the best in the new year.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div v-if="loaded" class="fixed-top">
|
||
|
|
<p class="text-center mt-3 d-flex justify-content-center align-items-center mb-0">
|
||
|
|
<img src="/img/pixelfed-icon-grey.svg" width="60" height="60">
|
||
|
|
<span class="text-light font-weight-bold ml-3" style="font-size: 22px;">#my2020</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div v-if="loaded" class="fixed-bottom">
|
||
|
|
<p class="text-center">
|
||
|
|
<a v-if="!notEnoughData" :class="prevClass()" href="#" @click.prevent="prevPage()" :disabled="page == 1"><i class="fas fa-chevron-left"></i> Back</a>
|
||
|
|
<a class="btn btn-outline-light rounded-pill mx-3" href="/">Back to Pixelfed</a>
|
||
|
|
<a v-if="!notEnoughData" :class="nextClass()" href="#" @click.prevent="nextPage()">Next <i class="fas fa-chevron-right"></i></a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style type="text/css" scoped>
|
||
|
|
.md-line-height {
|
||
|
|
line-height: 1.65 !important;
|
||
|
|
}
|
||
|
|
.mw-500 {
|
||
|
|
max-width: 500px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
config: window.App.config,
|
||
|
|
user: {},
|
||
|
|
loggedIn: false,
|
||
|
|
loaded: false,
|
||
|
|
page: 1,
|
||
|
|
stats: [],
|
||
|
|
notEnoughData: false,
|
||
|
|
reportedView: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
let u = new URLSearchParams(window.location.search);
|
||
|
|
if( u.has('v') &&
|
||
|
|
u.has('ned') &&
|
||
|
|
u.has('sl') &&
|
||
|
|
u.get('v') == 20 &&
|
||
|
|
u.get('sl') >= 1 &&
|
||
|
|
u.get('sl') <= 9
|
||
|
|
) {
|
||
|
|
if(u.get('ned') == 0) {
|
||
|
|
this.page = u.get('sl');
|
||
|
|
} else {
|
||
|
|
this.notEnoughData = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
axios.get('/api/pixelfed/v1/accounts/verify_credentials')
|
||
|
|
.then(res => {
|
||
|
|
this.user = res.data;
|
||
|
|
window._sharedData.curUser = res.data;
|
||
|
|
});
|
||
|
|
|
||
|
|
this.fetchData();
|
||
|
|
},
|
||
|
|
|
||
|
|
updated() {
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
fetchData() {
|
||
|
|
axios.get('/api/pixelfed/v2/seasonal/yir')
|
||
|
|
.then(res => {
|
||
|
|
this.stats = res.data;
|
||
|
|
this.loaded = true;
|
||
|
|
this.shortcuts();
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
nextPage() {
|
||
|
|
if(this.page == 9) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(this.page == 8) {
|
||
|
|
axios.post('/api/pixelfed/v2/seasonal/yir', {
|
||
|
|
'profile_id' : this.user.profile_id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
++this.page;
|
||
|
|
window.history.pushState({}, {}, '/i/my2020?v=20&ned=0&sl=' + this.page);
|
||
|
|
},
|
||
|
|
|
||
|
|
prevPage() {
|
||
|
|
if(this.page == 1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
--this.page;
|
||
|
|
if(this.page == 1) {
|
||
|
|
window.history.pushState({}, {}, '/i/my2020');
|
||
|
|
} else {
|
||
|
|
window.history.pushState({}, {}, '/i/my2020?v=20&ned=0&sl=' + this.page);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
prevClass() {
|
||
|
|
return this.page == 1
|
||
|
|
? 'btn btn-outline-muted rounded-pill'
|
||
|
|
: 'btn btn-outline-light rounded-pill';
|
||
|
|
},
|
||
|
|
|
||
|
|
nextClass() {
|
||
|
|
return this.page == 9
|
||
|
|
? 'btn btn-outline-muted rounded-pill'
|
||
|
|
: 'btn btn-outline-light rounded-pill';
|
||
|
|
},
|
||
|
|
|
||
|
|
dateFormat(d) {
|
||
|
|
},
|
||
|
|
|
||
|
|
shortcuts() {
|
||
|
|
let self = this;
|
||
|
|
window.addEventListener("keydown", function(event) {
|
||
|
|
if (event.defaultPrevented) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
switch(event.code) {
|
||
|
|
case "KeyA":
|
||
|
|
case "ArrowLeft":
|
||
|
|
self.prevPage();
|
||
|
|
break;
|
||
|
|
case "KeyD":
|
||
|
|
case "ArrowRight":
|
||
|
|
self.nextPage();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
}, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|