Commit 38579af3 authored by Mathieu Giraud's avatar Mathieu Giraud

Merge branch 'feature-c/3535-information-progressive-avant-timeout-plus-long' into 'dev'

Resolve "Information progressive avant timeout plus long"

Closes #3535

See merge request !416
parents b211c329 a144be3a
Pipeline #101833 passed with stages
in 13 minutes and 6 seconds
......@@ -83,6 +83,10 @@ ul {
right: 0px;
top: 32px;
}
#live-ajax-msg {
font-style: italic;
margin-right: 1em;
}
#upload_summary {
display: none;
z-index: 10;
......
......@@ -83,6 +83,10 @@ ul {
right: 0px;
top: 32px;
}
#live-ajax-msg {
font-style: italic;
margin-right: 1em;
}
#upload_summary {
display: none;
z-index: 10;
......
......@@ -83,6 +83,10 @@ ul {
right: 0px;
top: 32px;
}
#live-ajax-msg {
font-style: italic;
margin-right: 1em;
}
#upload_summary {
display: none;
z-index: 10;
......
......@@ -82,6 +82,10 @@ ul {
right: 0px;
top: 32px;
}
#live-ajax-msg {
font-style: italic;
margin-right: 1em;
}
#upload_summary {
display: none;
z-index: 10;
......
......@@ -83,6 +83,10 @@ ul {
right: 0px;
top: 32px;
}
#live-ajax-msg {
font-style: italic;
margin-right: 1em;
}
#upload_summary {
display: none;
z-index: 10;
......
......@@ -122,6 +122,11 @@ ul{
top: 32px;
}
#live-ajax-msg {
font-style: italic;
margin-right: 1em;
}
#upload_summary {
display:none;
z-index: 10;
......
......@@ -281,9 +281,10 @@
<div id="fps" style="display: none"> </div>
<div id="header_messages" class="message_container header"></div>
<div id='live-ajax'>
<div class="active-container">
<img src="images/ajax-loader.gif" />
<div id='live-ajax' style="display: flex; align-items: center">
<div id='live-ajax-msg'>
</div>
<div id='live-ajax-icon'>
</div>
</div>
......
......@@ -112,7 +112,7 @@ function Com(default_console) {
"</br> <a href='http://www.chromium.org/getting-involved/download-chromium'> Chromium </a> " +
"</br></br> <div class='center' > <button onclick='popupMsg(msg.welcome)'>I want to try anyway</button></div> ",
"database_timeout": "Cannot connect database, please retry in a few seconds ",
"database_timeout": "Cannot connect server, please retry later ",
"save_analysis": "You made some changes in the analysis of the previous patient" +
"</br>that were not saved (patients → save analysis)." +
......
......@@ -1102,18 +1102,46 @@ Database.prototype = {
return args
},
/**
* Start ajax sequence. Only the cursor changes.
*/
ajax_indicator_start: function() {
if (!(this.uploader.is_uploading())) {
var tgt = $('#live-ajax');
tgt.empty();
$('<img/>', {src: 'images/ajax-loader.gif'}).appendTo($('<div/>', {class: 'active-container'}).appendTo(tgt));
$('#live-ajax-icon').empty();
$('#live-ajax-msg').empty();
$('body').css('cursor', 'wait');
}
},
/**
* Show a spinner
*/
ajax_indicator_long: function() {
if (!(this.uploader.is_uploading())) {
var live_icon = document.getElementById("live-ajax-icon")
$('<img/>', {src: 'images/ajax-loader.gif'}).appendTo(live_icon)
}
},
/**
* Display a message to the user to tell him to wait a little more
* @param {String} message the message to said to wait to the user; optionnal
*/
ajax_indicator_msg: function(message) {
if (!(this.uploader.is_uploading())) {
if (message == undefined) { message = "waiting for server reply"}
var div_msg = document.getElementById("live-ajax-msg")
div_msg.innerHTML = message
}
},
/**
* End ajax sequence
*/
ajax_indicator_stop: function() {
var tgt = $('#live-ajax');
tgt.empty();
$('#live-ajax-icon').empty();
$('#live-ajax-msg').empty();
$('body').css('cursor', 'default');
},
......
......@@ -22,8 +22,12 @@
NOTIFICATION_PERIOD = 300000 // Time interval to check for notifications periodically (ms)
AJAX_TIMEOUT_START = 200 // Delay before cursor wait
AJAX_TIMEOUT_LONG = 600 // Delay before spinner at the top-right
AJAX_TIMEOUT_MSG1 = 5000 // Delay before first message
AJAX_TIMEOUT_MSG2 = 12000 // Delay before second message
var timeout;
var ajaxOn = 0;
/* Console (optional)
* Setting here a console replaces the default javascript console with a custom one.
......@@ -152,17 +156,51 @@ if (typeof config !== 'undefined' && typeof config.alert !== 'undefined') {
console.log("=== main.js finished ===");
var timeout;
$(document).ajaxStart(function () {
//show ajax indicator
// 0. Start AJAX sequence
var ajaxId = 1 + Math.floor(Math.random() * 1000);
ajaxOn = ajaxId
timeout = setTimeout(function(){
db.ajax_indicator_start()
}, 600);
}).ajaxStop(function () {
if (ajaxOn == ajaxId){
// 1. Show cursor
db.ajax_indicator_start()
setTimeout(function(){
if (ajaxOn == ajaxId){
// 2. Show spinner
db.ajax_indicator_long()
setTimeout(function(){
if (ajaxOn == ajaxId) {
// 3. Display message
db.ajax_indicator_msg("waiting for server reply")
setTimeout(function(){
if (ajaxOn == ajaxId) {
// 4. Display another message
db.ajax_indicator_msg("still waiting...")
}
}, AJAX_TIMEOUT_MSG2);
}
}, AJAX_TIMEOUT_MSG1);
}
}, AJAX_TIMEOUT_LONG);
}
}, AJAX_TIMEOUT_START);
})
$(document).ajaxStop(function () {
//hide ajax indicator
ajaxOn = 0;
db.ajax_indicator_stop();
clearTimeout(timeout);
});
db.ajax_indicator_stop();
// Load regularly notifications
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment