use new dialog class for asynctask dialog

This commit is contained in:
Mira Weller
2025-05-16 20:53:52 +02:00
parent c880e427c5
commit 62ba861cd2

View File

@@ -251,73 +251,73 @@ $(function () {
$("#ajaxerr").on("click", ".ajaxerr-close", ajaxErrDialog.hide); $("#ajaxerr").on("click", ".ajaxerr-close", ajaxErrDialog.hide);
}); });
var waitingDialog = { function AsyncStatusDialog(options) {
show: function (title, text, status) { ModalDialog.call(this, Object.assign({
"use strict"; content: [
this.setTitle(title); this.textEl = EL('p', {}),
this.setText(text); this.statusEl = EL('p', {}),
this.setStatus(status || gettext('If this takes longer than a few minutes, please contact us.')); this.progressEl = EL('div', {class: 'progress'}, EL('div', {class:'progress-bar progress-bar-success', hidden: ''})),
this.setProgress(null); this.stepsEl = EL('div', {class: 'steps', hidden: ''}, ''),
this.setSteps(null); ]
$("body").addClass("loading"); }, options));
$("#loadingmodal").removeAttr("hidden has-modal-dialog"); }
}, AsyncStatusDialog.prototype = Object.create(ModalDialog.prototype);
hide: function () { AsyncStatusDialog.prototype.show = function (title, text, status) {
"use strict"; ModalDialog.prototype.show.call(this);
$("body").removeClass("loading has-modal-dialog"); this.setTitle(title);
$("#loadingmodal").attr("hidden", true); this.setText(text);
}, this.setStatus(status || gettext('If this takes longer than a few minutes, please contact us.'));
setTitle: function(title) { this.setProgress(null);
$("#loadingmodal h3").text(title); this.setSteps(null);
}, }
setStatus: function(statusText) { AsyncStatusDialog.prototype.setText = function (text) {
$("#loadingmodal p.status").text(statusText); $(this.textEl).toggle(!!text);
}, this.textEl.innerText = text;
setText: function(text) { }
if (text) AsyncStatusDialog.prototype.setStatus = function (text) {
$("#loadingmodal p.text").text(text).show(); this.statusEl.innerText = text;
else }
$("#loadingmodal p.text").hide(); AsyncStatusDialog.prototype.setProgress = function (percent) {
}, $(this.progressEl).toggle(typeof percent === 'number').find('.progress-bar').css('width', percent + '%');
setProgress: function(percentage) { }
if (typeof percentage === 'number') { AsyncStatusDialog.prototype.setSteps = function (steps) {
$("#loadingmodal .progress").show(); var $steps = $(this.stepsEl);
$("#loadingmodal .progress .progress-bar").css("width", percentage + "%"); if (typeof steps === "object" && Array.isArray(steps)) {
} else { $steps.html("").show();
$("#loadingmodal .progress").hide(); for (var step of steps) {
} $steps.append(
}, $("<span>").addClass("fa fa-fw")
setSteps: function(steps) { .toggleClass("fa-check text-success", step.done)
var $steps = $("#loadingmodal .steps"); .toggleClass("fa-cog fa-spin text-muted", !step.done)
if (steps) { ).append(
$steps.html("").show() $("<span>").text(step.label)
for (var step of data.steps) { ).append(
$steps.append( $("<br>")
$("<span>").addClass("fa fa-fw") )
.toggleClass("fa-check text-success", step.done)
.toggleClass("fa-cog fa-spin text-muted", !step.done)
).append(
$("<span>").text(step.label)
).append(
$("<br>")
)
}
} else {
$steps.hide();
} }
} else {
$steps.html("").hide();
} }
}; }
var waitingDialog;
$(function() {
waitingDialog = new AsyncStatusDialog({
icon: 'cog', rotatingIcon: true,
});
});
var ajaxErrDialog = { var ajaxErrDialog = {
show: function (c) { show: function (c) {
"use strict"; "use strict";
$("#ajaxerr").html(c); $("#ajaxerr").html(c).show();
$("#ajaxerr .links").html("<a class='btn btn-default ajaxerr-close'>" $("#ajaxerr .links").html("<a class='btn btn-default ajaxerr-close'>"
+ gettext("Close message") + "</a>"); + gettext("Close message") + "</a>");
$("body").addClass("ajaxerr has-modal-dialog"); ModalDialog.updateBodyClass();
}, },
hide: function () { hide: function () {
"use strict"; "use strict";
$("body").removeClass("ajaxerr has-modal-dialog"); $("#ajaxerr").hide();
}, ModalDialog.updateBodyClass();
}
}; };