229 lines
7.0 KiB
JavaScript
229 lines
7.0 KiB
JavaScript
(function(context,$) {
|
|
"use strict";
|
|
|
|
context.JK = context.JK || {};
|
|
context.JK.FindBandScreen = function(app) {
|
|
|
|
var logger = context.JK.logger;
|
|
var bands = {};
|
|
var bandList;
|
|
var instrument_logo_map = context.JK.getInstrumentIconMap24();
|
|
var did_show_band_page = false;
|
|
var page_num=1, page_count=0;
|
|
|
|
function loadBands(queryString) {
|
|
// squelch nulls and undefines
|
|
queryString = !!queryString ? queryString : "";
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/api/search.json?" + queryString,
|
|
success: afterLoadBands,
|
|
error: app.ajaxError
|
|
});
|
|
}
|
|
|
|
function search() {
|
|
did_show_band_page = true;
|
|
var queryString = 'srch_b=1&page='+page_num+'&';
|
|
|
|
// order by
|
|
var orderby = $('#band_order_by').val();
|
|
if (typeof orderby != 'undefined' && orderby.length > 0) {
|
|
queryString += "orderby=" + orderby + '&';
|
|
}
|
|
// genre filter
|
|
var genre = $('#band_genre').val();
|
|
if (typeof genre != 'undefined' && !(genre === '')) {
|
|
queryString += "genre=" + genre + '&';
|
|
}
|
|
// distance filter
|
|
var query_param = $('#band_query_distance').val();
|
|
if (query_param !== null && query_param.length > 0) {
|
|
var matches = query_param.match(/(\d+)/);
|
|
if (0 < matches.length) {
|
|
var distance = matches[0];
|
|
queryString += "distance=" + distance + '&';
|
|
}
|
|
}
|
|
loadBands(queryString);
|
|
}
|
|
|
|
function refreshDisplay() {
|
|
clearResults();
|
|
search();
|
|
}
|
|
|
|
function afterLoadBands(mList) {
|
|
// display the 'no bands' banner if appropriate
|
|
var $noBandsFound = $('#bands-none-found');
|
|
bandList = mList;
|
|
|
|
if(bandList.length == 0) {
|
|
$noBandsFound.show();
|
|
bands = [];
|
|
} else {
|
|
$noBandsFound.hide();
|
|
bands = bandList['bands'];
|
|
if (!(typeof bands === 'undefined')) {
|
|
$('#band-filter-city').text(bandList['city']);
|
|
if (0 == page_count) {
|
|
page_count = bandList['page_count'];
|
|
}
|
|
renderBands();
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Render a list of bands
|
|
*/
|
|
function renderBands() {
|
|
var ii, len;
|
|
var mTemplate = $('#template-find-band-row').html();
|
|
var pTemplate = $('#template-band-player-info').html();
|
|
var aTemplate = $('#template-band-action-btns').html();
|
|
var bVals, bb, renderings='';
|
|
var instr_logos, instr;
|
|
var players, playerVals, aPlayer;
|
|
|
|
for (ii=0, len=bands.length; ii < len; ii++) {
|
|
bb = bands[ii];
|
|
instr_logos = '';
|
|
players = '';
|
|
playerVals = {};
|
|
for (var jj=0, ilen=bb['players'].length; jj<ilen; jj++) {
|
|
aPlayer = bb['players'][jj];
|
|
var player_instrs = '';
|
|
var iter_pinstruments = aPlayer['instruments'].split(',');
|
|
for (var kk=0, klen=iter_pinstruments.length; kk<klen; kk++) {
|
|
var pinstr = iter_pinstruments[kk];
|
|
if (pinstr in instrument_logo_map) {
|
|
instr = instrument_logo_map[pinstr];
|
|
}
|
|
player_instrs += '<img src="' + instr + '"/>';
|
|
}
|
|
|
|
playerVals = {
|
|
player_name: aPlayer.name,
|
|
profile_url: '/client#/profile/' + aPlayer.user_id,
|
|
avatar_url: context.JK.resolveAvatarUrl(aPlayer.photo_url),
|
|
player_instruments: player_instrs
|
|
};
|
|
players += context.JK.fillTemplate(pTemplate, playerVals);
|
|
}
|
|
var actionVals = {
|
|
profile_url: "/client#/bandProfile/" + bb.id,
|
|
button_follow: bb['is_following'] ? '' : 'button-orange',
|
|
button_message: 'button-orange'
|
|
};
|
|
var band_actions = context.JK.fillTemplate(aTemplate, actionVals);
|
|
var bgenres = '';
|
|
for (jj=0, ilen=bb['genres'].length; jj<ilen; jj++) {
|
|
bgenres += bb['genres'][jj]['description'] + '<br />';
|
|
}
|
|
bgenres += '<br />';
|
|
|
|
bVals = {
|
|
avatar_url: context.JK.resolveAvatarUrl(bb.photo_url),
|
|
profile_url: "/client#/bandProfile/" + bb.id,
|
|
band_name: bb.name,
|
|
band_location: bb.city + ', ' + bb.state,
|
|
genres: bgenres,
|
|
instruments: instr_logos,
|
|
biography: bb['biography'],
|
|
follow_count: bb['follow_count'],
|
|
recording_count: bb['recording_count'],
|
|
session_count: bb['session_count'],
|
|
band_id: bb['id'],
|
|
band_player_template: players,
|
|
band_action_template: band_actions
|
|
};
|
|
var band_row = context.JK.fillTemplate(mTemplate, bVals);
|
|
renderings += band_row;
|
|
}
|
|
$('#band-filter-results').append(renderings);
|
|
|
|
$('.search-m-follow').on('click', followBand);
|
|
}
|
|
|
|
function beforeShow(data) {
|
|
}
|
|
|
|
function afterShow(data) {
|
|
if (!did_show_band_page) {
|
|
refreshDisplay();
|
|
}
|
|
}
|
|
|
|
function clearResults() {
|
|
bands = {};
|
|
$('#band-filter-results').empty();
|
|
page_num = 1;
|
|
page_count = 0;
|
|
}
|
|
|
|
function followBand(evt) {
|
|
// if the band 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.band_id = $(this).parent().data('band-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-band-id='+newFollowing.band_id+'] .search-m-follow').removeClass('button-orange').addClass('button-grey');
|
|
},
|
|
error: app.ajaxError
|
|
});
|
|
}
|
|
|
|
function events() {
|
|
$('#band_query_distance').change(refreshDisplay);
|
|
$('#band_genre').change(refreshDisplay);
|
|
$('#band_order_by').change(refreshDisplay);
|
|
|
|
$('#band-filter-results').bind('scroll', function() {
|
|
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
|
|
if (page_num < page_count) {
|
|
page_num += 1;
|
|
search();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialize,
|
|
*/
|
|
function initialize() {
|
|
var screenBindings = {
|
|
'beforeShow': beforeShow,
|
|
'afterShow': afterShow
|
|
};
|
|
app.bindScreen('bands', screenBindings);
|
|
|
|
events();
|
|
}
|
|
|
|
this.initialize = initialize;
|
|
this.renderBands = renderBands;
|
|
this.afterShow = afterShow;
|
|
|
|
this.clearResults = clearResults;
|
|
|
|
return this;
|
|
};
|
|
|
|
})(window,jQuery); |