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

View File

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

View File

@ -17,6 +17,7 @@
var userIds = [];
var userPhotoUrls = [];
var selectedFriendIds = {};
var nilOptionText = 'n/a';
function resetForm() {
@ -107,29 +108,26 @@
loadCountries();
}
// TODO: this
// TODO: this is repeated in createSession.js
function loadFriends() {
logger.debug("Loading friends...");
rest.getFriends({ id: context.JK.currentUserId })
.done(function(response) {
$.each(response, 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);
}
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");
}
@ -148,15 +146,63 @@
}
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) {
@ -167,7 +213,6 @@
}
function addInvitation(value, data) {
logger.debug("executing band addInvitation");
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});
@ -221,13 +266,13 @@
$('#band-country').on('change', function(evt) {
evt.stopPropagation();
loadStates(this.value);
loadRegions();
return false;
});
$('#band-state').on('change', function(evt) {
$('#band-region').on('change', function(evt) {
evt.stopPropagation();
loadCities(this.value);
loadCities();
return false;
});
}

View File

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

View File

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

View File

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

View File

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