Как изменить время обратного отсчета в минутах вместо секунд в ng-Idle - PullRequest
Новая
       1

Как изменить время обратного отсчета в минутах вместо секунд в ng-Idle

0 голосов
/ 24 июня 2019

Я использую ng-idle в своем приложении. Здесь всплывающее предупреждение появляется через 10 секунд. А внутри всплывающего окна появляется сообщение с предупреждением

«Ваша сессия закроется через 10 секунд»

. Но я хочу через несколько минут. Сеанс должен быть закрыт через 5 минут. Как я могу изменить? Я ожидаю, что должно прийти оповещение о тайм-ауте сеанса,

«Ваша сессия закроется через 5 минут»

Может кто-нибудь сказать мне, как я могу изменить это?

Plunkr

Внимание! Dialog.html 

<div class="modal-header">
    <h3 class="modal-title" id="modal-title">{{ pc.title }}</h3>
</div>
<div idle-countdown="countdown" ng-init="countdown=5" class="modal-body" id="modal-body">
        <uib-progressbar max="10" value="10" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} minutes(s).</uib-progressbar>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="pc.ok()">OK</button>
    <button class="btn btn-warning" type="button" ng-click="pc.cancel()">Cancel</button>
</div>

Таймаут-dialog.html 

<div class="modal-header">
    <h3 id="modal-title">You've Timed Out!</h3>
</div>
<div class="modal-body" id="modal-body">
    <p>
        You were idle too long...
    </p>
</div>

Index.html 

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-idle/1.3.2/angular-idle.min.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <section ng-controller="DemoCtrl">
        <p>
            <button type="button" class="btn btn-success" ng-hide="started" ng-click="start()">Start Demo</button>
            <button type="button" class="btn btn-danger" ng-show="started" ng-click="stop()">Stop Demo</button>
        </p>
    </section>
</body>

</html>

app.js 

angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'ngIdle']);

angular.module('myApp').config(['KeepaliveProvider', 'IdleProvider', function(KeepaliveProvider, IdleProvider) {
    IdleProvider.idle(5);
    IdleProvider.timeout(5);
    KeepaliveProvider.interval(10);

    IdleProvider.interrupt('keydown wheel mousedown touchstart touchmove scroll');
}]);

// This will check the idle status when the app starts
// angular.module('myApp').run(['Idle', function(Idle) {
//     Idle.watch();
// }]);

angular.module('myApp').controller('DemoCtrl', function ($scope, Idle, Keepalive, $uibModal) {
    var pc = this;
    pc.data = "You're Idle. Do Something!!!"; 
    $scope.started = false;

    function closeModals() {
        if( $scope.warning ) {
            $scope.warning.close();
            $scope.warning = null;
        }

        if( $scope.timeout ) {
            $scope.timeout.close();
            $scope.timeout = null;
        }
    }

    $scope.$on('IdleStart', function() {
        $scope.warning = $uibModal.open({
            animation: true,
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            templateUrl: 'warning-dialog.html',
            controller: 'ModalInstanceCtrl',
            controllerAs: 'pc',
            size: 'sm',
            resolve: {
            data: function () {
                    return pc.data;
                }
            }
        });

        $scope.warning.result.then(function () {
            console.log('Warning modal is closing now...');            
        });
    });

    $scope.$on('IdleTimeout', function() {
        console.log('Idle timeout');        
        closeModals();    
        $scope.timeout = $uibModal.open({
            animation: true,
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            templateUrl: 'timeout-dialog.html',
            controller: 'ModalInstanceCtrl',
            controllerAs: 'pc',
            size: 'sm',
            resolve: {
            data: function () {
                    return pc.data;
                }
            }
        });

        // Your log out code goes here
        console.log('Your log out code may goes here...');

        $scope.timeout.result.then(function () {
            console.log('Timeout modal is closing now...');            
        });
    });
    

    $scope.$on('IdleEnd', function() {
        console.log('Start closing warning modal');        
        closeModals();
    });

    $scope.start = function() {
        Idle.watch();
        $scope.started = true;
    }

    $scope.stop = function() {
        Idle.unwatch();
        $scope.started = false;
    }
})

angular.module('myApp').controller('ModalInstanceCtrl', function (data) {
  var pc = this;
  pc.title = data;
});

1 Ответ

1 голос
/ 24 июня 2019

5 минут равно 300 секундам.Попробуйте использовать IdleProvider.idle(300); внутри кода.Также измените предупреждающий диалог html: -

<uib-progressbar max="10" value="10" animate="false" class="progress-striped active">You'll be logged out in {{(countdown/50)| number: 1}} minutes.</uib-progressbar>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...