diff --git a/web/app/assets/javascripts/sessionList.js b/web/app/assets/javascripts/sessionList.js index a8fc38a9d..ef83c22ec 100644 --- 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 += "
 
"; + latencyInSessionHtml += "
 
"; } // 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 += "
 
"; + latencyFirst3Html += "
 
"; } 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; diff --git a/web/app/assets/javascripts/session_utils.js b/web/app/assets/javascripts/session_utils.js index 962a18be1..3fc318fe2 100644 --- 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 = 'more'; } + var slot = { instrument_url: inst, instrument: slot.description, - proficiency: proficiency_desc + proficiency: proficiency_desc, + more_link: moreLinkHtml }; return context.JK.fillTemplate($openSlotsTemplate.html(), slot); diff --git a/web/app/assets/stylesheets/client/content.css.scss b/web/app/assets/stylesheets/client/content.css.scss index aba873c49..68434368c 100644 --- 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; diff --git a/web/app/assets/stylesheets/client/sessionList.css.scss b/web/app/assets/stylesheets/client/sessionList.css.scss index f6dc3c46d..fce5b00d3 100644 --- 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; } diff --git a/web/app/views/clients/_findSession.html.erb b/web/app/views/clients/_findSession.html.erb index a12ce02b2..364dc71bc 100644 --- a/web/app/views/clients/_findSession.html.erb +++ b/web/app/views/clients/_findSession.html.erb @@ -30,6 +30,7 @@