seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

VRFS-689 city/state/country dropdowns should be dynamic using REST API

This commit is contained in:
Brian Smith 2013-11-28 00:36:32 -05:00
parent 71eae1dbb2
commit 37c571d9ea
6 changed files with 118 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/assets/javascripts/accounts_profile.js
View File

@ -102,8 +102,8 @@
function populateCountries(countries, userCountry) { function populateCountries(countries, userCountry) {
var foundCountry = false; var foundCountry = false;
var countrySelect = getCountryElement() var countrySelect = getCountryElement();
countrySelect.children().remove() countrySelect.children().remove();
var nilOption = $('<option value=""></option>'); var nilOption = $('<option value=""></option>');
nilOption.text(nilOptionText); nilOption.text(nilOptionText);
@ -120,7 +120,7 @@
foundCountry = true; foundCountry = true;
} }
countrySelect.append(option) countrySelect.append(option);
}); });
if(!foundCountry) { if(!foundCountry) {

97
web/app/assets/javascripts/band_setup.js
View File

@ -17,6 +17,7 @@
var userIds = []; var userIds = [];
var userPhotoUrls = []; var userPhotoUrls = [];
var selectedFriendIds = {}; var selectedFriendIds = {};
var nilOptionText = 'n/a';
function resetForm() { function resetForm() {
@ -107,29 +108,26 @@
loadCountries(); loadCountries();
} }
// TODO: this // TODO: this is repeated in createSession.js
function loadFriends() { function loadFriends() {
logger.debug("Loading friends..."); var friends = rest.getFriends({ id: context.JK.currentUserId });
rest.getFriends({ id: context.JK.currentUserId }) $.each(friends, function() {
.done(function(response) { userNames.push(this.name);
$.each(response, function() { userIds.push(this.id);
userNames.push(this.name); userPhotoUrls.push(this.photo_url);
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);
}
}); });
var autoCompleteOptions = {
lookup: { suggestions: userNames, data: userIds },
onSelect: addInvitation
};
if (!autoComplete) {
autoComplete = $('#band-invitee-input').autocomplete(autoCompleteOptions);
}
else {
autoComplete.setOptions(autoCompleteOptions);
}
$(".autocomplete").width("150px"); $(".autocomplete").width("150px");
} }
@ -148,15 +146,63 @@
} }
function loadCountries() { function loadCountries() {
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);
$country.append(option);
});
});
} }
function loadStates(country) { function loadRegions() {
$("#band-region").empty();
var selectedCountry = $("#band-country").val();
var $region = $("#band-region");
var nilOption = $('<option value=""></option>');
nilOption.text(nilOptionText);
$region.append(nilOption);
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);
$region.append(option);
});
});
} }
function loadCities(state) { function loadCities() {
$("#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);
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);
$city.append(option);
});
});
} }
function friendSelectorCallback(newSelections) { function friendSelectorCallback(newSelections) {
@ -167,7 +213,6 @@
} }
function addInvitation(value, data) { function addInvitation(value, data) {
logger.debug("executing band addInvitation");
if ($('#selected-band-invitees div[user-id=' + data + ']').length === 0) { if ($('#selected-band-invitees div[user-id=' + data + ']').length === 0) {
var template = $('#template-band-invitation').html(); var template = $('#template-band-invitation').html();
var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value}); var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value});
@ -221,13 +266,13 @@
$('#band-country').on('change', function(evt) { $('#band-country').on('change', function(evt) {
evt.stopPropagation(); evt.stopPropagation();
loadStates(this.value); loadRegions();
return false; return false;
}); });
$('#band-state').on('change', function(evt) { $('#band-region').on('change', function(evt) {
evt.stopPropagation(); evt.stopPropagation();
loadCities(this.value); loadCities();
return false; return false;
}); });
} }

36
web/app/assets/javascripts/createSession.js
View File

@ -28,27 +28,24 @@
function afterShow(data) { function afterShow(data) {
friendSelectorDialog.setCallback(friendSelectorCallback); friendSelectorDialog.setCallback(friendSelectorCallback);
rest.getFriends({ id: context.JK.currentUserId }) var friends = rest.getFriends({ id: context.JK.currentUserId });
.done(function(response) { $.each(friends, function() {
$.each(response, function() { userNames.push(this.name);
userNames.push(this.name); userIds.push(this.id);
userIds.push(this.id); userPhotoUrls.push(this.photo_url);
userPhotoUrls.push(this.photo_url);
});
var autoCompleteOptions = {
lookup: { suggestions: userNames, data: userIds },
onSelect: addInvitation
};
if (!autoComplete) {
autoComplete = $('#friend-input').autocomplete(autoCompleteOptions);
}
else {
autoComplete.setOptions(autoCompleteOptions);
}
}); });
var autoCompleteOptions = {
lookup: { suggestions: userNames, data: userIds },
onSelect: addInvitation
};
if (!autoComplete) {
autoComplete = $('#friend-input').autocomplete(autoCompleteOptions);
}
else {
autoComplete.setOptions(autoCompleteOptions);
}
$(".autocomplete").width("150px"); $(".autocomplete").width("150px");
} }
@ -60,7 +57,6 @@
} }
function addInvitation(value, data) { function addInvitation(value, data) {
logger.debug("executing session addInvitation");
if ($('#selected-friends div[user-id=' + data + ']').length === 0) { if ($('#selected-friends div[user-id=' + data + ']').length === 0) {
var template = $('#template-added-invitation').html(); var template = $('#template-added-invitation').html();
var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value}); var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value});

48
web/app/assets/javascripts/friendSelector.js
View File

@ -17,36 +17,32 @@
function loadFriends() { function loadFriends() {
$('#friend-selector-list').empty(); $('#friend-selector-list').empty();
// TODO: page this as users scroll - show selected friends from parent screen at top var template = $('#template-friend-selection').html();
rest.getFriends({ id: context.JK.currentUserId }) var friends = rest.getFriends({ id: context.JK.currentUserId });
.done(function(friends) { $.each(friends, function(index, val) {
var template = $('#template-friend-selection').html(); var id = val.id;
$.each(friends, function(index, val) { var isSelected = selectedIds[id];
var id = val.id;
var isSelected = selectedIds[id];
var html = context.JK.fillTemplate(template, { var html = context.JK.fillTemplate(template, {
userId: id, userId: id,
css_class: isSelected ? 'selected' : '', css_class: isSelected ? 'selected' : '',
userName: val.name, userName: val.name,
avatar_url: context.JK.resolveAvatarUrl(val.photo_url), avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
status: "", status: "",
status_img_url: "", status_img_url: "",
check_mark_display: isSelected ? "block" : "none", check_mark_display: isSelected ? "block" : "none",
status_img_display: "none" status_img_display: "none"
}); });
$('#friend-selector-list').append(html); $('#friend-selector-list').append(html);
// disable row click if it was chosen on parent screen // disable row click if it was chosen on parent screen
if (!isSelected) { if (!isSelected) {
$('#friend-selector-list tr[user-id="' + id + '"]').click(function() { $('#friend-selector-list tr[user-id="' + id + '"]').click(function() {
updateSelectionList(id, val.name, $(this), $(this).find('img[user-id="' + id + '"]')); updateSelectionList(id, val.name, $(this), $(this).find('img[user-id="' + id + '"]'));
});
}
}); });
}) }
.error(app.ajaxError); });
} }
function updateSelectionList(id, name, tr, img) { function updateSelectionList(id, name, tr, img) {

7
web/app/assets/javascripts/jam_rest.js
View File

@ -214,14 +214,17 @@
} }
function getFriends(options) { function getFriends(options) {
var friends = [];
var id = getId(options); var id = getId(options);
$.ajax({
return $.ajax({
type: "GET", type: "GET",
async: false, async: false,
url: '/api/users/' + id + '/friends', url: '/api/users/' + id + '/friends',
dataType: 'json' dataType: 'json'
}).done(function(response) {
friends = response;
}); });
return friends;
} }
function getMusicianFollowers(userId) { function getMusicianFollowers(userId) {

5
web/app/views/clients/_band_setup.html.erb
View File

@ -38,17 +38,14 @@
<tr> <tr>
<td valign="middle">Country:<br /> <td valign="middle">Country:<br />
<select id="band-country" class="w80"> <select id="band-country" class="w80">
<option value="US">United States</option>
</select><br /><br /> </select><br /><br />
</td> </td>
<td valign="middle">State/Region:<br /> <td valign="middle">State/Region:<br />
<select id="band-state" class="w80"> <select id="band-region" class="w80">
<option value="TX">TX</option>
</select><br /><br /> </select><br /><br />
</td> </td>
<td valign="middle">City:<br /> <td valign="middle">City:<br />
<select id="band-city" class="w80"> <select id="band-city" class="w80">
<option value="Austin">Austin</option>
</select><br /><br /> </select><br /><br />
</td> </td>
</tr> </tr>