From 5f503397a57ad0855b9e86a3b62a51232a8b7aad Mon Sep 17 00:00:00 2001 From: Aaron Parecki Date: Tue, 4 Jul 2017 11:20:03 -0700 Subject: [PATCH] hook up the twitter reply box! --- app/Events/NewTweetEvent.php | 10 +- app/Http/Controllers/DashboardController.php | 18 + app/Http/Controllers/TwitterController.php | 4 +- package.json | 3 +- public/css/app.css | 23 +- public/js/app.js | 1381 +++++++++++++++++- public/twitter.ico | Bin 0 -> 6518 bytes resources/assets/js/bootstrap.js | 2 + resources/assets/js/components/Scorecard.vue | 41 +- resources/assets/sass/app.scss | 19 +- routes/web.php | 1 + 11 files changed, 1470 insertions(+), 32 deletions(-) create mode 100644 public/twitter.ico diff --git a/app/Events/NewTweetEvent.php b/app/Events/NewTweetEvent.php index 7a85a3e..5104976 100644 --- a/app/Events/NewTweetEvent.php +++ b/app/Events/NewTweetEvent.php @@ -36,13 +36,13 @@ class NewTweetEvent implements ShouldBroadcast { $this->tweet_id = $tweet->id; $this->tweet_date = strtotime($tweet->tweet_date); - $this->team_name = $tweet->team->name; - $this->team_color = $tweet->team->color; - $this->player_username = $tweet->player->twitter; - $this->player_photo = $tweet->player->photo; + $this->team_name = ($tweet->team ? $tweet->team->name : null); + $this->team_color = ($tweet->team ? $tweet->team->color : null); + $this->player_username = ($tweet->player ? $tweet->player->twitter : null); + $this->player_photo = ($tweet->player ? $tweet->player->photo : null); $this->text = $tweet->text; $this->photos = json_decode($tweet->photo); - $this->mission = $tweet->mission->hashtag; + $this->mission = ($tweet->mission ? $tweet->mission->hashtag : null); $this->mission_id = $tweet->mission_id; } diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php index b7fe92d..1a9d859 100644 --- a/app/Http/Controllers/DashboardController.php +++ b/app/Http/Controllers/DashboardController.php @@ -117,4 +117,22 @@ class DashboardController extends Controller 'transit_lines' => $transit_lines ]); } + + public function reply_to_tweet(Request $request) { + $tweet = Tweet::where('id', $request->input('tweet_id'))->first(); + if($tweet) { + + $params = [ + 'auto_populate_reply_metadata' => true, + 'in_reply_to_status_id' => $tweet->tweet_id, + 'status' => $request->input('text') + ]; + $response = Twitter::postTweet($params); + if($response && $response->id_str) { + return response()->json(['result'=>'ok']); + } + + } + return response()->json(['result'=>'error']); + } } diff --git a/app/Http/Controllers/TwitterController.php b/app/Http/Controllers/TwitterController.php index f28c1d5..2fb19fc 100644 --- a/app/Http/Controllers/TwitterController.php +++ b/app/Http/Controllers/TwitterController.php @@ -59,7 +59,9 @@ class TwitterController extends BaseController $tweet->tweet_date = date('Y-m-d H:i:s', strtotime($data['created_at'])); $tweet->save(); - event(new NewTweetEvent($tweet)); + if($tweet->mission_id) { + event(new NewTweetEvent($tweet)); + } return $data['id_str']; } diff --git a/package.json b/package.json index 8805092..34a0cbe 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dependencies": { "featherlight": "^1.7.6", "laravel-echo": "^1.3.0", - "pusher-js": "^4.1.0" + "pusher-js": "^4.1.0", + "twitter-text": "^1.14.7" } } diff --git a/public/css/app.css b/public/css/app.css index a565206..63e67bc 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -8629,12 +8629,27 @@ button.close { background-color: #f5f8fa; } -.scorecard .tweet-reply button { - float: right; +.scorecard .tweet-reply .bottom { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } -.scorecard .tweet-reply .clear { - clear: both; +.scorecard .tweet-reply .bottom .fill { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.scorecard .tweet-reply .bottom img { + margin-right: 4px; +} + +.scorecard .tweet-reply .bottom .remaining-chars { + margin-right: 10px; } .scorecard .tweet-actions { diff --git a/public/js/app.js b/public/js/app.js index cbde40d..a533186 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -981,6 +981,8 @@ window.Echo = new __WEBPACK_IMPORTED_MODULE_0_laravel_echo___default.a({ encrypted: true }); +window.twitter = __webpack_require__(65); + /***/ }), /* 12 */ /***/ (function(module, exports, __webpack_require__) { @@ -46775,8 +46777,10 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c })]) })) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "multi-photo-clear" - })]) : _vm._e()]), _vm._v(" "), _c('div', { + })]) : _vm._e()]), _vm._v(" "), (_vm.showReplyBox) ? _c('div', { staticClass: "tweet-reply" + }, [_c('div', { + staticClass: "top" }, [_c('textarea', { directives: [{ name: "model", @@ -46789,7 +46793,8 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c "margin-bottom": "4px" }, attrs: { - "rows": "2" + "rows": "2", + "disabled": _vm.replyInProgress }, domProps: { "value": (_vm.replyText) @@ -46800,15 +46805,26 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c _vm.replyText = $event.target.value } } - }), _vm._v(" "), _c('button', { + })]), _vm._v(" "), _c('div', { + staticClass: "bottom" + }, [_c('div', { + staticClass: "fill" + }), _vm._v(" "), _c('img', { + attrs: { + "src": "/twitter.ico", + "width": "16" + } + }), _vm._v(" "), _c('div', { + staticClass: "remaining-chars" + }, [_vm._v(_vm._s(_vm.replyTextCharsRemaining))]), _vm._v(" "), _c('button', { staticClass: "btn btn-primary", attrs: { - "type": "submit", "disabled": _vm.isTweetReplyDisabled + }, + on: { + "click": _vm.sendReply } - }, [_vm._v("Reply")]), _vm._v(" "), _c('div', { - staticClass: "clear" - })]), _vm._v(" "), _c('div', { + }, [_vm._v("Reply")])])]) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "tweet-actions" }, [_c('button', { staticClass: "btn btn-success", @@ -47073,6 +47089,9 @@ if (false) { /* 61 */ /***/ (function(module, exports) { +// +// +// // // // @@ -47244,6 +47263,9 @@ module.exports = { centers: [], lines: [], replyText: '', + replyTextCharsRemaining: 140, + replyInProgress: false, + showReplyBox: true, selectedDocument: null, selectedTransitCenter: null, selectedTransitLine: null, @@ -47279,7 +47301,7 @@ module.exports = { } }, isTweetReplyDisabled: function isTweetReplyDisabled() { - return this.replyText == ''; + return this.replyText == '' || this.replyInProgress || this.replyTextCharsRemaining < 0; } }, methods: { @@ -47292,6 +47314,7 @@ module.exports = { this.selectedM5Singing = false; this.selectedM5Tipping = false; this.replyText = ''; + this.showReplyBox = true; }, dismiss: function dismiss() { this.clearState(); @@ -47344,6 +47367,21 @@ module.exports = { this.clearState(); this.$emit('complete'); }.bind(this)); + }, + sendReply: function sendReply() { + this.replyInProgress = true; + + $.post("/dashboard/reply", { + tweet_id: this.tweet.tweet_id, + text: this.replyText + }, function (response) { + if (response.result == "ok") { + this.replyText = ''; + } + this.replyInProgress = false; + }.bind(this)); + + // setTimeout(function(){ this.replyInProgress = false; this.showReplyBox = false; }.bind(this), 1000); } }, watch: { @@ -47355,6 +47393,9 @@ module.exports = { $(".multi-photo .photo").featherlight(); }.bind(this)); } + }, + replyText: function replyText(val) { + this.replyTextCharsRemaining = 140 - twitter.getTweetLength(val); } }, created: function created() { @@ -47381,5 +47422,1329 @@ module.exports = { **/ !function(a){"use strict";function b(a,c){if(!(this instanceof b)){var d=new b(a,c);return d.open(),d}this.id=b.id++,this.setup(a,c),this.chainCallbacks(b._callbackChain)}function c(a,b){var c={};for(var d in a)d in b&&(c[d]=a[d],delete a[d]);return c}function d(a,b){var c={},d=new RegExp("^"+b+"([A-Z])(.*)");for(var e in a){var f=e.match(d);if(f){var g=(f[1]+f[2].replace(/([A-Z])/g,"-$1")).toLowerCase();c[g]=a[e]}}return c}if("undefined"==typeof a)return void("console"in window&&window.console.info("Too much lightness, Featherlight needs jQuery."));var e=[],f=function(b){return e=a.grep(e,function(a){return a!==b&&a.$instance.closest("body").length>0})},g={allowfullscreen:1,frameborder:1,height:1,longdesc:1,marginheight:1,marginwidth:1,name:1,referrerpolicy:1,scrolling:1,sandbox:1,src:1,srcdoc:1,width:1},h={keyup:"onKeyUp",resize:"onResize"},i=function(c){a.each(b.opened().reverse(),function(){return c.isDefaultPrevented()||!1!==this[h[c.type]](c)?void 0:(c.preventDefault(),c.stopPropagation(),!1)})},j=function(c){if(c!==b._globalHandlerInstalled){b._globalHandlerInstalled=c;var d=a.map(h,function(a,c){return c+"."+b.prototype.namespace}).join(" ");a(window)[c?"on":"off"](d,i)}};b.prototype={constructor:b,namespace:"featherlight",targetAttr:"data-featherlight",variant:null,resetCss:!1,background:null,openTrigger:"click",closeTrigger:"click",filter:null,root:"body",openSpeed:250,closeSpeed:250,closeOnClick:"background",closeOnEsc:!0,closeIcon:"✕",loading:"",persist:!1,otherClose:null,beforeOpen:a.noop,beforeContent:a.noop,beforeClose:a.noop,afterOpen:a.noop,afterContent:a.noop,afterClose:a.noop,onKeyUp:a.noop,onResize:a.noop,type:null,contentFilters:["jquery","image","html","ajax","iframe","text"],setup:function(b,c){"object"!=typeof b||b instanceof a!=!1||c||(c=b,b=void 0);var d=a.extend(this,c,{target:b}),e=d.resetCss?d.namespace+"-reset":d.namespace,f=a(d.background||['
','
','",'
'+d.loading+"
","
","
"].join("")),g="."+d.namespace+"-close"+(d.otherClose?","+d.otherClose:"");return d.$instance=f.clone().addClass(d.variant),d.$instance.on(d.closeTrigger+"."+d.namespace,function(b){var c=a(b.target);("background"===d.closeOnClick&&c.is("."+d.namespace)||"anywhere"===d.closeOnClick||c.closest(g).length)&&(d.close(b),b.preventDefault())}),this},getContent:function(){if(this.persist!==!1&&this.$content)return this.$content;var b=this,c=this.constructor.contentFilters,d=function(a){return b.$currentTarget&&b.$currentTarget.attr(a)},e=d(b.targetAttr),f=b.target||e||"",g=c[b.type];if(!g&&f in c&&(g=c[f],f=b.target&&e),f=f||d("href")||"",!g)for(var h in c)b[h]&&(g=c[h],f=b[h]);if(!g){var i=f;if(f=null,a.each(b.contentFilters,function(){return g=c[this],g.test&&(f=g.test(i)),!f&&g.regex&&i.match&&i.match(g.regex)&&(f=i),!f}),!f)return"console"in window&&window.console.error("Featherlight: no content filter found "+(i?' for "'+i+'"':" (no target specified)")),!1}return g.process.call(b,f)},setContent:function(b){var c=this;return b.is("iframe")&&c.$instance.addClass(c.namespace+"-iframe"),c.$instance.removeClass(c.namespace+"-loading"),c.$instance.find("."+c.namespace+"-inner").not(b).slice(1).remove().end().replaceWith(a.contains(c.$instance[0],b[0])?"":b),c.$content=b.addClass(c.namespace+"-inner"),c},open:function(b){var c=this;if(c.$instance.hide().appendTo(c.root),!(b&&b.isDefaultPrevented()||c.beforeOpen(b)===!1)){b&&b.preventDefault();var d=c.getContent();if(d)return e.push(c),j(!0),c.$instance.fadeIn(c.openSpeed),c.beforeContent(b),a.when(d).always(function(a){c.setContent(a),c.afterContent(b)}).then(c.$instance.promise()).done(function(){c.afterOpen(b)})}return c.$instance.detach(),a.Deferred().reject().promise()},close:function(b){var c=this,d=a.Deferred();return c.beforeClose(b)===!1?d.reject():(0===f(c).length&&j(!1),c.$instance.fadeOut(c.closeSpeed,function(){c.$instance.detach(),c.afterClose(b),d.resolve()})),d.promise()},resize:function(a,b){if(a&&b){this.$content.css("width","").css("height","");var c=Math.max(a/(parseInt(this.$content.parent().css("width"),10)-1),b/(parseInt(this.$content.parent().css("height"),10)-1));c>1&&(c=b/Math.floor(b/c),this.$content.css("width",""+a/c+"px").css("height",""+b/c+"px"))}},chainCallbacks:function(b){for(var c in b)this[c]=a.proxy(b[c],this,a.proxy(this[c],this))}},a.extend(b,{id:0,autoBind:"[data-featherlight]",defaults:b.prototype,contentFilters:{jquery:{regex:/^[#.]\w/,test:function(b){return b instanceof a&&b},process:function(b){return this.persist!==!1?a(b):a(b).clone(!0)}},image:{regex:/\.(png|jpg|jpeg|gif|tiff|bmp|svg)(\?\S*)?$/i,process:function(b){var c=this,d=a.Deferred(),e=new Image,f=a('');return e.onload=function(){f.naturalWidth=e.width,f.naturalHeight=e.height,d.resolve(f)},e.onerror=function(){d.reject(f)},e.src=b,d.promise()}},html:{regex:/^\s*<[\w!][^<]*>/,process:function(b){return a(b)}},ajax:{regex:/./,process:function(b){var c=a.Deferred(),d=a("
").load(b,function(a,b){"error"!==b&&c.resolve(d.contents()),c.fail()});return c.promise()}},iframe:{process:function(b){var e=new a.Deferred,f=a("