vrfs1008: refactoring invite logic
This commit is contained in:
Jonathan Kolyer
parent
ef01c9a8f1
commit
8fdbc7cc08
|
|
@ -7,81 +7,19 @@
|
|||
var logger = context.JK.logger;
|
||||
var rest = context.JK.Rest();
|
||||
var realtimeMessaging = context.JK.JamServer;
|
||||
var friendSelectorDialog = null;
|
||||
var invitationDialog = null;
|
||||
var autoComplete = null;
|
||||
var userNames = [];
|
||||
var userIds = [];
|
||||
var userPhotoUrls = [];
|
||||
var inviteMusiciansDialog = null;
|
||||
var MAX_GENRES = 1;
|
||||
var selectedFriendIds = {};
|
||||
var sessionSettings = {};
|
||||
|
||||
function beforeShow(data) {
|
||||
userNames = [];
|
||||
userIds = [];
|
||||
userPhotoUrls = [];
|
||||
inviteMusiciansDialog.afterShow(data);
|
||||
context.JK.GenreSelectorHelper.render('#create-session-genre');
|
||||
resetForm();
|
||||
}
|
||||
|
||||
function afterShow(data) {
|
||||
friendSelectorDialog.setCallback(friendSelectorCallback);
|
||||
|
||||
var friends = rest.getFriends({ id: context.JK.currentUserId })
|
||||
.done(function(friends) {
|
||||
$.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
|
||||
};
|
||||
|
||||
$('#friend-input').attr("placeholder", "Type a friend\'s name").prop('disabled', false);
|
||||
|
||||
if (!autoComplete) {
|
||||
autoComplete = $('#friend-input').autocomplete(autoCompleteOptions);
|
||||
}
|
||||
else {
|
||||
autoComplete.setOptions(autoCompleteOptions);
|
||||
}
|
||||
|
||||
$(".autocomplete").width("150px");
|
||||
})
|
||||
.fail(function() {
|
||||
$('#friend-input').attr("placeholder", "Unable to lookup friends");
|
||||
app.ajaxError(arguments);
|
||||
});
|
||||
}
|
||||
|
||||
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-friends div[user-id=' + data + ']').length === 0) {
|
||||
var template = $('#template-added-invitation').html();
|
||||
var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value});
|
||||
$('#selected-friends').append(invitationHtml);
|
||||
$('#friend-input').select();
|
||||
selectedFriendIds[data] = true;
|
||||
}
|
||||
else {
|
||||
$('#friend-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();
|
||||
inviteMusiciansDialog.afterShow(data);
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
|
|
@ -248,49 +186,12 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
function createInvitations(sessionId, onComplete) {
|
||||
var callCount = 0;
|
||||
var totalInvitations = 0;
|
||||
$('#selected-friends .invitation').each(function(index, invitation) {
|
||||
callCount++;
|
||||
totalInvitations++;
|
||||
var invite_id = $(invitation).attr('user-id');
|
||||
var invite = {
|
||||
music_session: sessionId,
|
||||
receiver: invite_id
|
||||
};
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/api/invitations",
|
||||
data: invite
|
||||
}).done(function(response) {
|
||||
callCount--;
|
||||
}).fail(app.ajaxError);
|
||||
});
|
||||
// TODO - this is the second time I've used this pattern.
|
||||
// refactor to make a common utility for this.
|
||||
function checker() {
|
||||
if (callCount === 0) {
|
||||
onComplete();
|
||||
} else {
|
||||
context.setTimeout(checker, 10);
|
||||
}
|
||||
}
|
||||
checker();
|
||||
return totalInvitations;
|
||||
}
|
||||
|
||||
function events() {
|
||||
$('#create-session-form').on('submit', submitForm);
|
||||
$('#btn-create-session').on("click", submitForm);
|
||||
$('#selected-friends').on("click", ".invitation a", removeInvitation);
|
||||
$('#musician-access').change(toggleMusicianAccess);
|
||||
$('#fan-access').change(toggleFanAccess);
|
||||
|
||||
$('#btn-choose-friends').click(function() {
|
||||
friendSelectorDialog.showDialog(selectedFriendIds);
|
||||
});
|
||||
|
||||
$('div[layout-id="createSession"] .btn-email-invitation').click(function() {
|
||||
invitationDialog.showEmailDialog();
|
||||
});
|
||||
|
|
@ -373,39 +274,10 @@
|
|||
});
|
||||
}
|
||||
|
||||
function searchFriends(query) {
|
||||
if (query.length < 2) {
|
||||
$('#friend-search-results').empty();
|
||||
return;
|
||||
}
|
||||
var url = "/api/search?query=" + query + "&userId=" + context.JK.currentUserId;
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
success: friendSearchComplete
|
||||
});
|
||||
}
|
||||
|
||||
function friendSearchComplete(response) {
|
||||
// reset search results each time
|
||||
$('#friend-search-results').empty();
|
||||
|
||||
// loop through each
|
||||
$.each(response.friends, function() {
|
||||
// only show friends who are musicians
|
||||
if (this.musician === true) {
|
||||
var template = $('#template-friend-search-results').html();
|
||||
var searchResultHtml = context.JK.fillTemplate(template, {userId: this.id, name: this.first_name + ' ' + this.last_name});
|
||||
$('#friend-search-results').append(searchResultHtml);
|
||||
$('#friend-search-results').attr('style', 'display:block');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initialize(invitationDialogInstance, friendSelectorDialogInstance) {
|
||||
friendSelectorDialog = friendSelectorDialogInstance;
|
||||
function initialize(invitationDialogInstance, inviteMusiciansDialogInstance) {
|
||||
invitationDialog = invitationDialogInstance;
|
||||
$('#create-session-invite-musicians').append(context.JK.fillTemplate($('#template-invite-session-musicians').html(), {}));
|
||||
inviteMusiciansDialog = inviteMusiciansDialogInstance;
|
||||
$('#create-session-invite-musicians').append(inviteMusiciansDialog.friendSelectorHTML);
|
||||
events();
|
||||
loadBands();
|
||||
loadSessionSettings();
|
||||
|
|
@ -420,8 +292,6 @@
|
|||
this.submitForm = submitForm;
|
||||
this.validateForm = validateForm;
|
||||
this.loadBands = loadBands;
|
||||
this.searchFriends = searchFriends;
|
||||
this.addInvitation = addInvitation;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,173 @@
|
|||
(function(context,$) {
|
||||
|
||||
"use strict";
|
||||
|
||||
context.JK = context.JK || {};
|
||||
context.JK.InviteMusiciansDialog = function(app) {
|
||||
var logger = context.JK.logger;
|
||||
var userNames = [];
|
||||
var userIds = [];
|
||||
var userPhotoUrls = [];
|
||||
var friendSelectorDialog = null;
|
||||
var friendSelectorHTML = null;
|
||||
var selectedFriendIds = {};
|
||||
var autoComplete = null;
|
||||
var rest = context.JK.Rest();
|
||||
var selectedIds = {};
|
||||
var newSelections = {};
|
||||
var mySaveCallback;
|
||||
|
||||
this. beforeShow = function(data) {
|
||||
userNames = [];
|
||||
userIds = [];
|
||||
userPhotoUrls = [];
|
||||
}
|
||||
|
||||
this.afterShow = function(data) {
|
||||
friendSelectorDialog.setCallback(friendSelectorCallback);
|
||||
|
||||
var friends = rest.getFriends({ id: context.JK.currentUserId })
|
||||
.done(function(friends) {
|
||||
$.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
|
||||
};
|
||||
|
||||
$('#friend-input').attr("placeholder", "Type a friend\'s name").prop('disabled', false);
|
||||
|
||||
if (!autoComplete) {
|
||||
autoComplete = $('#friend-input').autocomplete(autoCompleteOptions);
|
||||
}
|
||||
else {
|
||||
autoComplete.setOptions(autoCompleteOptions);
|
||||
}
|
||||
|
||||
$(".autocomplete").width("150px");
|
||||
})
|
||||
.fail(function() {
|
||||
$('#friend-input').attr("placeholder", "Unable to lookup friends");
|
||||
app.ajaxError(arguments);
|
||||
});
|
||||
}
|
||||
|
||||
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-friends div[user-id=' + data + ']').length === 0) {
|
||||
var template = $('#template-added-invitation').html();
|
||||
var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value});
|
||||
$('#selected-friends').append(invitationHtml);
|
||||
$('#friend-input').select();
|
||||
selectedFriendIds[data] = true;
|
||||
}
|
||||
else {
|
||||
$('#friend-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 createInvitations(sessionId, onComplete) {
|
||||
var callCount = 0;
|
||||
var totalInvitations = 0;
|
||||
$('#selected-friends .invitation').each(function(index, invitation) {
|
||||
callCount++;
|
||||
totalInvitations++;
|
||||
var invite_id = $(invitation).attr('user-id');
|
||||
var invite = {
|
||||
music_session: sessionId,
|
||||
receiver: invite_id
|
||||
};
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/api/invitations",
|
||||
data: invite
|
||||
}).done(function(response) {
|
||||
callCount--;
|
||||
}).fail(app.ajaxError);
|
||||
});
|
||||
// TODO - this is the second time I've used this pattern.
|
||||
// refactor to make a common utility for this.
|
||||
function checker() {
|
||||
if (callCount === 0) {
|
||||
onComplete();
|
||||
} else {
|
||||
context.setTimeout(checker, 10);
|
||||
}
|
||||
}
|
||||
checker();
|
||||
return totalInvitations;
|
||||
}
|
||||
|
||||
function searchFriends(query) {
|
||||
if (query.length < 2) {
|
||||
$('#friend-search-results').empty();
|
||||
return;
|
||||
}
|
||||
var url = "/api/search?query=" + query + "&userId=" + context.JK.currentUserId;
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
success: friendSearchComplete
|
||||
});
|
||||
}
|
||||
|
||||
function friendSearchComplete(response) {
|
||||
// reset search results each time
|
||||
$('#friend-search-results').empty();
|
||||
|
||||
// loop through each
|
||||
$.each(response.friends, function() {
|
||||
// only show friends who are musicians
|
||||
if (this.musician === true) {
|
||||
var template = $('#template-friend-search-results').html();
|
||||
var searchResultHtml = context.JK.fillTemplate(template, {userId: this.id, name: this.first_name + ' ' + this.last_name});
|
||||
$('#friend-search-results').append(searchResultHtml);
|
||||
$('#friend-search-results').attr('style', 'display:block');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function events() {
|
||||
$('#btn-choose-friends').click(function() {
|
||||
friendSelectorDialog.showDialog(selectedFriendIds);
|
||||
});
|
||||
$('#selected-friends').on("click", ".invitation a", removeInvitation);
|
||||
}
|
||||
|
||||
function showDialog(ids) {
|
||||
}
|
||||
|
||||
this.initialize = function(friendSelectorDialogInstance) {
|
||||
friendSelectorDialog = friendSelectorDialogInstance;
|
||||
friendSelectorHTML = context.JK.fillTemplate($('#template-session-invite-musicians').html());
|
||||
events();
|
||||
};
|
||||
|
||||
this.setCallback = function(callback) {
|
||||
mySaveCallback = callback;
|
||||
}
|
||||
|
||||
this.searchFriends = searchFriends;
|
||||
this.addInvitation = addInvitation;
|
||||
|
||||
this.showDialog = showDialog;
|
||||
return this;
|
||||
};
|
||||
|
||||
})(window,jQuery);
|
||||
|
|
@ -14,6 +14,8 @@
|
|||
var addNewGearDialog;
|
||||
var localRecordingsDialog = null;
|
||||
var recordingFinishedDialog = null;
|
||||
var friendSelectorDialog = null;
|
||||
var inviteMusicianDialog = null;
|
||||
var screenActive = false;
|
||||
var currentMixerRangeMin = null;
|
||||
var currentMixerRangeMax = null;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<!-- Invite Session Musicians Selector Dialog -->
|
||||
<div class="dialog invitemusicians-overlay" layout="dialog" layout-id="select-invites">
|
||||
<div class="invitemusicians-inner">
|
||||
</div>
|
||||
<br clear="all" />
|
||||
<div class="left">
|
||||
<a id="btn-cancel-invites" layout-action="close" class="button-grey">CANCEL</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a id="btn-save-invites" layout-action="close" class="button-orange">INVITE</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- invite musician friend selector template -->
|
||||
<script type="text/template" id="template-session-invite-musicians">
|
||||
<div>
|
||||
<div class="right" layout-link="select-friends">
|
||||
<a href="#" id="btn-choose-friends" class="button-grey">CHOOSE FRIENDS</a>
|
||||
</div>
|
||||
<div style="margin-right:140px;">
|
||||
Start typing friends' names or:
|
||||
</div>
|
||||
<div class="clearall"></div>
|
||||
</div>
|
||||
<br />
|
||||
</script>
|
||||
|
|
@ -178,15 +178,4 @@
|
|||
<script type="text/template" id="template-genre-option">
|
||||
<option value="{value}">{label}</option>
|
||||
</script>
|
||||
<script type="text/template" id="template-invite-session-musicians">
|
||||
<div>
|
||||
<div class="right" layout-link="select-friends">
|
||||
<a href="#" id="btn-choose-friends" class="button-grey">CHOOSE FRIENDS</a>
|
||||
</div>
|
||||
<div style="margin-right:140px;">
|
||||
Start typing friends' names or:
|
||||
</div>
|
||||
<div class="clearall"></div>
|
||||
</div>
|
||||
<br />
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -105,6 +105,9 @@
|
|||
var friendSelectorDialog = new JK.FriendSelectorDialog(JK.app);
|
||||
friendSelectorDialog.initialize();
|
||||
|
||||
var inviteMusiciansDialog = new JK.InviteMusiciansDialog(JK.app);
|
||||
inviteMusiciansDialog.initialize(friendSelectorDialog);
|
||||
|
||||
var userDropdown = new JK.UserDropdown(JK.app);
|
||||
JK.UserDropdown = userDropdown;
|
||||
userDropdown.initialize(invitationDialog);
|
||||
|
|
@ -148,7 +151,7 @@
|
|||
JK.Banner.initialize();
|
||||
|
||||
var createSessionScreen = new JK.CreateSessionScreen(JK.app);
|
||||
createSessionScreen.initialize(invitationDialog, friendSelectorDialog);
|
||||
createSessionScreen.initialize(invitationDialog, inviteMusiciansDialog);
|
||||
|
||||
var bandSetupScreen = new JK.BandSetupScreen(JK.app);
|
||||
bandSetupScreen.initialize(invitationDialog, friendSelectorDialog);
|
||||
|
|
|
|||
Loading…
Reference in New Issue