Add destinations and channel events

master
Peter Stuifzand 4 years ago
parent 8aa4f6882a
commit d9595a94d2

@ -0,0 +1,43 @@
<template>
<div>
<div v-for="(target, i) in targets" :key="i" style="display: inline-block; margin: 0 3px 3px 0">
<label>
<input type="checkbox" class="is-hidden cb-target" v-model="selected" :value="target.uid"/>
<span class="tag is-light" v-text="target.name"></span>
</label>
</div>
</div>
</template>
<script>
export default {
name: 'destination-buttons',
data() {
return {
selected: [],
}
},
props: {
value: [],
targets: {}
},
mounted() {
this.selected = this.value
},
watch: {
selected(newSelection) {
this.$emit('input', newSelection)
}
}
}
</script>
<style scoped>
.tag {
cursor: pointer;
}
.cb-target:checked + .tag {
background-color: #23d160;
color: #fff;
}
</style>

@ -79,7 +79,13 @@
</div>
</div>
<div class="field">
<syndication-buttons v-model="selected" :targets="targets"/>
Categories: <entry-categories v-model="categories"/>
</div>
<div class="field">
Syndication: <syndication-buttons v-model="selected" :targets="targets"/>
</div>
<div class="field">
Destination: <destination-buttons v-model="selectedDestinations" :targets="destinations"/>
</div>
<div class="field">
<div class="control">
@ -95,11 +101,17 @@
<script>
import moment from 'moment'
import DestinationButtons from "@/components/DestinationButtons";
import EntryCategories from "@/components/EntryCategories";
import SyndicationButtons from "@/components/SyndicationButtons";
export default {
name: "Entry",
components: {SyndicationButtons},
components: {
DestinationButtons,
EntryCategories,
SyndicationButtons
},
props: ['item'],
data() {
@ -111,7 +123,10 @@ export default {
bookmarkTitle: '',
bookmarkDescription: '',
targets: [],
selected: []
selected: [],
destinations: [],
selectedDestinations: [],
categories: []
}
},
@ -160,6 +175,8 @@ export default {
this.selected = []
this.$store.dispatch('fetchSyndicationTargets')
.then(res => this.targets = res['syndicate-to'])
this.$store.dispatch('fetchDestinations')
.then(res => this.destinations = res['destination'])
},
bookmark() {
this.$store.dispatch('micropubPost', {
@ -168,7 +185,9 @@ export default {
'bookmark-of': [this.currentItem.url],
'name': [this.bookmarkTitle],
'content': [this.bookmarkDescription ],
'mp-syndicate-to': this.selected
'category': this.categories,
'mp-syndicate-to': this.selected,
'mp-destination': this.selectedDestinations
},
}).then(() => {
this.bookmarkTitle = '';

@ -14,6 +14,9 @@
<div class="field">
<syndication-buttons v-model="selectedTargets" :targets="targets"/>
</div>
<div class="field">
<destination-buttons v-model="selectedDestinations" :targets="destinations"/>
</div>
<div class="level">
<div class="level-left">
<div class="level-item">
@ -37,21 +40,27 @@
<script>
import SyndicationButtons from "@/components/SyndicationButtons";
import DestinationButtons from "@/components/DestinationButtons";
export default {
name: "NewPost",
components:{
SyndicationButtons
SyndicationButtons,
DestinationButtons,
},
data() {
return {
newPost: '',
targets: [],
selectedTargets: []
selectedTargets: [],
destinations: [],
selectedDestinations: []
}
},
mounted() {
this.$store.dispatch('fetchSyndicationTargets')
.then(res => this.targets = res['syndicate-to'])
this.$store.dispatch('fetchDestinations')
.then(res => this.destinations = res['destination'])
},
methods: {
post() {
@ -60,6 +69,7 @@
'properties': {
'content': [this.newPost],
'mp-syndicate-to': this.selectedTargets,
'mp-destination': this.selectedDestinations,
},
}).then(() => {
this.newPost = '';

@ -25,7 +25,7 @@ export default {
},
watch: {
selected(newSelection) {
this.$emit('update', newSelection)
this.$emit('input', newSelection)
}
}
}

@ -18,7 +18,7 @@ export default new Vuex.Store({
microsubEndpoint: '/microsub',
channelCreatorIsOpen: false,
eventSource: null,
globalTimeline: {items: [{name:'Testing the global timeline'}]}
globalTimeline: {items: [{name: 'Testing the global timeline'}]}
};
let loginData = JSON.parse(window.localStorage.getItem('login_data'))
if (loginData) {
@ -108,12 +108,39 @@ export default new Vuex.Store({
state.eventSource.addEventListener('new item in channel', evt => {
// eslint-disable-next-line
console.log(evt)
let d = JSON.parse(evt.data)
let channel = _.find(state.channels, item => item.uid === d.uid)
let msg = JSON.parse(evt.data)
let channel = _.find(state.channels, item => item.uid === msg.uid)
if (channel) {
channel.unread = d.unread
channel.unread = msg.unread
}
})
state.eventSource.addEventListener('new channel', evt => {
// eslint-disable-next-line
console.log(evt)
let msg = JSON.parse(evt.data)
let channel = _.find(state.channels, it => it.uid === msg.channel.uid)
if (!channel) {
state.channels.push(msg.channel)
}
})
state.eventSource.addEventListener('update channel', evt => {
// eslint-disable-next-line
console.log(evt)
let msg = JSON.parse(evt.data)
let channel = _.find(state.channels, it => it.uid === msg.channel.uid)
if (channel) {
channel.name = msg.channel.name
}
})
state.eventSource.addEventListener('delete channel', evt => {
// eslint-disable-next-line
console.log(evt)
let msg = JSON.parse(evt.data)
state.channels = _.remove(state.channels, it => it.uid === msg.uid)
})
}
},
@ -166,7 +193,7 @@ export default new Vuex.Store({
markRead(x, {channel, entry}) {
let entries = '';
if (Array.isArray(entry)) {
entries = _(entry).map(uid => '&entry[]='+encodeURIComponent(uid)).join("")
entries = _(entry).map(uid => '&entry[]=' + encodeURIComponent(uid)).join("")
} else {
entries = '&entry=' + encodeURIComponent(entry)
}
@ -185,6 +212,13 @@ export default new Vuex.Store({
})
return micropub.query('syndicate-to')
},
fetchDestinations() {
let micropub = new Micropub({
token: this.state.access_token,
micropubEndpoint: this.state.micropubEndpoint
})
return micropub.query('destination')
},
micropubPost(_, mf2post) {
let micropub = new Micropub({
token: this.state.access_token,

Loading…
Cancel
Save