VRFS-212 added search functionality to Find Session
This commit is contained in:
Brian Smith
parent
f0bf0545cd
commit
173d4ae294
|
|
@ -107,6 +107,7 @@
|
|||
processData:false,
|
||||
data: jsonData,
|
||||
success: function(response) {
|
||||
resetForm();
|
||||
var newSessionId = response.id;
|
||||
createInvitations(newSessionId, function() {
|
||||
context.location = '#/session/' + newSessionId;
|
||||
|
|
|
|||
|
|
@ -37,6 +37,49 @@
|
|||
});
|
||||
}
|
||||
|
||||
function search() {
|
||||
clearResults();
|
||||
var queryString = '';
|
||||
|
||||
// musician filter
|
||||
var musicians = getSelectedMusicians();
|
||||
if (musicians != null && musicians.length > 0) {
|
||||
queryString += "participants=" + musicians.join(',');
|
||||
}
|
||||
|
||||
// genre filter
|
||||
var genres = genreSelector.getSelectedGenres();
|
||||
if (genres != null && genres.length > 0) {
|
||||
if (queryString.length > 0) {
|
||||
queryString += "&";
|
||||
}
|
||||
|
||||
queryString += "genres=" + genres.join(',');
|
||||
}
|
||||
|
||||
// TODO: keyword filter
|
||||
|
||||
if (queryString.length > 0) {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/api/sessions?" + queryString,
|
||||
success: startSessionLatencyChecks
|
||||
});
|
||||
}
|
||||
else {
|
||||
loadSessions();
|
||||
}
|
||||
}
|
||||
|
||||
function getSelectedMusicians() {
|
||||
var selectedMusicians = [];
|
||||
$('#musician-list-items :checked').each(function() {
|
||||
selectedMusicians.push($(this).val());
|
||||
});
|
||||
|
||||
return selectedMusicians;
|
||||
}
|
||||
|
||||
function startSessionLatencyChecks(response) {
|
||||
sessionLatency.subscribe(app.clientId, latencyResponse);
|
||||
$.each(response, function(index, session) {
|
||||
|
|
@ -66,9 +109,9 @@
|
|||
}
|
||||
|
||||
function containsFriend(session) {
|
||||
var i, p, participant = null;
|
||||
var i, participant = null;
|
||||
|
||||
for (i=0, p=session.participants.length; i < p; i++) {
|
||||
for (i=0; i < session.participants.length; i++) {
|
||||
participant = session.participants[i];
|
||||
// this session participant is a friend
|
||||
//alert(participant.user.name);
|
||||
|
|
@ -98,7 +141,6 @@
|
|||
* sortScore in sessionLatency.
|
||||
*/
|
||||
function renderSession(sessionId) {
|
||||
|
||||
var session = null;
|
||||
var $tbGroup;
|
||||
|
||||
|
|
@ -119,7 +161,33 @@
|
|||
return;
|
||||
}
|
||||
|
||||
sessionList.renderSession(session, sessionLatency, $tbGroup, $('#template-session-row').html(), $('#template-musician-info').html());
|
||||
var row = sessionList.renderSession(session, sessionLatency, $tbGroup, $('#template-session-row').html(), $('#template-musician-info').html(),
|
||||
// populate the musician filter with musicians that haven't already been added
|
||||
function(musicianArray) {
|
||||
var template = $('#template-musician-filter').html();
|
||||
$.each(musicianArray, function(index, val) {
|
||||
// check if this musician is already in the filter
|
||||
if ( $('#musician-list-items input[value=' + val.id + ']').length == 0 ) {
|
||||
var musicianOptionHtml = context.JK.fillTemplate(template, {value: val.id, label: val.name});
|
||||
$('#musician-list-items').append(musicianOptionHtml);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// TODO: refactor this and GenreSelector into common code
|
||||
function toggleMusicianBox() {
|
||||
var boxHeight = $('#musician-list').css("height");
|
||||
// TODO: clean this up (check class name of arrow to determine current state)
|
||||
if (boxHeight == "20px") {
|
||||
$('#musician-list').css({height: "auto"});
|
||||
$('#musician-list-arrow').removeClass("arrow-down").addClass("arrow-up");
|
||||
|
||||
}
|
||||
else {
|
||||
$('#musician-list').css({height: "20px"});
|
||||
$('#musician-list-arrow').removeClass("arrow-up").addClass("arrow-down");
|
||||
}
|
||||
}
|
||||
|
||||
function afterShow(data) {
|
||||
|
|
@ -128,14 +196,9 @@
|
|||
}
|
||||
|
||||
function clearResults() {
|
||||
var $tb = $(CATEGORY.INVITATION.id);
|
||||
$tb.children( 'tr:not(:first)' ).remove();
|
||||
|
||||
$tb = $(CATEGORY.FRIENDS.id);
|
||||
$tb.children( 'tr:not(:first)' ).remove();
|
||||
|
||||
$tb = $(CATEGORY.OTHER.id);
|
||||
$tb.children( 'tr:not(:first)' ).remove();
|
||||
$('#sessions-invitations').children(':not(:first-child)').remove();
|
||||
$('#sessions-friends').children(':not(:first-child)').remove();
|
||||
$('#sessions-other').children(':not(:first-child)').remove();
|
||||
}
|
||||
|
||||
function deleteSession(evt) {
|
||||
|
|
@ -150,6 +213,9 @@
|
|||
|
||||
function events() {
|
||||
//$('#findSession-tableBody').on("click", '[action="delete"]', deleteSession);
|
||||
$('#musician-list-header').on("click", toggleMusicianBox);
|
||||
$('#musician-list-arrow').on("click", toggleMusicianBox);
|
||||
$('#btn-refresh').on("click", search);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
function reset() {
|
||||
$('#genre-list-items input[type=checkbox]', _form).removeAttr('checked');
|
||||
$('#genre-list-items input[type=checkbox]', _form).removeAttr('disabled');
|
||||
$('#genre-count', _form).val('0');
|
||||
}
|
||||
|
||||
function genresLoaded(response) {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,32 @@
|
|||
MUSICIANS_ONLY:"Musicians Only"
|
||||
};
|
||||
|
||||
var instrument_logos = { "accordion": '',
|
||||
"acoustic guitar": '',
|
||||
"banjo": '',
|
||||
"bass guitar": '',
|
||||
"cello": '',
|
||||
"clarinet": '',
|
||||
"computer": '',
|
||||
"drums": '',
|
||||
"electric guitar": '../assets/content/icon_instrument_guitar24.png',
|
||||
"euphonium": '',
|
||||
"flute": '',
|
||||
"french horn": '',
|
||||
"harmonica": '',
|
||||
"keyboard": '../assets/content/icon_instrument_keyboard24.png',
|
||||
"mandolin": '',
|
||||
"oboe": '',
|
||||
"saxophone": '',
|
||||
"trombone": '',
|
||||
"trumpet": '',
|
||||
"tuba": '',
|
||||
"ukulele": '',
|
||||
"viola": '',
|
||||
"violin": '',
|
||||
"voice": '../assets/content/icon_instrument_vocal24.png'
|
||||
}
|
||||
|
||||
var _logger = context.JK.logger;
|
||||
var _sessionLatency;
|
||||
|
||||
|
|
@ -23,7 +49,7 @@
|
|||
* It will be inserted at the appropriate place according to the
|
||||
* sortScore in sessionLatency.
|
||||
*/
|
||||
function renderSession(session, sessionLatency, tbGroup, rowTemplate, musicianTemplate) {
|
||||
function renderSession(session, sessionLatency, tbGroup, rowTemplate, musicianTemplate, onMusiciansComplete) {
|
||||
// latency
|
||||
var latencyInfo = sessionLatency.sessionInfo(session.id);
|
||||
var latencyDescription = "";
|
||||
|
|
@ -48,36 +74,41 @@
|
|||
audience = AUDIENCE.MUSICIANS_ONLY;
|
||||
}
|
||||
|
||||
var i, p, participant = null;
|
||||
var i, participant = null;
|
||||
var musicians = '';
|
||||
for (i=0, p=session.participants.length; i < p; i++) {
|
||||
var musicianArray = [];
|
||||
for (i=0; i < session.participants.length; i++) {
|
||||
participant = session.participants[i];
|
||||
|
||||
var instrumentLogoHtml = '';
|
||||
var j;
|
||||
|
||||
// loop through the tracks to get the instruments
|
||||
for (j=0; j < participant.tracks.length; j++) {
|
||||
var track = participant.tracks[j];
|
||||
instrumentLogoHtml += '<img src="' + track.instrument_id + '" width="24" height="24" /> ';
|
||||
instrumentLogoHtml += '<img src="' + instrument_logos[track.instrument_id] + '" width="24" height="24" /> ';
|
||||
}
|
||||
|
||||
var id = participant.user.id;
|
||||
var name = participant.user.name;
|
||||
var musicianVals = {
|
||||
avatar_url: participant.user.photo_url,
|
||||
profile_url: "users/" + participant.user.id,
|
||||
musician_name: participant.user.name,
|
||||
profile_url: "users/" + id,
|
||||
musician_name: name,
|
||||
instruments: instrumentLogoHtml
|
||||
}
|
||||
/*
|
||||
<div id="instrument_logos">
|
||||
<%= image_tag "content/icon_instrument_guitar24.png", :visible => :false %>
|
||||
<%= image_tag "content/icon_instrument_keyboard24.png", :visible => :false %>
|
||||
<%= image_tag "content/icon_instrument_vocal24.png", :visible => :false %>
|
||||
</div>
|
||||
*/
|
||||
|
||||
var musician = {};
|
||||
musician.id = id;
|
||||
musician.name = name;
|
||||
musicianArray[i] = musician;
|
||||
|
||||
var musicianInfo = context.JK.fillTemplate(musicianTemplate, musicianVals);
|
||||
musicians += musicianInfo;
|
||||
}
|
||||
|
||||
onMusiciansComplete(musicianArray);
|
||||
|
||||
var sessionVals = {
|
||||
id: session.id,
|
||||
genres: session.genres.join (', '),
|
||||
|
|
@ -86,7 +117,8 @@
|
|||
audience: audience,
|
||||
latency_text: latencyDescription,
|
||||
latency_style: latencyStyle,
|
||||
sortScore: latencyInfo.sortScore
|
||||
sortScore: latencyInfo.sortScore,
|
||||
join_url: "#/session/" + session.id
|
||||
};
|
||||
|
||||
var row = context.JK.fillTemplate(rowTemplate, sessionVals);
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ input[type="button"] {
|
|||
margin-left: 10px;
|
||||
-webkit-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
background-color:#C5C5C5;
|
||||
background-color:$ColorTextBoxBackground;
|
||||
border: none;
|
||||
color:#333;
|
||||
font-weight:400;
|
||||
|
|
@ -229,7 +229,9 @@ input[type="button"] {
|
|||
}
|
||||
|
||||
input[type="text"] {
|
||||
background-color: $ColorTextBoxBackground;
|
||||
background-color:$ColorTextBoxBackground;
|
||||
border:none;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
.mr10 {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
table.findsession-table {
|
||||
margin-top:6px;
|
||||
width:100%;
|
||||
width:98%;
|
||||
font-size:11px;
|
||||
color:#fff;
|
||||
background-color:#262626;
|
||||
|
|
|
|||
|
|
@ -7,11 +7,12 @@ class ApiMusicSessionsController < ApiController
|
|||
respond_to :json
|
||||
|
||||
def index
|
||||
# params[:participants] is either nil, meaning "everything", or it's an array of musician ids
|
||||
# params[:genres] is either nil, meaning "everything", or it's an array of genre ids
|
||||
# params[:friends_only] does the obvious.
|
||||
# params[:my_bands_only] also does the obvious.
|
||||
# Importantly, friends and my_bands are ORed not ANDed. So, if you specify both as true, you'll get more results, not fewer.
|
||||
@music_sessions = MusicSession.index(current_user, params[:genres], params[:friends_only], params[:my_bands_only])
|
||||
@music_sessions = MusicSession.index(current_user, params[:participants], params[:genres], params[:friends_only], params[:my_bands_only])
|
||||
end
|
||||
|
||||
def create
|
||||
|
|
|
|||
|
|
@ -37,14 +37,14 @@
|
|||
<input id="search-session-input" type="text" name="search" value="Search by Keyword" onfocus="enterText(this.id,'')" onblur="enterText(this.id,'Search by Keyword')" />
|
||||
</div>
|
||||
<div class="right mr10">
|
||||
<a href="#" style="text-decoration:none;" class="button-grey">REFRESH</a>
|
||||
<a id="btn-refresh" href="#" style="text-decoration:none;" class="button-grey">REFRESH</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-scroller">
|
||||
<div class="content-wrapper" style="padding-left:35px;padding-top:10px;">
|
||||
<%= render :partial => "sessionList", :locals => {:title => "sessions you're invited to", :category => "sessions-invitations"} %>
|
||||
<%= render :partial => "sessionList", :locals => {:title => "sessions with friends or bandmates", :category => "sessions-friends"} %>
|
||||
<%= render :partial => "sessionList", :locals => {:title => "sessions you're invited to", :category => "sessions-invitations"} %><br /><br />
|
||||
<%= render :partial => "sessionList", :locals => {:title => "sessions with friends or bandmates", :category => "sessions-friends"} %><br /><br />
|
||||
<%= render :partial => "sessionList", :locals => {:title => "other sessions", :category => "sessions-other"} %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
</a>
|
||||
</td>
|
||||
<td class="noborder" style="text-align:center">
|
||||
<a id="join-link" href="{join_url}">
|
||||
<a id="join-link" href="join_url">
|
||||
<%= image_tag "content/icon_join.png", :size => "19x22" %>
|
||||
</a>
|
||||
</td>
|
||||
|
|
@ -96,4 +96,9 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</script>
|
||||
|
||||
<!-- Genre option template -->
|
||||
<script type="text/template" id="template-musician-filter">
|
||||
<div class="list-item-text"><input type="checkbox" value="{value}"> {label}</div>
|
||||
</script>
|
||||
|
|
@ -11,4 +11,4 @@
|
|||
<th class="noborder" width="30" style="text-align:center">JOIN</th>
|
||||
</tr>
|
||||
<!-- session row goes here -->
|
||||
</table>
|
||||
</table>
|
||||
Loading…
Reference in New Issue