From 222b85597fa66af43c68f0b88d68f2641533f52c Mon Sep 17 00:00:00 2001 From: Peter Grassberger Date: Fri, 24 Jun 2016 00:07:46 +0200 Subject: add websockets diff --git a/www/index.html b/www/index.html index 56130cc..12ab827 100644 --- a/www/index.html +++ b/www/index.html @@ -78,6 +78,24 @@

Datei auswählen...

+
+ +
+ oder
+
+ + + + +
diff --git a/www/js/importer.js b/www/js/importer.js index b34c4b6..96e7fc2 100644 --- a/www/js/importer.js +++ b/www/js/importer.js @@ -30,87 +30,83 @@ Rdxport.Importer = function(username, token) { this.$el = $('#uploadModal'); this.uploads = []; - this.webSocket = null; + this.socketUploads = []; + this.listWebSocket = null; - this.initWebSocket(); + this.initListWebSocket(); }; Rdxport.Importer.CMD_LIST = 'list'; Rdxport.Importer.CMD_NEW = 'new'; Rdxport.Importer.CMD_RECONNECT = 'reconnect'; - -Rdxport.Importer.prototype.initWebSocket = function() { +Rdxport.Importer.ERROR_OK = 'ok'; +Rdxport.Importer.ERROR_ERROR = 'error'; +Rdxport.Importer.TYPE_ERROR = 'error'; +Rdxport.Importer.TYPE_ACK = 'ack'; +Rdxport.Importer.TYPE_LIST = 'list'; +Rdxport.Importer.TYPE_PROGRESS = 'progress'; +Rdxport.Importer.TYPE_DONE = 'done'; + +Rdxport.Importer.prototype.initListWebSocket = function() { var importer = this; - var webSocket = new WebSocket('wss://import.helsinki.at/rhimportd'); + this.listWebSocket = new WebSocket('wss://import.helsinki.at/rhimportd'); - webSocket.onclose = function(code, reason) { + this.listWebSocket.onclose = function (code, reason) { console.log('close'); console.log(code); console.log(reason); }; - webSocket.onerror = function() { + this.listWebSocket.onerror = function (error) { console.log('error'); + console.log(error); }; - webSocket.onopen = function() { + this.listWebSocket.onopen = function () { console.log('open'); - - console.log('send new'); - var sendOptions = { - COMMAND: Rdxport.Importer.CMD_NEW, - LOGIN_NAME: importer.username, - PASSWORD: importer.token, - TIMEOUT: 200, - REFERENCE_ID: "999", - SHOW_ID: 10000, - CLEAR_SHOW_CARTS: true, - SOURCE_URI: 'archiv://2016/03/31/05' - }; - console.log(sendOptions); - this.send(JSON.stringify(sendOptions)); }; - webSocket.onmessage = function(event) { + this.listWebSocket.onmessage = function (event) { console.log('message'); console.log(event.data); - }; - - /*this.webSocket = new WebSocket('wss://import.helsinki.at/rhimportd'); - this.webSocket.onclose = function(code, reason) { - console.log('close'); - console.log(code); - console.log(reason); - }; - - this.webSocket.onerror = function() { - console.log('error'); + var data = $.parseJSON(event.data); + if (data.TYPE.toLowerCase() === Rdxport.Importer.TYPE_LIST) { + $.each(data.SESSIONS, function(id, reference) { + //todo: set group, groupView, cart, cut + var upload = new Rdxport.SocketUpload(null, null, null, null, null, null); + upload.reconnect(id, reference); + self.socketUploads.push(upload); + }); + } }; +}; - this.webSocket.onopen = function() { - console.log('open'); - - console.log('send reconnect'); - var reconnectOptions = { - COMMAND: Rdxport.Importer.CMD_RECONNECT, - LOGIN_NAME: importer.username, - PASSWORD: importer.token - }; - console.log(reconnectOptions); - this.send(JSON.stringify(reconnectOptions)); +Rdxport.Importer.prototype.updateWebsocketUploads = function() { + console.log('send new'); + var sendOptions = { + COMMAND: Rdxport.Importer.CMD_LIST, + LOGIN_NAME: importer.username, + PASSWORD: importer.token, + TIMEOUT: 200, + REFERENCE_ID: "999", + SHOW_ID: 10000, + CLEAR_SHOW_CARTS: true, + SOURCE_URI: 'archiv://2016/03/31/05/00' }; - - this.webSocket.onmessage = function(event) { - console.log('message'); - console.log(event.data); - };*/ + // todo: get rid of timeout + var listWebSocket = this.listWebSocket; + setTimeout(function() { + console.log(sendOptions); + listWebSocket.send(JSON.stringify(sendOptions)); + }, 1000); }; Rdxport.Importer.prototype.resetModal = function() { $('div.modal-header h4', this.$el).text("Datei auswählen..."); - $('.modal-body', this.$el).empty().css("background-image", "url('/img/dz-backdrop.png')"); + $('.modal-body .drop', this.$el).empty().css("background-image", "url('/img/dz-backdrop.png')"); + $('.modal-body #sourceUri', this.$el).val(''); $('#uploadModal-confirm', this.$el).attr('disabled','disabled').off('click'); }; @@ -119,7 +115,7 @@ Rdxport.Importer.prototype.openModal = function(group, groupView, createCart, ne useMetadata = typeof useMetadata === 'undefined' ? false : useMetadata; this.resetModal(); - $('.modal-body', this.$el).append($('
')); + $('.modal-body .drop', this.$el).append($('')); var dropzone = new Dropzone('#uploadModal form', { url: '/rd-bin/rdxport.cgi', @@ -143,13 +139,14 @@ Rdxport.Importer.prototype.openModal = function(group, groupView, createCart, ne dropzone.on('addedfile', function(file) { if (!Dropzone.isValidFile(file, dropzone.options.acceptedFiles)) { $('div.modal-header h4', self.$el).text('Nicht unterstützter Dateityp.'); - $('.modal-body', this.$el).css("background-image", "url('/img/dz-backdrop.png')"); + $('.modal-body .drop', this.$el).css("background-image", "url('/img/dz-backdrop.png')"); $('#uploadModal-confirm', this.$el).attr('disabled','disabled').off('click'); return; } $('div.modal-header h4', self.$el).text(file.name); - $('div.modal-body', self.$el).css("background-image", "url('/img/audio_file.png')"); + $('div.modal-body .drop', self.$el).css("background-image", "url('/img/audio_file.png')"); + $('.modal-body #sourceUri', self.$el).val(''); $('#uploadModal-confirm', self.$el).off('click').on('click', function() { var upload = new Rdxport.Upload(group, groupView, createCart, newCartNumber, useMetadata, dropzone); @@ -161,21 +158,52 @@ Rdxport.Importer.prototype.openModal = function(group, groupView, createCart, ne .removeAttr('disabled').focus(); }); + $('.modal-body #sourceUri', this.$el).off().on('keyup change', function(event) { + if ($(this).val() === '') { + $('#uploadModal-confirm', self.$el).off('click').attr('disabled', 'disabled'); + return; + } + $('.modal-body .drop', self.$el).css("background-image", "url('/img/dz-backdrop.png')"); + $('#uploadModal-confirm', self.$el).off('click').on('click', function() { + var sourceUri = $('.modal-body #sourceUri', self.$el).val(); + var upload = new Rdxport.SocketUpload(group, groupView, createCart, newCartNumber, useMetadata, sourceUri); + upload.import(); + self.socketUploads.push(upload); + + self.$el.off('hide.bs.modal'); + self.$el.modal('hide'); + }) + .removeAttr('disabled'); + }); + this.$el.modal({keyboard: true}); }; -Rdxport.Importer.prototype.isUploading = function() { +Rdxport.Importer.prototype.isUploading = function(includeSocketUploads) { + includeSocketUploads = includeSocketUploads || false; + var uploads = this.uploads; + if (includeSocketUploads) { + uploads = this.uploads.concat(this.socketUploads); + } + var $result = false; - $.each(this.uploads, function(index, upload) { + $.each(uploads, function(index, upload) { if (upload && upload.isUploading()) { $result = true; + return false; } }); return $result; }; -Rdxport.Importer.prototype.cancelAllUploads = function() { - $.each(this.uploads, function(index, upload){ +Rdxport.Importer.prototype.cancelAllUploads = function(includeSocketUploads) { + includeSocketUploads = includeSocketUploads || false; + var uploads = this.uploads; + if (includeSocketUploads) { + uploads = this.uploads.concat(this.socketUploads); + } + + $.each(uploads, function(index, upload) { if (upload) { upload.cancel(); } @@ -187,16 +215,24 @@ Rdxport.Importer.prototype.removeUpload = function(upload) { $.each(this.uploads, function(index, currentUpload){ if(currentUpload === upload) { self.uploads.splice(index, 1); + return false; + } + }); + $.each(this.socketUploads, function(index, currentUpload){ + if(currentUpload === upload) { + self.socketUploads.splice(index, 1); + return false; } }); }; Rdxport.Importer.prototype.getUploadByCartNumber = function (cartNumber) { var upload = null; - $.each(this.uploads, function(index, currentUpload){ - if (currentUpload.cart !== null && - currentUpload.cart.number === cartNumber ) { - upload = currentUpload; + var uploads = this.uploads.concat(this.socketUploads); + $.each(uploads, function(index, currentUpload) { + if (currentUpload.newCartNumber === cartNumber ) { + upload = currentUpload; + return false; } }); return upload; @@ -204,17 +240,191 @@ Rdxport.Importer.prototype.getUploadByCartNumber = function (cartNumber) { Rdxport.Importer.prototype.getUploadByCartAndCutNumber = function (cartNumber, cutNumber) { var upload = null; - $.each(this.uploads, function(index, currentUpload) { - if (currentUpload.cart !== null && - currentUpload.cart.number === cartNumber && - currentUpload.cut !== null && - currentUpload.cut.number === cutNumber) { + var uploads = this.uploads.concat(this.socketUploads); + $.each(uploads, function(index, currentUpload) { + if (currentUpload.newCartNumber === cartNumber && + currentUpload.cut !== null && + currentUpload.cut.number === cutNumber) { upload = currentUpload; + return false; } }); return upload; }; +Rdxport.SocketUpload = function(group, groupView, createCart, newCartNumber, useMetadata, sourceUri) { + this.group = group; + this.groupView = groupView; + this.createCart = createCart; + this.newCartNumber = newCartNumber; + this.useMetadata = useMetadata; + this.sourceUri = sourceUri; + + this.webSocket = null; + this.uploadprogress = { + progress: 0, + progress_step: 0, + progress_step_name: '', + total: 0, + bytesSent: 0 + }; + this.cart = createCart ? null : this.group.carts[0]; + this.cut = null; +}; + +Rdxport.SocketUpload.prototype.reconnect = function(id, reference) { + this.webSocket = new WebSocket('wss://import.helsinki.at/rhimportd'); + + this.webSocket.onclose = function(code, reason) { + console.log('close'); + console.log(code); + console.log(reason); + }; + + this.webSocket.onerror = function(error) { + console.log('error'); + console.log(error); + }; + + this.webSocket.onopen = function() { + console.log('open'); + + console.log('send reconnect'); + var reconnectOptions = { + COMMAND: Rdxport.Importer.CMD_RECONNECT, + LOGIN_NAME: importer.username, + PASSWORD: importer.token, + ID: id + }; + console.log(reconnectOptions); + this.send(JSON.stringify(reconnectOptions)); + }; + + this.webSocket.onmessage = function(event) { + console.log('message'); + console.log(event.data); + }; +}; + +Rdxport.SocketUpload.prototype.isUploading = function() { + return this.uploadprogress.progress < 100; +}; + +Rdxport.SocketUpload.prototype.cancel = function() { + + //todo cancel socket + + /*var self = this; + if (this.createCart && this.cart !== null) { + rdxport.removeCart(this.cart.number, function() { + self.group.fetchCarts(); + }); + this.cart = null; + } else if (this.cart !== null && this.cut !== null) { + rdxport.removeCut(this.cart.number, this.cut.number, function() { + self.group.fetchCarts(); + }); + this.cut = null; + }*/ + + importer.removeUpload(this); +}; + +Rdxport.SocketUpload.prototype.import = function() { + var self = this; + + this.webSocket = new WebSocket('wss://import.helsinki.at/rhimportd'); // todo: put url somewhere + + this.webSocket.onclose = function(code, reason) { + console.log('close'); + console.log(code); + console.log(reason); + }; + + this.webSocket.onerror = function(error) { + console.log('error'); + + var file = { + cartNumber: self.newCartNumber, + cutNumber: null + }; + self.importFileUploadError(file, error); + }; + + this.webSocket.onopen = function() { + console.log('open'); + + console.log('send new'); + var sendOptions = { + COMMAND: Rdxport.Importer.CMD_NEW, + LOGIN_NAME: importer.username, + PASSWORD: importer.token, + TIMEOUT: 200, + REFERENCE_ID: '999', + SOURCE_URI: self.sourceUri, + CHANNELS: 2, + // todo: is this needed? + //NORMALIZATION_LEVEL: self.cart.normlevel, + //AUTOTRIM_LEVEL: self.cart.trimlevel, + USE_METADATA: self.useMetadata + }; + if (self.newCartNumber) { + sendOptions.CART_NUMBER = parseInt(self.newCartNumber); + } else if(self.cart) { + sendOptions.CART_NUMBER = parseInt(self.cart.number); + } + if (self.createCart && self.group instanceof Rdxport.Musicpool) { + sendOptions.MUSIC_POOL_GROUP = self.group.groupName; + } + console.log(sendOptions); + this.send(JSON.stringify(sendOptions)); + + self.group.fetchCarts(); + }; + + this.webSocket.onmessage = function(event) { + console.log(event.data); + + var file = { + cartNumber: self.newCartNumber, + cutNumber: null + }; + + var data = $.parseJSON(event.data); + + switch (data.TYPE.toLowerCase()) { + case Rdxport.Importer.TYPE_ERROR: + self.importFileUploadError(file, data.ERROR_STRING); + break; + case Rdxport.Importer.TYPE_PROGRESS: + self.uploadprogress = { + progress: data.PROGRESS, + progress_step: data.PROGRESS_STEP, + progress_step_name: data.PROGRESS_STEP_NAME, + total: 0, + bytesSent: 0 + }; + self.groupView.uploadProgress(self, file); + break; + case Rdxport.Importer.TYPE_DONE: + self.importFileUploadSuccess(); + break; + } + }; +}; + +Rdxport.SocketUpload.prototype.importFileUploadSuccess = function() { + importer.removeUpload(this); + this.group.fetchCarts(); +}; + +Rdxport.SocketUpload.prototype.importFileUploadError = function(file, msg, xhr) { + var self = this; + this.groupView.uploadError(this, file, msg, xhr, function() { + self.cancel(); + }); +}; + Rdxport.Upload = function(group, groupView, createCart, newCartNumber, useMetadata, dropzone) { this.group = group; this.groupView = groupView; diff --git a/www/js/jingles.js b/www/js/jingles.js index e819570..48c7f13 100644 --- a/www/js/jingles.js +++ b/www/js/jingles.js @@ -29,6 +29,7 @@ var jingleGroupListView = null; function jingles_init() { var groupList = new Rdxport.GroupList(); jingleGroupListView = new Rdxport.JingleGroupListView(groupList); + importer.updateWebsocketUploads(); } function jingles_cleanup() { diff --git a/www/js/musicpools.js b/www/js/musicpools.js index 5b3d491..6719183 100644 --- a/www/js/musicpools.js +++ b/www/js/musicpools.js @@ -29,6 +29,7 @@ var musicpoolsView = null; function musicpools_init(subpage) { var musicpools = new Rdxport.GroupList(); musicpoolsView = new Rdxport.MusicpoolsView(musicpools, subpage); + importer.updateWebsocketUploads(); } function musicpools_cleanup() { diff --git a/www/js/shows.js b/www/js/shows.js index 233a5c3..03855fe 100644 --- a/www/js/shows.js +++ b/www/js/shows.js @@ -29,6 +29,7 @@ var showListView = null; function shows_init(subpage) { var showList = new Rdxport.GroupList(); showListView = new Rdxport.ShowListView(showList, subpage); + importer.updateWebsocketUploads(); drawClock('Do, 1.1.1970', '00:00:00', 0); clock_add_callback(drawClock); diff --git a/www/styles/main-style.css b/www/styles/main-style.css index a3e0c7a..5757f73 100644 --- a/www/styles/main-style.css +++ b/www/styles/main-style.css @@ -81,11 +81,15 @@ body { } #uploadModal div.modal-body { + text-align: center; +} + +#uploadModal div.modal-body .drop { padding-left: 0; padding-right: 0; width: 100%; height: 250px; - background-image: url('/img/dz-backdrop.png'); + background-image: url('img/dz-backdrop.png'); background-repeat: no-repeat; background-position: center center; } -- cgit v0.10.2