From 2db1de8e3c6287051f240423722c011855e7cd6b Mon Sep 17 00:00:00 2001
From: Brian Smith <briansmith@jamkazam.com>
Date: Fri, 29 Aug 2014 00:23:36 -0400
Subject: [PATCH] VRFS-2095 add orange spinner to Find Session screen

---
 web/app/assets/javascripts/findSession.js     | 35 ++++++-------------
 .../stylesheets/client/findSession.css.scss   | 11 ++++++
 web/app/views/clients/_findSession.html.erb   |  7 ++--
 3 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/web/app/assets/javascripts/findSession.js b/web/app/assets/javascripts/findSession.js
index de5c795ea..c751d514b 100644
--- a/web/app/assets/javascripts/findSession.js
+++ b/web/app/assets/javascripts/findSession.js
@@ -22,9 +22,12 @@
 
     var currentActiveSessionsQuery = defaultActiveSessionsQuery();
 
+    var $asSpinner = null;
+
     var $ssNext = null;
     var $ssScroller = null;
     var $ssNoMoreEntries = null;
+    var $ssSpinner = null;
     var currentScheduledSessionsPage = 0;
     var currentScheduledSessionsQuery = defaultScheduledSessionsQuery();
 
@@ -32,15 +35,6 @@
       return CATEGORY;
     }
 
-    function removeSpinner($selector) {
-      $('div[layout-id=findSession] .content .spinner').remove();// remove any existing spinners
-    }
-
-    function addSpinner($selector) {
-      removeSpinner();
-      $selector.append('<div class="spinner spinner-large"></div>')
-    }
-
     function search() {
       logger.debug("Searching for sessions...");
       clearResults();
@@ -50,8 +44,8 @@
     }
 
     function loadSessions() {
-      addSpinner($('#sessions-active'));
-      addSpinner($('#sessions-scheduled'));
+      $asSpinner.show();
+      $ssSpinner.show();
 
       // get active sessions
       rest.findActiveSessions(currentActiveSessionsQuery)
@@ -67,7 +61,7 @@
           }
         })
         .always(function() {
-          removeSpinner($('#sessions-active'));
+          $asSpinner.hide();
         });
 
       // get scheduled sessions
@@ -84,7 +78,7 @@
           }
         })
         .always(function() {
-          removeSpinner($('#sessions-scheduled'));
+          $ssSpinner.hide();
         });
     }
 
@@ -205,16 +199,6 @@
     }
 
     function afterLoadScheduledSessions(sessionList) {
-      var $noSessionsMsgSelector = $('#no-scheduled-sessions');
-      
-      if (sessionList.length === 0 && currentScheduledSessionsPage === 0) {
-        $(CATEGORY.SCHEDULED.id).hide();
-        $noSessionsMsgSelector.show();
-      }
-      else {
-        $(CATEGORY.SCHEDULED.id).show();
-        $noSessionsMsgSelector.hide();
-      }
 
       if(sessionList.length < SCHEDULED_SESSIONS_LIMIT) {
         // if we retrieve less results than asked for, end searching
@@ -310,7 +294,10 @@
       $screen = $('#findSession');
       $ssNext = $screen.find('#sessions-scheduled .btn-next')
       $ssScroller = $screen.find('.content-body-scroller');
-      $ssNoMoreEntries = $screen.find('#end-of-ss-list')
+      $ssNoMoreEntries = $screen.find('#end-of-ss-list');
+      $ssSpinner = $screen.find('#sessions-scheduled .paginate-wait');
+
+      $asSpinner = $screen.find('#sessions-active .paginate-wait');
 
       $dateFilter.datepicker({
           dateFormat: "D d MM yy",
diff --git a/web/app/assets/stylesheets/client/findSession.css.scss b/web/app/assets/stylesheets/client/findSession.css.scss
index 627b28192..7c2ca99c7 100644
--- a/web/app/assets/stylesheets/client/findSession.css.scss
+++ b/web/app/assets/stylesheets/client/findSession.css.scss
@@ -2,6 +2,17 @@
 
 #findSession {
 
+  .paginate-wait {
+    margin:auto;
+    text-align:center;
+    vertical-align:bottom;
+    line-height:32px;
+    .spinner-small {
+      display:inline-block;
+      vertical-align:top;
+    }
+  }
+
   th, td { margin: 4px; padding:4px; }
 
   .content .spinner {
diff --git a/web/app/views/clients/_findSession.html.erb b/web/app/views/clients/_findSession.html.erb
index ec21dc8f4..bea6d4851 100644
--- a/web/app/views/clients/_findSession.html.erb
+++ b/web/app/views/clients/_findSession.html.erb
@@ -51,17 +51,16 @@
               <div id="sessions-active" class="session-container">
                 <%= render :partial => "sessionList", :locals => {:title => "current, active sessions", :category => "sessions-active"} %>
                 <br />
+                <div class="paginate-wait">Fetching results...<div class="spinner-small"></div></div>
                 <div id="no-active-sessions">
-                  No active public sessions found.
+                  No more active public sessions found.
                 </div>
               </div>
               <br />
               <div id="sessions-scheduled" class="session-container">
                 <%= render :partial => "sessionList", :locals => {:title => "future, scheduled sessions", :category => "sessions-scheduled"} %>
                 <br />
-                <div id="no-scheduled-sessions">
-                  No scheduled sessions found.
-                </div>
+                <div class="paginate-wait">Fetching results...<div class="spinner-small"></div></div>
                 <div id="end-of-ss-list" class="end-of-list">
                   No more scheduled sessions.
                 </div>