vrfs-884: band filter page
This commit is contained in:
Jonathan Kolyer
parent
9dd631d05a
commit
fc6d12e9c8
|
|
@ -0,0 +1,228 @@
|
|||
(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,
|
||||
async: true,
|
||||
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 = '';
|
||||
/*for (var jj=0, ilen=bb['instruments'].length; jj<ilen; jj++) {
|
||||
if (bb['instruments'][jj].instrument_id in instrument_logo_map) {
|
||||
instr = instrument_logo_map[bb['instruments'][jj].instrument_id];
|
||||
}
|
||||
instr_logos += '<img src="' + instr + '" width="24" height="24" /> ';
|
||||
}*/
|
||||
players = '';
|
||||
playerVals = {};
|
||||
for (var jj=0, ilen=bb['players'].length; jj<ilen; jj++) {
|
||||
aPlayer = bb['players'][jj];
|
||||
var player_instrs = '';
|
||||
/*for (var kk=0, klen=aPlayer['instruments'].length; kk<klen; kk++) {
|
||||
var pinstr = aPlayer['instruments'][kk];
|
||||
if (pinstr.instrument_id in instrument_logo_map) {
|
||||
instr = instrument_logo_map[pinstr.instrument_id];
|
||||
}
|
||||
player_instrs += '<img src="' + instr + '" width="24" height="24" /> ';
|
||||
}*/
|
||||
|
||||
playerVals = {
|
||||
player_name: aPlayer.name,
|
||||
profile_url: '/#/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: "/#/profile/" + bb.id,
|
||||
button_follow: bb['is_following'] ? '' : 'button-orange',
|
||||
button_message: 'button-orange'
|
||||
};
|
||||
var band_actions = context.JK.fillTemplate(aTemplate, actionVals);
|
||||
|
||||
bVals = {
|
||||
avatar_url: context.JK.resolveAvatarUrl(bb.photo_url),
|
||||
profile_url: "/#/profile/" + bb.id,
|
||||
band_name: bb.name,
|
||||
band_location: bb.city + ', ' + bb.state,
|
||||
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_follow_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.user_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
|
||||
$('div[data-band-id='+newFollowing.user_id+'] .search-m-follow').removeClass('button-orange');
|
||||
},
|
||||
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);
|
||||
|
|
@ -58,6 +58,36 @@ if @search.musicians_filter.present?
|
|||
}
|
||||
end
|
||||
|
||||
if @search.bands_filter.present?
|
||||
|
||||
node :page_count do |foo|
|
||||
@search.page_count
|
||||
end
|
||||
|
||||
child(:bands_filter => :bands) {
|
||||
attributes :id, :name, :city, :state, :country, :email, :photo_url, :biography, :logo_url
|
||||
|
||||
node :is_following do |band|
|
||||
@search.is_follower?(band)
|
||||
end
|
||||
|
||||
child :genres => :genre do
|
||||
attributes :genre_id, :description
|
||||
end
|
||||
|
||||
child :users => :players do |pl|
|
||||
node :user_id do |uu| uu.id end
|
||||
node :photo_url do |uu| uu.photo_url end
|
||||
node :name do |uu| uu.name end
|
||||
node :instruments do |uu| uu.instruments.map(&:id).join(',') end
|
||||
end
|
||||
|
||||
node :follow_count do |band| @search.follow_count(band) end
|
||||
node :recording_count do |band| @search.record_count(band) end
|
||||
node :session_count do |band| @search.session_count(band) end
|
||||
}
|
||||
end
|
||||
|
||||
unless @search.fans.nil? || @search.fans.size == 0
|
||||
child(:fans => :fans) {
|
||||
attributes :id, :first_name, :last_name, :name, :location, :photo_url
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<br /><br />
|
||||
<div id="result_instruments" class="nowrap">{instruments}</div>
|
||||
<br clear="all" /><br />
|
||||
{friend_count} <img src="../assets/content/icon_friend.png" width="14" height="12" align="absmiddle" /> {follow_count} <img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" /> {recording_count} <img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" /> {session_count} <img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /></span><br /><br />
|
||||
{follow_count} <img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" /> {recording_count} <img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" /> {session_count} <img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /></span><br /><br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="left ml35 f11 whitespace w40"><br />
|
||||
|
|
@ -38,27 +38,24 @@
|
|||
{band_action_template}
|
||||
</div>
|
||||
</div>
|
||||
<div class="left ml10 w20 band-following">
|
||||
<div class="left ml10 w25 band-players">
|
||||
<br />
|
||||
<small><strong>FOLLOWING:</strong></small>
|
||||
<table class="bands" cellpadding="0" cellspacing="5">{band_follow_template}</table>
|
||||
<table class="musicians" cellpadding="0" cellspacing="5">{band_follow_template}</table>
|
||||
</div>
|
||||
<br clear="all" />
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="template-band-action-btns">
|
||||
<a href="{profile_url}" class="button-orange smallbutton m0">PROFILE</a><% if current_user.band? %><a href="#" class="{button_friend} smallbutton m0 search-m-friend">CONNECT</a><% end %><a href="#" class="{button_follow} smallbutton search-m-follow">FOLLOW</a><!--<a href="#" class="{button_message} smallbutton search-m-like">MESSAGE</a>-->
|
||||
<a href="{profile_url}" class="button-orange smallbutton m0">PROFILE</a><a href="#" class="{button_follow} smallbutton search-m-follow">FOLLOW</a>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="template-band-follow-info">
|
||||
<script type="text/template" id="template-band-player-info">
|
||||
<tr>
|
||||
<td width="24">
|
||||
<a href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="{profile_url}"><strong>{band_name}</strong></a>
|
||||
</td>
|
||||
<td width="24"><a href="{profile_url}" class="avatar-tiny"><img src="{avatar_url}" /></a></td>
|
||||
<td><a href="{profile_url}"><strong>{player_name}</strong></a></td>
|
||||
<td>{player_instruments}</td>
|
||||
</tr>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -151,6 +151,9 @@
|
|||
var findMusicianScreen = new JK.FindMusicianScreen(JK.app);
|
||||
findMusicianScreen.initialize();
|
||||
|
||||
var findBandScreen = new JK.FindBandScreen(JK.app);
|
||||
findBandScreen.initialize();
|
||||
|
||||
var sessionScreen = new JK.SessionScreen(JK.app);
|
||||
sessionScreen.initialize();
|
||||
var sessionSettingsDialog = new JK.SessionSettingsDialog(JK.app, sessionScreen);
|
||||
|
|
|
|||
Loading…
Reference in New Issue