VRFS-2358 fixed notation upload and display issues

This commit is contained in:
Brian Smith 2014-10-26 19:45:29 -04:00
parent e9ae934ab9
commit f6f79acddd
7 changed files with 90 additions and 63 deletions

View File

@ -9,7 +9,9 @@
var rest = context.JK.Rest();
var sessionId = null;
var sessionData = null;
var $screen = null;
var $screen = $("#account-session-properties");
var $inputFiles = $screen.find('#session-select-files');
var $selectedFilenames = $screen.find('#selected-filenames');
var $propertiesBody = null;
var $languageList = null;
var $recurringModeList = null;
@ -62,10 +64,11 @@
function events() {
$startTimeList.on('change', toggleStartTime);
$btnSelectFiles.on('click', toggleSelectFiles);
$dateTimeTBD.on('ifChanged', toggleDateTBD);
$screen.find("#session-update").on('click', updateSessionProperties);
$screen.find('#session-prop-select-files').on('change', changeSelectedFiles);
$inputFiles.on('change', changeSelectedFiles);
$btnSelectFiles.on('click', toggleSelectFiles);
}
function toggleStartTime() {
@ -252,7 +255,8 @@
// }
}
data.recurring_mode = $recurringModeList.val();
data.music_notations = sessionData.music_notations;
data.music_notations = JSON.stringify(sessionData.music_notations);
console.log("data.music_notations=%o", data.music_notations);
data.timezone = $timezoneList.val();
data.open_rsvps = $screen.find("#open-rsvp")[0].checked;
@ -306,6 +310,7 @@
function uploadNotations(notations) {
var formData = new FormData();
var maxExceeded = false;
$.each(notations, function(i, file) {
var max = 10 * 1024 * 1024;
if(file.size > max) {
@ -326,6 +331,7 @@
}
formData.append('client_id', app.clientId);
//formData.append('session_id', sessionId);
$btnSelectFiles.text('UPLOADING...').data('uploading', true)
$uploadSpinner.show();
return rest.uploadMusicNotations(formData)
@ -362,7 +368,6 @@
}
function changeSelectedFiles() {
var $inputFiles = $screen.find('#session-prop-select-files');
var fileNames = [];
var files = $inputFiles.get(0).files;
var error = false;
@ -400,7 +405,7 @@
}
event.preventDefault();
$('#session-select-files').trigger('click');
$inputFiles.trigger('click');
return false;
}
@ -457,9 +462,10 @@
$fansAccess.val(sessionData.fans_access_value);
$screen.find('#session-policy').val(sessionData.legal_policy);
$selectedFilenames.empty();
context._.each(sessionData.music_notations, function(notation) {
var $link = $('<a href="/music_notations/' + notation.id + '">').text(notation.file_name);
var $text = $('<span>').text($link);
var $link = notation.viewable ? $('<a href="' + notation.file_url + '" rel="external">').html(notation.file_name) : '#';
var $text = $('<span>').html($link);
var $file = $('<li>').append($text);
$musicNotations.append($file);
})
@ -473,7 +479,6 @@
app.bindScreen('account/sessionProperties', screenBindings);
$screen = $(".account-session-properties");
$propertiesBody = $screen.find("#account-session-properties-div");
$recurringModeList = $screen.find("#recurring-mode-prop-list");
$languageList = $screen.find("#session-prop-lang-list");
@ -485,7 +490,7 @@
$musicianAccess = $screen.find("#session-prop-musician-access");
$fansAccess = $screen.find("#session-prop-fans-access");
$musicNotations = $screen.find("#selected-filenames");
$btnSelectFiles = $screen.find("#select-notation-files");
$btnSelectFiles = $screen.find(".btn-select-files");
$uploadSpinner = $screen.find(".upload-spinner");
$dateTimeTBD = $screen.find("#date_time_tbd");

View File

@ -8,7 +8,7 @@
var $selectedFilenames = $screen.find('#selected-filenames');
var $uploadSpinner = $screen.find('.upload-spinner');
var $selectedFilenames = $('#settings-selected-filenames');
var $inputFiles = $('#settings-select-files');
var $inputFiles = $screen.find('#session-select-files');
var $btnSelectFiles = $screen.find('.btn-select-files');
var rest = new JK.Rest();
var sessionId;
@ -116,37 +116,7 @@
rest.updateSession($('#session-settings-id').val(), data).done(settingsSaved);
}
function changeSettingsSelectedFiles() {
var fileNames = [];
var files = $inputFiles.get(0).files;
var error = false;
for (var i = 0; i < files.length; ++i) {
var name = files.item(i).name;
var ext = name.split('.').pop().toLowerCase();
if ($.inArray(ext, ["pdf", "png", "jpg", "jpeg", "gif", "xml", "mxl", "txt"]) == -1) {
error = true;
break;
}
fileNames.push(name);
}
if (error) {
app.notifyAlert("Error", "We're sorry, but you can only upload images (.png .jpg .jpeg .gif), text (.txt), PDFs (.pdf), and XML files (.xml .mxl).");
$inputFiles.replaceWith($inputFiles.clone(true));
}
else {
// upload as soon as user picks their files.
uploadSettingsNotations($inputFiles.get(0).files)
.done(function() {
context._.each(fileNames, function(fileName) {
var $text = $('<span>').text(fileName);
$selectedFilenames.append($text);
})
})
}
}
function uploadSettingsNotations(notations) {
function uploadNotations(notations) {
var formData = new FormData();
var maxExceeded = false;
@ -205,14 +175,44 @@
});
}
function toggleSettingsSelectFiles(event) {
function changeSelectedFiles() {
var fileNames = [];
var files = $inputFiles.get(0).files;
var error = false;
for (var i = 0; i < files.length; ++i) {
var name = files.item(i).name;
var ext = name.split('.').pop().toLowerCase();
if ($.inArray(ext, ["pdf", "png", "jpg", "jpeg", "gif", "xml", "mxl", "txt"]) == -1) {
error = true;
break;
}
fileNames.push(name);
}
if (error) {
app.notifyAlert("Error", "We're sorry, but you can only upload images (.png .jpg .jpeg .gif), text (.txt), PDFs (.pdf), and XML files (.xml .mxl).");
$inputFiles.replaceWith($inputFiles.clone(true));
}
else {
// upload as soon as user picks their files.
uploadNotations($inputFiles.get(0).files)
.done(function() {
context._.each(fileNames, function(fileName) {
var $text = $('<span>').text(fileName);
$selectedFilenames.append($text);
})
})
}
}
function toggleSelectFiles(event) {
if($btnSelectFiles.data('uploading')) {
logger.debug("ignoring click of SELECT FILES... while uploading")
return false;
}
event.preventDefault();
$('#settings-select-files').trigger('click');
$inputFiles.trigger('click');
return false;
}
@ -225,8 +225,8 @@
function events() {
$('#session-settings-dialog-submit').on('click', saveSettings);
$inputFiles.on('change', changeSettingsSelectedFiles);
$btnSelectFiles.on('click', toggleSettingsSelectFiles);
$inputFiles.on('change', changeSelectedFiles);
$btnSelectFiles.on('click', toggleSelectFiles);
}
this.initialize = function() {

View File

@ -28,7 +28,7 @@
var friendInput = null;
// Main layout
var $screen = null;
var $screen = $('#create-session-layout');
var $wizardSteps = null;
var $currentWizardStep = null;
var step = 0;
@ -42,6 +42,7 @@
var $languageList = null;
var $sessionPlusMusiciansLabel = null;
var $editScheduledSessions = null;
var $inputFiles = $screen.find('#session-select-files');
var $btnSelectFiles = null;
var $selectedFilenames = null;
var $uploadSpinner = null;
@ -1032,7 +1033,6 @@
}
function changeSelectedFiles() {
var $inputFiles = $('#session-step-2 #session-select-files');
var fileNames = [];
var files = $inputFiles.get(0).files;
var error = false;
@ -1070,7 +1070,7 @@
}
event.preventDefault();
$('#session-select-files').trigger('click');
$inputFiles.trigger('click');
return false;
}
@ -1186,8 +1186,6 @@
function events() {
$createTypes.on("ifChanged", toggleCreateType);
$startTimeList.on('change', function() { toggleStartTime(); });
$btnSelectFiles.on('click', toggleSelectFiles);
$('#session-step-2 #session-select-files').on('change', changeSelectedFiles);
$policyTypes.on("ifChanged", togglePolicyTypeChanged);
$('#session-step-4 #session-musician-access').on('change', toggleMusicianAccessTypes);
$('#session-step-4 #session-fans-access').on('change', toggleFanAccessTypes);
@ -1205,6 +1203,9 @@
});
$(friendInput).focus(function() { $(this).val(''); })
$inputFiles.on('change', changeSelectedFiles);
$btnSelectFiles.on('click', toggleSelectFiles);
}
function initialize(invitationDialogInstance, friendSelectorDialog, instrumentSelectorInstance, instrumentRSVPSelectorInstance) {
@ -1221,7 +1222,6 @@
var screenBindings = {'beforeShow': beforeShow, 'afterShow': afterShow};
app.bindScreen('createSession', screenBindings);
$screen = $('#create-session-layout');
$wizardSteps = $screen.find('.create-session-wizard');
$templateSteps = $('#template-session-steps');
$templateButtons = $('#template-session-buttons');

View File

@ -452,6 +452,25 @@
.action-bar {
margin-top: 20px;
}
#selected-filenames {
margin-top:10px;
font-size:12px;
margin-left: 5px;
li {
margin-bottom:1px;
white-space:nowrap;
line-height:14px;
}
li span {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
display:block;
}
}
}
/** account sessions */

View File

@ -212,13 +212,16 @@ class ApiMusicSessionsController < ApiController
@music_session.band = (params[:band] ? Band.find(params[:band]) : nil) if params.include? :band
@music_session.save
params[:music_notations].each do |notation_id|
notation = MusicNotation.find(notation_id)
notation.music_session = ms
notation.save
if params.include? :music_notations
notations = JSON.parse(params[:music_notations])
notations.each do |n|
notation = MusicNotation.find(n["id"])
notation.music_session = @music_session
notation.save
ms.music_notations << notation
end if params.include? :music_notations
@music_session.music_notations << notation
end
end
if @music_session.errors.any?
response.status = :unprocessable_entity

View File

@ -98,12 +98,12 @@
Notation Files:
.right-column
.spinner-small.upload-spinner
.selected-files-section
%ul#selected-filenames
.select-files-section
%a{href: "#", class: "button-orange btn-select-files", id: "select-notation-files"} SELECT FILES...
%input{type: "file", class: "hidden", id: "session-prop-select-files", value: "Select Files...",
%a.button-orange.btn-select-files SELECT FILES...
%input{type: "file", class: "hidden", id: "session-select-files", value: "Select Files...",
accept: ".pdf, .png, .jpg, .jpeg, .gif, .xml, .mxl, .txt", multiple: "true"}
.selected-files-section
%ul#selected-filenames
.clearall
.clearall
.clearall

View File

@ -59,7 +59,7 @@
%div{:id => "settings-selected-filenames"}
.right.ib.mb10
%a.button-orange.btn-select-files SELECT FILES...
%input.hidden{:type => "file", :id => "settings-select-files", :value => "Select Files...", :accept => ".pdf, .png, .jpg, .jpeg, .gif, .xml, .mxl, .txt"}
%input.hidden{:type => "file", :id => "session-select-files", :value => "Select Files...", :accept => ".pdf, .png, .jpg, .jpeg, .gif, .xml, .mxl, .txt"}
.spinner-small.upload-spinner
.clearall.right.mt10