<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" v-on:complete="completedTweet"></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;
|
|
},
|
|
completedTweet() {
|
|
this.tweet = {};
|
|
this.show = false;
|
|
}
|
|
},
|
|
created() {
|
|
this.loadQueue();
|
|
this.dashboardPing();
|
|
}
|
|
}
|
|
</script>
|