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

(function(context,$) {

  "use strict";

  context.JK = context.JK || {};
  context.JK.AccountProfileExperience = function(app) {
    var $document = $(document);
    var logger = context.JK.logger;
    var EVENTS = context.JK.EVENTS;
    var api = context.JK.Rest();
    var $screen = $('#account-profile-experience');
    var $scroller = $screen.find('#account-profile-content-scroller');
    var $instrumentSelector = null;
    var $userGenres = null;
    var profileUtils = context.JK.ProfileUtils;
    var $btnCancel = $screen.find('#account-edit-profile-cancel');
    var $btnBack = $screen.find('#account-edit-profile-back');
    var $btnSubmit = $screen.find('#account-edit-profile-submit');

    function beforeShow(data) {
    }

    function afterShow(data) {
        resetForm();
        renderExperience();
    }

    function resetForm() {
      $scroller.find('form .error-text').remove();
      $scroller.find('form .error').removeClass("error");
    }

    function populateAccountProfile(userDetail, instruments) {
      var template = context.JK.fillTemplate($('#template-account-profile-experience').html(), {
        user_instruments: userDetail.instruments
      });

      $scroller.html(template);

      $instrumentSelector = $screen.find('.instrument_selector');
      $userGenres = $screen.find('#user-genres');
      events();

      loadGenres(profileUtils.profileGenres(userDetail.genres));

      $.each(instruments, function(index, instrument) {
        var template = context.JK.fillTemplate($('#account-profile-instrument').html(), {
          checked : isUserInstrument(instrument, userDetail.instruments) ? "checked=\"checked\"" :"",
          description : instrument.description,
          id : instrument.id
        });
        $instrumentSelector.append(template);
      });

      // and fill in the proficiency for the instruments that the user can play
      if(userDetail.instruments) {
        $.each(userDetail.instruments, function(index, userInstrument) {
          $('tr[data-instrument-id="' + userInstrument.instrument_id + '"] select.proficiency_selector', $scroller).val(userInstrument.proficiency_level);
        });
      }

      $scroller.find('select[name=skill_level]').val(userDetail.skill_level);
      $scroller.find('select[name=concert_count]').val(userDetail.concert_count);
      $scroller.find('select[name=studio_session_count]').val(userDetail.studio_session_count);

      context.JK.dropdown($('select', $scroller));
    }

    function isUserInstrument(instrument, userInstruments) {
      var isUserInstrument = false;
      if(!userInstruments) return false;

      $.each(userInstruments, function(index, userInstrument) {
        if(instrument.id == userInstrument.instrument_id) {
          isUserInstrument = true;
          return false;
        }
      });
      return isUserInstrument;
    }

    function loadGenres(selectedGenres) {
      $userGenres.empty();

      rest.getGenres().done(function (genres) {
        $.each(genres, function (index, genre) {
          var genreTemplate = $('#template-user-setup-genres').html();
          var selected = '';
          if (selectedGenres) {
            var genreMatch = $.grep(selectedGenres, function (n, i) {
              return n.genre_id === genre.id;
            });
            if (genreMatch.length > 0) {
              selected = "checked";
            }
          }
          var genreHtml = context.JK.fillTemplate(genreTemplate, {
            id: genre.id,
            description: genre.description,
            checked: selected
          });
          $userGenres.append(genreHtml);
        });
      });
    }

    function resetGenres() {
      $('input[type=checkbox]:checked', $userGenres).each(function (i) {
        $(this).removeAttr("checked");
      });
      var $tdGenres = $("#tdBandGenres");
    }

    function getSelectedGenres() {
      var genres = [];
      $('input[type=checkbox]:checked', $userGenres).each(function (i) {
        var genre = $(this).val();
        genres.push(genre);
      });
      return genres;
    }

    function events() {
      $btnCancel.click(function(evt) {
        evt.stopPropagation();
        navigateTo('/client#/profile/' + context.JK.currentUserId);
        return false;
      });

      $btnBack.click(function(evt) {
        evt.stopPropagation();
        navigateTo('/client#/account/profile/');
        return false;
      });
      
      $btnSubmit.click(function(evt) {
        evt.stopPropagation();
        handleUpdateProfile();
        return false;
      });
    }

    function renderExperience() {
      $.when(api.getUserProfile(), api.getInstruments())
        .done(function(userDetailResponse, instrumentsResponse) {
          var userDetail = userDetailResponse[0];
          populateAccountProfile(userDetail, instrumentsResponse[0]);
        });
      
      context.JK.dropdown($('select'));
    }

    function navigateTo(targetLocation) {
      resetForm();
      context.location = targetLocation;
    }

    function handleUpdateProfile() {
      resetForm();

      var instruments = getInstrumentsValue();
      var genres = getSelectedGenres();
      var status = 

      api.updateUser({
        instruments: instruments,
        genres: genres,
        skill_level: $scroller.find('select[name=skill_level]').val(),
        concert_count: $scroller.find('select[name=concert_count]').val(),
        studio_session_count: $scroller.find('select[name=studio_session_count]').val()
      })
      .done(postUpdateProfileSuccess)
      .fail(postUpdateProfileFailure);
    }

    function postUpdateProfileSuccess(response) {
      $document.triggerHandler(EVENTS.USER_UPDATED, response);
      context.location = "/client#/account/profile/interests";
    }

    function postUpdateProfileFailure(xhr, textStatus, errorMessage) {

      var errors = JSON.parse(xhr.responseText)

      if(xhr.status == 422) {
        var instruments = context.JK.format_errors("musician_instruments", errors);

        if(instruments != null) {
          instrumentSelector.closest('div.field').addClass('error').append(instruments);
        }
      }
      else {
        app.ajaxError(xhr, textStatus, errorMessage)
      }
    }

    function getInstrumentsValue() {
      var instruments = [];
      $('input[type=checkbox]:checked', $instrumentSelector).each(function(i) {

        var instrumentElement = $(this).closest('tr');
        // traverse up to common parent of this instrument, and pick out proficiency selector
        var proficiency = $('select.proficiency_selector', instrumentElement).val();

        instruments.push({
          instrument_id: instrumentElement.attr('data-instrument-id'),
          proficiency_level: proficiency,
          priority : i
          });
      });

      return instruments;
    }

    function initialize() {
      var screenBindings = {
        'beforeShow': beforeShow,
        'afterShow': afterShow
      };
      app.bindScreen('account/profile/experience', screenBindings);
    }

    this.initialize = initialize;
    this.beforeShow = beforeShow;
    this.afterShow = afterShow;
    return this;
  };

})(window,jQuery);