You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

97 lines
2.9 KiB

  1. <template>
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-xs-4 col-md-4">
  5. <div class="panel panel-default">
  6. <div class="panel-heading">Queue</div>
  7. <div class="panel-body tweet-queue">
  8. <div v-for="tweet in queue" v-on:click="clickedTweet" class="tweet" :data-tweet-id="tweet.tweet_id">
  9. <div class="mission" :data-mission-id="tweet.mission_id">{{ tweet.mission }}</div>
  10. <div class="profile">
  11. <img :src="tweet.player_photo" :style="'border-color: #'+tweet.team_color">
  12. <span><a :href="'https://twitter.com/'+tweet.player_username">@{{ tweet.player_username }}</a></span>
  13. </div>
  14. <div class="text">{{ tweet.text }}</div>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="col-xs-8 col-md-8">
  20. <scorecard :show.sync="show" :tweet="tweet"></scorecard>
  21. </div>
  22. </div>
  23. </div>
  24. </template>
  25. <script>
  26. module.exports = {
  27. data () {
  28. return {
  29. queue: [],
  30. tweet: {},
  31. show: false
  32. }
  33. },
  34. methods: {
  35. loadQueue () {
  36. $.get('/dashboard/queue', function(tweets){
  37. for(var i in tweets.queue) {
  38. this.queue.push(tweets.queue[i]);
  39. }
  40. // Listen for new items on the queue
  41. Echo.channel('tweet-queue')
  42. .listen('NewTweetEvent', (e) => {
  43. if(this.findTweetInQueue(e.tweet_id) === false) {
  44. this.queue.push(e);
  45. }
  46. })
  47. .listen('TweetClaimedEvent', (e) => {
  48. this.removeTweetFromQueue(e.tweet_id);
  49. });
  50. }.bind(this));
  51. },
  52. findTweetInQueue(tweet_id) {
  53. var queueIndex = false;
  54. for(var i in this.queue) {
  55. if(parseInt(this.queue[i].tweet_id) == parseInt(tweet_id)) {
  56. queueIndex = i;
  57. }
  58. }
  59. return queueIndex;
  60. },
  61. removeTweetFromQueue(tweet_id) {
  62. var queueIndex = this.findTweetInQueue(tweet_id);
  63. if(queueIndex !== false) {
  64. console.log("Removing item at index "+queueIndex);
  65. var removed = this.queue.splice(queueIndex, 1);
  66. return removed[0];
  67. }
  68. },
  69. clickedTweet(event) {
  70. var tweet_id = $(event.target).parents(".tweet").data('tweet-id');
  71. var tweet_data = this.removeTweetFromQueue(tweet_id);
  72. if(tweet_data) {
  73. console.log(tweet_data);
  74. // Mark this as claimed
  75. $.post('/dashboard/claim-tweet', {
  76. tweet_id: tweet_id
  77. }, function(response) {
  78. });
  79. // Load in the scorecard viewer
  80. this.tweet = tweet_data;
  81. this.show = true;
  82. } else {
  83. console.log("Tweet not found: "+tweet_id);
  84. }
  85. }
  86. },
  87. created() {
  88. this.loadQueue();
  89. }
  90. }
  91. </script>