VRFS-689 city/state/country dropdowns should be dynamic using REST API
This commit is contained in:
parent
71eae1dbb2
commit
37c571d9ea
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue