Add destinations and channel events

src/components/DestinationButtons.vue

@@ -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>

src/components/Entry.vue

@@ -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 = '';

src/components/NewPost.vue

@@ -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 = '';

src/components/SyndicationButtons.vue

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

src/store.js

@@ -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 msg = JSON.parse(evt.data)
-        let channel = _.find(state.channels, item => item.uid === d.uid)
+        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,