VRFS-1985 wip start session from Find Session screen

This commit is contained in:
Brian Smith 2015-01-07 23:18:07 -05:00
parent 3fb5ab89d9
commit 79eec652d1
11 changed files with 214 additions and 39 deletions

View File

@ -0,0 +1,85 @@
(function(context,$) {
"use strict";
context.JK = context.JK || {};
context.JK.SessionStartDialog = function(app, session) {
var logger = context.JK.logger;
var sessionUtils = context.JK.SessionUtils;
var $dialog = null;
var dialogId = 'session-start-dialog';
var $btnStartSession = null;
function beforeShow(data) {
}
function afterShow(data) {
}
function afterHide() {
}
function showDialog() {
return app.layout.showDialog(dialogId);
}
function events() {
$btnStartSession.unbind('click');
$btnStartSession.click(function(e) {
context.location = '/client#/session/' + session.id;
app.layout.closeDialog(dialogId);
});
}
function initializeSessionDetails() {
$dialog.find('#session-start-type-disp').html('Now!');
$dialog.find('#session-name-disp').html(session.name);
$dialog.find('#session-description-disp').html(session.description);
if (session.music_notations && session.music_notations.length > 0) {
$dialog.find('#session-notations-disp').html("Notations: " + session.music_notations.join(', '));
}
if (session.band) {
$dialog.find('#session-band-disp').html(band.name);
}
else {
$dialog.find('#session-band-disp').html('N/A');
}
$dialog.find('#session-language-disp').html(session.language_description);
var sessionInvitedString = '';
$dialog.find('#session-invited-disp').html(sessionInvitedString);
$dialog.find('#session-instruments-me-disp').html('TBD');
$dialog.find('#session-instruments-rsvp-disp').html('TBD');
$dialog.find('#session-musician-access-disp').html('Musicians: ' + session.musician_access_description);
$dialog.find('#session-fans-access-disp').html('Fans: ' + session.fan_access_description);
$dialog.find('#session-policy-disp').html(session.legal_policy);
}
function initialize() {
var dialogBindings = {
'beforeShow' : beforeShow,
'afterShow' : afterShow,
'afterHide': afterHide
};
app.bindDialog(dialogId, dialogBindings);
$dialog = $('[layout-id="' + dialogId + '"]');
$btnStartSession = $dialog.find('.btnStartSession');
initializeSessionDetails();
events();
}
this.initialize = initialize;
this.showDialog = showDialog;
}
return this;
})(window,jQuery);

View File

@ -200,14 +200,14 @@
createSessionSettings.startDate = createSessionSettings.startDate || (new Date().toDateString());
$("#session-start-date").val(createSessionSettings.startDate);
$screen.find("#session-start-date").val(createSessionSettings.startDate);
toggleDate(true);
toggleStartTime();
toggleStepStatus();
sessionUtils.defaultTimezone($timezoneList);
if(firstTimeShown) {
firstTimeShown = false;
$('#session-when-start-scheduled').iCheck('check');
$screen.find('#session-when-start-scheduled').iCheck('check');
}
}
@ -217,7 +217,7 @@
function beforeShowStep3() {
rest.getBands(context.JK.currentUserId)
.done(function(result) {
var options = $("#session-band-list");
var options = $screen.find("#session-band-list");
options.empty();
options.append($("<option />").val('').text('No'));
$.each(result, function(idx, item) {
@ -251,10 +251,10 @@
var sessionName = createSessionSettings.name;
sessionName += ' (' + createSessionSettings.genresValues[0] + ')';
$('#session-name-disp').html(sessionName);
$screen.find('#session-name-disp').html(sessionName);
var sessionDescription = createSessionSettings.description;
$('#session-description-disp').html(sessionDescription);
$screen.find('#session-description-disp').html(sessionDescription);
var sessionNotations = [];
for (var i = 0; i < createSessionSettings.notations.length; i++) {
@ -262,16 +262,16 @@
sessionNotations.push(name);
}
if(sessionNotations.length > 0) {
$('#session-notations-disp').html("Notations: " + sessionNotations.join(', '));
$screen.find('#session-notations-disp').html("Notations: " + sessionNotations.join(', '));
}
else {
$('#session-notations-disp').html('');
$screen.find('#session-notations-disp').html('');
}
$('#session-language-disp').html(createSessionSettings.language.label);
$('#session-band-disp').html(createSessionSettings.band.label);
$screen.find('#session-language-disp').html(createSessionSettings.language.label);
$screen.find('#session-band-disp').html(createSessionSettings.band.label);
var plusMusicians = $('#session-plus-musicians')[0].checked;
var plusMusicians = $screen.find('#session-plus-musicians')[0].checked;
var sessionInvited = [];
var invitedFriends = inviteMusiciansUtil.getInvitedFriendNames();
@ -302,7 +302,7 @@
else
sessionInvitedString += ", plus any interested JamKazam musicians who want to join us";
}
$('#session-invited-disp').html(sessionInvitedString);
$screen.find('#session-invited-disp').html(sessionInvitedString);
if (createSessionSettings.createType == '<%= MusicSession::CREATE_TYPE_START_SCHEDULED%>') {
var session = scheduledSessions[createSessionSettings.selectedSessionId];
@ -315,7 +315,7 @@
});
}
});
$('#session-instruments-me-disp').html(instruments_me.join(', '));
$screen.find('#session-instruments-me-disp').html(instruments_me.join(', '));
}
if (session.open_slots.length > 0) {
@ -334,7 +334,7 @@
$.map(instruments_rsvp_arr, function(val, i) {
instruments_str_arr.push(i + ' (' + val.count + ') (' + val.level + ')');
})
$('#session-instruments-rsvp-disp').html(instruments_str_arr.join(', '));
$screen.find('#session-instruments-rsvp-disp').html(instruments_str_arr.join(', '));
}
}
else {
@ -342,7 +342,7 @@
$.each(getCreatorInstruments(), function(index, instrument) {
instruments_me.push(instrument.name);
});
$('#session-instruments-me-disp').html(instruments_me.join(', '));
$screen.find('#session-instruments-me-disp').html(instruments_me.join(', '));
var instruments_rsvp = [];
var otherInstruments = instrumentRSVP.getSelectedInstruments();
@ -353,13 +353,13 @@
$.each(otherInstruments, function(index, instrument) {
instruments_rsvp.push(instrument.name + ' (' + instrument.count + ') (' + proficiencyDescriptionMap[instrument.level] + ')');
});
$('#session-instruments-rsvp-disp').html(instruments_rsvp.join(', '));
$screen.find('#session-instruments-rsvp-disp').html(instruments_rsvp.join(', '));
}
$('#session-musician-access-disp').html('Musicians: ' + createSessionSettings.musician_access.label);
$('#session-fans-access-disp').html('Fans: ' + createSessionSettings.fans_access.label);
$screen.find('#session-musician-access-disp').html('Musicians: ' + createSessionSettings.musician_access.label);
$screen.find('#session-fans-access-disp').html('Fans: ' + createSessionSettings.fans_access.label);
$('#session-policy-disp').html(createSessionSettings.session_policy);
$screen.find('#session-policy-disp').html(createSessionSettings.session_policy);
}
function beforeMoveStep1() {
@ -428,7 +428,7 @@
createSessionSettings.recurring_mode.value = 'once';
}
else {
createSessionSettings.startDate = $('#session-start-date').val();
createSessionSettings.startDate = $screen.find('#session-start-date').val();
createSessionSettings.startTime = $startTimeList.val();
createSessionSettings.endTime = $endTimeList.val();
createSessionSettings.notations = [];
@ -437,7 +437,7 @@
createSessionSettings.timezone.label = $timezoneList.get(0).options[$timezoneList.get(0).selectedIndex].text;
createSessionSettings.recurring_mode.label = $recurringModeList.get(0).options[$recurringModeList.get(0).selectedIndex].text;
createSessionSettings.recurring_mode.value = $recurringModeList.val();
createSessionSettings.open_rsvps = $('#session-plus-musicians')[0].checked;
createSessionSettings.open_rsvps = $screen.find('#session-plus-musicians')[0].checked;
}
return true;
@ -503,22 +503,22 @@
function beforeMoveStep2() {
var isValid = true;
var name = $('#session-name').val();
var name = $screen.find('#session-name').val();
if (!name) {
$('#divSessionName .error-text').remove();
$('#divSessionName').addClass("error");
$('#session-name').after("<ul class='error-text'><li>Name is required</li></ul>");
$screen.find('#session-name').after("<ul class='error-text'><li>Name is required</li></ul>");
isValid = false;
}
else {
$('#divSessionName').removeClass("error");
}
var description = $('#session-description').val();
var description = $screen.find('#session-description').val();
if (!description) {
$('#divSessionDescription .error-text').remove();
$('#divSessionDescription').addClass("error");
$('#session-description').after("<ul class='error-text'><li>Description is required</li></ul>");
$screen.find('#session-description').after("<ul class='error-text'><li>Description is required</li></ul>");
isValid = false;
}
else {
@ -558,13 +558,13 @@
else
createSessionSettings.band.label = $bandList.get(0).options[$bandList.get(0).selectedIndex].text;
createSessionSettings.open_rsvps = $('#session-plus-musicians')[0].checked;
createSessionSettings.open_rsvps = $screen.find('#session-plus-musicians')[0].checked;
return true;
}
function beforeMoveStep4() {
var isValid = true;
var sessionPolicyChecked = $('#session-policy-confirm').is(':checked');
var sessionPolicyChecked = $screen.find('#session-policy-confirm').is(':checked');
if (!sessionPolicyChecked) {
$('#divSessionPolicy .error-text').remove();
$('#divSessionPolicy').addClass("error");
@ -576,11 +576,11 @@
}
createSessionSettings.session_policy = $('input[name="session-policy-type"][checked="checked"]').attr('policy-id');
var $musicianAccess = $('#session-musician-access');
var $musicianAccess = $screen.find('#session-musician-access');
createSessionSettings.musician_access.value = $musicianAccess.val();
createSessionSettings.musician_access.label = $musicianAccess.get(0).options[$musicianAccess.get(0).selectedIndex].text;
var $fansAccess = $('#session-fans-access');
var $fansAccess = $screen.find('#session-fans-access');
createSessionSettings.fans_access.value = $fansAccess.val();
createSessionSettings.fans_access.label = $fansAccess.get(0).options[$fansAccess.get(0).selectedIndex].text;
@ -975,7 +975,7 @@
}
function toggleDate(dontRebuildDropdowns) {
var selectedDate = new Date($('#session-start-date').val());
var selectedDate = new Date($screen.find('#session-start-date').val());
var currentDate = new Date();
var startIndex = 0;
@ -1046,7 +1046,7 @@
radioClass: 'iradio_minimal',
inheritClass: true
});
$("#session-start-date").datepicker({
$screen.find("#session-start-date").datepicker({
dateFormat: "D d MM yy",
onSelect: function() { toggleDate(); }
}

View File

@ -19,7 +19,6 @@
var $musicianTemplate = $('#template-musician-info');
var showJoinLink = true;
var showListenLink = true;
var showRsvpLink = true;
// related to listen
function stateChange(e, data) {
@ -359,10 +358,19 @@
var showRsvpLink = true;
var noLinkText = '';
$('.rsvp-link-text', $parentRow).hide();
if (approvedRsvpId) {
if (session.creator.id === context.JK.currentUserId) {
showRsvpLink = false;
noLinkText = $('<span class="text">You have been confirmed for this session. <a href="#" style="color: #fc0">Cancel</a></span>');
noLinkText = $('<span class="text"><a href="#" style="color: #fc0">Start session now?</a></span>');
noLinkText.find('a').click(function() {
ui.launchSessionStartDialog(session);
return false;
});
}
else if (approvedRsvpId) {
showRsvpLink = false;
noLinkText = $('<span class="text">You have been confirmed for this session. <a href="#" style="color: #fc0">Cancel RSVP</a></span>');
noLinkText.find('a').click(function() {
ui.launchRsvpCancelDialog(session.id, approvedRsvpId)
.one(EVENTS.RSVP_CANCELED, function() {
@ -379,7 +387,7 @@
}
else if (pendingRsvpId) {
showRsvpLink = false;
noLinkText = $('<span class="text">You have RSVP\'ed to this session. <a href="#" style="color: #fc0">Cancel</a></span>');
noLinkText = $('<span class="text">You have RSVP\'ed to this session. <a href="#" style="color: #fc0">Cancel RSVP</a></span>');
noLinkText.find('a').click(function() {
ui.launchRsvpCancelDialog(session.id, pendingRsvpId)
.one(EVENTS.RSVP_CANCELED, function() {
@ -406,6 +414,7 @@
if (showRsvpLink) {
$('.rsvp-msg', $parentRow).hide();
$('.rsvp-link', $parentRow).show();
$('.rsvp-link-text', $parentRow).show();
$('.rsvp-link', $parentRow).click(function(evt) {
ui.launchRsvpSubmitDialog(session.id)

View File

@ -53,6 +53,12 @@
return rsvpDialog.showDialog();
}
function launchSessionStartDialog(session) {
var sessionStartDialog = new JK.SessionStartDialog(JK.app, session);
sessionStartDialog.initialize();
return sessionStartDialog.showDialog();
}
this.addSessionLike = addSessionLike;
this.addRecordingLike = addRecordingLike;
this.launchCommentDialog = launchCommentDialog;
@ -60,6 +66,7 @@
this.launchRsvpSubmitDialog = launchRsvpSubmitDialog;
this.launchRsvpCancelDialog = launchRsvpCancelDialog;
this.launchRsvpCreateSlotDialog = launchRsvpCreateSlotDialog;
this.launchSessionStartDialog = launchSessionStartDialog;
return this;
};

View File

@ -70,8 +70,8 @@
min-height: 600px;
}
.dialog-overlay-sm {
width: 600px;
.dialog-overlay-lg {
width: 800px;
height: auto;
position: fixed;
left: 50%;
@ -90,6 +90,18 @@
color: #aaa;
}
.dialog-overlay-sm {
width: 600px;
height: auto;
position: fixed;
left: 50%;
top: 20%;
margin-left: -300px;
background-color: #333;
border: 1px solid #ed3618;
z-index: 1000;
}
.dialog-overlay-sm .dialog-inner {
width: 550px;
height: auto;

View File

@ -0,0 +1,17 @@
.session-wrapper {
padding: 10px 35px 0 0px;
white-space: initial;
h3 {
font-weight: bold;
color:#dedede;
}
> div.session {
width: 50%;
&.right {
font-size: 13px;
}
}
}

View File

@ -196,7 +196,7 @@
<tr>
<td>
</td>
<td>
<td style="white-space: nowrap">
<span class="rsvp-msg" style="display:none;">You cannot RSVP to this session.</span>
<a class="rsvp-link">
<%= image_tag "content/rsvp-icon.jpg", :size => "40x40" %>

View File

@ -402,9 +402,9 @@
<h3 class="mt20">What instruments/parts do you need?</h3>
<div class="left ib w20 mt5">Me:</div>
<div class="left ib w75 mt5" id="session-instruments-me-disp" class="mt5"></div>
<div class="left ib w75 mt5" id="session-instruments-me-disp"></div>
<div class="clearall left ib w20">Others:</div>
<div class="left ib w75" id="session-instruments-rsvp-disp" class="mt5"></div><br clear="all">
<div class="left ib w75 mt5" id="session-instruments-rsvp-disp"></div><br clear="all">
<h3 class="mt20">What access policies are in effect?</h3>
<div id="session-musician-access-disp" class="mt5"></div>

View File

@ -18,6 +18,7 @@
= render 'dialogs/rsvpSubmitDialog'
= render 'dialogs/rsvpCancelDialog'
= render 'dialogs/rsvpCreateSlotDialog'
= render 'dialogs/sessionStartDialog'
= render 'dialogs/sessionCancelDialog'
= render 'dialogs/signinDialog'
= render 'dialogs/signupDialog'

View File

@ -0,0 +1,44 @@
.dialog.dialog-overlay-lg layout='dialog' layout-id='session-start-dialog' id='session-start-dialog'
.content-head
= image_tag "content/icon_add.png", {:width => 24, :height => 24, :class => 'content-icon' }
h1 Start Session
.dialog-inner
.session-wrapper
.left.w55
h3 When are you starting your session?
.mt5 id='session-start-type-disp'
h3.mb5.mt20 What are you playing?
em id='session-name-disp'
#session-description-disp.mt5
#session-notations-disp.mt5
h3.mt20 Which band is playing?
#session-band-disp.mt5
h3.mt20 What language will be spoken?
#session-language-disp.mt5
.right.w40
h3 Who is invited?
#session-invited-disp.mt5
h3.mt20 What instruments/parts do you need?
.left.ib.w20.mt5 Me:
#session-instruments-me-disp.left.ib.w75.mt5
.clearall.left.ib.w20 Others:
#session-instruments-rsvp-disp.left.ib.w75.mt5
br clear='all'
h3.mt20 What access policies are in effect?
#session-musician-access-disp.mt5
#session-fans-access-disp
h3.mt20 What legal policy is in effect?
#session-policy-disp.mt5
.clearall
br
br
.buttons
.right
a.button-grey class='btnCancel' layout-action='cancel' CANCEL
a.button-orange class='btnStartSession' START SESSION