ShowToast with ProgressBar

WSIINNDA · March 4

ShowToast with ProgressBar

MainForm -> Script :

function showToast3(ATitle, AMessage, AIconType, ATimeout, AShowProgress) {
    var Icon = '';
    var BGColor = '';
    var genMsgID = 'toast_' + new Date().getTime() + '_' + Math.floor(Math.random() * 1000);
    var CloseDelay = (ATimeout === -1) ? 86400000 : (ATimeout || 5000);
    var ShowProgress = (AShowProgress === 1);
    var startTime = Date.now();
    var progressInterval;
    
    switch (AIconType) {
        case 'success':
            Icon = 'fas fa-check-circle';
            BGColor = '#28a745';
            break;
        case 'error':
            Icon = 'fas fa-exclamation-circle';
            BGColor = '#dc3545';
            break;
        case 'warning':
            Icon = 'fas fa-exclamation-triangle';
            BGColor = '#ffc107';
            break;
        default: // info
            Icon = 'fas fa-info-circle';
            BGColor = '#17a2b8';
            break;
    }
    
    var CloseScript = 'if (window._' + genMsgID + ') { window._' + genMsgID + '.destroy(); window._' + genMsgID + ' = null; }';
    
    var ProgressHTML = '';
    if (ShowProgress) {
        ProgressHTML = '<div style="position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: rgba(0,0,0,0.1);">' +
                       '<div id="progress_' + genMsgID + '" style="width: 100%; height: 100%; background: linear-gradient(90deg, #dc3545, #ffc107, #28a745);"></div>' +
                       '</div>';
    }
    
    var ToastHTML = '<div style="position: relative; overflow: hidden;">' +
                    '<div style="display: flex; align-items: flex-start; padding: 5px 25px 10px 5px;">' +
                    '<i class="' + Icon + '" style="font-size: 24px; color: ' + BGColor + '; margin-right: 10px; margin-top: 2px;"></i>' +
                    '<div style="font-family: Tahoma, Segoe UI, Arial, sans-serif; line-height: 1.4; flex: 1;">' +
                    '<div style="font-size: 14px; font-weight: bold;">' + ATitle + '</div>' +
                    '<div style="font-size: 12px;">' + AMessage + '</div>' +
                    '</div>' +
                    '<div style="position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; ' +
                    'display: flex; align-items: center; justify-content: center; border-radius: 4px; ' +
                    'background-color: rgba(0,0,0,0.1); cursor: pointer;" ' +
                    'onclick="' + CloseScript + '">' +
                    '<i class="fa fa-times" style="color: #666; font-size: 14px; pointer-events: none;"></i>' +
                    '</div>' +
                    '</div>' +
                    ProgressHTML +
                    '</div>';
    
    window['_' + genMsgID] = Ext.toast({
        html: ToastHTML,
        title: '',
        header: false,
        autoCloseDelay: CloseDelay,
        hideDuration: 500,
        modal: false,
        align: 'br',
        width: 350,
        listeners: {
            destroy: function() {
                if (progressInterval) {
                    clearInterval(progressInterval);
                }
                window['_' + genMsgID] = null;
            },
            afterrender: function() {
                if (ShowProgress) {
                    progressInterval = setInterval(function() {
                        var progressBar = document.getElementById('progress_' + genMsgID);
                        if (progressBar) {
                            var elapsed = Date.now() - startTime;
                            var remaining = Math.max(0, CloseDelay - elapsed);
                            var percent = (remaining / CloseDelay) * 100;
                            progressBar.style.width = percent + '%';
                            
                            if (remaining <= 0) {
                                clearInterval(progressInterval);
                            }
                        }
                    }, 50);
                }
            }
        }
    });
}

Delphi :

Type
  TIconType = (ASuccess, AError, AWarning, AInfo);

Procedure ShowToast3(ATitle, AMessage: string; AIconType: TIconType = AInfo; ATimeout: Integer = 5000; AShowProgress: Boolean = False);
var
  Icon: string;
  Progress: string;
begin
 ATitle := StringReplace(ATitle, sLineBreak, ' ', [rfReplaceAll]);
 ATitle := StringReplace(ATitle, #10, ' ', [rfReplaceAll]);
 ATitle := StringReplace(ATitle, #13, ' ', [rfReplaceAll]);
 ATitle := StringReplace(ATitle, '"', '\"', [rfReplaceAll]);
 ATitle := StringReplace(ATitle, #39, '\"', [rfReplaceAll]);

 AMessage := StringReplace(AMessage, sLineBreak, ' ', [rfReplaceAll]);
 AMessage := StringReplace(AMessage, #10, ' ', [rfReplaceAll]);
 AMessage := StringReplace(AMessage, #13, ' ', [rfReplaceAll]);
 AMessage := StringReplace(AMessage, '"', '\"', [rfReplaceAll]);
 AMessage := StringReplace(AMessage, #39, '\"', [rfReplaceAll]);

 case AIconType of
   ASuccess : Icon := 'success';
   AError   : Icon := 'error';
   AWarning : Icon := 'warning';
   else
   Icon := 'info';
 end; // case

 if AShowProgress then
   Progress := '1'
 else
   Progress := '0';

 UniSession.AddJS(Format('showToast3(%s, %s, %s, %d, %s);', [
    QuotedStr(ATitle),
    QuotedStr(AMessage),
    QuotedStr(Icon),
    ATimeout,
    Progress
 ]));
End;

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
 ShowToast3('Успех', 'Операция успешно выполнена, Операция успешно выполнена, Операция успешно выполнена 123456', ASuccess);
 ShowToast3('Ошибка', 'Произошла ошибка', AError, -1);
 ShowToast3('Ошибка', 'Произошла ошибка', AError, 6000);
 ShowToast3('Предупреждение', 'Заполните обязательные поля', AWarning);
 ShowToast3('Уведомление', 'Истекло время сеанса', AInfo, 3000);
end;

procedure TMainForm.UniButton2Click(Sender: TObject);
begin
 ShowToast3('Успех', 'Операция успешно выполнена, Операция успешно выполнена, Операция успешно выполнена 123456', ASuccess, 5000, True);
 ShowToast3('Ошибка', 'Произошла ошибка', AError, -1, False);
 ShowToast3('Ошибка', 'Произошла ошибка', AError, 6000, True);
 ShowToast3('Предупреждение', 'Заполните обязательные поля', AWarning, 5000, True);
 ShowToast3('Уведомление', 'Истекло время сеанса', AInfo, 3000, True);
end;