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, index) in queue" v-on:click="clickedTweet(index)" class="tweet">
                      <div class="mission">{{ 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);
                // If the new tweet is one that timed out, dismiss it
                if(this.show && this.tweet.tweet_id == e.tweet_id) {
                  this.tweet = {};
                  this.show = false;
                }
              }
            })
            .listen('TweetClaimedEvent', (e) => {
              this.removeTweetFromQueue(e.tweet_id);
            });

      }.bind(this));
    },
    dashboardPing() {
      setTimeout(function(){
        $.get('/dashboard/ping', function(){
          this.dashboardPing();
        }.bind(this));
      }.bind(this), 15000);
    },
    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) {
        var removed = this.queue.splice(queueIndex, 1);
        return removed[0];
      }
    },
    clickedTweet(tweet_index) {
      // If another tweet was already open, dismiss that first
      if(this.show) {
        this.dismissTweet();
      }

      var tweet_data = this.queue[tweet_index];
      var tweet_id = tweet_data.tweet_id;

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

        this.removeTweetFromQueue(tweet_id);

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

      } else {
        console.log("Tweet not found: "+tweet_id);
      }
    },
    dismissTweet() {
      this.queue.push(this.tweet);

      // 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();
    this.dashboardPing();
  }
}
</script>