lots of cool features!

2 files changed, 69 insertions, 1 deletions

diff --git a/src/components/CommentVoter.vue b/src/components/CommentVoter.vue
new file mode 100644
index 0000000..6f2ce0d
--- /dev/null
+++ b/src/components/CommentVoter.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="flex row items-center group" v-if="$store.getters['user/loggedIn']">
+      <span style="margin: 0 1rem">
+        <i class="fa"
+           :class="{'fa-caret-up text-positive': comment.voting.sum > 0, 'fa-caret-down text-negative': comment.voting.sum < 0, 'fa-sort text-dark': comment.voting.sum === 0}">
+        </i>
+        {{ comment.voting.sum }}
+      </span>
+      <span v-if="comment.author.username !== $store.state.user.decodedToken.username && !myVote">
+        <q-btn color="negative" round small icon="fa-thumbs-down" @click="vote(-1)"></q-btn>
+        <q-btn color="positive" round small icon="fa-thumbs-up" @click="vote(1)"></q-btn>
+      </span>
+      <span v-if="myVote">You voted <i :class="`fas fa-thumbs-${myVote.impact === 1 ? 'up text-positive' : 'down text-negative'}`"></i></span>
+    </div>
+    <div class="group" v-else>
+      <i class="fa"
+         :class="{'fa-caret-up text-positive': comment.voting.sum > 0, 'fa-caret-down text-negative': comment.voting.sum < 0, 'fa-sort text-dark': comment.voting.sum === 0}">
+      </i>
+      {{ comment.voting.sum }} votes
+      <em>Please log in to vote</em>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    QBtn,
+  } from 'quasar'
+
+  export default {
+    props: {
+      comment: Object,
+    },
+    components: {
+      QBtn,
+    },
+    data () {
+      return {}
+    },
+    computed: {
+      myVote () {
+        if (!this.comment || !this.comment.voting || !Array.isArray(this.comment.voting.votes) || this.comment.voting.votes.length === 0) {
+          return undefined
+        }
+        return this.comment.voting.votes[0]
+      },
+    },
+    methods: {
+      vote (impact) {
+        let that = this
+        this.$http.post(`/comments/${this.comment.upload}/comments/${this.comment._id}/vote`, {impact: impact}).then(response => that.$emit('voted'))
+      },
+    },
+  }
+</script>
+
+<style lang="styl" type="text/stylus" scoped>
+</style>
diff --git a/src/components/UploadVoter.vue b/src/components/UploadVoter.vue
index 65a5453..563bc79 100644
--- a/src/components/UploadVoter.vue
+++ b/src/components/UploadVoter.vue
@@ -7,10 +7,11 @@
         </i>
         {{ upload.voting.sum }}
       </h5>
-      <span v-if="upload.author.username !== $store.state.user.decodedToken.username">
+      <span v-if="upload.author.username !== $store.state.user.decodedToken.username && !myVote">
         <q-btn color="negative" round small icon="fa-thumbs-down" @click="vote(-1)"></q-btn>
         <q-btn color="positive" round small icon="fa-thumbs-up" @click="vote(1)"></q-btn>
       </span>
+      <span v-if="myVote">You voted <i :class="`fas fa-thumbs-${myVote.impact === 1 ? 'up text-positive' : 'down text-negative'}`"></i></span>
     </div>
     <div class="group" v-else>
       <i class="fa"
@@ -37,6 +38,14 @@
     data () {
       return {}
     },
+    computed: {
+      myVote () {
+        if (!this.upload || !this.upload.voting || !Array.isArray(this.upload.voting.votes) || this.upload.voting.votes.length === 0) {
+          return undefined
+        }
+        return this.upload.voting.votes[0]
+      },
+    },
     methods: {
       vote (impact) {
         let that = this