pvl.login: animated expire progress
authorTero Marttila <terom@paivola.fi>
Mon, 13 Jan 2014 19:42:27 +0200
changeset 365 e9e3d1580d36
parent 364 b1689d86f5ac
child 366 af3833864b89
pvl.login: animated expire progress
pvl/login/server.py
pvl/login/static/pubtkt-expire.js
--- a/pvl/login/server.py	Mon Jan 13 19:42:15 2014 +0200
+++ b/pvl/login/server.py	Mon Jan 13 19:42:27 2014 +0200
@@ -147,6 +147,10 @@
 }
     """
     
+    JS = Handler.JS + (
+        '/static/pubtkt-expire.js',
+    )
+    
     def process (self) :
         self.process_cookie()
             
@@ -179,9 +183,9 @@
 
 
         lifetime = self.app.login_valid
-
         valid = pubtkt.valid()
         grace = pubtkt.grace()
+        remaining = pubtkt.remaining()
 
         if valid :
             progress = float(valid.seconds) / float(lifetime.seconds)
@@ -190,31 +194,35 @@
 
         if grace :
             title = "Remaining renewal period"
-            valid = "{grace} (Renew)".format(grace=self.render_valid(grace))
+            label = "{grace} (Renew)".format(grace=self.render_valid(grace))
             status = 'warning'
         elif valid :
             title = "Remaining validity period"
-            valid = "{valid}".format(valid=self.render_valid(valid))
+            label = "{valid}".format(valid=self.render_valid(valid))
             status = 'success'
         else :
             title = "Expired"
-            valid = "Expired"
+            label = "Expired"
             status = 'danger'
         
         if progress :
             return html.div(class_='panel-body', title=title)(
                 html.span(class_='glyphicon glyphicon-time'),
-                html.div(class_='progress')(
+                html.div(class_='progress pubtkt-progress',
+                    data_start=valid.seconds,
+                    data_refresh=remaining.seconds if remaining else None,
+                    data_end=lifetime.seconds,
+                )(
                     html.div(class_='progress-bar progress-bar-{status}'.format(status=status),
                         role='progressbar',
                         style='width: {pp:.0f}%'.format(pp=progress*100),
                     )(
-                        html.span(valid)
+                        html.span(class_='pubtkt-progress-label')(label)
                     )
                 )
             )
         else :
-            return None # html.p(valid)
+            return None # html.p(label)
 
     def render_pubtkt_fields (self, pubtkt) :
         """
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/pvl/login/static/pubtkt-expire.js	Mon Jan 13 19:42:27 2014 +0200
@@ -0,0 +1,55 @@
+function pad2digits (i) {
+    if (i < 10) {
+        return "0" + i;
+    } else {
+        return "" + i;
+    }
+}
+
+function seconds2interval (s) {
+    var h, m;
+
+    s = Math.floor(s);
+    
+    m = Math.floor(s / 60);
+    s = s % 60;
+
+    h = Math.floor(m / 60);
+    m = m % 60;
+
+    return h + ":" + pad2digits(m) + ":" + pad2digits(s);
+}
+
+$(function () {
+    $('.pubtkt-progress').each(function () {
+        var item = $(this);
+
+        var progress_bar = item.find('.progress-bar');
+        var progress_label = item.find('.pubtkt-progress-label');
+
+        var progress_start = item.attr('data-start');
+        var progress_refresh = item.attr('data-refresh');
+        var progress_end = item.attr('data-end');
+        
+        var start_time = Date.now();
+
+        function update_progress () {
+            var duration = (Date.now() - start_time) / 1000;
+
+            var progress = progress_start - duration;
+            
+            if (progress <= 0 || (progress_refresh && progress < progress_refresh)) {
+                // done
+                window.location.reload(true);
+            } else {
+                // update
+                progress_bar.css('width', (progress * 100 / progress_end) + '%');
+
+                progress_label.html(seconds2interval(progress));
+            }
+        }
+        
+        window.setInterval(update_progress, 1000);
+    });
+});
+