VRFS-2067 VRFS-2163 expand / collapse open slots, add All Languages option to language filter

2014-09-17 03:14:43 -04:00 · 2014-09-17 03:14:43 -04:00 · 692416e27f
parent 169f97fdc3
commit 692416e27f
5 changed files with 152 additions and 36 deletions
--- a/web/app/assets/javascripts/sessionList.js
+++ b/web/app/assets/javascripts/sessionList.js
@ -25,7 +25,7 @@
      $('#actionHeader', tbGroup).html('JOIN');

      var i = 0;
-      var inSessionUsersHtml = '', rsvpUsersHtml = '', openSlotsHtml = '', latencyHtml = '', notationFileHtml = '';
+      var inSessionUsersHtml = '', rsvpFirst3UsersHtml = '', rsvpRemainingUsersHtml = '', openSlotsFirst3Html = '', openSlotsRemainingHtml = '', latencyInSessionHtml = '', latencyFirst3Html = '', latencyRemainingHtml = '', notationFileHtml = '';

      // this is used to track which users are already in the session so we can exclude them from the
      // "RSVPs" section
@ -39,25 +39,32 @@
          inSessionUsers.push(session.active_music_session.participants[i].user.id);
          var inSessionUserInfo = createInSessionUser(session.active_music_session.participants[i]);
          inSessionUsersHtml += inSessionUserInfo[0];
-          latencyHtml += inSessionUserInfo[1];
+          latencyInSessionHtml += inSessionUserInfo[1];
        }
      }
      // this provides a buffer at the top to shift the first latency tag down in the event there are NO in-session musicians
      else {
-        latencyHtml += "<div style='height:15px;'>&nbsp;</div>";
+        latencyInSessionHtml += "<div style='height:15px;'>&nbsp;</div>";
      }

      // render users who have approved RSVPs
      if (session.approved_rsvps) {
-        for (i=0; i < session.approved_rsvps.length; i++) {
+        var approvedRsvpCount = session.approved_rsvps.length;
+        for (i=0; i < approvedRsvpCount; i++) {
          // do not show the user in this section if he is already in the session
          if ($.inArray(session.approved_rsvps[i].id, inSessionUsers) === -1) {
            if (session.approved_rsvps[i].id === context.JK.currentUserId) {
              showJoinLink = true;
            }
            var rsvpUserInfo = createRsvpUser(session.approved_rsvps[i], session);
-            rsvpUsersHtml += rsvpUserInfo[0];
-            latencyHtml += rsvpUserInfo[1];
+            if (i < 3) {
+              rsvpFirst3UsersHtml += rsvpUserInfo[0];
+              latencyFirst3Html += rsvpUserInfo[1];
+            }
+            else {
+              rsvpRemainingUsersHtml += rsvpUserInfo[0];
+              latencyRemainingHtml += rsvpUserInfo[1];
+            }
          }
          else {
            showJoinLink = true;
@ -67,13 +74,19 @@

      // render if anyone interested
      if(session['is_unstructured_rsvp?']) {
-        openSlotsHtml += sessionUtils.createOpenSlot($openSlotsTemplate, {description: 'Any Instrument'})
+        openSlotsHtml += sessionUtils.createOpenSlot($openSlotsTemplate, {description: 'Any Instrument'});
      }

      // render open slots
      if (session.open_slots) {
-        for (i=0; i < session.open_slots.length; i++) {
-          openSlotsHtml += sessionUtils.createOpenSlot($openSlotsTemplate, session.open_slots[i]);
+        var openSlotCount = session.open_slots.length;
+        for (i=0; i < openSlotCount; i++) {
+          if (i < 3) {
+            openSlotsFirst3Html += sessionUtils.createOpenSlot($openSlotsTemplate, session.open_slots[i], openSlotCount, i);
+          }
+          else {
+            openSlotsRemainingHtml += sessionUtils.createOpenSlot($openSlotsTemplate, session.open_slots[i], openSlotCount, i);
+          }
        }
      }

@ -84,7 +97,7 @@
        }
      }

-      var sessionVals = buildSessionObject(session, notationFileHtml, rsvpUsersHtml, openSlotsHtml, latencyHtml);
+      var sessionVals = buildSessionObject(session, notationFileHtml, rsvpFirst3UsersHtml, rsvpRemainingUsersHtml, openSlotsFirst3Html, openSlotsRemainingHtml, latencyFirst3Html, latencyRemainingHtml);
      sessionVals.in_session_musicians = inSessionUsersHtml.length > 0 ? inSessionUsersHtml : 'N/A';
      sessionVals.join_link_display_style = showJoinLink ? "block" : "none";

@ -100,9 +113,20 @@

      $(tbGroup).append($row);

+      var $parentRow = $('tr[data-session-id=' + session.id + ']', tbGroup);
+
+      $(tbGroup).on('click', 'a.more.slots', function() {
+        alert("HERE");
+      });
+
+      // if ($moreLink) {
+      //   console.log("IN HERE");
+      //   $moreLink[0].click(toggleSlots);
+      // }
+
      if (showJoinLink) {
        // wire up the Join Link to the T&Cs dialog
-        var $parentRow = $('tr[data-session-id=' + session.id + ']', tbGroup);
+        
        $('.join-link', $parentRow).click(function(evt) {
          if(!context.JK.guardAgainstBrowser(app)) {
            return false;
@ -141,7 +165,7 @@
      $('#actionHeader', tbGroup).html('RSVP');

      var i = 0;
-      var rsvpUsersHtml = '', openSlotsHtml = '', latencyHtml = '', notationFileHtml = '';
+      var rsvpFirst3UsersHtml = '', rsvpRemainingUsersHtml = '', openSlotsFirst3Html = '', openSlotsRemainingHtml = '', latencyFirst3Html = '', latencyRemainingHtml = '', notationFileHtml = '';

      context._.each(session.pending_rsvp_requests, function(pending_rsvp_request) {
          if(pending_rsvp_request.user_id === context.JK.currentUserId) {
@ -151,30 +175,48 @@

      // render users who have approved RSVPs
      if (session.approved_rsvps && session.approved_rsvps.length > 0) {
+        var approvedRsvpCount = session.approved_rsvps.length;
        context._.each(session.approved_rsvps, function(approved_rsvp) {
          if (approved_rsvp.id === context.JK.currentUserId) {
            approvedRsvpId = approved_rsvp.rsvp_request_id;
          }
+
          var rsvpUserInfo = createRsvpUser(approved_rsvp, session);
-          rsvpUsersHtml += rsvpUserInfo[0];
-          latencyHtml += rsvpUserInfo[1];
+
+          if (i < 3) {
+            rsvpFirst3UsersHtml += rsvpUserInfo[0];
+            latencyFirst3Html += rsvpUserInfo[1];
+          }
+          else {
+            rsvpRemainingUsersHtml += rsvpUserInfo[0];
+            latencyRemainingHtml += rsvpUserInfo[1];
+          }
+
+          i++;
        });
      }
      // this provides a buffer at the top to shift the first latency tag down in the event there are NO RSVP musicians
      else {
-        latencyHtml += "<div style='height:15px;'>&nbsp;</div>";
+        latencyFirst3Html += "<div style='height:15px;'>&nbsp;</div>";
      }

      if(session['is_unstructured_rsvp?']) {
        openSlots = true; // unstructured RSVP means there are always open slots
-        openSlotsHtml += sessionUtils.createOpenSlot($openSlotsTemplate, {description: 'Any Instrument'})
+        openSlotsFirst3Html += sessionUtils.createOpenSlot($openSlotsTemplate, {description: 'Any Instrument'});
      }

      // render open slots
      if (session.open_slots) {
-        for (i=0; i < session.open_slots.length; i++) {
+        var openSlotCount = session.open_slots.length;
+        for (i=0; i < openSlotCount; i++) {
          openSlots = true;
-          openSlotsHtml += sessionUtils.createOpenSlot($openSlotsTemplate, session.open_slots[i]);
+
+          if (i < 3) {
+            openSlotsFirst3Html += sessionUtils.createOpenSlot($openSlotsTemplate, session.open_slots[i], openSlotCount, i);
+          }
+          else {
+            openSlotsRemainingHtml += sessionUtils.createOpenSlot($openSlotsTemplate, session.open_slots[i], openSlotCount, i);
+          }
        }
      }

@ -194,7 +236,9 @@
        }
      }

-      var sessionVals = buildSessionObject(session, notationFileHtml, rsvpUsersHtml, openSlotsHtml, latencyHtml);
+      var sessionVals = buildSessionObject(session, notationFileHtml, rsvpFirst3UsersHtml, rsvpRemainingUsersHtml, 
+        openSlotsFirst3Html, openSlotsRemainingHtml, latencyFirst3Html, latencyRemainingHtml);
+
      sessionVals.scheduled_start = session.pretty_scheduled_start_with_timezone;

      var $row = $(context.JK.fillTemplate($inactiveSessionTemplate.html(), sessionVals));
@ -220,6 +264,9 @@
      
      var $parentRow = $('tr[data-session-id=' + session.id + ']', tbGroup);

+      // wire up "more" links
+      $('a.more.slots', $parentRow).click(toggleSlots);
+
      var showRsvpLink = true;
      var noLinkText = '';

@ -290,16 +337,19 @@
      }
    }

-    function buildSessionObject(session, notationFileHtml, rsvpUsersHtml, openSlotsHtml, latencyHtml) {
+    function buildSessionObject(session, notationFileHtml, rsvpFirst3UsersHtml, rsvpRemainingUsersHtml, openSlotsFirst3Html, openSlotsRemainingHtml, latencyFirst3Html, latencyRemainingHtml) {
      return {
        id: session.id,
        name: session.name,
        description: session.description || "(No description)",
        notation_files: notationFileHtml.length > 0 ? notationFileHtml : 'N/A',
        genres: session.genres.join (', '),
-        rsvp_musicians: rsvpUsersHtml.length > 0 ? rsvpUsersHtml : 'N/A',
-        open_slots: openSlotsHtml.length > 0 ? openSlotsHtml : 'No slots available',
-        latency: latencyHtml,
+        rsvp_musicians_first_3: rsvpFirst3UsersHtml.length > 0 ? rsvpFirst3UsersHtml : 'N/A',
+        rsvp_musicians_remaining: rsvpRemainingUsersHtml.length > 0 ? rsvpRemainingUsersHtml : 'N/A',
+        open_slots_first_3: openSlotsFirst3Html.length > 0 ? openSlotsFirst3Html : 'No slots available',
+        open_slots_remaining: openSlotsRemainingHtml.length > 0 ? openSlotsRemainingHtml : 'No slots available',
+        latency_first_3: latencyFirst3Html,
+        latency_remaining: latencyRemainingHtml,
        language: session.language_description,
        musician_access: session.musician_access_description,
        fan_access: session.fan_access_description,
@ -335,7 +385,7 @@
      return [musicianHtml, latencyHtml];
    }

-    function createRsvpUser(user, session) {
+    function createRsvpUser(user, session, rsvpCount, currentIndex) {

      var instrumentLogoHtml = '';

@ -376,6 +426,24 @@
      return context.JK.fillTemplate($notationFileTemplate.html(), notationVals);
    }

+    function toggleSlots() {
+      var $div = $(this).closest('table').next();
+      var $arrow = $(this).next();
+
+      if ($div.is(":visible")) {
+        $(this).text('more');
+        $arrow.removeClass('arrow-up-orange');
+        $arrow.addClass('arrow-down-orange');
+        $div.hide();
+      }
+      else {
+        $(this).text('less');
+        $arrow.addClass('arrow-up-orange');
+        $arrow.removeClass('arrow-down-orange');
+        $div.show();
+      }
+    }
+
    this.renderActiveSession = renderActiveSession;
    this.renderInactiveSession = renderInactiveSession;

--- a/web/app/assets/javascripts/session_utils.js
+++ b/web/app/assets/javascripts/session_utils.js
@ -20,7 +20,7 @@
    UNKNOWN: {description: "UNKNOWN", style: "latency-unknown", min: -2, max: -2}
  };

-  sessionUtils.createOpenSlot = function($openSlotsTemplate, slot) {
+  sessionUtils.createOpenSlot = function($openSlotsTemplate, slot, openSlotCount, currentSlotIndex) {
    var inst = context.JK.getInstrumentIcon24(slot.instrument_id);

    var proficiency_desc = slot.proficiency_desc;
@ -29,13 +29,16 @@
      proficiency_desc = "Any Skill Level";
    }

-    if(!slot.proficiency_desc) {
-      proficiency_desc
+    var moreLinkHtml = '';
+    if (openSlotCount > 3 && currentSlotIndex === 2) {
+      moreLinkHtml = '<a class="slots more">more</a><a class="details-arrow arrow-down-orange"></a>';
    }
+
    var slot = {
      instrument_url: inst,
      instrument: slot.description,
-      proficiency: proficiency_desc
+      proficiency: proficiency_desc,
+      more_link: moreLinkHtml
    };

    return context.JK.fillTemplate($openSlotsTemplate.html(), slot);
--- a/web/app/assets/stylesheets/client/content.css.scss
+++ b/web/app/assets/stylesheets/client/content.css.scss
@ -528,10 +528,19 @@ ul.shortcuts {
  padding:2px 8px !important;
 }

+a.arrow-up-orange {
+  margin-left:5px;
+  margin-bottom:2px;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid #ED3618;
+}

 a.arrow-down-orange {
  margin-left:5px;
-  margin-top:4px;
+  margin-top:0px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
--- a/web/app/assets/stylesheets/client/sessionList.css.scss
+++ b/web/app/assets/stylesheets/client/sessionList.css.scss
@ -114,7 +114,7 @@ table.findsession-table, table.local-recordings {
    vertical-align:middle !important;

    .instruments {
-      height:24px;
+      //height:24px;
    }
  }

@ -131,6 +131,10 @@ table.findsession-table, table.local-recordings {
    text-decoration:none;
  }

+  a.more {
+    color:#ED3618;
+  }
+
  a:hover {
    color:#227985;
  }
--- a/web/app/views/clients/_findSession.html.erb
+++ b/web/app/views/clients/_findSession.html.erb
@ -30,6 +30,7 @@
              <!-- language filter -->
              <div class="language">
                <select id="session-language-filter">
+                  <option value="">All Languages</option>
                  <% music_session_languages.each do |language| %>
                    <option value="<%= language[:id] %>"><%= language[:label] %></option>
                  <% end %>
@ -106,16 +107,26 @@
          <td>RSVPs:</td>
          <td>
            <table class="musicians" cellpadding="0" cellspacing="0" width="100%">
-              {rsvp_musicians}
+              {rsvp_musicians_first_3}
            </table>
+            <div style="display:none;">
+              <table class="musicians" cellpadding="0" cellspacing="0" width="100%">
+                {rsvp_musicians_remaining}
+              </table>
+            </div>
          </td>
        </tr>
        <tr>
          <td>Still Needed:</td>
          <td>
            <table class="musicians" cellpadding="0" cellspacing="0">
-              {open_slots}
+              {open_slots_first_3}
            </table>
+            <div style="display:none">
+              <table class="musicians" cellpadding="0" cellspacing="0">
+                {open_slots_remaining}
+              </table>
+            </div>
          </td>
        </tr>
      </table>
@ -123,7 +134,12 @@
    <td width="10%" class="latency">
      <div class="center">
        <table class="musicians" cellpadding="0" cellspacing="0">
-          {latency}
+          {latency_first_3}
+        </table>
+      </div>
+      <div class="center">
+        <table class="musicians" cellpadding="0" cellspacing="0">
+          {latency_remaining}
        </table>
      </div>
    </td>
@ -170,16 +186,26 @@
          <td>RSVPs:</td>
          <td>
            <table class="musicians" cellpadding="0" cellspacing="0" width="100%">
-              {rsvp_musicians}
+              {rsvp_musicians_first_3}
            </table>
+            <div style="display:none">
+              <table class="musicians" cellpadding="0" cellspacing="0" width="100%">
+                {rsvp_musicians_remaining}
+              </table>
+            </div>
          </td>
        </tr>
        <tr>
          <td>Still Needed:</td>
          <td>
            <table class="musicians" cellpadding="0" cellspacing="0">
-              {open_slots}
+              {open_slots_first_3}
            </table>
+            <div style="display:none;">
+              <table class="musicians" cellpadding="0" cellspacing="0">
+                {open_slots_remaining}
+              </table>
+            </div>
          </td>
        </tr>
      </table>
@ -187,7 +213,12 @@
    <td width="10%" class="latency pt10">
      <div class="center">
        <table class="musicians" cellpadding="0" cellspacing="0">
-          {latency}
+          {latency_first_3}
+        </table>
+      </div>
+      <div class="center">
+        <table class="musicians" cellpadding="0" cellspacing="0">
+          {latency_remaining}
        </table>
      </div>
    </td>
@ -236,6 +267,7 @@
    <td>
      <div class="instruments" class="nowrap">{instrument} ({proficiency})</div>
    </td>
+    <td>{more_link}</td>
  </tr>
 </script>