468 lines
14 KiB
JavaScript
468 lines
14 KiB
JavaScript
(function (context, $) {
|
|
|
|
"use strict";
|
|
|
|
context.JK = context.JK || {};
|
|
|
|
// TODO: MUCH OF THIS CLASS IS REPEATED IN THE FOLLOWING FILES:
|
|
// createSession.js.erb
|
|
// accounts_profiles.js
|
|
|
|
context.JK.BandSetupScreen = function (app) {
|
|
var logger = context.JK.logger;
|
|
var rest = context.JK.Rest();
|
|
var inviteMusiciansUtil = null;
|
|
var invitationDialog = null;
|
|
var nilOptionText = 'n/a';
|
|
var bandId = '';
|
|
var friendInput=null;
|
|
|
|
function is_new_record() {
|
|
return bandId.length == 0;
|
|
}
|
|
|
|
function removeErrors() {
|
|
$('#band-setup-form .error-text').remove()
|
|
$('#band-setup-form .error').removeClass("error")
|
|
|
|
}
|
|
|
|
function resetForm() {
|
|
|
|
removeErrors();
|
|
|
|
// name
|
|
$("#band-name").val('');
|
|
|
|
// country
|
|
$("#band-country").empty();
|
|
$("#band-country").val('');
|
|
|
|
// region
|
|
$("#band-region").empty();
|
|
$("#band-region").val('');
|
|
|
|
// city
|
|
$("#band-city").empty();
|
|
$("#band-city").val('');
|
|
|
|
// description
|
|
$("#band-biography").val('');
|
|
|
|
// website
|
|
$('#band-website').val('');
|
|
|
|
resetGenres();
|
|
|
|
$("#band-setup-step-1").show();
|
|
$("#band-setup-step-2").hide();
|
|
|
|
$(friendInput)
|
|
.unbind('blur')
|
|
.attr("placeholder", "Looking up friends...")
|
|
.prop('disabled', true)
|
|
}
|
|
|
|
function resetGenres() {
|
|
$('input[type=checkbox]:checked', '#band-genres').each(function (i) {
|
|
$(this).removeAttr("checked");
|
|
});
|
|
|
|
var $tdGenres = $("#tdBandGenres");
|
|
}
|
|
|
|
function getSelectedGenres() {
|
|
var genres = [];
|
|
$('input[type=checkbox]:checked', '#band-genres').each(function (i) {
|
|
var genre = $(this).val();
|
|
genres.push(genre);
|
|
});
|
|
|
|
return genres;
|
|
}
|
|
|
|
function validateGeneralInfo() {
|
|
removeErrors();
|
|
|
|
var band = buildBand();
|
|
|
|
return rest.validateBand(band);
|
|
}
|
|
|
|
function renderErrors(errors) {
|
|
var name = context.JK.format_errors("name", errors);
|
|
var country = context.JK.format_errors("country", errors);
|
|
var state = context.JK.format_errors("state", errors);
|
|
var city = context.JK.format_errors("city", errors);
|
|
var biography = context.JK.format_errors("biography", errors);
|
|
var genres = context.JK.format_errors("genres", errors);
|
|
var website = context.JK.format_errors("website", errors);
|
|
|
|
if(name) $("#band-name").closest('div.field').addClass('error').end().after(name);
|
|
if(country) $("#band-country").closest('div.field').addClass('error').end().after(country);
|
|
if(state) $("#band-region").closest('div.field').addClass('error').end().after(state);
|
|
if(city) $("#band-city").closest('div.field').addClass('error').end().after(city);
|
|
if(genres) $(".band-setup-genres").closest('div.field').addClass('error').end().after(genres);
|
|
if(biography) $("#band-biography").closest('div.field').addClass('error').end().after(biography);
|
|
if(website) $("#band-website").closest('div.field').addClass('error').end().after(website);
|
|
}
|
|
|
|
function buildBand() {
|
|
var band = {};
|
|
band.name = $("#band-name").val();
|
|
band.website = $("#band-website").val();
|
|
band.biography = $("#band-biography").val();
|
|
band.city = $("#band-city").val();
|
|
band.state = $("#band-region").val();
|
|
band.country = $("#band-country").val();
|
|
band.genres = getSelectedGenres();
|
|
return band;
|
|
}
|
|
|
|
function saveBand() {
|
|
var band = buildBand()
|
|
|
|
if (is_new_record()) {
|
|
rest.createBand(band)
|
|
.done(function (response) {
|
|
createBandInvitations(response.id, function () {
|
|
context.location = "/client#/bandProfile/" + response.id;
|
|
});
|
|
})
|
|
.fail(function (jqXHR) {
|
|
app.notifyServerError(jqXHR, "Unable to create band")
|
|
});
|
|
;
|
|
}
|
|
else {
|
|
band.id = bandId;
|
|
rest.updateBand(band)
|
|
.done(function (response) {
|
|
createBandInvitations(band.id, function () {
|
|
context.location = "/client#/bandProfile/" + band.id;
|
|
});
|
|
})
|
|
.fail(function (jqXHR) {
|
|
app.notifyServerError(jqXHR, "Unable to create band")
|
|
});
|
|
}
|
|
}
|
|
|
|
function createBandInvitations(bandId, onComplete) {
|
|
var callCount = 0;
|
|
var totalInvitations = 0;
|
|
$('#selected-friends-band .invitation').each(function (index, invitation) {
|
|
callCount++;
|
|
totalInvitations++;
|
|
var userId = $(invitation).attr('user-id');
|
|
rest.createBandInvitation(bandId, userId)
|
|
.done(function (response) {
|
|
callCount--;
|
|
}).fail(app.ajaxError);
|
|
});
|
|
|
|
function checker() {
|
|
if (callCount === 0) {
|
|
onComplete();
|
|
} else {
|
|
context.setTimeout(checker, 10);
|
|
}
|
|
}
|
|
|
|
checker();
|
|
return totalInvitations;
|
|
}
|
|
|
|
function beforeShow(data) {
|
|
inviteMusiciansUtil.clearSelections();
|
|
bandId = data.id == 'new' ? '' : data.id;
|
|
resetForm();
|
|
}
|
|
|
|
function afterShow(data) {
|
|
inviteMusiciansUtil.loadFriends();
|
|
|
|
if (!is_new_record()) {
|
|
$("#band-setup-title").html("edit band");
|
|
$("#btn-band-setup-save").html("SAVE CHANGES");
|
|
$("#band-change-photo").html('Upload band photo.');
|
|
$('#tdBandPhoto').css('visibility', 'visible');
|
|
|
|
// retrieve and initialize band profile data points
|
|
loadBandDetails();
|
|
}
|
|
else {
|
|
loadGenres();
|
|
|
|
rest.getResolvedLocation()
|
|
.done(function (location) {
|
|
loadCountries(location.country, function () {
|
|
loadRegions(location.region, function () {
|
|
loadCities(location.city);
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
$("#band-setup-title").html("set up band");
|
|
$("#btn-band-setup-save").html("CREATE BAND");
|
|
$('#tdBandPhoto').css('visibility', 'hidden'); // can't upload photo when going through initial setup
|
|
}
|
|
}
|
|
|
|
function loadBandDetails() {
|
|
rest.getBand(bandId).done(function (band) {
|
|
$("#band-name").val(band.name);
|
|
$("#band-website").val(band.website);
|
|
$("#band-biography").val(band.biography);
|
|
|
|
if (band.photo_url) {
|
|
$("#band-avatar").attr('src', band.photo_url);
|
|
}
|
|
|
|
loadGenres(band.genres);
|
|
|
|
loadCountries(band.country, function () {
|
|
loadRegions(band.state, function () {
|
|
loadCities(band.city);
|
|
});
|
|
});
|
|
|
|
// TODO: initialize avatar
|
|
});
|
|
}
|
|
|
|
function loadGenres(selectedGenres) {
|
|
$("#band-genres").empty();
|
|
|
|
rest.getGenres().done(function (genres) {
|
|
$.each(genres, function (index, genre) {
|
|
var genreTemplate = $('#template-band-setup-genres').html();
|
|
var selected = '';
|
|
|
|
if (selectedGenres) {
|
|
var genreMatch = $.grep(selectedGenres, function (n, i) {
|
|
return n.id === genre.id;
|
|
});
|
|
|
|
if (genreMatch.length > 0) {
|
|
selected = "checked";
|
|
}
|
|
}
|
|
var genreHtml = context.JK.fillTemplate(genreTemplate, {
|
|
id: genre.id,
|
|
description: genre.description,
|
|
checked: selected
|
|
});
|
|
|
|
$('#band-genres').append(genreHtml);
|
|
});
|
|
});
|
|
}
|
|
|
|
function loadCountries(initialCountry, onCountriesLoaded) {
|
|
var $country = $("#band-country");
|
|
|
|
var nilOption = $('<option value=""></option>');
|
|
nilOption.text(nilOptionText);
|
|
$country.append(nilOption);
|
|
|
|
rest.getCountries().done(function (response) {
|
|
$.each(response["countries"], function (index, country) {
|
|
if (!country) return;
|
|
var option = $('<option></option>');
|
|
option.text(country);
|
|
option.attr("value", country);
|
|
|
|
if (initialCountry === country) {
|
|
option.attr("selected", "selected");
|
|
}
|
|
|
|
$country.append(option);
|
|
});
|
|
|
|
context.JK.dropdown($country);
|
|
|
|
if (onCountriesLoaded) {
|
|
onCountriesLoaded();
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadRegions(initialRegion, onRegionsLoaded) {
|
|
var $region = $("#band-region");
|
|
$region.empty();
|
|
var selectedCountry = $("#band-country").val();
|
|
|
|
var nilOption = $('<option value=""></option>');
|
|
nilOption.text(nilOptionText);
|
|
$region.append(nilOption);
|
|
|
|
if (selectedCountry) {
|
|
rest.getRegions({'country': selectedCountry}).done(function (response) {
|
|
$.each(response["regions"], function (index, region) {
|
|
if (!region) return;
|
|
var option = $('<option></option>');
|
|
option.text(region);
|
|
option.attr("value", region);
|
|
|
|
if (initialRegion === region) {
|
|
option.attr("selected", "selected");
|
|
}
|
|
|
|
$region.append(option);
|
|
});
|
|
|
|
|
|
context.JK.dropdown($region);
|
|
|
|
if (onRegionsLoaded) {
|
|
onRegionsLoaded();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function loadCities(initialCity) {
|
|
var $city = $("#band-city");
|
|
$city.empty();
|
|
var selectedCountry = $("#band-country").val();
|
|
var selectedRegion = $("#band-region").val();
|
|
|
|
var nilOption = $('<option value=""></option>');
|
|
nilOption.text(nilOptionText);
|
|
$city.append(nilOption);
|
|
|
|
if (selectedCountry && selectedRegion) {
|
|
rest.getCities({'country': selectedCountry, 'region': selectedRegion}).done(function (response) {
|
|
$.each(response["cities"], function (index, city) {
|
|
if (!city) return;
|
|
var option = $('<option></option>');
|
|
option.text(city);
|
|
option.attr("value", city);
|
|
|
|
if (initialCity === city) {
|
|
option.attr("selected", "selected");
|
|
}
|
|
|
|
$city.append(option);
|
|
});
|
|
|
|
context.JK.dropdown($city);
|
|
});
|
|
}
|
|
}
|
|
|
|
function addInvitation(value, data) {
|
|
if ($('#selected-band-invitees div[user-id=' + data + ']').length === 0) {
|
|
var template = $('#template-band-invitation').html();
|
|
var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value});
|
|
$('#selected-band-invitees').append(invitationHtml);
|
|
$('#band-invitee-input').select();
|
|
selectedFriendIds[data] = true;
|
|
}
|
|
else {
|
|
$('#band-invitee-input').select();
|
|
context.alert('Invitation already exists for this musician.');
|
|
}
|
|
}
|
|
|
|
function navigateToBandPhoto(evt) {
|
|
evt.stopPropagation();
|
|
context.location = '/client#/band/setup/photo/' + bandId;
|
|
return false;
|
|
}
|
|
|
|
function removeInvitation(evt) {
|
|
delete selectedFriendIds[$(evt.currentTarget).parent().attr('user-id')];
|
|
$(evt.currentTarget).closest('.invitation').remove();
|
|
}
|
|
|
|
function events() {
|
|
$('#selected-band-invitees').on("click", ".invitation a", removeInvitation);
|
|
|
|
// friend input focus
|
|
$('#band-invitee-input').focus(function () {
|
|
$(this).val('');
|
|
});
|
|
|
|
$('#btn-band-setup-cancel').click(function () {
|
|
resetForm();
|
|
window.history.go(-1);
|
|
return false;
|
|
});
|
|
|
|
$('#btn-band-setup-next').click(function () {
|
|
validateGeneralInfo()
|
|
.done(function (response) {
|
|
$("#band-setup-step-2").show();
|
|
$("#band-setup-step-1").hide();
|
|
})
|
|
.fail(function (jqXHR) {
|
|
if(jqXHR.status == 422) {
|
|
renderErrors(JSON.parse(jqXHR.responseText))
|
|
}
|
|
else {
|
|
app.notifyServerError(jqXHR, "Unable to validate band")
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#btn-band-setup-back').click(function () {
|
|
$("#band-setup-step-1").show();
|
|
$("#band-setup-step-2").hide();
|
|
});
|
|
|
|
$('#btn-band-setup-save').click(saveBand);
|
|
|
|
$('#band-country').on('change', function (evt) {
|
|
evt.stopPropagation();
|
|
loadRegions();
|
|
loadCities();
|
|
return false;
|
|
});
|
|
|
|
$('#band-region').on('change', function (evt) {
|
|
evt.stopPropagation();
|
|
loadCities();
|
|
return false;
|
|
});
|
|
|
|
$('#band-change-photo').click(navigateToBandPhoto);
|
|
$('#band-setup .avatar-profile').click(navigateToBandPhoto);
|
|
|
|
$('div[layout-id="band/setup"] .btn-email-invitation').click(function () {
|
|
invitationDialog.showEmailDialog();
|
|
});
|
|
|
|
$('div[layout-id="band/setup"] .btn-gmail-invitation').click(function () {
|
|
invitationDialog.showGoogleDialog();
|
|
});
|
|
|
|
$('div[layout-id="band/setup"] .btn-facebook-invitation').click(function () {
|
|
invitationDialog.showFacebookDialog();
|
|
});
|
|
|
|
$(friendInput).focus(function() { $(this).val(''); })
|
|
}
|
|
|
|
function initialize(invitationDialogInstance, inviteMusiciansUtilInstance) {
|
|
inviteMusiciansUtil = inviteMusiciansUtilInstance;
|
|
friendInput = inviteMusiciansUtil.inviteBandCreate('#band-setup-invite-musicians', "<div class='left w70'>If your bandmates are already on JamKazam, start typing their names in the box below, or click the Choose Friends button to select them.</div>");
|
|
invitationDialog = invitationDialogInstance;
|
|
events();
|
|
|
|
var screenBindings = {
|
|
'beforeShow': beforeShow,
|
|
'afterShow': afterShow
|
|
};
|
|
|
|
app.bindScreen('band/setup', screenBindings);
|
|
}
|
|
|
|
this.initialize = initialize;
|
|
this.afterShow = afterShow;
|
|
return this;
|
|
};
|
|
|
|
})(window, jQuery); |