jam-cloud/web/app/assets/javascripts/findBand.js

(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();
        }
      }
    }

    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 = {
            user_id: aPlayer.user_id,
            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.resolveBandAvatarUrl(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);
      context.JK.bindHoverEvents();
    }

    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').closest('.content-body-scroller').bind('scroll', function() {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
          if (page_num < page_count) {
            page_num += 1;
            search();
          }
        }
      });
    }

    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);