VRFS-3244 : New navigation logic for band profile editor -- incremental.
This commit is contained in:
Steven Miers
parent
1c93cdb797
commit
429d5ad35d
|
|
@ -481,7 +481,7 @@
|
|||
$('#band-profile-social-link').unbind('click').click(renderSocial);
|
||||
|
||||
$("#btn-edit-band-profile").unbind('click').click(function() {
|
||||
context.location = "/client#/band/setup/" + bandId + '/step1';
|
||||
context.location = "/client#/band/setup/" + bandId + '/step0';
|
||||
return false;
|
||||
});
|
||||
$("#btn-edit-band-info").unbind('click').click(function() {
|
||||
|
|
|
|||
|
|
@ -26,6 +26,52 @@
|
|||
// TODO: Use a single variable for a mutually exclusive option:
|
||||
var step1, step2;
|
||||
var isSaving = false;
|
||||
var currentStep = 0;
|
||||
var STEPS_COUNT=5;
|
||||
|
||||
function navBack() {
|
||||
if (currentStep>0) {
|
||||
saveBand(function() {
|
||||
currentStep--
|
||||
renderCurrentPage()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function navCancel() {
|
||||
resetForm()
|
||||
window.history.go(-1)
|
||||
return false
|
||||
}
|
||||
|
||||
function navNext() {
|
||||
if (currentStep<STEPS_COUNT-1) {
|
||||
saveBand(function(band) {
|
||||
currentStep++
|
||||
renderCurrentPage()
|
||||
})
|
||||
} else {
|
||||
saveBand(function(band) {
|
||||
resetForm()
|
||||
showProfile(band.id);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function renderCurrentPange() {
|
||||
$(".band-step").addClass("hidden")
|
||||
$("#band-setup-step-" + currentStep).removeClass("hidden")
|
||||
if(currentStep==0) {
|
||||
$("#btn-band-setup-back").addClass("hidden")
|
||||
$("#btn-band-setup-next").removeClass("hidden").html("SAVE & NEXT")
|
||||
} else if(currentStep<STEPS_COUNT-1) {
|
||||
$("#btn-band-setup-back").removeClass("hidden")
|
||||
$("#btn-band-setup-next").removeClass("hidden").html("SAVE & NEXT")
|
||||
} else {
|
||||
$("#btn-band-setup-back").removeClass("hidden")
|
||||
$("#btn-band-setup-next").removeClass("hidden").html("SAVE & FINISH")
|
||||
}
|
||||
}
|
||||
|
||||
function is_new_record() {
|
||||
return bandId.length == 0;
|
||||
|
|
@ -139,10 +185,48 @@
|
|||
context.location = "/client#/bandProfile/" + band_id;
|
||||
}
|
||||
|
||||
function saveBand() {
|
||||
function saveInvitations() {
|
||||
if (0 < $('#selected-friends-band .invitation').length) {
|
||||
createBandInvitations(response.id, function () {
|
||||
showProfile(response.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function saveBand(saveFn) {
|
||||
unbindNavButtons()
|
||||
var band = buildBand()
|
||||
if (is_new_record()) {
|
||||
rest.createBand(band)
|
||||
.done(function (response) {
|
||||
saveInvitations()
|
||||
saveFn(band)
|
||||
})
|
||||
.fail(function (jqXHR) {
|
||||
app.notifyServerError(jqXHR, "Unable to create band")
|
||||
})
|
||||
.always(function (jqXHR) {
|
||||
bindNavButtons()
|
||||
})
|
||||
} else {
|
||||
rest.updateBand(band)
|
||||
.done(function (response) {
|
||||
saveInvitations()
|
||||
saveFn(band)
|
||||
})
|
||||
.fail(function (jqXHR) {
|
||||
app.notifyServerError(jqXHR, "Unable to create band")
|
||||
})
|
||||
.always(function (jqXHR) {
|
||||
bindNavButtons()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function saveBandOld() {
|
||||
if (isSaving) return;
|
||||
isSaving = true;
|
||||
disableSubmits()
|
||||
unbindNavButtons()
|
||||
|
||||
var band = buildBand()
|
||||
|
||||
|
|
@ -198,7 +282,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
enableSubmits();
|
||||
bindNavButtons();
|
||||
}
|
||||
|
||||
function createBandInvitations(bandId, onComplete) {
|
||||
|
|
@ -229,50 +313,50 @@
|
|||
function beforeShow(data) {
|
||||
inviteMusiciansUtil.clearSelections();
|
||||
bandId = data.id == 'new' ? '' : data.id;
|
||||
|
||||
step1 = step2 = false;
|
||||
if ('step2'==data['d']) {
|
||||
step2 = true;
|
||||
delete data['d'];
|
||||
} else if ('step1'==data['d']){
|
||||
step1 = true;
|
||||
console.log("DDDDDDDD", data['d'], currentStep)
|
||||
currentStep=0
|
||||
if (data['d']) {
|
||||
var stepNum = data['d'].substring(4)
|
||||
if(stepNum) {
|
||||
currentStep=stepNum
|
||||
delete data['d'];
|
||||
resetForm();
|
||||
}
|
||||
}
|
||||
resetForm();
|
||||
}
|
||||
|
||||
function afterShow(data) {
|
||||
inviteMusiciansUtil.loadFriends();
|
||||
|
||||
if (!is_new_record()) {
|
||||
$("#band-setup-title").html("edit band");
|
||||
$("#btn-band-setup-save").html("SAVE CHANGES");
|
||||
//$("#band-setup-title").html("edit band");
|
||||
//$("#btn-band-setup-save").html("SAVE CHANGES");
|
||||
$("#band-change-photo").html('Upload band photo.');
|
||||
$('.band-photo').removeClass("hidden")
|
||||
|
||||
// retrieve and initialize band profile data points
|
||||
loadBandDetails();
|
||||
|
||||
if (step2) {
|
||||
$("#band-setup-step-2").show();
|
||||
$("#band-setup-step-1").hide();
|
||||
$('.band-setup-text-step2').each(function(idx) { $(this).hide(); });
|
||||
$('#btn-band-setup-back').text('CANCEL');
|
||||
$('#btn-band-setup-save').text('SEND INVITATIONS');
|
||||
// if (step2) {
|
||||
// $("#band-setup-step-2").show();
|
||||
// $("#band-setup-step-1").hide();
|
||||
// $('.band-setup-text-step2').each(function(idx) { $(this).hide(); });
|
||||
// $('#btn-band-setup-back').text('CANCEL');
|
||||
// $('#btn-band-setup-save').text('SEND INVITATIONS');
|
||||
|
||||
} else if (step1) {
|
||||
$("#band-setup-step-1").show();
|
||||
$("#band-setup-step-2").hide();
|
||||
$('.band-setup-text-step1').each(function(idx) { $(this).hide(); });
|
||||
$('#btn-band-setup-next').text('SAVE & NEXT');
|
||||
}
|
||||
if (! step1 && ! step2) {
|
||||
$('#btn-band-setup-next').text('SAVE & NEXT');
|
||||
$('#btn-band-setup-back').text('CANCEL');
|
||||
$('#btn-band-setup-save').text('CREATE BAND');
|
||||
$('.band-setup-text-step1').each(function(idx) { $(this).show(); });
|
||||
$('.band-setup-text-step2').each(function(idx) { $(this).show(); });
|
||||
}
|
||||
// } else if (step1) {
|
||||
// $("#band-setup-step-1").show();
|
||||
// $("#band-setup-step-2").hide();
|
||||
// $('.band-setup-text-step1').each(function(idx) { $(this).hide(); });
|
||||
// $('#btn-band-setup-next').text('SAVE & NEXT');
|
||||
// }
|
||||
// if (! step1 && ! step2) {
|
||||
// $('#btn-band-setup-next').text('SAVE & NEXT');
|
||||
// $('#btn-band-setup-back').text('CANCEL');
|
||||
// $('#btn-band-setup-save').text('CREATE BAND');
|
||||
// $('.band-setup-text-step1').each(function(idx) { $(this).show(); });
|
||||
// $('.band-setup-text-step2').each(function(idx) { $(this).show(); });
|
||||
// }
|
||||
}
|
||||
else {
|
||||
loadGenres();
|
||||
|
|
@ -287,10 +371,11 @@
|
|||
});
|
||||
|
||||
|
||||
$("#band-setup-title").html("set up band");
|
||||
$("#btn-band-setup-save").html("CREATE BAND");
|
||||
//$("#band-setup-title").html("set up band");
|
||||
//$("#btn-band-setup-save").html("CREATE BAND");
|
||||
$('.band-photo').addClass("hidden")
|
||||
}
|
||||
renderCurrentPange()
|
||||
}
|
||||
|
||||
function loadBandDetails() {
|
||||
|
|
@ -469,76 +554,86 @@
|
|||
$(evt.currentTarget).closest('.invitation').remove();
|
||||
}
|
||||
|
||||
function enableSubmits() {
|
||||
function bindNavButtons() {
|
||||
// $('#btn-band-setup-next').on("click", function (e) {
|
||||
// e.stopPropagation()
|
||||
// validateGeneralInfo()
|
||||
// .done(function (response) {
|
||||
// if (!step1 && !step2) {
|
||||
// $("#band-setup-step-2").show();
|
||||
// $("#band-setup-step-1").hide();
|
||||
// } else if (step1) {
|
||||
// saveBand();
|
||||
// step1=false
|
||||
// step2=true
|
||||
// }
|
||||
// })
|
||||
// .fail(function (jqXHR) {
|
||||
// if(jqXHR.status == 422) {
|
||||
// renderErrors(JSON.parse(jqXHR.responseText))
|
||||
// }
|
||||
// else {
|
||||
// app.notifyServerError(jqXHR, "Unable to validate band")
|
||||
// }
|
||||
// });
|
||||
// return false;
|
||||
// });
|
||||
|
||||
// $('#btn-band-setup-back').on("click", function () {
|
||||
// if (!step2) {
|
||||
// $("#band-setup-step-1").show();
|
||||
// $("#band-setup-step-2").hide();
|
||||
// } else {
|
||||
// showProfile(bandId);
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
|
||||
$('#btn-band-setup-back').on("click", function (e) {
|
||||
e.stopPropagation()
|
||||
navBack()
|
||||
return false
|
||||
})
|
||||
|
||||
$('#btn-band-setup-cancel').on("click", function (e) {
|
||||
e.stopPropagation()
|
||||
navCancel()
|
||||
return false
|
||||
})
|
||||
|
||||
|
||||
$('#btn-band-setup-next').on("click", function (e) {
|
||||
e.stopPropagation()
|
||||
validateGeneralInfo()
|
||||
.done(function (response) {
|
||||
if (!step1 && !step2) {
|
||||
$("#band-setup-step-2").show();
|
||||
$("#band-setup-step-1").hide();
|
||||
} else if (step1) {
|
||||
saveBand();
|
||||
step1=false
|
||||
step2=true
|
||||
}
|
||||
})
|
||||
.fail(function (jqXHR) {
|
||||
if(jqXHR.status == 422) {
|
||||
renderErrors(JSON.parse(jqXHR.responseText))
|
||||
}
|
||||
else {
|
||||
app.notifyServerError(jqXHR, "Unable to validate band")
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
navNext()
|
||||
return false
|
||||
})
|
||||
|
||||
$('#btn-band-setup-back').on("click", function () {
|
||||
if (!step2) {
|
||||
$("#band-setup-step-1").show();
|
||||
$("#band-setup-step-2").hide();
|
||||
} else {
|
||||
showProfile(bandId);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$('#btn-band-setup-save').on("click", function () {
|
||||
saveBand();
|
||||
});
|
||||
|
||||
$('#btn-band-setup-next').removeClass("disabled");
|
||||
$('#btn-band-setup-back').removeClass("disabled");
|
||||
$('#btn-band-setup-save').removeClass("disabled");
|
||||
$('#btn-band-setup-back').removeClass("disabled")
|
||||
$('#btn-band-setup-cancel').removeClass("disabled")
|
||||
$('#btn-band-setup-next').removeClass("disabled")
|
||||
}
|
||||
|
||||
function disableSubmits() {
|
||||
$('#btn-band-setup-next').off("click")
|
||||
function unbindNavButtons() {
|
||||
$('#btn-band-setup-back').off("click")
|
||||
$('#btn-band-setup-save').off("click")
|
||||
$('#btn-band-setup-next').addClass("disabled");
|
||||
$('#btn-band-setup-back').addClass("disabled");
|
||||
$('#btn-band-setup-save').addClass("disabled");
|
||||
$('#btn-band-setup-cancel').off("click")
|
||||
$('#btn-band-setup-next').off("click")
|
||||
$('#btn-band-setup-back').addClass("disabled")
|
||||
$('#btn-band-setup-cancel').addClass("disabled")
|
||||
$('#btn-band-setup-next').addClass("disabled")
|
||||
}
|
||||
|
||||
|
||||
function events() {
|
||||
$('#selected-band-invitees').on("click", ".invitation a", removeInvitation);
|
||||
|
||||
enableSubmits();
|
||||
bindNavButtons();
|
||||
|
||||
// friend input focus
|
||||
$('#band-invitee-input').focus(function () {
|
||||
$(this).val('');
|
||||
});
|
||||
|
||||
$('#btn-band-setup-cancel').click(function () {
|
||||
resetForm();
|
||||
window.history.go(-1);
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#band-country').on('change', function (evt) {
|
||||
evt.stopPropagation();
|
||||
|
|
|
|||
|
|
@ -930,8 +930,8 @@
|
|||
bandId: val.id,
|
||||
biography: val.biography,
|
||||
profile_url: "/client#/bandProfile/" + val.id,
|
||||
band_edit_url: "/client#/band/setup/" + val.id + '/step1',
|
||||
band_member_url: "/client#/band/setup/" + val.id + '/step2',
|
||||
band_edit_url: "/client#/band/setup/" + val.id + '/step0',
|
||||
band_member_url: "/client#/band/setup/" + val.id + '/step4',
|
||||
avatar_url: context.JK.resolveBandAvatarUrl(val.photo_url),
|
||||
name: val.name,
|
||||
location: val.location,
|
||||
|
|
|
|||
|
|
@ -3,18 +3,18 @@
|
|||
.content-icon
|
||||
= image_tag "content/icon_bands.png", :size => "19x19"
|
||||
h1#band-setup-title
|
||||
| set up band
|
||||
| my band
|
||||
= render "screen_navigation"
|
||||
.content-body
|
||||
.content-body-scroller
|
||||
form#band-setup-form
|
||||
div style="display:block;"
|
||||
#band-setup-step-1.content-wrapper style="padding:10px 35px10px 35px;"
|
||||
br
|
||||
#band-setup-step-0.band-step.content-wrapper style="padding:10px 35px10px 35px;"
|
||||
h2 edit profile: basics
|
||||
table width="100%"
|
||||
tr
|
||||
td colspan="2"
|
||||
h2 | Step 1: General Information
|
||||
|
||||
tr#name_row
|
||||
td colspan="2"
|
||||
.band-photo.hidden
|
||||
|
|
@ -65,21 +65,14 @@
|
|||
/ | Genres:
|
||||
/ .band-setup-genres.w90
|
||||
/ table#band-genres[width="100%" cellpadding="10" cellspacing="6"]
|
||||
|
||||
br clear="all"
|
||||
.right
|
||||
a#btn-band-setup-cancel.button-grey
|
||||
| CANCEL
|
||||
|
|
||||
a#btn-band-setup-next.button-orange
|
||||
| SAVE & NEXT
|
||||
.clearall
|
||||
#band-setup-step-2.content-wrapper style="padding:10px 35px 10px 35px; display:none;"
|
||||
br
|
||||
h2
|
||||
span.band-setup-text-step2
|
||||
| Step 2:
|
||||
| Add Band Members
|
||||
#band-setup-step-1.band-step.content-wrapper
|
||||
h2 edit profile: musical experience
|
||||
#band-setup-step-2.band-step.content-wrapper
|
||||
h2 edit profile: current interests
|
||||
#band-setup-step-3.band-step.content-wrapper
|
||||
h2 edit profile: online presence & performance samples
|
||||
#band-setup-step-4.band-step.content-wrapper
|
||||
h2 invite members
|
||||
br
|
||||
#band-setup-invite-musicians
|
||||
br
|
||||
|
|
@ -105,14 +98,25 @@
|
|||
= image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle")
|
||||
.right.mt5.ml5
|
||||
| Google+
|
||||
br clear="all"
|
||||
.right
|
||||
a#btn-band-setup-back.button-grey
|
||||
| BACK
|
||||
|
|
||||
a#btn-band-setup-save.button-orange
|
||||
| CREATE BAND
|
||||
.clearall
|
||||
/ br clear="all"
|
||||
/ .right
|
||||
/ a#btn-band-setup-back.button-grey
|
||||
/ | BACK
|
||||
/ |
|
||||
/ a#btn-band-setup-save.button-orange
|
||||
/ | CREATE BAND
|
||||
/ .clearall
|
||||
|
||||
br clear="all"
|
||||
.right
|
||||
a#btn-band-setup-cancel.nav-button.button-grey
|
||||
| CANCEL
|
||||
a#btn-band-setup-back.nav-button.button-grey.hidden
|
||||
| BACK
|
||||
a#btn-band-setup-next.nav-button.button-orange
|
||||
| SAVE & NEXT
|
||||
.clearall
|
||||
|
||||
script#template-band-setup-genres type="text/template"
|
||||
tr
|
||||
tr
|
||||
|
|
|
|||
Loading…
Reference in New Issue