326 lines
12 KiB
JavaScript
326 lines
12 KiB
JavaScript
(function(context,$) {
|
|
"use strict";
|
|
|
|
context.JK = context.JK || {};
|
|
context.JK.FindMusicianScreen = function(app) {
|
|
|
|
var logger = context.JK.logger;
|
|
var rest = context.JK.Rest();
|
|
var musicians = {};
|
|
var musicianList;
|
|
var instrument_logo_map = context.JK.getInstrumentIconMap24();
|
|
var did_show_musician_page = false;
|
|
var page_num=1, page_count=0;
|
|
var textMessageDialog = null;
|
|
var $results = null;
|
|
|
|
function loadMusicians(queryString) {
|
|
// squelch nulls and undefines
|
|
queryString = !!queryString ? queryString : "";
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/api/search.json?" + queryString,
|
|
success: afterLoadMusicians,
|
|
error: app.ajaxError
|
|
});
|
|
}
|
|
|
|
function search() {
|
|
did_show_musician_page = true;
|
|
var queryString = 'srch_m=1&page='+page_num+'&';
|
|
|
|
// order by
|
|
var orderby = $('#musician_order_by').val();
|
|
if (typeof orderby != 'undefined' && orderby.length > 0) {
|
|
queryString += "orderby=" + orderby + '&';
|
|
}
|
|
|
|
// instrument filter
|
|
var instrument = $('#musician_instrument').val();
|
|
if (typeof instrument != 'undefined' && !(instrument === '')) {
|
|
queryString += "instrument=" + instrument + '&';
|
|
}
|
|
|
|
// score filter
|
|
var query_param = $('#musician_query_score').val();
|
|
if (query_param !== null) {
|
|
queryString += "score_limit=" + query_param + '&';
|
|
}
|
|
loadMusicians(queryString);
|
|
}
|
|
|
|
function refreshDisplay() {
|
|
clearResults();
|
|
search();
|
|
}
|
|
|
|
function afterLoadMusicians(mList) {
|
|
// display the 'no musicians' banner if appropriate
|
|
var $noMusiciansFound = $('#musicians-none-found');
|
|
musicianList = mList;
|
|
|
|
|
|
// @FIXME: This needs to pivot on musicianList.musicians.length
|
|
if(musicianList.length == 0) {
|
|
$noMusiciansFound.show();
|
|
musicians = [];
|
|
}
|
|
else {
|
|
$noMusiciansFound.hide();
|
|
musicians = musicianList['musicians'];
|
|
if (!(typeof musicians === 'undefined')) {
|
|
$('#musician-filter-city').text(musicianList['city']);
|
|
if (0 == page_count) {
|
|
page_count = musicianList['page_count'];
|
|
}
|
|
renderMusicians();
|
|
}
|
|
}
|
|
}
|
|
|
|
function score_to_text(score) {
|
|
// these are raw scores as reported by client (round trip times)
|
|
if (score == null) return "n/a";
|
|
return Math.round(score / 2) + " ms";
|
|
}
|
|
|
|
function score_to_color(score) {
|
|
// these are raw scores as reported by client (round trip times)
|
|
if (score == null) return "purple";
|
|
if (0 < score && score <= 40) return "green";
|
|
if (40 < score && score <= 70) return "yellow";
|
|
if (70 < score && score <= 100) return "red";
|
|
return "blue";
|
|
}
|
|
|
|
function score_to_color_alt(score) {
|
|
// these are raw scores as reported by client (round trip times)
|
|
if (score == null) return "missing";
|
|
if (0 < score && score <= 40) return "good";
|
|
if (40 < score && score <= 70) return "moderate";
|
|
if (70 < score && score <= 100) return "poor";
|
|
return "unacceptable";
|
|
}
|
|
|
|
function formatLocation(musician) {
|
|
if(musician.city && musician.state) {
|
|
return musician.city + ', ' + musician.regionname
|
|
}
|
|
else if(musician.city) {
|
|
return musician.city
|
|
}
|
|
else if(musician.state) {
|
|
return musician.regionname
|
|
}
|
|
else {
|
|
return 'Location Unavailable'
|
|
}
|
|
}
|
|
|
|
function renderMusicians() {
|
|
var ii, len;
|
|
var mTemplate = $('#template-find-musician-row').html();
|
|
var fTemplate = $('#template-musician-follow-info').html();
|
|
var aTemplate = $('#template-musician-action-btns').html();
|
|
var mVals, musician, renderings='';
|
|
var instr_logos, instr;
|
|
var follows, followVals, aFollow;
|
|
var myAudioLatency = musicianList.my_audio_latency;
|
|
|
|
for (ii=0, len=musicians.length; ii < len; ii++) {
|
|
musician = musicians[ii];
|
|
if (context.JK.currentUserId === musician.id) {
|
|
// VRFS-294.3 (David) => skip if current user is musician
|
|
continue;
|
|
}
|
|
instr_logos = '';
|
|
for (var jj=0, ilen=musician['instruments'].length; jj<ilen; jj++) {
|
|
if (musician['instruments'][jj].instrument_id in instrument_logo_map) {
|
|
instr = instrument_logo_map[musician['instruments'][jj].instrument_id].asset;
|
|
}
|
|
instr_logos += '<img src="' + instr + '"/>';
|
|
}
|
|
follows = '';
|
|
followVals = {};
|
|
for (var jj=0, ilen=musician['followings'].length; jj<ilen; jj++) {
|
|
aFollow = musician['followings'][jj];
|
|
followVals = {
|
|
user_id: aFollow.user_id,
|
|
musician_name: aFollow.name,
|
|
profile_url: '/client#/profile/' + aFollow.user_id,
|
|
avatar_url: context.JK.resolveAvatarUrl(aFollow.photo_url)
|
|
};
|
|
follows += context.JK.fillTemplate(fTemplate, followVals);
|
|
if (2 == jj) break;
|
|
}
|
|
var actionVals = {
|
|
profile_url: "/client#/profile/" + musician.id,
|
|
friend_class: 'button-' + (musician['is_friend'] ? 'grey' : 'orange'),
|
|
friend_caption: (musician.is_friend ? 'DIS':'')+'CONNECT',
|
|
follow_class: 'button-' + (musician['is_following'] ? 'grey' : 'orange'),
|
|
follow_caption: (musician.is_following ? 'UN':'')+'FOLLOW',
|
|
message_class: 'button-orange',
|
|
message_caption: 'MESSAGE',
|
|
button_message: 'button-orange'
|
|
};
|
|
var musician_actions = context.JK.fillTemplate(aTemplate, actionVals);
|
|
|
|
var full_score = musician['full_score'];
|
|
mVals = {
|
|
avatar_url: context.JK.resolveAvatarUrl(musician.photo_url),
|
|
profile_url: "/client#/profile/" + musician.id,
|
|
musician_name: musician.name,
|
|
musician_location: formatLocation(musician),
|
|
instruments: instr_logos,
|
|
biography: musician['biography'],
|
|
follow_count: musician['follow_count'],
|
|
friend_count: musician['friend_count'],
|
|
recording_count: musician['recording_count'],
|
|
session_count: musician['session_count'],
|
|
musician_id: musician['id'],
|
|
musician_follow_template: follows,
|
|
musician_action_template: musician_actions,
|
|
musician_one_way_score: score_to_text(full_score),
|
|
musician_score_color: score_to_color(full_score),
|
|
musician_score_color_alt: score_to_color_alt(full_score)
|
|
|
|
};
|
|
var $rendering = $(context.JK.fillTemplate(mTemplate, mVals))
|
|
|
|
var $offsetParent = $results.closest('.content');
|
|
var options = {positions: ['top', 'bottom', 'right', 'left'], offsetParent: $offsetParent};
|
|
var scoreOptions = {positions: ['right', 'top', 'bottom', 'left'], offsetParent: $offsetParent, width:'600px'};
|
|
context.JK.helpBubble($('.follower-count', $rendering), 'musician-follower-count', {}, options);
|
|
context.JK.helpBubble($('.friend-count', $rendering), 'musician-friend-count', {}, options);
|
|
context.JK.helpBubble($('.recording-count', $rendering), 'musician-recording-count', {}, options);
|
|
context.JK.helpBubble($('.session-count', $rendering), 'musician-session-count', {}, options);
|
|
context.JK.helpBubble($('.score-count', $rendering), 'musician-score-count',
|
|
{full_score: full_score ? Math.round(full_score / 2) : null, my_gear_latency: myAudioLatency, their_gear_latency:musician['audio_latency'], internet_latency: musician['score']},
|
|
scoreOptions)
|
|
|
|
$results.append($rendering);
|
|
}
|
|
|
|
|
|
$('.search-m-friend').on('click', friendMusician);
|
|
$('.search-m-follow').on('click', followMusician);
|
|
$('.search-m-message').on('click', messageMusician);
|
|
|
|
context.JK.bindHoverEvents();
|
|
}
|
|
|
|
function beforeShow(data) {
|
|
}
|
|
|
|
function afterShow(data) {
|
|
if (!did_show_musician_page) {
|
|
refreshDisplay();
|
|
}
|
|
}
|
|
|
|
function clearResults() {
|
|
musicians = {};
|
|
$('#musician-filter-results .musician-list-result').remove();
|
|
page_num = 1;
|
|
page_count = 0;
|
|
}
|
|
|
|
function friendMusician(evt) {
|
|
// if the musician is already a friend, remove the button-orange class, and prevent
|
|
// the link from working
|
|
if (0 === $(this).closest('.button-orange').size()) {
|
|
return false;
|
|
}
|
|
|
|
$(this).click(function(ee) {ee.preventDefault();});
|
|
|
|
evt.stopPropagation();
|
|
var uid = $(this).parent().data('musician-id');
|
|
rest.sendFriendRequest(app, uid, friendRequestCallback);
|
|
}
|
|
|
|
function friendRequestCallback(user_id) {
|
|
// remove the orange look to indicate it's not selectable
|
|
// @FIXME -- this will need to be tweaked when we allow unfollowing
|
|
$('div[data-musician-id='+user_id+'] .search-m-friend').removeClass('button-orange').addClass('button-grey');
|
|
}
|
|
|
|
function followMusician(evt) {
|
|
// if the musician is already followed, remove the button-orange class, and prevent
|
|
// the link from working
|
|
if (0 === $(this).closest('.button-orange').size()) {
|
|
return false;
|
|
}
|
|
|
|
$(this).click(function(ee) {ee.preventDefault();});
|
|
|
|
evt.stopPropagation();
|
|
var newFollowing = {};
|
|
newFollowing.user_id = $(this).parent().data('musician-id');
|
|
var url = "/api/users/" + context.JK.currentUserId + "/followings";
|
|
$.ajax({
|
|
type: "POST",
|
|
dataType: "json",
|
|
contentType: 'application/json',
|
|
url: url,
|
|
data: JSON.stringify(newFollowing),
|
|
processData: false,
|
|
success: function(response) {
|
|
// remove the orange look to indicate it's not selectable
|
|
// @FIXME -- this will need to be tweaked when we allow unfollowing
|
|
$('div[data-musician-id=' + newFollowing.user_id + '] .search-m-follow').removeClass('button-orange').addClass('button-grey');
|
|
},
|
|
error: app.ajaxError
|
|
});
|
|
}
|
|
|
|
function messageMusician() {
|
|
var userId = $(this).parent().data('musician-id');
|
|
app.layout.showDialog('text-message', { d1: userId });
|
|
return false;
|
|
}
|
|
|
|
function events() {
|
|
$('#musician_query_score').change(refreshDisplay);
|
|
$('#musician_instrument').change(refreshDisplay);
|
|
$('#musician_order_by').change(refreshDisplay);
|
|
|
|
$('#musician-filter-results').closest('.content-body-scroller').bind('scroll', function() {
|
|
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
|
|
if (page_num < page_count) {
|
|
page_num += 1;
|
|
search();
|
|
}
|
|
else {
|
|
$('#end-of-musician-list').show()
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function initialize(textMessageDialogInstance) {
|
|
|
|
textMessageDialog = textMessageDialogInstance;
|
|
|
|
var screenBindings = {
|
|
'beforeShow': beforeShow,
|
|
'afterShow': afterShow
|
|
};
|
|
app.bindScreen('musicians', screenBindings);
|
|
|
|
$results = $('#musician-filter-results');
|
|
|
|
events();
|
|
}
|
|
|
|
this.initialize = initialize;
|
|
this.renderMusicians = renderMusicians;
|
|
this.afterShow = afterShow;
|
|
|
|
this.clearResults = clearResults;
|
|
|
|
return this;
|
|
}
|
|
})(window,jQuery);
|