VRFS-2067 expand / collapse RSVP musicians and latencies when there are more than 3

web/app/assets/javascripts/sessionList.js

@@ -56,7 +56,7 @@
             if (session.approved_rsvps[i].id === context.JK.currentUserId) {
               showJoinLink = true;
             }
-            var rsvpUserInfo = createRsvpUser(session.approved_rsvps[i], session);
+            var rsvpUserInfo = createRsvpUser(session.approved_rsvps[i], session, approvedRsvpCount, i);
             if (i < 3) {
               rsvpFirst3UsersHtml += rsvpUserInfo[0];
               latencyFirst3Html += rsvpUserInfo[1];
@@ -115,15 +115,12 @@
 
       var $parentRow = $('tr[data-session-id=' + session.id + ']', tbGroup);
 
-      $(tbGroup).on('click', 'a.more.slots', function() {
-        alert("HERE");
+      // wire up "more" links
+      $('a.more.slots', $parentRow).click(toggleSlots);
+      $('a.more.rsvps', $parentRow).click(function() {
+        toggleRsvps(session.id);
       });
 
-      // if ($moreLink) {
-      //   console.log("IN HERE");
-      //   $moreLink[0].click(toggleSlots);
-      // }
-
       if (showJoinLink) {
         // wire up the Join Link to the T&Cs dialog
         
@@ -181,7 +178,7 @@
             approvedRsvpId = approved_rsvp.rsvp_request_id;
           }
 
-          var rsvpUserInfo = createRsvpUser(approved_rsvp, session);
+          var rsvpUserInfo = createRsvpUser(approved_rsvp, session, approvedRsvpCount, i);
 
           if (i < 3) {
             rsvpFirst3UsersHtml += rsvpUserInfo[0];
@@ -266,6 +263,9 @@
 
       // wire up "more" links
       $('a.more.slots', $parentRow).click(toggleSlots);
+      $('a.more.rsvps', $parentRow).click(function() {
+        toggleRsvps(session.id);
+      });
 
       var showRsvpLink = true;
       var noLinkText = '';
@@ -400,6 +400,11 @@
         }
       }
 
+      var moreLinkHtml = '';
+      if (rsvpCount > 3 && currentIndex === 2) {
+        moreLinkHtml = '<a class="rsvps more">more</a><a class="details-arrow arrow-down-orange"></a>';
+      }
+
       var id = user.id;
       var name = user.name;
       var musicianVals = {
@@ -407,7 +412,8 @@
         avatar_url: context.JK.resolveAvatarUrl(user.photo_url),
         profile_url: "/client#/profile/" + id,
         musician_name: name,
-        instruments: instrumentLogoHtml
+        instruments: instrumentLogoHtml,
+        more_link: moreLinkHtml
       };
 
       var musicianHtml = context.JK.fillTemplate($musicianTemplate.html(), musicianVals);
@@ -444,6 +450,31 @@
       }
     }
 
+    function toggleRsvps(sessionId) {
+      // musicians
+      var $musicians = $(this).closest('table').next();
+
+      // latency indicators that need expanding / collapsing
+      var $extraLatencies = $("#latency-extra-" + sessionId);
+
+      var $arrow = $(this).next();
+
+      if ($musicians.is(":visible")) {
+        $(this).text('more');
+        $arrow.removeClass('arrow-up-orange');
+        $arrow.addClass('arrow-down-orange');
+        $musicians.hide();
+        $extraLatencies.hide();
+      }
+      else {
+        $(this).text('less');
+        $arrow.addClass('arrow-up-orange');
+        $arrow.removeClass('arrow-down-orange');
+        $musicians.show();
+        $extraLatencies.show();
+      }
+    }
+
     this.renderActiveSession = renderActiveSession;
     this.renderInactiveSession = renderInactiveSession;
 

web/app/views/clients/_findSession.html.erb

@@ -137,7 +137,7 @@
           {latency_first_3}
         </table>
       </div>
-      <div class="center">
+      <div id="latency-extra-{id}" class="center" style="display:none;">
         <table class="musicians" cellpadding="0" cellspacing="0">
           {latency_remaining}
         </table>
@@ -216,7 +216,7 @@
           {latency_first_3}
         </table>
       </div>
-      <div class="center">
+      <div id="latency-extra-{id}" class="center" style="display:none;">
         <table class="musicians" cellpadding="0" cellspacing="0">
           {latency_remaining}
         </table>
@@ -256,6 +256,7 @@
     <td>
       <div class="instruments" class="nowrap">{instruments}</div>
     </td>
+    <td>{more_link}</td>
   </tr>
 </script>