diff --git a/hugvey/panopticon.py b/hugvey/panopticon.py index 8465bc3..0859238 100644 --- a/hugvey/panopticon.py +++ b/hugvey/panopticon.py @@ -97,6 +97,16 @@ class NonCachingStaticFileHandler(tornado.web.StaticFileHandler): def getUploadHandler(central_command): class UploadHandler(tornado.web.RequestHandler): + def set_default_headers(self): + # headers for CORS + self.set_header("Access-Control-Allow-Origin", "*") + self.set_header("Access-Control-Allow-Headers", "x-requested-with") + self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS') + def options(self): + # OPTIONS request for CORS + self.set_status(204) + self.finish() + def post(self): print('upload') langCode = self.get_argument("language") @@ -113,17 +123,21 @@ def getUploadHandler(central_command): original_fname = audioFile['filename'] fname = ''.join(random.choice(string.ascii_lowercase + string.digits) for x in range(10)) ext = os.path.splitext(original_fname)[1] - audioFilename = os.path.join(central_command.config['web']['files_dir'], fname + ext) + audioFilename = os.path.join(central_command.config['web']['files_dir'], langCode, fname + ext) for i, data in enumerate(storyData): if data['@id'] != msgId: continue + if 'audio' in storyData[i] and os.path.exists(storyData[i]['audio']['file']): + logger.info(f"Remove previous file {storyData[i]['audio']['file']} ({storyData[i]['audio']['original_name']})") + os.unlink(storyData[i]['audio']['file']) + storyData[i]['audio'] = { 'file': audioFilename, 'original_name': original_fname } - with open(audioFilename, 'r') as fp: + with open(audioFilename, 'wb') as fp: logger.info(f'Save {original_fname} to {audioFilename}') -# fp.write(audioFile['body']) + fp.write(audioFile['body']) break print(os.path.abspath(langFile)) @@ -131,6 +145,7 @@ def getUploadHandler(central_command): logger.info(f'Save story to {langFile} {json_fp}') json.dump(storyData, json_fp) self.finish() + return UploadHandler class Panopticon(object): diff --git a/local b/local index 5c90637..9112548 160000 --- a/local +++ b/local @@ -1 +1 @@ -Subproject commit 5c90637e81eda5fa4c9a80ae10804c3106941cc7 +Subproject commit 9112548c869a139e3b7fa88ba6d026e107b1064a diff --git a/www/css/styles.css b/www/css/styles.css index 5dd028d..90663ae 100644 --- a/www/css/styles.css +++ b/www/css/styles.css @@ -116,7 +116,7 @@ body { display: block; margin: 0 -10px; padding: 5px 10px; } - #story label input, #story label select { + #story label input, #story label select, #story label .label-value { float: right; } #story label:nth-child(odd) { background-color: rgba(255, 255, 255, 0.3); } diff --git a/www/js/hugvey_console.js b/www/js/hugvey_console.js index ef15563..c3201c9 100644 --- a/www/js/hugvey_console.js +++ b/www/js/hugvey_console.js @@ -215,6 +215,20 @@ class Graph { if ( msg['start'] == true ) { startAttributes['checked'] = 'checked'; } + let audioSpan = crel( + 'span', + { + 'title': msg['audio'] ? msg['audio']['file'] : "", + 'class': "label-value", + }, + msg['audio'] ? msg['audio']['original_name'] : "" + ); + if(msg['audio']) { + audioSpan.appendChild(crel( + 'audio', {'controls': 'controls'}, + crel('source', {'src':msg['audio']['file']}) + )); + } let msgInfoEl = crel( 'div', { 'class': 'msg__info' }, crel( 'h1', { 'class': 'msg__id' }, msg['@id'] ), crel( 'label', @@ -230,11 +244,30 @@ class Graph { crel( 'label', crel( 'span', 'Start' ), crel( 'input', startAttributes ) + ), + + crel( 'label', + crel( 'span', 'Audio' ), + audioSpan, + crel( 'input', { + 'type': 'file', + 'name': 'audio', + 'accept': '.wav,.ogg,.mp3', + 'on': { + 'change': function(e) { + audioSpan.innerHTML = "..."; + panopticon.graph.saveJson(msg['@id'], e.target, function(e2){ + console.log(e); + audioSpan.innerHTML = e.target.files[0].name + "*"; + }); +// console.log(this,e); + } + } + } ) ) ); msgEl.appendChild( msgInfoEl ); -// crel('form') // let directionHEl = document.createElement('h2'); // directionHEl.innerHTML = "Directions"; @@ -602,7 +635,7 @@ class Graph { } } - saveJson( msg_id, fileInputElement ) { + saveJson( msg_id, fileInputElement, callback ) { if ( !this.language_code ) { alert( "Make sure to load a language first" ) } @@ -621,6 +654,11 @@ class Graph { console.log( formData ); var request = new XMLHttpRequest(); request.open( "POST", "http://localhost:8888/upload" ); + + if(callback) { + request.addEventListener( "load", callback); + } + request.send( formData ); } diff --git a/www/scss/styles.scss b/www/scss/styles.scss index b6dbcca..203bfef 100644 --- a/www/scss/styles.scss +++ b/www/scss/styles.scss @@ -167,7 +167,7 @@ body{ margin: 0 -10px; padding: 5px 10px; } - label input,label select{ + label input,label select, label .label-value{ float: right; } label:nth-child(odd){