From 1e17e799055ee809acffe72a8fb389226d02c128 Mon Sep 17 00:00:00 2001 From: Aaron Parecki Date: Sun, 2 Jul 2017 17:27:28 -0700 Subject: [PATCH] open tweet in scorecard editor when clicked --- public/css/app.css | 10 +- public/js/app.js | 223 ++++++++++++++++-- resources/assets/js/app.js | 19 +- resources/assets/js/components/Mission1.vue | 0 resources/assets/js/components/Scorecard.vue | 34 +++ resources/assets/js/components/TweetQueue.vue | 57 +++-- resources/assets/js/event-bus.js | 2 + resources/assets/sass/app.scss | 16 +- resources/views/dashboard.blade.php | 23 +- 9 files changed, 315 insertions(+), 69 deletions(-) create mode 100644 resources/assets/js/components/Mission1.vue create mode 100644 resources/assets/js/components/Scorecard.vue create mode 100644 resources/assets/js/event-bus.js diff --git a/public/css/app.css b/public/css/app.css index 4792ac5..f90003c 100644 --- a/public/css/app.css +++ b/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%; +} + diff --git a/public/js/app.js b/public/js/app.js index 4e483c3..d8b1194 100644 --- a/public/js/app.js +++ b/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); + } +}; + /***/ }) /******/ ]); \ No newline at end of file diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index 23aecae..acfd876 100644 --- a/resources/assets/js/app.js +++ b/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') - } -}); diff --git a/resources/assets/js/components/Mission1.vue b/resources/assets/js/components/Mission1.vue new file mode 100644 index 0000000..e69de29 diff --git a/resources/assets/js/components/Scorecard.vue b/resources/assets/js/components/Scorecard.vue new file mode 100644 index 0000000..a64c65c --- /dev/null +++ b/resources/assets/js/components/Scorecard.vue @@ -0,0 +1,34 @@ + + \ No newline at end of file diff --git a/resources/assets/js/components/TweetQueue.vue b/resources/assets/js/components/TweetQueue.vue index 612d34d..08a7ce7 100644 --- a/resources/assets/js/components/TweetQueue.vue +++ b/resources/assets/js/components/TweetQueue.vue @@ -1,20 +1,35 @@