526 lines
18 KiB
JavaScript
526 lines
18 KiB
JavaScript
(function(context,$) {
|
|
|
|
"use strict";
|
|
|
|
context.JK = context.JK || {};
|
|
|
|
// TODO: MUCH OF THIS CLASS IS REPEATED IN THE FOLLOWING FILES:
|
|
// createSession.js
|
|
// accounts_profiles.js
|
|
|
|
context.JK.BandSetupScreen = function(app) {
|
|
var logger = context.JK.logger;
|
|
var rest = context.JK.Rest();
|
|
var friendSelectorDialog = null;
|
|
var invitationDialog = null;
|
|
var autoComplete = null;
|
|
var userNames = [];
|
|
var userIds = [];
|
|
var userPhotoUrls = [];
|
|
var selectedFriendIds = {};
|
|
var nilOptionText = 'n/a';
|
|
var bandId = '';
|
|
|
|
function resetForm() {
|
|
|
|
// name
|
|
$("#band-name").val('');
|
|
var $tdName = $("#tdBandName");
|
|
$tdName.find('.error-text').remove();
|
|
$tdName.removeClass("error");
|
|
|
|
// country
|
|
$("#band-country").empty();
|
|
$("#band-country").val('');
|
|
var $tdCountry = $("#tdBandCountry");
|
|
$tdCountry.find('.error-text').remove();
|
|
$tdCountry.removeClass("error");
|
|
|
|
// region
|
|
$("#band-region").empty();
|
|
$("#band-region").val('');
|
|
var $tdRegion = $("#tdBandRegion");
|
|
$tdRegion.find('.error-text').remove();
|
|
$tdRegion.removeClass("error");
|
|
|
|
// city
|
|
$("#band-city").empty();
|
|
$("#band-city").val('');
|
|
var $tdCity = $("#tdBandCity");
|
|
$tdCity.find('.error-text').remove();
|
|
$tdCity.removeClass("error");
|
|
|
|
// description
|
|
$("#band-biography").val('');
|
|
var $tdBiography = $("#tdBandBiography");
|
|
$tdBiography.find('.error-text').remove();
|
|
$tdBiography.removeClass("error");
|
|
|
|
resetGenres();
|
|
|
|
$("#hdn-band-id").val('');
|
|
|
|
$("#band-setup-step-1").show();
|
|
$("#band-setup-step-2").hide();
|
|
}
|
|
|
|
function resetGenres() {
|
|
$('input[type=checkbox]:checked', '#band-genres').each(function(i) {
|
|
$(this).removeAttr("checked");
|
|
});
|
|
|
|
var $tdGenres = $("#tdBandGenres");
|
|
$tdGenres.find('.error-text').remove();
|
|
$tdGenres.removeClass("error");
|
|
}
|
|
|
|
function getSelectedGenres() {
|
|
var genres = [];
|
|
$('input[type=checkbox]:checked', '#band-genres').each(function(i) {
|
|
var genre = $(this).val();
|
|
genres.push(genre);
|
|
});
|
|
|
|
return genres;
|
|
}
|
|
|
|
function validateGeneralInfo() {
|
|
var isValid = true;
|
|
|
|
// name
|
|
var $name = $("#band-name");
|
|
var $tdName = $("#tdBandName");
|
|
var name = $.trim($name.val());
|
|
if (name.length === 0) {
|
|
$tdName.find('.error-text').remove();
|
|
$tdName.addClass("error");
|
|
$name.after("<ul class='error-text'><li>Name is required</li></ul>");
|
|
isValid = false;
|
|
}
|
|
else {
|
|
$tdName.removeClass("error");
|
|
}
|
|
|
|
// country
|
|
var $country = $("#band-country");
|
|
var $tdCountry = $("#tdBandCountry");
|
|
var country = $.trim($country.val());
|
|
if (country.length === 0) {
|
|
$tdCountry.find('.error-text').remove();
|
|
$tdCountry.addClass("error");
|
|
$country.after("<ul class='error-text'><li>Country is required</li></ul>");
|
|
isValid = false;
|
|
}
|
|
else {
|
|
$tdCountry.removeClass("error");
|
|
}
|
|
|
|
// region
|
|
var $region = $("#band-region");
|
|
var $tdRegion = $("#tdBandRegion");
|
|
var region = $.trim($region.val());
|
|
if (region.length === 0) {
|
|
$tdRegion.find('.error-text').remove();
|
|
$tdRegion.addClass("error");
|
|
$region.after("<ul class='error-text'><li>Region is required</li></ul>");
|
|
isValid = false;
|
|
}
|
|
else {
|
|
$tdRegion.removeClass("error");
|
|
}
|
|
|
|
// city
|
|
var $city = $("#band-city");
|
|
var $tdCity = $("#tdBandCity");
|
|
var city = $.trim($city.val());
|
|
if (city.length === 0) {
|
|
$tdCity.find('.error-text').remove();
|
|
$tdCity.addClass("error");
|
|
$city.after("<ul class='error-text'><li>City is required</li></ul>");
|
|
isValid = false;
|
|
}
|
|
else {
|
|
$tdCity.removeClass("error");
|
|
}
|
|
|
|
// genres (no more than 3)
|
|
var $genres = $(".band-setup-genres");
|
|
var $tdGenres = $("#tdBandGenres");
|
|
var selectedGenres = getSelectedGenres();
|
|
if (selectedGenres.length === 0 || selectedGenres.length > 3) {
|
|
$tdGenres.find('.error-text').remove();
|
|
$tdGenres.addClass("error");
|
|
$genres.after("<ul class='error-text'><li>Genre is required (3 maximum)</li></ul>");
|
|
isValid = false;
|
|
}
|
|
else {
|
|
$tdGenres.removeClass("error");
|
|
}
|
|
|
|
// description
|
|
var $biography = $("#band-biography");
|
|
var $tdBiography = $("#tdBandBiography");
|
|
var biography = $.trim($biography.val());
|
|
if (biography.length === 0) {
|
|
$tdBiography.find('.error-text').remove();
|
|
$tdBiography.addClass("error");
|
|
$biography.after("<ul class='error-text'><li>Biography is required</li></ul>");
|
|
isValid = false;
|
|
}
|
|
else {
|
|
$tdBiography.removeClass("error");
|
|
}
|
|
|
|
return isValid;
|
|
}
|
|
|
|
function saveBand() {
|
|
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();
|
|
|
|
if (bandId.length === 0) {
|
|
rest.createBand(band).done(function(response) {
|
|
createBandInvitations(response.id, function() {
|
|
context.location = "#/bandProfile/" + response.id;
|
|
});
|
|
});
|
|
}
|
|
else {
|
|
band.id = bandId;
|
|
rest.updateBand(band, bandId).done(function(response) {
|
|
createBandInvitations(band.id, function() {
|
|
context.location = "#/bandProfile/" + band.id;
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function createBandInvitations(bandId, onComplete) {
|
|
var callCount = 0;
|
|
var totalInvitations = 0;
|
|
$('#selected-band-invitees .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) {
|
|
userNames = [];
|
|
userIds = [];
|
|
userPhotoUrls = [];
|
|
bandId = $("#hdn-band-id").val();
|
|
resetForm();
|
|
}
|
|
|
|
function afterShow(data) {
|
|
friendSelectorDialog.setCallback(friendSelectorCallback);
|
|
loadFriends();
|
|
|
|
if (bandId.length > 0) {
|
|
$("#band-setup-title").html("edit band");
|
|
$("#btn-band-setup-save").html("SAVE CHANGES");
|
|
|
|
// 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");
|
|
}
|
|
}
|
|
|
|
function loadBandDetails() {
|
|
rest.getBand(bandId).done(function(band) {
|
|
$("#band-name").val(band.name);
|
|
$("#band-website").val(band.website);
|
|
$("#band-biography").val(band.biography);
|
|
|
|
loadGenres(band.genres);
|
|
|
|
loadCountries(band.country, function() {
|
|
loadRegions(band.region, function() {
|
|
loadCities(band.city);
|
|
});
|
|
});
|
|
|
|
// TODO: initialize avatar
|
|
});
|
|
}
|
|
|
|
// TODO: this is repeated in createSession.js
|
|
function loadFriends() {
|
|
var friends = rest.getFriends({ id: context.JK.currentUserId });
|
|
$.each(friends, function() {
|
|
userNames.push(this.name);
|
|
userIds.push(this.id);
|
|
userPhotoUrls.push(this.photo_url);
|
|
});
|
|
|
|
var autoCompleteOptions = {
|
|
lookup: { suggestions: userNames, data: userIds },
|
|
onSelect: addInvitation
|
|
};
|
|
if (!autoComplete) {
|
|
autoComplete = $('#band-invitee-input').autocomplete(autoCompleteOptions);
|
|
}
|
|
else {
|
|
autoComplete.setOptions(autoCompleteOptions);
|
|
}
|
|
|
|
$(".autocomplete").width("150px");
|
|
}
|
|
|
|
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);
|
|
});
|
|
|
|
if (onCountriesLoaded) {
|
|
onCountriesLoaded();
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadRegions(initialRegion, onRegionsLoaded) {
|
|
$("#band-region").empty();
|
|
var selectedCountry = $("#band-country").val();
|
|
var $region = $("#band-region");
|
|
|
|
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);
|
|
});
|
|
|
|
if (onRegionsLoaded) {
|
|
onRegionsLoaded();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function loadCities(initialCity) {
|
|
$("#band-city").empty();
|
|
var selectedCountry = $("#band-country").val();
|
|
var selectedRegion = $("#band-region").val();
|
|
var $city = $("#band-city");
|
|
|
|
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);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
function friendSelectorCallback(newSelections) {
|
|
var keys = Object.keys(newSelections);
|
|
for (var i=0; i < keys.length; i++) {
|
|
addInvitation(newSelections[keys[i]].userName, newSelections[keys[i]].userId);
|
|
}
|
|
}
|
|
|
|
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 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('');
|
|
});
|
|
|
|
// friend input blur
|
|
$('#band-invitee-input').blur(function() {
|
|
$(this).val('Type a friend\'s name');
|
|
});
|
|
|
|
$('#btn-band-setup-cancel').click(function() {
|
|
resetForm();
|
|
context.location = "#/home";
|
|
});
|
|
|
|
$('#btn-band-setup-next').click(function() {
|
|
if (validateGeneralInfo()) {
|
|
$("#band-setup-step-2").show();
|
|
$("#band-setup-step-1").hide();
|
|
}
|
|
});
|
|
|
|
$('#btn-band-setup-back').click(function() {
|
|
$("#band-setup-step-1").show();
|
|
$("#band-setup-step-2").hide();
|
|
});
|
|
|
|
$('#btn-band-setup-save').click(saveBand);
|
|
|
|
$('#btn-band-choose-friends').click(function() {
|
|
friendSelectorDialog.showDialog(selectedFriendIds);
|
|
});
|
|
|
|
$('#band-country').on('change', function(evt) {
|
|
evt.stopPropagation();
|
|
loadRegions();
|
|
loadCities();
|
|
return false;
|
|
});
|
|
|
|
$('#band-region').on('change', function(evt) {
|
|
evt.stopPropagation();
|
|
loadCities();
|
|
return false;
|
|
});
|
|
|
|
$('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();
|
|
});
|
|
}
|
|
|
|
function initialize(invitationDialogInstance, friendSelectorDialogInstance) {
|
|
friendSelectorDialog = friendSelectorDialogInstance;
|
|
invitationDialog = invitationDialogInstance;
|
|
events();
|
|
|
|
var screenBindings = {
|
|
'beforeShow': beforeShow,
|
|
'afterShow': afterShow
|
|
};
|
|
|
|
app.bindScreen('band/setup', screenBindings);
|
|
}
|
|
|
|
this.initialize = initialize;
|
|
this.afterShow = afterShow;
|
|
return this;
|
|
};
|
|
|
|
})(window,jQuery); |