Add feed to channel

master
Peter Stuifzand 6 years ago
parent 7845004840
commit 9e86dd3137

@ -31,4 +31,6 @@
### Integrated post interface at the top of the timeline ### Integrated post interface at the top of the timeline
Implemented, but perhaps needs automatic destination chooser.

@ -3,6 +3,7 @@
<div class="image is-48x48"><img :src="feed.photo" alt="" class="feed-icon"/></div> <div class="image is-48x48"><img :src="feed.photo" alt="" class="feed-icon"/></div>
<div class="feed-name" v-text="feed.name"></div> <div class="feed-name" v-text="feed.name"></div>
<button :class="buttonClasses" @click="showFeed">Show feed</button> <button :class="buttonClasses" @click="showFeed">Show feed</button>
<button :class="buttonClasses" @click="addFeed">Add feed</button>
</div> </div>
</template> </template>
<script> <script>
@ -19,6 +20,9 @@
methods: { methods: {
showFeed(feed) { showFeed(feed) {
this.$emit('showFeed', feed) this.$emit('showFeed', feed)
},
addFeed(feed) {
this.$emit('addFeed', feed)
} }
} }
@ -26,13 +30,16 @@
</script> </script>
<style scoped> <style scoped>
.result { .result {
display:contents;
margin-top: 6px; margin-top: 6px;
width: 100%; width: 100%;
display: flex; /*display: flex;*/
flex-direction: row; /*flex-direction: row;*/
justify-content: space-between; /*justify-content: space-between;*/
align-items: center;
border: 1px solid #eee; border: 1px solid #eee;
padding: 6px; padding: 6px;
} }
.result > * {
align-self: center;
}
</style> </style>

@ -3,7 +3,7 @@
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
<p class="modal-card-title">Add feed to channel</p> <p class="modal-card-title">Add feed to {{ channel.name }}</p>
<button class="delete" aria-label="close" @click="close"></button> <button class="delete" aria-label="close" @click="close"></button>
</header> </header>
@ -19,7 +19,7 @@
</div> </div>
<div class="results"> <div class="results">
<feed-chooser :feed="feed" @showFeed="showFeed(feed)" v-for="(feed, i) in feeds" :key="i"/> <feed-chooser :feed="feed" @showFeed="showFeed(feed)" @addFeed="addFeed(feed)" v-for="(feed, i) in feeds" :key="i"/>
</div> </div>
<Timeline class="timeline" :timeline="timeline" :channel="channel"></Timeline> <Timeline class="timeline" :timeline="timeline" :channel="channel"></Timeline>
@ -38,13 +38,12 @@
export default { export default {
name: "FeedFollower", name: "FeedFollower",
components: {FeedChooser, Timeline}, components: {FeedChooser, Timeline},
props: ['isOpen'], props: ['isOpen', 'channel'],
data() { data() {
return { return {
feeds: [], feeds: [],
timeline: {items: [], paging: {}}, timeline: {items: [], paging: {}},
channel: {},
query: '', query: '',
loading: false loading: false
} }
@ -74,7 +73,6 @@
close() { close() {
this.feeds = [] this.feeds = []
this.timeline = {items: [], paging: {}} this.timeline = {items: [], paging: {}}
this.channel = {}
this.query = '' this.query = ''
this.loading = false this.loading = false
@ -91,9 +89,15 @@
}).then((res) => { }).then((res) => {
return res.json() return res.json()
}).then((res) => { }).then((res) => {
if (!res.results) {
this.loading = false
return
}
res.results.forEach(item => { res.results.forEach(item => {
item.loading = false item.loading = false
}) })
this.feeds = res.results this.feeds = res.results
this.loading = false this.loading = false
}) })
@ -109,10 +113,20 @@
}).then((res) => { }).then((res) => {
return res.json() return res.json()
}).then((res) => { }).then((res) => {
this.channel = feed
this.timeline = res this.timeline = res
feed.loading = false feed.loading = false
}) })
},
addFeed(feed) {
let url = this.$store.state.microsubEndpoint + '?action=follow&channel='+this.channel.uid+'&url=' + encodeURIComponent(feed.url)
return fetch(url, {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + this.$store.state.access_token
}
}).then(() => {
this.$store.dispatch('fetchTimeline', this.channel)
})
} }
} }
} }
@ -121,8 +135,9 @@
<style scoped> <style scoped>
.results { .results {
display: flex; display: grid;
flex-direction: column; grid-template-columns: 52px auto auto auto;
grid-gap: 6px;
} }
</style> </style>

@ -17,8 +17,8 @@
</template> </template>
<script> <script>
import TimelineEntry from '@/components/Entry' import TimelineEntry from '../components/Entry'
import DebugModal from '@/components/DebugModal' import DebugModal from '../components/DebugModal'
export default { export default {
name: "Timeline", name: "Timeline",

@ -9,12 +9,12 @@
<div class="timeline"> <div class="timeline">
<button class="button" @click="openFeedFollower">Add feed</button> <button class="button" @click="openFeedFollower">Add feed</button>
<new-post class="mt-20"></new-post> <new-post class="mt-20"></new-post>
<Timeline style="margin-top:20px" :timeline="this.$store.state.timeline" :channel="this.$store.state.channel" <h1>{{ channel.name }}</h1>
@getPage="getPage"></Timeline> <Timeline style="margin-top:20px" :timeline="this.$store.state.timeline" :channel="channel" @getPage="getPage"></Timeline>
</div> </div>
<channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator> <channel-creator :is-open="this.$store.state.channelCreatorIsOpen"></channel-creator>
<feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower"></feed-follower> <feed-follower :is-open="feedFollowerIsOpen" @close="closeFeedFollower" :channel="channel"></feed-follower>
</div> </div>
</template> </template>
@ -39,13 +39,16 @@
data() { data() {
return { return {
feedFollowerIsOpen: false feedFollowerIsOpen: false,
} }
}, },
computed: { computed: {
uid() { uid() {
return this.$route.params.uid || 'home'; return this.$route.params.uid || 'home';
},
channel() {
return this.$store.state.channel
} }
}, },

Loading…
Cancel
Save