open tweet in scorecard editor when clicked

public/css/app.css

@@ -8393,13 +8393,13 @@ button.close {
 
 .tweet-queue .tweet {
   border-bottom: 1px #ccc solid;
-  padding: 4px;
   cursor: pointer;
 }
 
 .tweet-queue .tweet .mission {
   font-weight: bold;
   margin-top: 3px;
+  text-align: right;
 }
 
 .tweet-queue .tweet .text {
@@ -8415,3 +8415,11 @@ button.close {
   background: #e4f1f7;
 }
 
+.panel-body.tweet-queue {
+  padding: 8px;
+}
+
+.scorecard .tweet img {
+  max-width: 100%;
+}
+

public/js/app.js

@@ -875,8 +875,9 @@ module.exports = __webpack_require__(45);
 
 /***/ }),
 /* 10 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
 
 /**
  * First we will load all of this project's JavaScript dependencies which
@@ -886,6 +887,12 @@ module.exports = __webpack_require__(45);
 
 __webpack_require__(11);
 
+$.ajaxSetup({
+  headers: {
+    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+  }
+});
+
 window.Vue = __webpack_require__(38);
 
 /**
@@ -895,19 +902,18 @@ window.Vue = __webpack_require__(38);
  */
 
 Vue.component('tweet-queue', __webpack_require__(56));
+Vue.component('scorecard', __webpack_require__(59));
+
+var data = {
+  queue: [],
+  showScorecard: false
+};
 
-var data = { queue: [] };
 var app = new Vue({
   el: '#app',
   data: data
 });
 
-$.ajaxSetup({
-  headers: {
-    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
-  }
-});
-
 /***/ }),
 /* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -46475,6 +46481,19 @@ module.exports = Component.exports
 /* 57 */
 /***/ (function(module, exports) {
 
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 //
 //
 //
@@ -46491,7 +46510,9 @@ module.exports = Component.exports
 module.exports = {
   data: function data() {
     return {
-      queue: []
+      queue: [],
+      tweet: {},
+      show: false
     };
   },
 
@@ -46527,17 +46548,28 @@ module.exports = {
       var queueIndex = this.findTweetInQueue(tweet_id);
       if (queueIndex !== false) {
         console.log("Removing item at index " + queueIndex);
-        this.queue.splice(queueIndex, 1);
+        var removed = this.queue.splice(queueIndex, 1);
+        return removed[0];
       }
     },
     clickedTweet: function clickedTweet(event) {
       var tweet_id = $(event.target).parents(".tweet").data('tweet-id');
-      this.removeTweetFromQueue(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) {});
+        // 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);
+      }
     }
   },
   created: function created() {
@@ -46551,7 +46583,17 @@ module.exports = {
 
 module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
   return _c('div', {
-    staticClass: "tweet-queue"
+    staticClass: "container"
+  }, [_c('div', {
+    staticClass: "row"
+  }, [_c('div', {
+    staticClass: "col-xs-4 col-md-4"
+  }, [_c('div', {
+    staticClass: "panel panel-default"
+  }, [_c('div', {
+    staticClass: "panel-heading"
+  }, [_vm._v("Queue")]), _vm._v(" "), _c('div', {
+    staticClass: "panel-body tweet-queue"
   }, _vm._l((_vm.queue), function(tweet) {
     return _c('div', {
       staticClass: "tweet",
@@ -46562,6 +46604,11 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         "click": _vm.clickedTweet
       }
     }, [_c('div', {
+      staticClass: "mission",
+      attrs: {
+        "data-mission-id": tweet.mission_id
+      }
+    }, [_vm._v(_vm._s(tweet.mission))]), _vm._v(" "), _c('div', {
       staticClass: "profile"
     }, [_c('img', {
       style: ('border-color: #' + tweet.team_color),
@@ -46573,14 +46620,21 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         "href": 'https://twitter.com/' + tweet.player_username
       }
     }, [_vm._v("@" + _vm._s(tweet.player_username))])])]), _vm._v(" "), _c('div', {
-      staticClass: "mission",
-      attrs: {
-        "data-mission-id": tweet.mission_id
-      }
-    }, [_vm._v(_vm._s(tweet.mission))]), _vm._v(" "), _c('div', {
       staticClass: "text"
     }, [_vm._v(_vm._s(tweet.text))])])
-  }))
+  }))])]), _vm._v(" "), _c('div', {
+    staticClass: "col-xs-8 col-md-8"
+  }, [_c('scorecard', {
+    attrs: {
+      "show": _vm.show,
+      "tweet": _vm.tweet
+    },
+    on: {
+      "update:show": function($event) {
+        _vm.show = $event
+      }
+    }
+  })], 1)])])
 },staticRenderFns: []}
 module.exports.render._withStripped = true
 if (false) {
@@ -46590,5 +46644,130 @@ if (false) {
   }
 }
 
+/***/ }),
+/* 59 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var Component = __webpack_require__(8)(
+  /* script */
+  __webpack_require__(61),
+  /* template */
+  __webpack_require__(60),
+  /* styles */
+  null,
+  /* scopeId */
+  null,
+  /* moduleIdentifier (server only) */
+  null
+)
+Component.options.__file = "/Users/aaronpk/Code/spy30/resources/assets/js/components/Scorecard.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key.substr(0, 2) !== "__"})) {console.error("named exports are not supported in *.vue files.")}
+if (Component.options.functional) {console.error("[vue-loader] Scorecard.vue: functional components are not supported with templates, they should use render functions.")}
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-1098d79e", Component.options)
+  } else {
+    hotAPI.reload("data-v-1098d79e", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 60 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
+  return _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: (_vm.show),
+      expression: "show"
+    }],
+    staticClass: "panel panel-default"
+  }, [_c('div', {
+    staticClass: "panel-heading"
+  }, [_c('div', {
+    staticClass: "team-name"
+  }, [_vm._v(_vm._s(_vm.tweet.team_name))])]), _vm._v(" "), _c('div', {
+    staticClass: "panel-body scorecard"
+  }, [_c('div', {
+    staticClass: "profile"
+  }, [_c('img', {
+    style: ('border-color: #' + _vm.tweet.team_color),
+    attrs: {
+      "src": _vm.tweet.player_photo
+    }
+  }), _vm._v(" "), _c('span', [_c('a', {
+    attrs: {
+      "href": 'https://twitter.com/' + _vm.tweet.player_username
+    }
+  }, [_vm._v("@" + _vm._s(_vm.tweet.player_username))])])]), _vm._v(" "), _c('div', {
+    staticClass: "tweet"
+  }, [_vm._v("\n      " + _vm._s(_vm.tweet.text) + "\n      "), _vm._l((_vm.tweet.photos), function(img) {
+    return _c('div', [_c('img', {
+      attrs: {
+        "src": img
+      }
+    })])
+  })], 2), _vm._v(" "), _c('div', [_vm._v(_vm._s(_vm.tweet.mission))])])])
+},staticRenderFns: []}
+module.exports.render._withStripped = true
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+     require("vue-hot-reload-api").rerender("data-v-1098d79e", module.exports)
+  }
+}
+
+/***/ }),
+/* 61 */
+/***/ (function(module, exports) {
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+module.exports = {
+  props: ['show', 'tweet'],
+  data: function data() {
+    return {};
+  },
+  created: function created() {
+    console.log(this.tweet);
+  }
+};
+
 /***/ })
 /******/ ]);

resources/assets/js/app.js

@@ -7,6 +7,12 @@
 
 require('./bootstrap');
 
+$.ajaxSetup({
+  headers: {
+    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+  }
+});
+
 window.Vue = require('vue');
 
 /**
@@ -16,15 +22,14 @@ window.Vue = require('vue');
  */
 
 Vue.component('tweet-queue', require('./components/TweetQueue.vue'));
+Vue.component('scorecard', require('./components/Scorecard.vue'));
+
+var data = {
+  queue: [],
+  showScorecard: false,
+};
 
-var data = {queue: []};
 var app = new Vue({
   el: '#app',
   data: data
 });
-
-$.ajaxSetup({
-  headers: {
-    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
-  }
-});

resources/assets/js/components/Scorecard.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="panel panel-default" v-show="show">
+    <div class="panel-heading"><div class="team-name">{{ tweet.team_name }}</div></div>
+
+    <div class="panel-body scorecard">
+      <div class="profile">
+          <img :src="tweet.player_photo" :style="'border-color: #'+tweet.team_color"> 
+          <span><a :href="'https://twitter.com/'+tweet.player_username">@{{ tweet.player_username }}</a></span>
+      </div>
+
+      <div class="tweet">
+        {{ tweet.text }}
+        <div v-for="img in tweet.photos">
+          <img :src="img">
+        </div>
+      </div>
+
+      <div>{{ tweet.mission }}</div>
+
+    </div>
+  </div>
+</template>
+<script>
+module.exports = {
+  props: ['show', 'tweet'],
+  data () {
+    return {
+    }
+  },
+  created() {
+    console.log(this.tweet);
+  }
+}
+</script>

resources/assets/js/components/TweetQueue.vue

@@ -1,20 +1,35 @@
 <template>
-  <div class="tweet-queue">
-    <div v-for="tweet in queue" v-on:click="clickedTweet" class="tweet" :data-tweet-id="tweet.tweet_id">
-      <div class="profile">
-          <img :src="tweet.player_photo" :style="'border-color: #'+tweet.team_color"> 
-          <span><a :href="'https://twitter.com/'+tweet.player_username">@{{ tweet.player_username }}</a></span>
+  <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><a :href="'https://twitter.com/'+tweet.player_username">@{{ tweet.player_username }}</a></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"></scorecard>
+          </div>
       </div>
-      <div class="mission" :data-mission-id="tweet.mission_id">{{ tweet.mission }}</div>
-      <div class="text">{{ tweet.text }}</div>
-    </div>
   </div>
 </template>
 <script>
 module.exports = {
   data () {
     return {
-      queue: []
+      queue: [],
+      tweet: {},
+      show: false
     }
   },
   methods: {
@@ -50,20 +65,30 @@ module.exports = {
       var queueIndex = this.findTweetInQueue(tweet_id);
       if(queueIndex !== false) {
         console.log("Removing item at index "+queueIndex);
-        this.queue.splice(queueIndex, 1);
+        var removed = this.queue.splice(queueIndex, 1);
+        return removed[0];
       }
     },
     clickedTweet(event) {
       var tweet_id = $(event.target).parents(".tweet").data('tweet-id');
-      this.removeTweetFromQueue(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) {
+        // 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);
+      }
     }
   },
   created() {

resources/assets/js/event-bus.js

@@ -0,0 +1,2 @@
+import Vue from 'vue';
+export const EventBus = new Vue();

resources/assets/sass/app.scss

@@ -56,12 +56,12 @@
   
   .tweet {
     border-bottom: 1px #ccc solid;
-    padding: 4px;
     cursor:pointer;
 
     .mission {
       font-weight: bold;
       margin-top: 3px;
+      text-align: right;
     }
 
     .text {
@@ -79,3 +79,17 @@
   }
 
 }
+
+.panel-body.tweet-queue {
+  padding: 8px;
+}
+
+.scorecard {
+  
+  .tweet {
+    img {
+      max-width: 100%;
+    }
+  }
+
+}

resources/views/dashboard.blade.php

@@ -1,26 +1,5 @@
 @extends('layouts.app')
 
 @section('content')
-<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>
-                <tweet-queue></tweet-queue>                
-            </div>        
-        </div>
-        <div class="col-xs-8 col-md-8">
-            <div class="panel panel-default">
-                <div class="panel-heading">Dashboard</div>
-
-                <div class="panel-body">
-                    You are logged in!
-
-                    
-
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+    <tweet-queue></tweet-queue>
 @endsection