417 lines
13 KiB
JavaScript
417 lines
13 KiB
JavaScript
(function (context, $) {
|
|
|
|
"use strict";
|
|
|
|
|
|
context.JK = context.JK || {};
|
|
context.JK.AccountSessionDetail = function (app) {
|
|
var EVENTS = context.JK.EVENTS;
|
|
var logger = context.JK.logger;
|
|
var rest = context.JK.Rest();
|
|
var sessionUtils = context.JK.SessionUtils;
|
|
var sessionId = null;
|
|
var sessionData = null;
|
|
var rsvpData = null;
|
|
var $screen = null;
|
|
var $cancelRsvpBtn = null;
|
|
var $inviteOthersBtn = null;
|
|
var $sessionPageBtn = null;
|
|
var $sessionDetail = null;
|
|
var $shareUrl = null;
|
|
var $templateOpenSlots = null;
|
|
var instrument_logo_map = context.JK.getInstrumentIconMap24();
|
|
var invitationDialog = null;
|
|
var inviteMusiciansUtil = null;
|
|
var friendInput=null;
|
|
|
|
|
|
var LATENCY = {
|
|
GOOD : {description: "GOOD", style: "latency-green", min: 0.0, max: 20.0},
|
|
MEDIUM : {description: "MEDIUM", style: "latency-yellow", min: 20.0, max: 40.0},
|
|
POOR : {description: "POOR", style: "latency-red", min: 40.0, max: 10000000000.0},
|
|
UNREACHABLE: {description: "UNREACHABLE", style: "latency-grey", min: -1, max: -1},
|
|
UNKNOWN: {description: "UNKNOWN", style: "latency-grey", min: -2, max: -2}
|
|
};
|
|
|
|
function beforeShow(data) {
|
|
sessionId = data.id;
|
|
loadSessionData();
|
|
}
|
|
|
|
function afterShow(data) {
|
|
}
|
|
|
|
function inviteMusicians(e) {
|
|
e.preventDefault();
|
|
|
|
friendInput = inviteMusiciansUtil.inviteSessionUpdate('#update-session-invite-musicians',
|
|
sessionId);
|
|
inviteMusiciansUtil.loadFriends();
|
|
$(friendInput).show();
|
|
// invitationDialog.showEmailDialog();
|
|
}
|
|
|
|
function cancelRsvpRequest(e) {
|
|
e.preventDefault();
|
|
|
|
var rsvpCancelDlg = new context.JK.RsvpCancelDialog(app, sessionData.id, sessionData.rsvpId);
|
|
rsvpCancelDlg.initialize();
|
|
app.layout.showDialog('rsvp-cancel-dialog')
|
|
.one(EVENTS.RSVP_CANCELED, function() {
|
|
refreshSessionDetail();
|
|
})
|
|
.one(EVENTS.DIALOG_CLOSED, function() {
|
|
$(this).unbind(EVENTS.RSVP_CANCELED);
|
|
});
|
|
}
|
|
|
|
function openSessionPage(e) {
|
|
|
|
context.JK.popExternalLink('/sessions/' + sessionId + '/details')
|
|
return false;
|
|
}
|
|
|
|
|
|
function buildRsvpRequestActionParams(request_id, action) {
|
|
var params = {};
|
|
params.session_id = sessionData.id;
|
|
|
|
$.each(rsvpData, function(index, rsvp) {
|
|
if (rsvp.id == request_id) {
|
|
params.rsvp_responses = [];
|
|
|
|
$.each(rsvp.rsvp_requests_rsvp_slots, function(index, rsvp_slot) {
|
|
params.rsvp_responses.push({request_slot_id: rsvp_slot.id, accept: action});
|
|
})
|
|
}
|
|
});
|
|
|
|
return params;
|
|
}
|
|
|
|
function reset() {
|
|
$sessionDetail.html("");
|
|
}
|
|
|
|
function refreshSessionDetail(response) {
|
|
reset();
|
|
loadSessionData();
|
|
}
|
|
|
|
function approveRsvpRequest(e) {
|
|
e.preventDefault();
|
|
|
|
var rsvpId = $(e.target).attr('request-id');
|
|
var params = buildRsvpRequestActionParams(rsvpId, true);
|
|
|
|
rest.updateRsvpRequest(rsvpId, params)
|
|
.done(refreshSessionDetail)
|
|
.fail(app.ajaxError);
|
|
}
|
|
|
|
function declineRsvpRequest(e) {
|
|
e.preventDefault();
|
|
|
|
var rsvpId = $(e.target).attr('request-id');
|
|
var params = buildRsvpRequestActionParams(rsvpId, false);
|
|
|
|
rest.updateRsvpRequest(rsvpId, params)
|
|
.done(refreshSessionDetail)
|
|
.fail(app.ajaxError);
|
|
}
|
|
|
|
function events() {
|
|
$inviteOthersBtn.on('click', inviteMusicians);
|
|
$cancelRsvpBtn.on('click', cancelRsvpRequest);
|
|
$sessionPageBtn.on('click', openSessionPage);
|
|
$screen.find(".approveRsvpRequest").on('click', approveRsvpRequest);
|
|
$screen.find(".declineRsvpRequest").on('click', declineRsvpRequest);
|
|
$(friendInput).focus(function() { $(this).val(''); })
|
|
|
|
$screen.find(".cancelSessionRsvp").on('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
var rsvpCancelDlg = new context.JK.RsvpCancelDialog(app, sessionData.id, $(this).attr('request-id'));
|
|
rsvpCancelDlg.initialize();
|
|
context.JK.app.layout.showDialog('rsvp-cancel-dialog');
|
|
});
|
|
}
|
|
|
|
function loadSessionData() {
|
|
rest.getSessionHistory(sessionId)
|
|
.done(function(response) {
|
|
sessionData = response;
|
|
|
|
rest.getRsvpRequests(sessionId)
|
|
.done(function(rsvpResponse) {
|
|
rsvpData = rsvpResponse;
|
|
|
|
renderSession();
|
|
})
|
|
.fail(app.ajaxError);
|
|
})
|
|
.fail(app.ajaxError);
|
|
}
|
|
|
|
function renderSession() {
|
|
var hasPending = false;
|
|
var isOwner = false;
|
|
if (sessionData.user_id == context.JK.currentUserId) {
|
|
if (sessionData.pending_rsvp_requests.length > 0) {
|
|
hasPending = true;
|
|
}
|
|
if (hasPending)
|
|
sessionData.notification_msg = "You have new RSVPs to review and approve, see details.";
|
|
else
|
|
sessionData.notification_msg = "";
|
|
isOwner = true;
|
|
}
|
|
else {
|
|
$.each(sessionData.pending_rsvp_requests, function(index, request) {
|
|
if (request.user_id == context.JK.currentUserId) {
|
|
hasPending = true;
|
|
sessionData.rsvpId = request.id;
|
|
}
|
|
});
|
|
if (hasPending)
|
|
sessionData.notification_msg = "Your RSVP has not been processed by session organizer yet";
|
|
else
|
|
sessionData.notification_msg = "";
|
|
isOwner = false;
|
|
}
|
|
|
|
sessionData.isOwner = isOwner;
|
|
|
|
if (isOwner) {
|
|
$inviteOthersBtn.show();
|
|
$cancelRsvpBtn.hide();
|
|
}
|
|
else if (hasPending) {
|
|
$inviteOthersBtn.hide();
|
|
$cancelRsvpBtn.show();
|
|
}
|
|
|
|
$shareUrl.text(sessionData.share_url);
|
|
|
|
var pendingRsvpHtml = "";
|
|
if (isOwner) {
|
|
pendingRsvpHtml = generatePendingRsvps();
|
|
}
|
|
var sessionRsvpsHtml = generateSessionRsvps();
|
|
var sessionNeededHtml = generateSessionNeeded();
|
|
var sessionInvitedHtml = generateSessionInvited();
|
|
var sessionPropertiesHtml = generateSessionProperties();
|
|
|
|
var template = context._.template(
|
|
$('#template-account-session-detail').html(),
|
|
{ has_pending: hasPending, is_owner: isOwner, notification_msg: sessionData.notification_msg,
|
|
pending_rsvps: pendingRsvpHtml, session_rsvps: sessionRsvpsHtml, still_needed: sessionNeededHtml,
|
|
invited_users: sessionInvitedHtml, session_properties: sessionPropertiesHtml, id: sessionData.id},
|
|
{variable: 'data'}
|
|
);
|
|
|
|
$sessionDetail.html(template);
|
|
|
|
events();
|
|
}
|
|
|
|
function createLatency(user) {
|
|
var latencyStyle = LATENCY.UNREACHABLE.style, latencyDescription = LATENCY.UNREACHABLE.description
|
|
if (user.id === context.JK.currentUserId) {
|
|
latencyStyle = LATENCY.GOOD.style, latencyDescription = LATENCY.GOOD.description;
|
|
}
|
|
|
|
else {
|
|
var latency = user.latency;
|
|
|
|
if (!latency || latency === 1000) {
|
|
// 1000 is a magical number returned by new scoring API to indicate one or more people in the session have an unknown score
|
|
latencyDescription = LATENCY.UNKNOWN.description;
|
|
latencyStyle = LATENCY.UNKNOWN.style;
|
|
}
|
|
else {
|
|
if (latency <= LATENCY.GOOD.max) {
|
|
latencyDescription = LATENCY.GOOD.description;
|
|
latencyStyle = LATENCY.GOOD.style;
|
|
}
|
|
else if (latency > LATENCY.MEDIUM.min && latency <= LATENCY.MEDIUM.max) {
|
|
latencyDescription = LATENCY.MEDIUM.description;
|
|
latencyStyle = LATENCY.MEDIUM.style;
|
|
}
|
|
else {
|
|
latencyDescription = LATENCY.POOR.description;
|
|
latencyStyle = LATENCY.POOR.style;
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
latency_style: latencyStyle,
|
|
latency_text: latencyDescription
|
|
};
|
|
}
|
|
|
|
function generatePendingRsvps() {
|
|
var resultHtml = "";
|
|
var rsvpHtml = "";
|
|
var instrumentLogoHtml = "";
|
|
var latencyHtml = "";
|
|
$.each(sessionData.pending_rsvp_requests, function(index, request) {
|
|
if (request.user_id != context.JK.currentUserId) {
|
|
if ("instrument_list" in request && request.instrument_list != null) {
|
|
console.log(request.instrument_list)
|
|
$.each(request.instrument_list, function (index, instrument) {
|
|
var instrumentId = instrument == null ? null : instrument.id;
|
|
var inst = context.JK.getInstrumentIcon24(instrumentId);
|
|
instrumentLogoHtml += '<img data-instrument-id="' + instrumentId + '" src="' + inst + '" width="24" height="24" /> ';
|
|
})
|
|
}
|
|
|
|
latencyHtml = context._.template(
|
|
$("#template-account-session-latency").html(),
|
|
createLatency(request.user),
|
|
{variable: 'data'}
|
|
);
|
|
|
|
var avatar_url = context.JK.resolveAvatarUrl(request.user.photo_url);
|
|
|
|
rsvpHtml = context._.template(
|
|
$("#template-account-pending-rsvp").html(),
|
|
{user_id: request.user_id, avatar_url: avatar_url,
|
|
user_name: request.user.name, instruments: instrumentLogoHtml,
|
|
latency: latencyHtml, request_id: request.id},
|
|
{variable: 'data'}
|
|
);
|
|
|
|
resultHtml += rsvpHtml;
|
|
instrumentLogoHtml = "";
|
|
}
|
|
});
|
|
|
|
return resultHtml;
|
|
}
|
|
|
|
function generateSessionRsvps() {
|
|
var resultHtml = "";
|
|
var rsvpHtml = "";
|
|
var instrumentLogoHtml = "";
|
|
var latencyHtml = "";
|
|
$.each(sessionData.approved_rsvps, function(index, request) {
|
|
if ("instrument_list" in request) {
|
|
$.each(request.instrument_list, function(index, instrument) {
|
|
var instrumentId = instrument == null ? null : instrument.id;
|
|
var inst = context.JK.getInstrumentIcon24(instrumentId);
|
|
instrumentLogoHtml += '<img src="' + inst + '" width="24" height="24" /> ';
|
|
});
|
|
}
|
|
|
|
latencyHtml = context._.template(
|
|
$("#template-account-session-latency").html(),
|
|
createLatency(request),
|
|
{variable: 'data'}
|
|
);
|
|
|
|
var avatar_url = request.resolved_photo_url;
|
|
|
|
var request_id = null;
|
|
|
|
$.each(rsvpData, function(index, rsvp) {
|
|
if (rsvp.user_id == request.id) {
|
|
var approved = true;
|
|
$.each(rsvp, function(index, rsvp_slot) {
|
|
if (rsvp_slot.approved == false) {
|
|
approved = false;
|
|
}
|
|
});
|
|
|
|
if (approved) {
|
|
request_id = rsvp.id;
|
|
}
|
|
}
|
|
});
|
|
|
|
rsvpHtml = context._.template(
|
|
$("#template-account-session-rsvp").html(),
|
|
{id: request.id, avatar_url: avatar_url,
|
|
user_name: request.name, instruments: instrumentLogoHtml,
|
|
latency: latencyHtml, is_owner: sessionData.isOwner, request_id: request_id},
|
|
{variable: 'data'}
|
|
);
|
|
|
|
resultHtml += rsvpHtml;
|
|
instrumentLogoHtml = "";
|
|
});
|
|
|
|
return resultHtml;
|
|
}
|
|
|
|
function generateSessionNeeded() {
|
|
var resultHtml = "";
|
|
if(sessionData['is_unstructured_rsvp?']) {
|
|
resultHtml += sessionUtils.createOpenSlot($templateOpenSlots, {description: 'Any Instrument'});
|
|
}
|
|
|
|
$.each(sessionData.open_slots, function(index, slot) {
|
|
resultHtml += sessionUtils.createOpenSlot($templateOpenSlots, slot);
|
|
});
|
|
|
|
return resultHtml;
|
|
}
|
|
|
|
function generateSessionInvited() {
|
|
var resultHtml = "";
|
|
var avatar_url = "";
|
|
$.each(sessionData.invitations, function(index, invitation) {
|
|
avatar_url = invitation.receiver_avatar_url;
|
|
|
|
resultHtml += context._.template(
|
|
$("#template-account-invited").html(),
|
|
{avatar_url: avatar_url, user_id: invitation.reciever_id},
|
|
{variable: 'data'}
|
|
);
|
|
});
|
|
|
|
return resultHtml;
|
|
}
|
|
|
|
function generateSessionProperties() {
|
|
var resultHtml = "";
|
|
resultHtml = context._.template(
|
|
$("#template-account-session-properties").html(),
|
|
sessionData,
|
|
{variable: 'data'}
|
|
);
|
|
return resultHtml;
|
|
}
|
|
|
|
function initialize(invitationDlg) {
|
|
var screenBindings = {
|
|
'beforeShow': beforeShow,
|
|
'afterShow': afterShow
|
|
};
|
|
|
|
app.bindScreen('account/sessionDetail', screenBindings);
|
|
app.bindScreen('account/sessionDetail', screenBindings);
|
|
|
|
$screen = $(".account-session-detail");
|
|
$inviteOthersBtn = $screen.find(".sessions-header .invite-others");
|
|
$cancelRsvpBtn = $screen.find(".sessions-header .cancel-rsvp");
|
|
$sessionPageBtn = $screen.find(".sessions-header .session-detail-page");
|
|
$sessionDetail = $screen.find("#account-session-detail-div");
|
|
$shareUrl = $screen.find('.share-url');
|
|
invitationDialog = invitationDlg;
|
|
|
|
inviteMusiciansUtil = new JK.InviteMusiciansUtil(JK.app);
|
|
inviteMusiciansUtil.initialize(JK.FriendSelectorDialogInstance);
|
|
|
|
$templateOpenSlots = $('#template-open-slots');
|
|
}
|
|
|
|
this.initialize = initialize;
|
|
this.beforeShow = beforeShow;
|
|
this.afterShow = afterShow;
|
|
|
|
return this;
|
|
};
|
|
|
|
})(window, jQuery); |