You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.6 KiB
104 lines
2.6 KiB
<template>
|
|
<div class="home">
|
|
<Channels class="channels" :channels="this.$store.state.channels">
|
|
<div slot-scope="{ channel }">
|
|
<Channel :channel="channel" @channel-selected="selectChannel"></Channel>
|
|
</div>
|
|
</Channels>
|
|
|
|
<div class="timeline">
|
|
<button class="button" @click="openFeedFollower">Add feed</button>
|
|
<new-post class="mt-20"></new-post>
|
|
<h1>{{ channel.name }}</h1>
|
|
<Timeline style="margin-top:20px" :timeline="this.$store.state.timeline" :channel="channel" @getPage="getPage"></Timeline>
|
|
</div>
|
|
|
|
<channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
|
|
<feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :channel="channel"></feed-follower>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Timeline from '../components/Timeline.vue'
|
|
import Channels from '../components/Channels.vue'
|
|
import Channel from '../components/Channel.vue'
|
|
import ChannelCreator from '../components/ChannelCreator.vue'
|
|
import FeedFollower from "../components/FeedFollower"
|
|
import NewPost from "../components/NewPost"
|
|
|
|
export default {
|
|
name: 'home',
|
|
components: {
|
|
FeedFollower,
|
|
Timeline,
|
|
Channels,
|
|
Channel,
|
|
ChannelCreator,
|
|
NewPost
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
feedFollowerIsOpen: false,
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
uid() {
|
|
return this.$route.params.uid || 'home';
|
|
},
|
|
channel() {
|
|
return this.$store.state.channel
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
openFeedFollower() {
|
|
this.feedFollowerIsOpen = true
|
|
},
|
|
closeFeedFollower() {
|
|
this.feedFollowerIsOpen = false
|
|
},
|
|
selectChannel(channel) {
|
|
this.$store.dispatch('switchChannel', channel).then(() => {
|
|
this.$store.dispatch('fetchTimeline', channel).then(() => {
|
|
window.scrollTo({top: 0})
|
|
})
|
|
})
|
|
},
|
|
getPage(next) {
|
|
this.$store.dispatch('fetchTimeline', next).then(() => {
|
|
window.scrollTo({top: 0})
|
|
})
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
if (this.$store.state.logged_in) {
|
|
this.$store.dispatch('fetchChannels')
|
|
this.$store.dispatch('fetchTimeline', {uid: this.uid})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.timeline {
|
|
margin-top: 20px;
|
|
width: 600px;
|
|
position: absolute;
|
|
left: 270px;
|
|
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
.channels {
|
|
position: fixed;
|
|
top: 52px;
|
|
height: calc(100vh - 52px);
|
|
width: 250px;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
padding-bottom: 100px;
|
|
}
|
|
</style> |