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