Tightened up how we show the "please wait" dialog.

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 ; }

vasl_templates/webapp/static/css/snippets.css

@@ -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 ; }
-

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 ; }

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 + ":<div class='pre'>" + escapeHTML(errorMsg) + "</div>" ) ;
     } ) ;
 }

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" ) ;
     }
 }

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:<div class='pre'>" + escapeHTML(errorMsg) + "</div>" ) ;
 
         } ) ;

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 <em>vasl-templates</em> setup:<div class='pre'>" + escapeHTML(errorMsg) + "</div>" ) ;
         } ) ;
     }
@@ -959,12 +959,12 @@ function onDownloads() {
         // could end up replacing the webapp in the browser :-/ Wrapping the button with an <a> 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:<div class='pre'>" + escapeHTML(errorMsg) + "</div>" ) ;
         } ) ;
     }

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:<div class='pre'>" + escapeHTML(errorMsg) + "</div>" ) ;
         } ) ;
         return ;

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 ) ; }

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:<div class='pre'>" + escapeHTML(errorMsg) + "</div>" ) ;
     } ) ;
 }
@@ -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:<div class='pre'>" + escapeHTML(errorMsg) + "</div>" ) ;
     } ) ;
 }
@@ -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 ) ;
-        },
-    } ) ;
-}

vasl_templates/webapp/templates/index.html

@@ -29,12 +29,12 @@
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/vassal-shim.css')}}" />
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/lfa.css')}}" />
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/lfa-upload.css')}}" />
-<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/snippets.css')}}" />
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/scenario-search-dialog.css')}}" />
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/scenario-card.css')}}" />
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/scenario-upload-dialog.css')}}" />
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/scenario-downloads-dialog.css')}}" />
 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/user-settings-dialog.css')}}" />
+<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/please-wait.css')}}" />
 
 </head>
 
@@ -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"%}
 
 </body>
 

vasl_templates/webapp/templates/please-wait.html

@@ -0,0 +1,4 @@
+<div id="please-wait" style="display:none;">
+    <img src="{{url_for('static',filename='images/loader.gif')}}">
+    <div class="message"> <div class="content"></div> </div>
+</div>

vasl_templates/webapp/templates/snippets.html

@@ -1,4 +0,0 @@
-<div id="make-snippet-image" style="display:none;">
-    <img src="{{url_for('static',filename='images/loader.gif')}}">
-    Generating the snippet image...
-</div>

vasl_templates/webapp/templates/vassal.html

@@ -1,8 +1,3 @@
-<div id="vassal-shim-progress" style="display:none;">
-    <img src="{{url_for('static',filename='images/loader.gif')}}">
-    <span class="message"> ... </span>
-</div>
-
 <div id="vassal-shim-error" style="display:none;">
     <div class="message"></div>
     <textarea class="log"></textarea>