summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPeter Grassberger <petertheone@gmail.com>2015-09-06 02:15:59 (GMT)
committerPeter Grassberger <petertheone@gmail.com>2015-09-06 02:15:59 (GMT)
commitb8c174cf5f3321c7f10620f204daa2824e48fc46 (patch)
tree6d06674418f81b1e4803020939fa541282278716
parentbea885985e9763cb0a4dfa0e69c084ba26b65c5a (diff)
add rudimentary jingles audio import
-rw-r--r--www/index.html65
-rw-r--r--www/js/jingles.js189
-rw-r--r--www/js/shows.js31
-rw-r--r--www/styles/jingles.css4
-rw-r--r--www/styles/main-style.css36
-rw-r--r--www/styles/shows.css29
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">&times;</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">&times;</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;
-}