From fc6d12e9c8526ba0a6861af6af0e29a0569694f9 Mon Sep 17 00:00:00 2001 From: Jonathan Kolyer Date: Mon, 16 Dec 2013 12:31:12 -0600 Subject: [PATCH] vrfs-884: band filter page --- web/app/assets/javascripts/findBand.js | 228 +++++++++++++++++++++++++ web/app/views/api_search/index.rabl | 30 ++++ web/app/views/clients/_bands.html.erb | 19 +-- web/app/views/clients/index.html.erb | 3 + 4 files changed, 269 insertions(+), 11 deletions(-) create mode 100644 web/app/assets/javascripts/findBand.js diff --git a/web/app/assets/javascripts/findBand.js b/web/app/assets/javascripts/findBand.js new file mode 100644 index 000000000..a8a9714db --- /dev/null +++ b/web/app/assets/javascripts/findBand.js @@ -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 '; + }*/ + players = ''; + playerVals = {}; + for (var jj=0, ilen=bb['players'].length; jj '; + }*/ + + 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); \ No newline at end of file diff --git a/web/app/views/api_search/index.rabl b/web/app/views/api_search/index.rabl index 4c66715b5..581566cd8 100644 --- a/web/app/views/api_search/index.rabl +++ b/web/app/views/api_search/index.rabl @@ -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 diff --git a/web/app/views/clients/_bands.html.erb b/web/app/views/clients/_bands.html.erb index 4da67b440..091244ff5 100644 --- a/web/app/views/clients/_bands.html.erb +++ b/web/app/views/clients/_bands.html.erb @@ -28,7 +28,7 @@

{instruments}


- {friend_count}    {follow_count}    {recording_count}    {session_count}

+ {follow_count}    {recording_count}    {session_count}


@@ -38,27 +38,24 @@ {band_action_template}
-
+

FOLLOWING: - {band_follow_template}
+ {band_follow_template}

- diff --git a/web/app/views/clients/index.html.erb b/web/app/views/clients/index.html.erb index 6985978e4..e7d215f56 100644 --- a/web/app/views/clients/index.html.erb +++ b/web/app/views/clients/index.html.erb @@ -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);