From 9089203550781ee377cda76608efda8fe44e0ccb Mon Sep 17 00:00:00 2001 From: Taka Date: Mon, 12 Oct 2020 01:33:39 +0000 Subject: [PATCH] Tightened up how we show the "please wait" dialog. --- .../webapp/static/css/please-wait.css | 5 ++++ vasl_templates/webapp/static/css/snippets.css | 4 --- .../webapp/static/css/vassal-shim.css | 4 --- vasl_templates/webapp/static/lfa-upload.js | 8 ++--- vasl_templates/webapp/static/main.js | 2 +- .../webapp/static/scenario-upload.js | 6 ++-- vasl_templates/webapp/static/scenarios.js | 12 ++++---- vasl_templates/webapp/static/snippets.js | 22 ++++++-------- vasl_templates/webapp/static/utils.js | 22 ++++++++++++++ vasl_templates/webapp/static/vassal.js | 30 ++++--------------- vasl_templates/webapp/templates/index.html | 4 +-- .../webapp/templates/please-wait.html | 4 +++ vasl_templates/webapp/templates/snippets.html | 4 --- vasl_templates/webapp/templates/vassal.html | 5 ---- 14 files changed, 61 insertions(+), 71 deletions(-) create mode 100644 vasl_templates/webapp/static/css/please-wait.css delete mode 100644 vasl_templates/webapp/static/css/snippets.css create mode 100644 vasl_templates/webapp/templates/please-wait.html delete mode 100644 vasl_templates/webapp/templates/snippets.html diff --git a/vasl_templates/webapp/static/css/please-wait.css b/vasl_templates/webapp/static/css/please-wait.css new file mode 100644 index 0000000..c8856cd --- /dev/null +++ b/vasl_templates/webapp/static/css/please-wait.css @@ -0,0 +1,5 @@ +.ui-dialog.please-wait .ui-dialog-titlebar { display: none ; } + +#please-wait { display: flex ; justify-content: center ; padding: 10px !important ; } +#please-wait img { align-self: flex-start ; flex-shrink: 0 ; margin-right: 1em ; } +#please-wait .message { flex-grow: 1 ; display: flex ; flex-direction: column ; justify-content: center ; min-height: 32px ; } diff --git a/vasl_templates/webapp/static/css/snippets.css b/vasl_templates/webapp/static/css/snippets.css deleted file mode 100644 index 75ed3f7..0000000 --- a/vasl_templates/webapp/static/css/snippets.css +++ /dev/null @@ -1,4 +0,0 @@ -.ui-dialog.make-snippet-image .ui-dialog-titlebar { display: none ; } -#make-snippet-image { display: flex ; align-items: center ; } -#make-snippet-image img { margin-right: 1em ; } - diff --git a/vasl_templates/webapp/static/css/vassal-shim.css b/vasl_templates/webapp/static/css/vassal-shim.css index 75ae0a7..d6e2d0d 100644 --- a/vasl_templates/webapp/static/css/vassal-shim.css +++ b/vasl_templates/webapp/static/css/vassal-shim.css @@ -1,7 +1,3 @@ -.ui-dialog.vassal-shim-progress .ui-dialog-titlebar { display: none ; } -#vassal-shim-progress { display: flex ; align-items: center ; } -#vassal-shim-progress img { margin-right: 1em ; } - #vassal-shim-error textarea { width: 100% ; height: 15em ; min-height: 5em ; resize: none ; padding: 2px ; font-family: monospace ; font-size: 80% ; } .ui-dialog.vassal-shim-error .ui-dialog-titlebar { background: #f5af41 ; } .ui-dialog.vassal-shim-error .ui-dialog-content { display: flex ; flex-direction: column ; } diff --git a/vasl_templates/webapp/static/lfa-upload.js b/vasl_templates/webapp/static/lfa-upload.js index 9796f1e..a8dfc21 100644 --- a/vasl_templates/webapp/static/lfa-upload.js +++ b/vasl_templates/webapp/static/lfa-upload.js @@ -224,22 +224,20 @@ function analyzeLogFiles( vlog_data ) { // send a request to analyze the log files var objName = pluralString( vlog_data.length, "log file", "log files" ) ; - var $dlg = _show_vassal_shim_progress_dlg( - "Analyzing your " + objName + "..." - ) ; + var $pleaseWait = showPleaseWaitDialog( "Analyzing your " + objName + "...", { width: 255 } ) ; $.ajax( { url: gAnalyzeVlogsUrl, type: "POST", data: JSON.stringify( vlog_data ), contentType: "application/json", } ).done( function( data ) { - $dlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; resp = checkResponse( data, objName ) ; if ( ! resp ) return ; show_lfa_dialog( resp ) ; } ).fail( function( xhr, status, errorMsg ) { - $dlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; showErrorMsg( "Can't analyze the " + objName + ":
" + escapeHTML(errorMsg) + "
" ) ; } ) ; } diff --git a/vasl_templates/webapp/static/main.js b/vasl_templates/webapp/static/main.js index a0fcf69..1f99ee7 100644 --- a/vasl_templates/webapp/static/main.js +++ b/vasl_templates/webapp/static/main.js @@ -899,7 +899,7 @@ function handle_escape( evt ) } ) ; if ( $topmost ) { var $dlg = $topmost.children( ".ui-dialog-content" ) ; - if ( ["ask","lfa","vassal-shim-progress"].indexOf( $dlg.attr("id") ) === -1 ) + if ( ["please-wait","ask","lfa"].indexOf( $dlg.attr("id") ) === -1 ) $topmost.children( ".ui-dialog-content" ).dialog( "close" ) ; } } diff --git a/vasl_templates/webapp/static/scenario-upload.js b/vasl_templates/webapp/static/scenario-upload.js index 3726498..777932c 100644 --- a/vasl_templates/webapp/static/scenario-upload.js +++ b/vasl_templates/webapp/static/scenario-upload.js @@ -298,7 +298,7 @@ function uploadFiles( asaScenarioId ) url = "/test-asa-upload/{ID}?user={USER}&token={TOKEN}" ; } url = url.replace( "{ID}", asaScenarioId ).replace( "{USER}", userName ).replace( "{TOKEN}", apiToken ) ; - var $dlg = _show_vassal_shim_progress_dlg( "Uploading your scenario..." ) ; + var $pleaseWait = showPleaseWaitDialog( "Uploading your scenario...", { width: 260 } ) ; $.ajax( { url: url, method: "POST", @@ -309,7 +309,7 @@ function uploadFiles( asaScenarioId ) } ).done( function( resp ) { // check the response - $dlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; if ( resp.result.status == "ok" ) { var msg = resp.result.message ? resp.result.message.replace("1 file(s)","1 file") : "The scenario was uploaded OK." ; showInfoMsg( msg ) ; @@ -333,7 +333,7 @@ function uploadFiles( asaScenarioId ) } ).fail( function( xhr, status, errorMsg ) { // the upload failed - report the error - $dlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; showErrorMsg( "Can't upload the scenario:
" + escapeHTML(errorMsg) + "
" ) ; } ) ; diff --git a/vasl_templates/webapp/static/scenarios.js b/vasl_templates/webapp/static/scenarios.js index 548e15e..fd8f868 100644 --- a/vasl_templates/webapp/static/scenarios.js +++ b/vasl_templates/webapp/static/scenarios.js @@ -934,11 +934,11 @@ function onDownloads() { function onDownloadVtSetup( url ) { // download the vasl-templates setup - var $progressDlg = _show_vassal_shim_progress_dlg( "Downloading the scenario..." ) ; + var $pleaseWait = showPleaseWaitDialog( "Downloading the scenario..." ) ; $.ajax( { url: url, type: "GET", } ).done( function( resp ) { - $progressDlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; // the file was downloaded OK - load it into the UI var fname = url.split( "/" ).pop() ; if ( ! do_load_scenario( JSON.stringify(resp), fname ) ) @@ -947,7 +947,7 @@ function onDownloads() { $dlg.dialog( "close" ) ; $gDialog.dialog( "close" ) ; } ).fail( function( xhr, status, errorMsg ) { - $progressDlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; showErrorMsg( "Can't download the vasl-templates setup:
" + escapeHTML(errorMsg) + "
" ) ; } ) ; } @@ -959,12 +959,12 @@ function onDownloads() { // could end up replacing the webapp in the browser :-/ Wrapping the button with an tag // sorta works, but it can cause an external browser window to open, and remain open :-/ // We download the file ourself and then ask the user to save it. - var $progressDlg = _show_vassal_shim_progress_dlg( "Downloading the VASL scenario...", 330 ) ; + var $pleaseWait = showPleaseWaitDialog( "Downloading the VASL scenario...", { width: 320 } ) ; $.ajax( { url: url, type: "GET", xhrFields: { responseType: "arraybuffer" } } ).done( function( resp ) { - $progressDlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; // the file was downloaded OK - give it to the user to save var fname = url.split( "/" ).pop().split( "|" ).pop() ; if ( gWebChannelHandler ) { @@ -978,7 +978,7 @@ function onDownloads() { // all done - we can now close the downloads popup $dlg.dialog( "close" ) ; } ).fail( function( xhr, status, errorMsg ) { - $progressDlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; showErrorMsg( "Can't download the VASL scenario:
" + escapeHTML(errorMsg) + "
" ) ; } ) ; } diff --git a/vasl_templates/webapp/static/snippets.js b/vasl_templates/webapp/static/snippets.js index 1631b44..e63527a 100644 --- a/vasl_templates/webapp/static/snippets.js +++ b/vasl_templates/webapp/static/snippets.js @@ -43,16 +43,12 @@ function generate_snippet( $btn, as_image, extra_params ) // check if the user is requesting the snippet as an image if ( as_image ) { // yup - send the snippet to the backend to generate the image - var $dlg = null ; + // NOTE: Generating the first snippet image is slow (because the backend has to spin up a webdriver), + // but subsequent snippet images are very fast, so we wait for a short while, and if a response + // hasn't been received, then we show a "please wait" dialog. + var $pleaseWait = null ; var timeout_id = setTimeout( function() { - $dlg = $( "#make-snippet-image" ).dialog( { - dialogClass: "make-snippet-image", - modal: true, - width: 300, - height: 60, - resizable: false, - closeOnEscape: false, - } ) ; + $pleaseWait = showPleaseWaitDialog( "Generating the snippet image..." ) ; }, 1*1000 ) ; $.ajax( { url: gMakeSnippetImageUrl, @@ -61,8 +57,8 @@ function generate_snippet( $btn, as_image, extra_params ) contentType: "text/html", } ).done( function( resp ) { clearTimeout( timeout_id ) ; - if ( $dlg ) - $dlg.dialog( "close" ) ; + if ( $pleaseWait ) + $pleaseWait.dialog( "close" ) ; if ( resp.substr( 0, 6 ) === "ERROR:" ) { showErrorMsg( resp.substr(7) ) ; return ; @@ -86,8 +82,8 @@ function generate_snippet( $btn, as_image, extra_params ) } } ).fail( function( xhr, status, errorMsg ) { clearTimeout( timeout_id ) ; - if ( $dlg ) - $dlg.dialog( "close" ) ; + if ( $pleaseWait ) + $pleaseWait.dialog( "close" ) ; showErrorMsg( "Can't get the snippet image:
" + escapeHTML(errorMsg) + "
" ) ; } ) ; return ; diff --git a/vasl_templates/webapp/static/utils.js b/vasl_templates/webapp/static/utils.js index d3f75be..49fb442 100644 --- a/vasl_templates/webapp/static/utils.js +++ b/vasl_templates/webapp/static/utils.js @@ -310,6 +310,28 @@ function showMsgDialog( title, msg, width ) } ) ; } +function showPleaseWaitDialog( msg, args ) +{ + if ( ! args ) + args = {} ; + + // show the "please wait" dialog + var $dlg = $( "#please-wait" ) ; + $dlg.find( ".message .content" ).text( msg ) ; + return $( "#please-wait" ).dialog( { + dialogClass: "please-wait", + modal: true, + closeOnEscape: false, // nb: handle_escape() has a special case to ignore this dialog + width: args.width || 300, + height: args.height || 60, + resizable: false, + open: function() { + if ( args.height ) + $(this).find( ".message" ).css( "justify-content", "flex-start" ) ; + }, + } ) ; +} + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - function showInfoMsg( msg ) { doShowNotificationMsg( "info", msg ) ; } diff --git a/vasl_templates/webapp/static/vassal.js b/vasl_templates/webapp/static/vassal.js index bc28840..e94858c 100644 --- a/vasl_templates/webapp/static/vassal.js +++ b/vasl_templates/webapp/static/vassal.js @@ -18,7 +18,7 @@ function on_update_vsav() { function _do_update_vsav( vsav_data, fname ) { // generate all the snippets - var $dlg = _show_vassal_shim_progress_dlg( "Updating your VASL scenario..." ) ; + var $pleaseWait = showPleaseWaitDialog( "Updating your VASL scenario..." ) ; var snippets = _generate_snippets() ; // send a request to update the VSAV @@ -35,7 +35,7 @@ function _do_update_vsav( vsav_data, fname ) data: JSON.stringify( data ), contentType: "application/json", } ).done( function( resp ) { - $dlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; data = _check_vassal_shim_response( resp, "Can't update the VASL scenario." ) ; if ( ! data ) return ; @@ -63,7 +63,7 @@ function _do_update_vsav( vsav_data, fname ) } download( atob(data.vsav_data), data.filename, "application/octet-stream" ) ; } ).fail( function( xhr, status, errorMsg ) { - $dlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; showErrorMsg( "Can't update the VASL scenario:
" + escapeHTML(errorMsg) + "
" ) ; } ) ; } @@ -326,7 +326,7 @@ function on_analyze_vsav() function _do_analyze_vsav( vsav_data, fname ) { // show the progress dialog - var $dlg = _show_vassal_shim_progress_dlg( "Analyzing the VASL scenario..." ) ; + var $pleaseWait = showPleaseWaitDialog( "Analyzing the VASL scenario..." ) ; // send a request to analyze the VSAV var data = { filename: fname, vsav_data: vsav_data } ; @@ -336,13 +336,13 @@ function _do_analyze_vsav( vsav_data, fname ) data: JSON.stringify( data ), contentType: "application/json", } ).done( function( resp ) { - $dlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; data = _check_vassal_shim_response( resp, "Can't analyze the VASL scenario." ) ; if ( ! data ) return ; _create_vo_entries_from_analysis( data ) ; } ).fail( function( xhr, status, errorMsg ) { - $dlg.dialog( "close" ) ; + $pleaseWait.dialog( "close" ) ; showErrorMsg( "Can't analyze the VASL scenario:
" + escapeHTML(errorMsg) + "
" ) ; } ) ; } @@ -537,21 +537,3 @@ function show_vassal_shim_error_dlg( resp, caption ) }, } ) ; } - -// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -function _show_vassal_shim_progress_dlg( caption, width ) -{ - // show the progress dialog - return $( "#vassal-shim-progress" ).dialog( { - dialogClass: "vassal-shim-progress", - modal: true, - width: width || 300, - height: 60, - resizable: false, - closeOnEscape: false, // nb: handle_escape() has a special case to ignore this dialog - open: function() { - $(this).find( ".message" ).text( caption ) ; - }, - } ) ; -} diff --git a/vasl_templates/webapp/templates/index.html b/vasl_templates/webapp/templates/index.html index 677e174..2bd25fc 100644 --- a/vasl_templates/webapp/templates/index.html +++ b/vasl_templates/webapp/templates/index.html @@ -29,12 +29,12 @@ - + @@ -88,11 +88,11 @@ {%include "vassal.html"%} {%include "lfa.html"%} {%include "lfa-upload.html"%} -{%include "snippets.html"%} {%include "user-settings-dialog.html"%} {%include "ask-dialog.html"%} +{%include "please-wait.html"%} diff --git a/vasl_templates/webapp/templates/please-wait.html b/vasl_templates/webapp/templates/please-wait.html new file mode 100644 index 0000000..0aa7cae --- /dev/null +++ b/vasl_templates/webapp/templates/please-wait.html @@ -0,0 +1,4 @@ + diff --git a/vasl_templates/webapp/templates/snippets.html b/vasl_templates/webapp/templates/snippets.html deleted file mode 100644 index fc611d1..0000000 --- a/vasl_templates/webapp/templates/snippets.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/vasl_templates/webapp/templates/vassal.html b/vasl_templates/webapp/templates/vassal.html index 167086a..b9d420d 100644 --- a/vasl_templates/webapp/templates/vassal.html +++ b/vasl_templates/webapp/templates/vassal.html @@ -1,8 +1,3 @@ - -