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.

117 lines
3.3 KiB

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