seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

VRFS-3245 : Instrument selector 

* Wrap instrument selector widget in dialog widget and delegate as
necessary
* Add instrument info to band api result
* Integrate with band setup flow
* Style to approximate spec
* Fix a few logic and syntax errors encountered along the way
This commit is contained in:
Steven Miers 2015-05-29 21:04:33 -05:00
parent d91d0b0cfe
commit 540c3cc37f
9 changed files with 143 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/app/assets/javascripts/band_setup.js
View File

@ -9,6 +9,8 @@
// accounts_profiles.js
context.JK.BandSetupScreen = function (app) {
var NONE_SPECIFIED = 'None specified'
var ui = new context.JK.UIHelper(JK.app)
var logger = context.JK.logger;
var rest = context.JK.Rest();
var inviteMusiciansUtil = null;
@ -27,6 +29,7 @@
var concertCount=null;
var currentStep = 0;
var STEPS_COUNT=5;
var $selectedInstruments=[]
function navBack() {
if (currentStep>0) {
@ -136,7 +139,8 @@
$("#play-commitment").val('1')
$("#hourly-rate").val("0.0")
$("#gig-minimum").val("0.0")
resetGenres();
resetGenres();
renderDesiredExperienceLabel([])
$(friendInput)
.unbind('blur')
@ -188,7 +192,7 @@
}
function buildBand() {
var band = {};
var band = {instruments:[]};
band.id = (isNewBand()) ? null : bandId;
band.name = $("#band-name").val();
band.website = $("#band-website").val();
@ -216,9 +220,29 @@
} else {
band.validate_genres = false
}
$.each($selectedInstruments, function(index, instrument) {
var h = {}
h.instrument_id = instrument.id
h.proficiency_level = instrument.level
band.instruments.push(h)
})
return band;
}
function renderDesiredExperienceLabel(selectedInstruments) {
$selectedInstruments=selectedInstruments
var instrumentText=""
$.each($selectedInstruments, function(index, instrument) {
if (instrumentText.length!=0) {instrumentText += ", "}
instrumentText += instrument.name
})
$("#desired-experience-label").html(($selectedInstruments && $selectedInstruments.length > 0) ? instrumentText : NONE_SPECIFIED)
}
function showProfile(band_id) {
context.location = "/client#/bandProfile/" + band_id;
}
@ -318,6 +342,11 @@
renderCurrentPage()
}
function loadDesiredExperience() {
}
function loadBandDetails() {
rest.getBand(bandId).done(function (band) {
$("#band-name").val(band.name);
@ -366,6 +395,16 @@
renderOptionalControls();
$.each(band.instruments, function(index, instrument) {
var h = {}
h.id = instrument.instrument_id
h.level = instrument.proficiency_level
h.approve = true
$selectedInstruments.push(h)
})
renderDesiredExperienceLabel($selectedInstruments)
});
}
@ -593,11 +632,23 @@
invitationDialog.showFacebookDialog();
});
$('a#choose-desired-experience').on("click", chooseExperience)
$('#band-setup').on('ifToggled', 'input[type="radio"].dependent-master', renderOptionalControls);
$(friendInput).focus(function() { $(this).val(''); })
}
function chooseExperience(e) {
e.stopPropagation()
ui.launchInstrumentSelectorDialog("new member(s)", $selectedInstruments, function(selectedInstruments) {
$selectedInstruments = selectedInstruments
renderDesiredExperienceLabel($selectedInstruments)
return false
})
return false
}
function initialize(invitationDialogInstance, friendSelectorDialog) {
inviteMusiciansUtil = new JK.InviteMusiciansUtil(app);
inviteMusiciansUtil.initialize(friendSelectorDialog);

49
web/app/assets/javascripts/dialog/instrumentSelectorDialog.js
View File

@ -11,27 +11,33 @@
var $btnSelect = $screen.find(".btn-select-instruments");
var $instructions = $screen.find('.instructions');
var $instruments = $screen.find('.instruments');
var $instrumentSelectorContainer = $screen.find('.instrument-selector-container')
var instrumentSelector = new JK.InstrumentSelector(app, $instrumentSelectorContainer);
var $callback = callback
var selectedInstruments = instruments
function beforeShow(data) {
instrumentSelector.initialize(false)
instrumentSelector.render($instrumentSelectorContainer)
instrumentSelector.setSelectedInstruments(selectedInstruments)
}
function afterShow(data) {
var instrumentList = context.JK.instruments;
// var instrumentList = context.JK.instruments;
$instruments.empty();
// $instruments.empty();
if (instrumentList) {
$.each(instrumentList, function(index, val) {
$instruments.append('<li>');
var checked = '';
if (instruments && $.inArray(val.id, instruments) > -1) {
checked = 'checked';
}
// if (instrumentList) {
// $.each(instrumentList, function(index, val) {
// $instruments.append('<li>');
// var checked = '';
// if (instruments && $.inArray(val.id, selectedInstruments) > -1) {
// checked = 'checked';
// }
$instruments.append('<input type="checkbox" value="' + val.id + '" ' + checked + ' />' + val.description);
$instruments.append('</li>');
});
}
// $instruments.append('<input type="checkbox" value="' + val.id + '" ' + checked + ' />' + val.description);
// $instruments.append('</li>');
// });
// }
}
function afterHide() {
@ -45,17 +51,10 @@
function events() {
$btnSelect.unbind("click").bind("click", function(evt) {
evt.preventDefault();
var selectedInstruments = [];
$instruments.find('input[type=checkbox]:checked').each(function(index) {
selectedInstruments.push($(this).val());
});
if (callback) {
callback(selectedInstruments);
}
app.layout.closeDialog(dialogId);
selectedInstruments = instrumentSelector.getSelectedInstruments()
$callback(selectedInstruments)
app.layout.closeDialog(dialogId);
return false;
});
@ -70,7 +69,7 @@
app.bindDialog(dialogId, dialogBindings);
$instructions.html('Select one or more instruments for ' + type + ':');
$instructions.html('Select the instruments and expertise you need for ' + type + ':');
events();
}

23
web/app/assets/javascripts/instrumentSelector.js
View File

@ -4,18 +4,19 @@
context.JK = context.JK || {};
context.JK.InstrumentSelectorDeferred = null;
context.JK.InstrumentSelector = (function(app) {
context.JK.InstrumentSelector = (function(app, parentSelector) {
var logger = context.JK.logger;
var rest = new context.JK.Rest();
var _instruments = []; // will be list of structs: [ {label:xxx, value:yyy}, {...}, ... ]
var _rsvp = false;
var _parentSelector = null;
if (typeof(_parentSelector)=="undefined") {_parentSelector=null}
var _parentSelector = parentSelector;
var deferredInstruments = null;
var self = this;
function reset() {
$('input[type=checkbox]', _parentSelector).attr('checked', '');
$('input[type="checkbox"]', _parentSelector).attr('checked', '');
if (_rsvp) {
$('select.rsvp_count option', _parentSelector).eq(0).prop('selected', true);
$('select.rsvp_level option', _parentSelector).eq(0).prop('selected', true);
@ -88,7 +89,7 @@
var $selectedVal = $('input[type="checkbox"]:checked', _parentSelector);
$.each($selectedVal, function (index, value) {
var id = $(value).attr('session-instrument-id');
var name = $('label[for="' + $(value).attr('id') + '"]', _parentSelector).text();
var name = $('label[for="' + $(value).attr('id') + '"]', _parentSelector).text().trim();
if (_rsvp) {
var count = $('select[session-instrument-id="' + id + '"].rsvp-count', _parentSelector).val();
var rsvp_level = $('select[session-instrument-id="' + id + '"].rsvp-level', _parentSelector).val();
@ -99,16 +100,16 @@
selectedInstruments.push({id: id, name: name, level: level});
}
});
return selectedInstruments;
}
function setSelectedInstruments(instrumentList) {
if (!instrumentList) {
return;
}
$.each(instrumentList, function (index, value) {
$('input[type=checkbox][id="' + value.id + '"]')
}
$.each(instrumentList, function (index, value) {
$('input[type="checkbox"][session-instrument-id="' + value.id + '"]')
.attr('checked', 'checked')
.iCheck({
checkboxClass: 'icheckbox_minimal',
@ -116,11 +117,11 @@
inheritClass: true
});
if (_rsvp) {
$('select[session-instrument-id="' + value.value + '"].rsvp-count', _parentSelector).val(value.count);
$('select[session-instrument-id="' + value.value + '"].rsvp-level', _parentSelector).val(value.level);
$('select[session-instrument-id="' + value.id + '"].rsvp-count', _parentSelector).val(value.count);
$('select[session-instrument-id="' + value.id + '"].rsvp-level', _parentSelector).val(value.level);
}
else {
$('select[session-instrument-id="' + value.value + '"]').val(value.level);
$('select[session-instrument-id="' + value.id + '"]').val(value.level);
}
});
}

1
web/app/assets/javascripts/ui_helper.js
View File

@ -89,6 +89,7 @@
this.launchRsvpCreateSlotDialog = launchRsvpCreateSlotDialog;
this.launchSessionStartDialog = launchSessionStartDialog;
this.launchGenreSelectorDialog = launchGenreSelectorDialog;
this.launchInstrumentSelectorDialog = launchInstrumentSelectorDialog;
this.launchRecordingSelectorDialog = launchRecordingSelectorDialog;
return this;

44
web/app/assets/stylesheets/dialogs/instrumentSelectorDialog.css.scss Normal file
View File

@ -0,0 +1,44 @@
@import "client/common";
#instrument-selector-dialog {
min-height:initial;
.dialog-inner {
.content-body {
max-height: auto;
.content-body-scroller {
height: 350px;
overflow: scroll;
background-color:#c5c5c5;
border: 1px inset;
}
border: 1px solid #222;
margin: 4px 4px 8px 4px;
}
.instructions {
font-size:16px;
}
.dropdown {
box-shadow:0 0 0 0;
}
}
.action-buttons {
margin-bottom:10px;
}
.instruments {
}
label {
display:inline;
color: black;
font-size:16px;
}
}

4
web/app/views/api_bands/show.rabl
View File

@ -18,6 +18,10 @@ child :users => :musicians do
end
end
child :instruments => :instruments do
attributes :id, :instrument_id, :proficiency_level
end
child :genres => :genres do
attributes :id, :description
#partial('api_genres/index', :object => @band.genres)

2
web/app/views/clients/_band_setup.html.slim
View File

@ -109,7 +109,7 @@
td.new-member-dependent
label for="desired-experience"
| Desired Experience &nbsp;
a.select-desired-experience select
a#choose-desired-experience select
td.new-member-dependent
label for="play-commitment" Play Commitment
td.new-member-dependent

5
web/app/views/dialogs/_instrumentSelectorDialog.html.haml
View File

@ -2,14 +2,15 @@
.content-head
= image_tag "content/icon_checkmark_circle.png", {:width => 20, :height => 20, :class => 'content-icon' }
%h1
= 'select instrument'
= 'select instruments & expertise'
.dialog-inner
%strong
.instructions
%br{:clear => "all"}/
.content-body
.content-body-scroller
%ul.instruments.three-column-list-container
.instrument-selector-container
=render "users/instrument_selector"
.right.action-buttons
%a.button-grey.btn-cancel-dialog{'layout-action' => 'cancel'} CANCEL

2
web/app/views/users/_instrument_selector.html.erb
View File

@ -2,7 +2,7 @@
<% Instrument.standard_list.each do |instrument| %>
<tr>
<td><input name="<%= instrument.id %>" type="checkbox" /><%= instrument.description %></td>
<td align="right" width="50%"><select class='proficiency_selector'><option value="1">Beginner</option><option value="2">Intermediate</option><option value="3">Expert</option></select></td>
<td align="right" width="50%"><select class='proficiency_selector'<option value="1">Beginner</option><option value="2">Intermediate</option><option value="3">Expert</option></select></td>
</tr>
<% end %>
</table>