From 2c8bf4d175d2e551a6330282f879973499cdb6be Mon Sep 17 00:00:00 2001
From: Aaron Parecki <aaron@parecki.com>
Date: Mon, 3 Jul 2017 11:46:00 -0700
Subject: [PATCH] dismiss scoreboard when another tweet is clicked, ping
 dashboard to help timeouts

---
 app/Http/Controllers/DashboardController.php  |  5 +++
 public/css/app.css                            | 10 ++++++
 public/js/app.js                              | 31 +++++++++----------
 resources/assets/js/components/Scorecard.vue  | 15 +++------
 resources/assets/js/components/TweetQueue.vue | 14 ++++++++-
 resources/assets/sass/app.scss                |  8 ++++-
 routes/web.php                                |  1 +
 7 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index 6bf9977..f200a03 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -42,6 +42,11 @@ class DashboardController extends Controller
         return response()->json(['queue'=>$queue]);
     }
 
+    public function ping() {
+        Tweet::claimed_timeout();
+        return response()->json(['result'=>'ok']);
+    }
+
     public function claim_tweet(Request $request) {
         $tweet = Tweet::where('id', $request->input('tweet_id'))->first();
         if($tweet) {
diff --git a/public/css/app.css b/public/css/app.css
index abbfc8c..92ca8bd 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -8586,6 +8586,11 @@ button.close {
   max-width: 100%;
 }
 
+.multi-photo {
+  overflow: hidden;
+  border-radius: 6px;
+}
+
 .multi-photo .photo {
   position: relative;
   overflow: hidden;
@@ -8608,6 +8613,11 @@ button.close {
   clear: both;
 }
 
+.multi-photo.photos-1 .photo {
+  width: 100%;
+  height: 400px;
+}
+
 /* 2-up multi-photos use this layout */
 
 .multi-photo.photos-2 .photo {
diff --git a/public/js/app.js b/public/js/app.js
index 3bfdcf8..11380fd 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -46538,6 +46538,13 @@ module.exports = {
         });
       }.bind(this));
     },
+    dashboardPing: function dashboardPing() {
+      setTimeout(function () {
+        $.get('/dashboard/ping', function () {
+          this.dashboardPing();
+        }.bind(this));
+      }.bind(this), 15000);
+    },
     findTweetInQueue: function findTweetInQueue(tweet_id) {
       var queueIndex = false;
       for (var i in this.queue) {
@@ -46555,7 +46562,11 @@ module.exports = {
       }
     },
     clickedTweet: function clickedTweet(tweet_index) {
-      // var tweet_data = this.removeTweetFromQueue(tweet_id);
+      // 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;
 
@@ -46589,6 +46600,7 @@ module.exports = {
   },
   created: function created() {
     this.loadQueue();
+    this.dashboardPing();
   }
 };
 
@@ -46737,13 +46749,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     staticClass: "tweet"
   }, [_c('div', {
     staticClass: "text"
-  }, [_vm._v(_vm._s(_vm.tweet.text))]), _vm._v(" "), (_vm.tweet.photos) ? _c('div', [(_vm.tweet.photos.length == 1) ? _vm._l((_vm.tweet.photos), function(img) {
-    return _c('div', [_c('img', {
-      attrs: {
-        "src": img
-      }
-    })])
-  }) : [(_vm.tweet.photos) ? _c('div', {
+  }, [_vm._v(_vm._s(_vm.tweet.text))]), _vm._v(" "), (_vm.tweet.photos) ? _c('div', [(_vm.tweet.photos) ? _c('div', {
     class: 'multi-photo photos-' + _vm.tweet.photos.length
   }, _vm._l((_vm.tweet.photos), function(img) {
     return _c('div', {
@@ -46759,7 +46765,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     })])
   })) : _vm._e(), _vm._v(" "), _c('div', {
     staticClass: "multi-photo-clear"
-  })]], 2) : _vm._e()])]), _vm._v(" "), _c('div', {
+  })]) : _vm._e()])]), _vm._v(" "), _c('div', {
     staticClass: "col-md-4"
   }, [_c('div', [_vm._v(_vm._s(_vm.tweet.mission))])])])])]) : _vm._e()
 },staticRenderFns: []}
@@ -46775,13 +46781,6 @@ if (false) {
 /* 61 */
 /***/ (function(module, exports) {
 
-//
-//
-//
-//
-//
-//
-//
 //
 //
 //
diff --git a/resources/assets/js/components/Scorecard.vue b/resources/assets/js/components/Scorecard.vue
index c166253..bb13faa 100644
--- a/resources/assets/js/components/Scorecard.vue
+++ b/resources/assets/js/components/Scorecard.vue
@@ -21,19 +21,12 @@
           <div class="tweet">
             <div class="text">{{ tweet.text }}</div>
             <div v-if="tweet.photos">
-              <template v-if="tweet.photos.length == 1">
-                <div v-for="img in tweet.photos">
+              <div :class="'multi-photo photos-'+tweet.photos.length" v-if="tweet.photos">
+                <div v-for="img in tweet.photos" class="photo" :style="'background-image:url('+img+')'" :data-featherlight="img">
                   <img :src="img">
                 </div>
-              </template>
-              <template v-else>
-                <div :class="'multi-photo photos-'+tweet.photos.length" v-if="tweet.photos">
-                  <div v-for="img in tweet.photos" class="photo" :style="'background-image:url('+img+')'" :data-featherlight="img">
-                    <img :src="img">
-                  </div>
-                </div>
-                <div class="multi-photo-clear"></div>
-              </template>
+              </div>
+              <div class="multi-photo-clear"></div>
             </div>
           </div>
 
diff --git a/resources/assets/js/components/TweetQueue.vue b/resources/assets/js/components/TweetQueue.vue
index ea44d98..b793ac2 100644
--- a/resources/assets/js/components/TweetQueue.vue
+++ b/resources/assets/js/components/TweetQueue.vue
@@ -52,6 +52,13 @@ module.exports = {
 
       }.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) {
@@ -69,7 +76,11 @@ module.exports = {
       }
     },
     clickedTweet(tweet_index) {
-      // var tweet_data = this.removeTweetFromQueue(tweet_id);
+      // 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;
 
@@ -106,6 +117,7 @@ module.exports = {
   },
   created() {
     this.loadQueue();
+    this.dashboardPing();
   }
 }
 </script>
\ No newline at end of file
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index d0d8965..59ad259 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -110,8 +110,10 @@
 
 }
 
-
 .multi-photo {
+  overflow: hidden;
+  border-radius: 6px;
+
   .photo {
     position: relative;
     overflow: hidden;
@@ -135,6 +137,10 @@
 .multi-photo-clear {
   clear: both;
 }
+.multi-photo.photos-1 .photo {
+  width: 100%;
+  height: 400px;
+}
 /* 2-up multi-photos use this layout */
 .multi-photo.photos-2 .photo {
   width: 50%;
diff --git a/routes/web.php b/routes/web.php
index e957bbc..c1d587a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -19,6 +19,7 @@ Auth::routes();
 
 Route::get('/dashboard', 'DashboardController@index')->name('dashboard');
 Route::get('/dashboard/queue', 'DashboardController@queue')->name('queue');
+Route::get('/dashboard/ping', 'DashboardController@ping');
 Route::post('/dashboard/claim-tweet', 'DashboardController@claim_tweet');
 
 Route::get('/teams', 'TeamController@index')->name('teams');