diff options
| -rw-r--r-- | www/index.html | 65 | ||||
| -rw-r--r-- | www/js/jingles.js | 189 | ||||
| -rw-r--r-- | www/js/shows.js | 31 | ||||
| -rw-r--r-- | www/styles/jingles.css | 4 | ||||
| -rw-r--r-- | www/styles/main-style.css | 36 | ||||
| -rw-r--r-- | www/styles/shows.css | 29 |
6 files changed, 276 insertions, 78 deletions
diff --git a/www/index.html b/www/index.html index bc40ab6..41fb293 100644 --- a/www/index.html +++ b/www/index.html @@ -74,20 +74,21 @@ </div> </div> + <div class="modal hide fade" id="uploadModal"> + <div class="modal-header"> + <a class="close" data-dismiss="modal">×</a> + <h3>Datei auswählen...</h3> + </div> + <div class="modal-body"> + </div> + <div class="modal-footer"> + <button class="btn" data-dismiss="modal">Abbrechen</button> + <button class="btn btn-primary" id="uploadModal-confirm" disabled="disabled">Importieren</button> + </div> + </div> + <div id="app-shows" class="container-fluid"> <div class="alertbox"></div> - <div class="modal hide fade" id="shows-upload"> - <div class="modal-header"> - <a class="close" data-dismiss="modal">×</a> - <h3>Datei auswählen...</h3> - </div> - <div class="modal-body"> - </div> - <div class="modal-footer"> - <a href="#" class="btn" data-dismiss="modal">Abbrechen</a> - <a href="#" class="btn btn-primary" id="shows-upload-confirm">Importieren</a> - </div> - </div> <div class="row-fluid"> <div class="span10"> <form class="well form-inline"> @@ -146,7 +147,30 @@ </div> </div> - <div class="row-fluid jingleGroupTemplate hidden"> + <div id="app-jingles" class="container-fluid"> + <div class="alertbox"></div> + + <div class="groups"> + + </div> + + </div> + + <div id="app-musicpools" class="container-fluid"> + <div class="alertbox"></div> + <div class="span12"> + <h1>Musikpools</h1> + <p> + coming soon! + </p> + </div> + </div> + + </div> + + <div id="hiddenTemplates" class="hidden"> + + <div class="row-fluid group jingleGroupTemplate"> <div class="span12"> <h2></h2> <table class="table table-striped"> @@ -160,20 +184,7 @@ <tbody> </tbody> </table> - </div> - </div> - - <div id="app-jingles" class="container-fluid"> - - </div> - - <div id="app-musicpools" class="container-fluid"> - <div class="alertbox"></div> - <div class="span12"> - <h1>Musikpools</h1> - <p> - coming soon! - </p> + <button class="uploadButton btn btn-success btn"><i class="icon-upload icon-white"></i> Importieren</button> </div> </div> diff --git a/www/js/jingles.js b/www/js/jingles.js index 01cb31c..3c1acfa 100644 --- a/www/js/jingles.js +++ b/www/js/jingles.js @@ -23,8 +23,10 @@ "use strict"; var jinglesGroupList = null; +var importer = null; function jingles_init() { + importer = new Importer(); jinglesGroupList = new JingleGroupList(); jinglesGroupList.fetch(); } @@ -87,7 +89,7 @@ JingleGroupList.prototype.fetch = function() { JingleGroupList.prototype.render = function() { console.log('JingleGroupList.prototype.render'); - $('#app-jingles').html(''); + $('#app-jingles .groups').html(''); $(this.groups).each(function(index, group) { group.render(); }); @@ -127,6 +129,14 @@ JingleGroup.prototype.fetchCarts = function() { self.deactivateCart = self.createCartFromXml(cartXml, false); }, "xml") ).then(function() { + /*self.mainCart.on('add', function() { + self.trigger('add'); + }); + + self.mainCart.on('remove', function() { + self.trigger('remove'); + });*/ + $(self).trigger('update'); }); }; @@ -161,14 +171,18 @@ JingleGroup.prototype.createCartFromXml = function(cartXml, active) { JingleGroup.prototype.render = function() { console.log('JingleGroup.prototype.render'); - //if (!this.$el) { - this.$el = $('.jingleGroupTemplate').clone().removeClass('jingleGroupTemplate'); - this.$el.removeClass('hidden').appendTo('#app-jingles'); - //} + var self = this; + + this.$el = $('.jingleGroupTemplate').clone().removeClass('jingleGroupTemplate'); + this.$el.appendTo('#app-jingles .groups'); $('h2', this.$el).html(this.title); $('table tbody tr', this.$el).remove(); + $('.uploadButton', this.$el).on('click', function() { + importer.showUploadModal(self.mainCart); + }); + // todo: fix /*var cuts = []; if (this.mainCart && this.deactivateCart) { @@ -191,7 +205,6 @@ JingleGroup.prototype.render = function() { $('table > tbody', self.$el).append(cut.render()); });*/ if (this.deactivateCart) { - var self = this; $.each(this.deactivateCart.cuts, function(index, cut) { $('table > tbody', self.$el).append(cut.render()); }); @@ -308,7 +321,7 @@ JingleCut.prototype.render = function() { this.$el = $('<tr>').append($('<td>').text(this.name)) .append($('<td>').text(this.description)) .append( - $('<td>').css('text-align', 'center') + $('<td>') .append(moveButton) .append(activateButton) .append(deleteButton) @@ -316,3 +329,165 @@ JingleCut.prototype.render = function() { return this.$el; }; + + + + + + + + + + + + + + + + + + + + + + + + + +var Importer = function() { + this.$el = $('#uploadModal'); + + +}; + +Importer.prototype.importAddCut = function(cart, dz, file) { + // todo: set additional parameters like DESCRIPTION here, when patch has been applied. + var data = { COMMAND: 10, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: cart.number, DESCRIPTION: 'test' }; + $.post("/rd-bin/rdxport.cgi", data, null, "xml").done(function() { + dz.processQueue(); + }).fail(function(xhr, status, err) { + self.importFileUploadError(cart, dz, file, err, xhr); + }); +}; + +Importer.prototype.importCartCancel = function(cart, dz) { + this.deleteCart(cart); + dz.off("error"); + dz.disable(); +}; + +Importer.prototype.importFileUploadError = function(cart, dz, file, msg, xhr) { + //var error_row = jingles_newImportErrorEntry(cart, msg); + //error_row.find('button').unbind('click').click(function() { + //jingles_deleteCart(cart); + //}); + //$('#show-cart-' + cart).replaceWith(error_row); + //error_row.find('.file-name').text(file.name); + dz.disable(); +}; + +Importer.prototype.importFileUploadSuccess = function(cart, dz, file) { + //var command = { LOGIN_NAME: auth_username, PASSWORD: auth_token, DESCRIPTION: file. }; + + //jingles_updateGroupCartInfo(cart); + dz.disable(); + $(cart).trigger('add'); +}; + +Importer.prototype.importUpdateProgress = function(file, stats) { + if(file.upload.progress < 99) { + var bytes_str = Number((file.upload.bytesSent/1024)/1024).toFixed(1) + " von " + + Number((file.upload.total/1024)/1024).toFixed(1) + " MB"; + stats.find('.file-bytes').text(bytes_str); + stats.find('.progress .bar').css("width", file.upload.progress + "%"); + } else { + stats.find('.file-bytes').text('importiere...'); + stats.find('.progress .bar').css('width', '100%'); + stats.find('.progress').addClass('progress-striped').addClass('active'); + } +}; + +Importer.prototype.importCartConfirm = function(cart, dz) { + $('#uploadModal').modal('hide'); + //var cart_row = $('#show-cart-' + cart); + //cart_row.find('.btn').attr('disabled','disabled'); + //var importing_row = jingles_newImportingEntry(cart); + //importing_row.find('button').unbind('click').click(function() { jingles_importCartCancel(cart, dz); }); + //cart_row.replaceWith(importing_row); + + dz.off("error"); + var files = dz.getAcceptedFiles(); + //importing_row.find('.file-name').text(files[0].name); + //jingles_importUpdateProgress(files[0], importing_row); + //dz.on("uploadprogress", function(file) { jingles_importUpdateProgress(file, importing_row); }); + var self = this; + dz.on("success", function(file) { + self.importFileUploadSuccess(cart, dz, file); + }); + dz.on("error", function(file, msg, xhr) { + self.importFileUploadError(cart, this, file, msg, xhr); + }); + this.importAddCut(cart, dz, files[0]) +}; + +Importer.prototype.importFileAdded = function(dropzone, file, cart) { + $(dropzone.getAcceptedFiles()).each(function(idx, elem) { dropzone.removeFile(elem); }); + + var uploadModal = $('#uploadModal'); + $('div.modal-body', uploadModal).css("background-image", "url('/img/audio_file.png')"); + $('div.modal-header h3', uploadModal).text(file.name); + var self = this; + $('#uploadModal-confirm', uploadModal).unbind('click').click(function() { + self.importCartConfirm(cart, dropzone); + }).removeAttr('disabled'); +}; + +Importer.prototype.importFileSelectError = function(dropzone, file, msg) { + var uploadModal = $('#uploadModal'); + $('div.modal-header h3', uploadModal).text("Datei auswählen..."); + $('div.modal-body', uploadModal).css("background-image", "url('/img/dz-backdrop.png')"); + $('#uploadModal-confirm', uploadModal).attr('disabled','disabled').unbind('click'); + dropzone.removeFile(file); +}; + +Importer.prototype.showUploadModal = function(cart) { + console.log('Importer.prototype.showUploadModal'); + + var uploadModal = $('#uploadModal'); + $('div.modal-header h3', uploadModal).text("Datei auswählen..."); + var form = $('<form>'); + $('.modal-body', uploadModal).empty().append(form).css("background-image", "url('/img/dz-backdrop.png')"); + var self = this; + var dropzone = form.dropzone({ + url: '/rd-bin/rdxport.cgi', + parallelUploads: 1, + maxFilesize: 2048, + paramName: 'FILENAME', + uploadMultiple: false, // todo: maybe enable this? + clickable: true, + createImageThumbnails: false, + acceptedFiles: '.flac,.wav,.ogg,.mp3,.m4a', + autoProcessQueue: false, + init: function() { + this.on("addedfile", function(file) { + self.importFileAdded(this, file, cart); + }); + this.on("error", function(file, msg) { + self.importFileSelectError(this, file, msg); + }); + this.on('sending', function(file, xhr, formData) { + formData.append('COMMAND', 2); + formData.append('LOGIN_NAME', auth_username); + formData.append('PASSWORD', auth_token); + formData.append('CART_NUMBER', cart.number); + formData.append('CUT_NUMBER', 1); // todo: set to correct cut number! + formData.append('CHANNELS', 2); + formData.append('NORMALIZATION_LEVEL', cart.normlevel); + formData.append('AUTOTRIM_LEVEL', cart.trimlevel); + formData.append('USE_METADATA', 1); + }); + } + }); + + $('#uploadModal').modal({keyboard: true}); +}; diff --git a/www/js/shows.js b/www/js/shows.js index 3b949f5..d14d99e 100644 --- a/www/js/shows.js +++ b/www/js/shows.js @@ -79,8 +79,8 @@ function shows_importUpdateProgress(file, stats) { } function shows_importCartConfirm(cart, dz) { - $('#shows-upload').modal('hide'); - var cart_row = $('#show-cart-' + cart) + $('#uploadModal').modal('hide'); + var cart_row = $('#show-cart-' + cart); cart_row.find('.btn').attr('disabled','disabled'); var importing_row = shows_newImportingEntry(cart); importing_row.find('button').unbind('click').click(function() { shows_importCartCancel(cart, dz); }); @@ -111,23 +111,23 @@ function shows_createImportForm(cart) { function shows_importFileAdded(dz, file, cart) { $(dz.getAcceptedFiles()).each(function(idx, elem) { dz.removeFile(elem); }); - $('#shows-upload div.modal-body').css("background-image", "url('/img/audio_file.png')") - $('#shows-upload div.modal-header h3').text(file.name) - $('#shows-upload-confirm').removeAttr('disabled').unbind('click').click(function() { shows_importCartConfirm(cart, dz); }); + $('#uploadModal div.modal-body').css("background-image", "url('/img/audio_file.png')") + $('#uploadModal div.modal-header h3').text(file.name) + $('#uploadModal-confirm').removeAttr('disabled').unbind('click').click(function() { shows_importCartConfirm(cart, dz); }); } function shows_importFileSelectError(dz, file, msg) { - $('#shows-upload div.modal-header h3').text("Datei auswählen...") - $('#shows-upload div.modal-body').css("background-image", "url('/img/dz-backdrop.png')"); - $('#shows-upload-confirm').attr('disabled','disabled').unbind('click'); + $('#uploadModal div.modal-header h3').text("Datei auswählen...") + $('#uploadModal div.modal-body').css("background-image", "url('/img/dz-backdrop.png')"); + $('#uploadModal-confirm').attr('disabled','disabled').unbind('click'); dz.removeFile(file); } function shows_importCart(cart) { var form = shows_createImportForm(cart); - $('#shows-upload div.modal-header h3').text("Datei auswählen...") - $('#shows-upload div.modal-body').empty().append(form).css("background-image", "url('/img/dz-backdrop.png')"); - $('#shows-upload-confirm').attr('disabled','disabled').unbind('click'); + $('#uploadModal div.modal-header h3').text("Datei auswählen...") + $('#uploadModal div.modal-body').empty().append(form).css("background-image", "url('/img/dz-backdrop.png')"); + $('#uploadModal-confirm').attr('disabled','disabled').unbind('click'); var dz = form.dropzone({ url: "/rd-bin/rdxport.cgi", parallelUploads: 1, maxFilesize: 2048, paramName: 'FILENAME', uploadMultiple: false, clickable: true, createImageThumbnails: false, acceptedFiles: ".flac,.wav,.ogg,.mp3,.m4a", autoProcessQueue: false, init: function() { @@ -135,7 +135,7 @@ function shows_importCart(cart) { this.on("error", function(file, msg) { shows_importFileSelectError(this, file, msg); }); }}); - $('#shows-upload').modal({ keyboard: true }); + $('#uploadModal').modal({ keyboard: true }); } // <td> @@ -207,10 +207,9 @@ function shows_newImportErrorEntry(cart, msg) { function shows_updateGroupCartInfo(cart) { data = { COMMAND: 7, LOGIN_NAME: auth_username, PASSWORD: auth_token, CART_NUMBER: cart, INCLUDE_CUTS: 1 }; - var defer = $.post("/rd-bin/rdxport.cgi", data, shows_updateGroupCartList, "xml") - .fail(function() { delete shows_group_carts[cart]; shows_redrawCartEntry(cart); }); - - $.when(defer).done(function() { shows_redrawCartEntry(cart); }); + $.post("/rd-bin/rdxport.cgi", data, shows_updateGroupCartList, "xml") + .fail(function() { delete shows_group_carts[cart]; shows_redrawCartEntry(cart); }) + .done(function() { shows_redrawCartEntry(cart); }); } function shows_redrawCartEntry(cart) { diff --git a/www/styles/jingles.css b/www/styles/jingles.css index 04d0364..065dfa9 100644 --- a/www/styles/jingles.css +++ b/www/styles/jingles.css @@ -19,3 +19,7 @@ * You should have received a copy of the GNU Affero General Public License * along with rhwebimport. If not, see <http://www.gnu.org/licenses/>. */ + +#app-jingles .group { + margin-bottom: 40px; +} diff --git a/www/styles/main-style.css b/www/styles/main-style.css index eef0e63..38796fe 100644 --- a/www/styles/main-style.css +++ b/www/styles/main-style.css @@ -74,3 +74,39 @@ body { font-weight: bold; font-size: 1.6em; } + +#uploadModal { + width: 90%; + max-width: 560px; + min-width: 280px; + margin-top: 0; +} + +#uploadModal.fade { + top: -250px; +} + +#uploadModal.fade.in { + top: 10px; +} + +#uploadModal div.modal-body { + padding-left: 0; + padding-right: 0; + width: 100%; + height: 250px; + background-image: url('/img/dz-backdrop.png'); + background-repeat: no-repeat; + background-position: center center; +} + +#uploadModal div.modal-body form { + display: block; + width: 100%; + height: 100%; + margin: 0px; +} + +#uploadModal div.modal-body form div.dz-preview { + display: none; +} diff --git a/www/styles/shows.css b/www/styles/shows.css index fd62ff4..f902257 100644 --- a/www/styles/shows.css +++ b/www/styles/shows.css @@ -23,35 +23,8 @@ #show-title { text-align: center; } + #show-details { margin-top: 1.5em; margin-bottom: 1em; } -#current-week { - display: block; - margin: 0.5em; - padding: 0.5em 1em; -} -#shows-upload { - width: 90%; - max-width: 560px; - min-width: 280px; -} -#shows-upload div.modal-body { - margin-left: auto; - margin-right: auto; - width: 250px; - height: 250px; - background-image: url('/img/dz-backdrop.png'); - background-repeat: no-repeat; - background-position: center center; -} -#shows-upload div.modal-body form { - display: block; - width: 100%; - height: 100%; - margin: 0px; -} -#shows-upload div.modal-body form div.dz-preview { - display: none; -} |