Real-time report under Visitors does not refresh (#14415)

3 files changed, 69 insertions, 36 deletions

diff --git a/plugins/Live/Live.php b/plugins/Live/Live.php
index 8f5458309e..83103630a6 100644
--- a/plugins/Live/Live.php
+++ b/plugins/Live/Live.php
@@ -50,6 +50,7 @@ class Live extends \Piwik\Plugin
         $jsFiles[] = "plugins/Live/javascripts/visitorProfile.js";
         $jsFiles[] = "plugins/Live/javascripts/visitorLog.js";
         $jsFiles[] = "plugins/Live/javascripts/rowaction.js";
+        $jsFiles[] = "plugins/Live/angularjs/live-widget-refresh/live-widget-refresh.directive.js";
     }
 
     public function getClientSideTranslationKeys(&$translationKeys)
diff --git a/plugins/Live/angularjs/live-widget-refresh/live-widget-refresh.directive.js b/plugins/Live/angularjs/live-widget-refresh/live-widget-refresh.directive.js
new file mode 100644
index 0000000000..4590040fd8
--- /dev/null
+++ b/plugins/Live/angularjs/live-widget-refresh/live-widget-refresh.directive.js
@@ -0,0 +1,64 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Usage:
+ * <div piwik-live-widget-refresh>
+ */
+(function () {
+    angular.module('piwikApp').directive('piwikLiveWidgetRefresh', piwikLiveWidgetRefresh);
+
+    piwikLiveWidgetRefresh.$inject = ['piwik', '$timeout'];
+
+    function piwikLiveWidgetRefresh(piwik, $timeout){
+
+        return {
+            restrict: 'A',
+            scope: {
+                liveRefreshAfterMs: '@'
+            },
+            compile: function (element, attrs) {
+
+                return function (scope, element, attrs) {
+
+                    $timeout(function () {
+                        var segment = broadcast.getValueFromHash('segment');
+                        if (!segment) {
+                            segment = broadcast.getValueFromUrl('segment');
+                        }
+
+                        $(element).find('#visitsLive').liveWidget({
+                            interval: scope.liveRefreshAfterMs,
+                            onUpdate: function () {
+                                //updates the numbers of total visits in startbox
+                                var ajaxRequest = new ajaxHelper();
+                                ajaxRequest.setFormat('html');
+                                ajaxRequest.addParams({
+                                    module: 'Live',
+                                    action: 'ajaxTotalVisitors',
+                                    segment: segment
+                                }, 'GET');
+                                ajaxRequest.setCallback(function (r) {
+                                    $(element).find("#visitsTotal").html(r);
+                                });
+                                ajaxRequest.send();
+                            },
+                            maxRows: 10,
+                            fadeInSpeed: 600,
+                            dataUrlParams: {
+                                module: 'Live',
+                                action: 'getLastVisitsStart',
+                                segment: segment
+                            }
+                        });
+
+                    });
+                };
+            }
+        };
+    }
+})();
\ No newline at end of file
diff --git a/plugins/Live/templates/index.twig b/plugins/Live/templates/index.twig
index b1c20e1a3a..1670382d21 100644
--- a/plugins/Live/templates/index.twig
+++ b/plugins/Live/templates/index.twig
@@ -1,42 +1,10 @@
-<script type="text/javascript" charset="utf-8">
-    $(document).ready(function () {
-        var segment = broadcast.getValueFromHash('segment');
-        if (!segment) {
-            segment = broadcast.getValueFromUrl('segment');
-        }
-
-        $('#visitsLive').liveWidget({
-            interval: {{ liveRefreshAfterMs }},
-            onUpdate: function () {
-                //updates the numbers of total visits in startbox
-                var ajaxRequest = new ajaxHelper();
-                ajaxRequest.setFormat('html');
-                ajaxRequest.addParams({
-                    module: 'Live',
-                    action: 'ajaxTotalVisitors',
-                    segment: segment
-                }, 'GET');
-                ajaxRequest.setCallback(function (r) {
-                    $("#visitsTotal").html(r);
-                });
-                ajaxRequest.send();
-            },
-            maxRows: 10,
-            fadeInSpeed: 600,
-            dataUrlParams: {
-                module: 'Live',
-                action: 'getLastVisitsStart',
-                segment: segment
-            }
-        });
-    });
-</script>
-
 {% if not isWidgetized %}<div piwik-content-block content-title="{{ 'Live_VisitorsInRealTime'|translate|e('html_attr') }}">{% endif %}
 
-{% include "@Live/_totalVisitors.twig" %}
+<div piwik-live-widget-refresh live-refresh-after-ms="{{ liveRefreshAfterMs|e('html_attr') }}">
+    {% include "@Live/_totalVisitors.twig" %}
 
-{{ visitors|raw }}
+    {{ visitors|raw }}
+</div>
 
 {% spaceless %}
 <div class="visitsLiveFooter">