forked from mirror/pixelfed
150 lines
3.2 KiB
Vue
150 lines
3.2 KiB
Vue
<template>
|
|
<div class="discover-serverfeeds-component">
|
|
<div 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">Server Timelines</h1>
|
|
<p class="font-default lead">Browse timelines of a specific instance</p>
|
|
|
|
<hr>
|
|
|
|
<b-spinner v-if="isLoading && !initialTab" />
|
|
|
|
<status-card
|
|
v-if="!isLoading"
|
|
v-for="(post, idx) in feed"
|
|
:key="'ti1:'+idx+':'+post.id"
|
|
:profile="profile"
|
|
:status="post"
|
|
/>
|
|
|
|
<p v-if="!initialTab && !isLoading && feed.length == 0" class="lead">No posts found :(</p>
|
|
|
|
<div v-if="initialTab === true">
|
|
<p v-if="config.server.mode == 'allowlist'" class="lead">Select an instance from the menu</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 col-lg-3">
|
|
<div v-if="config.server.mode === 'allowlist'" class="nav flex-column nav-pills font-default">
|
|
<a
|
|
v-for="(tag, idx) in domains"
|
|
class="nav-link"
|
|
:class="{ active: tagIndex == idx }"
|
|
href="#"
|
|
@click.prevent="toggleTag(idx)">
|
|
{{ tag }}
|
|
</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: false,
|
|
isLoading: true,
|
|
initialTab: true,
|
|
config: {},
|
|
profile: window._sharedData.user,
|
|
tagIndex: undefined,
|
|
domains: [],
|
|
feed: [],
|
|
breadcrumbItems: [
|
|
{
|
|
text: 'Discover',
|
|
href: '/i/web/discover'
|
|
},
|
|
{
|
|
text: 'Server Timelines',
|
|
active: true
|
|
}
|
|
]
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.fetchConfig();
|
|
},
|
|
|
|
methods: {
|
|
fetchConfig() {
|
|
axios.get('/api/pixelfed/v2/discover/meta')
|
|
.then(res => {
|
|
this.config = res.data;
|
|
if(this.config.server.enabled == false) {
|
|
this.$router.push('/i/web/discover');
|
|
}
|
|
if(this.config.server.mode === 'allowlist') {
|
|
this.domains = this.config.server.domains.split(',');
|
|
}
|
|
})
|
|
},
|
|
|
|
fetchFeed(domain) {
|
|
this.isLoading = true;
|
|
axios.get('/api/pixelfed/v2/discover/server-timeline', {
|
|
params: {
|
|
domain: domain
|
|
}
|
|
}).then(res => {
|
|
this.feed = res.data;
|
|
this.isLoading = false;
|
|
this.isLoaded = true;
|
|
})
|
|
.catch(err => {
|
|
this.feed = [];
|
|
this.tagIndex = null;
|
|
this.isLoaded = true;
|
|
this.isLoading = false;
|
|
})
|
|
},
|
|
|
|
toggleTag(tag) {
|
|
this.initialTab = false;
|
|
this.tagIndex = tag;
|
|
this.fetchFeed(this.domains[tag]);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.discover-serverfeeds-component {
|
|
.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>
|