spy30/resources/assets/js/components/TweetQueue.vue

<template>
  <div class="container">
      <div class="row">
          <div class="col-xs-4 col-md-4">
              <div class="panel panel-default">
                  <div class="panel-heading">Queue</div>

                  <div class="panel-body tweet-queue">
                    <div v-for="tweet in queue" v-on:click="clickedTweet" class="tweet" :data-tweet-id="tweet.tweet_id">
                      <div class="mission" :data-mission-id="tweet.mission_id">{{ tweet.mission }}</div>
                      <div class="profile">
                          <img :src="tweet.player_photo" :style="'border-color: #'+tweet.team_color"> 
                          <span>@{{ tweet.player_username }}</span>
                      </div>
                      <div class="text">{{ tweet.text }}</div>
                    </div>
                  </div>
              </div>        
          </div>
          <div class="col-xs-8 col-md-8">
            <scorecard :show.sync="show" :tweet="tweet" v-on:dismiss="dismissTweet"></scorecard>
          </div>
      </div>
  </div>
</template>
<script>
module.exports = {
  data () {
    return {
      queue: [],
      tweet: {},
      show: false
    }
  },
  methods: {
    loadQueue () {
      $.get('/dashboard/queue', function(tweets){
        for(var i in tweets.queue) {
          this.queue.push(tweets.queue[i]);
        }

        // Listen for new items on the queue
        Echo.channel('tweet-queue')
            .listen('NewTweetEvent', (e) => {
              if(this.findTweetInQueue(e.tweet_id) === false) {
                this.queue.push(e);
              }
            })
            .listen('TweetClaimedEvent', (e) => {
              this.removeTweetFromQueue(e.tweet_id);
            });

      }.bind(this));
    },
    findTweetInQueue(tweet_id) {
      var queueIndex = false;
      for(var i in this.queue) {
        if(parseInt(this.queue[i].tweet_id) == parseInt(tweet_id)) {
          queueIndex = i;
        }
      }
      return queueIndex;
    },
    removeTweetFromQueue(tweet_id) {
      var queueIndex = this.findTweetInQueue(tweet_id);
      if(queueIndex !== false) {
        console.log("Removing item at index "+queueIndex);
        var removed = this.queue.splice(queueIndex, 1);
        return removed[0];
      }
    },
    clickedTweet(event) {
      var tweet_id;
      if($(event.target).data('tweet-id')) {
        tweet_id = $(event.target).data('tweet-id')
      } else {
        tweet_id = $(event.target).parents(".tweet").data('tweet-id');
      }

      var tweet_data = this.removeTweetFromQueue(tweet_id);

      if(tweet_data) {
        console.log(tweet_data);

        // Mark this as claimed
        $.post('/dashboard/claim-tweet', {
          tweet_id: tweet_id
        }, function(response) {
        });

        // Load in the scorecard viewer
        this.tweet = tweet_data;
        this.show = true;

      } else {
        console.log("Tweet not found: "+tweet_id);
      }
    },
    dismissTweet() {
      console.log('caught event')

      // Mark as un-claimed
      $.post('/dashboard/claim-tweet', {
        tweet_id: this.tweet.tweet_id,
        status: 'unclaimed'
      }, function(response){
      });

      this.tweet = {};
      this.show = false;
    }
  },
  created() {
    this.loadQueue();
  }
}
</script>