migrate live widget refresh to vue (#18932)

8 files changed, 332 insertions, 65 deletions

diff --git a/plugins/Live/Live.php b/plugins/Live/Live.php
index 3995d5df76..00b1f4bbae 100644
--- a/plugins/Live/Live.php
+++ b/plugins/Live/Live.php
@@ -164,7 +164,6 @@ 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
deleted file mode 100644
index 2d220d7db0..0000000000
--- a/plugins/Live/angularjs/live-widget-refresh/live-widget-refresh.directive.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.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").replaceWith(r);
-                                });
-                                ajaxRequest.send();
-                            },
-                            maxRows: 10,
-                            fadeInSpeed: 600,
-                            dataUrlParams: {
-                                module: 'Live',
-                                action: 'getLastVisitsStart',
-                                segment: segment
-                            }
-                        });
-
-                    });
-                };
-            }
-        };
-    }
-})();
diff --git a/plugins/Live/vue/dist/Live.umd.js b/plugins/Live/vue/dist/Live.umd.js
new file mode 100644
index 0000000000..2f24116285
--- /dev/null
+++ b/plugins/Live/vue/dist/Live.umd.js
@@ -0,0 +1,225 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("CoreHome"));
+	else if(typeof define === 'function' && define.amd)
+		define(["CoreHome"], factory);
+	else if(typeof exports === 'object')
+		exports["Live"] = factory(require("CoreHome"));
+	else
+		root["Live"] = factory(root["CoreHome"]);
+})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__19dc__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "plugins/Live/vue/dist/";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "fae3");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "19dc":
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__19dc__;
+
+/***/ }),
+
+/***/ "fae3":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "LiveWidgetRefresh", function() { return /* reexport */ LiveWidgetRefresh; });
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (false) { var getCurrentScript; }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+// EXTERNAL MODULE: external "CoreHome"
+var external_CoreHome_ = __webpack_require__("19dc");
+
+// CONCATENATED MODULE: ./plugins/Live/vue/src/LiveWidget/LiveWidgetRefresh.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+var _window = window,
+    $ = _window.$;
+/* harmony default export */ var LiveWidgetRefresh = ({
+  mounted: function mounted(el, binding) {
+    setTimeout(function () {
+      var segment = external_CoreHome_["MatomoUrl"].parsed.value.segment; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+      $(el).find('#visitsLive').liveWidget({
+        interval: binding.value.liveRefreshAfterMs,
+        onUpdate: function onUpdate() {
+          // updates the numbers of total visits in startbox
+          external_CoreHome_["AjaxHelper"].fetch({
+            module: 'Live',
+            action: 'ajaxTotalVisitors',
+            segment: segment
+          }, {
+            format: 'html'
+          }).then(function (r) {
+            $(el).find('#visitsTotal').replaceWith(r);
+          });
+        },
+        maxRows: 10,
+        fadeInSpeed: 600,
+        dataUrlParams: {
+          module: 'Live',
+          action: 'getLastVisitsStart',
+          segment: segment
+        }
+      });
+    });
+  }
+});
+// CONCATENATED MODULE: ./plugins/Live/vue/src/LiveWidget/LiveWidgetRefresh.adapter.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+function piwikLiveWidgetRefresh() {
+  return {
+    restrict: 'A',
+    scope: {
+      liveRefreshAfterMs: '@'
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    link: function link(scope, element) {
+      LiveWidgetRefresh.mounted(element[0], {
+        instance: null,
+        value: {
+          liveRefreshAfterMs: parseInt(scope.liveRefreshAfterMs, 10)
+        },
+        oldValue: null,
+        modifiers: {},
+        dir: {}
+      });
+    }
+  };
+}
+
+piwikLiveWidgetRefresh.$inject = ['piwik', '$timeout'];
+window.angular.module('piwikApp').directive('piwikLiveWidgetRefresh', piwikLiveWidgetRefresh);
+// CONCATENATED MODULE: ./plugins/Live/vue/src/index.ts
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+
+// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js
+
+
+
+
+/***/ })
+
+/******/ });
+});
+//# sourceMappingURL=Live.umd.js.map
\ No newline at end of file
diff --git a/plugins/Live/vue/dist/Live.umd.min.js b/plugins/Live/vue/dist/Live.umd.min.js
new file mode 100644
index 0000000000..de0f12955e
--- /dev/null
+++ b/plugins/Live/vue/dist/Live.umd.min.js
@@ -0,0 +1,9 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome")):"function"===typeof define&&define.amd?define(["CoreHome"],t):"object"===typeof exports?exports["Live"]=t(require("CoreHome")):e["Live"]=t(e["CoreHome"])})("undefined"!==typeof self?self:this,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/Live/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"LiveWidgetRefresh",(function(){return l})),"undefined"!==typeof window){var r=window.document.currentScript,i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var o=n("19dc"),u=window,f=u.$,l={mounted:function(e,t){setTimeout((function(){var n=o["MatomoUrl"].parsed.value.segment;f(e).find("#visitsLive").liveWidget({interval:t.value.liveRefreshAfterMs,onUpdate:function(){o["AjaxHelper"].fetch({module:"Live",action:"ajaxTotalVisitors",segment:n},{format:"html"}).then((function(t){f(e).find("#visitsTotal").replaceWith(t)}))},maxRows:10,fadeInSpeed:600,dataUrlParams:{module:"Live",action:"getLastVisitsStart",segment:n}})}))}};
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+function s(){return{restrict:"A",scope:{liveRefreshAfterMs:"@"},link:function(e,t){l.mounted(t[0],{instance:null,value:{liveRefreshAfterMs:parseInt(e.liveRefreshAfterMs,10)},oldValue:null,modifiers:{},dir:{}})}}}s.$inject=["piwik","$timeout"],window.angular.module("piwikApp").directive("piwikLiveWidgetRefresh",s)}})}));
+//# sourceMappingURL=Live.umd.min.js.map
\ No newline at end of file
diff --git a/plugins/Live/vue/dist/umd.metadata.json b/plugins/Live/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..9ecfcc0456
--- /dev/null
+++ b/plugins/Live/vue/dist/umd.metadata.json
@@ -0,0 +1,5 @@
+{
+  "dependsOn": [
+    "CoreHome"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/Live/vue/src/LiveWidget/LiveWidgetRefresh.adapter.ts b/plugins/Live/vue/src/LiveWidget/LiveWidgetRefresh.adapter.ts
new file mode 100644
index 0000000000..9e13fd94a6
--- /dev/null
+++ b/plugins/Live/vue/src/LiveWidget/LiveWidgetRefresh.adapter.ts
@@ -0,0 +1,33 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import LiveWidgetRefresh from './LiveWidgetRefresh';
+
+function piwikLiveWidgetRefresh() {
+  return {
+    restrict: 'A',
+    scope: {
+      liveRefreshAfterMs: '@',
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    link(scope: any, element: JQuery) {
+      LiveWidgetRefresh.mounted(element[0], {
+        instance: null,
+        value: {
+          liveRefreshAfterMs: parseInt(scope.liveRefreshAfterMs, 10),
+        },
+        oldValue: null,
+        modifiers: {},
+        dir: {},
+      });
+    },
+  };
+}
+
+piwikLiveWidgetRefresh.$inject = ['piwik', '$timeout'];
+
+window.angular.module('piwikApp').directive('piwikLiveWidgetRefresh', piwikLiveWidgetRefresh);
diff --git a/plugins/Live/vue/src/LiveWidget/LiveWidgetRefresh.ts b/plugins/Live/vue/src/LiveWidget/LiveWidgetRefresh.ts
new file mode 100644
index 0000000000..35d6b57239
--- /dev/null
+++ b/plugins/Live/vue/src/LiveWidget/LiveWidgetRefresh.ts
@@ -0,0 +1,50 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { MatomoUrl, AjaxHelper } from 'CoreHome';
+import { DirectiveBinding } from 'vue';
+
+interface LiveWidgetRefreshBinding {
+  liveRefreshAfterMs: number;
+}
+
+const { $ } = window;
+
+export default {
+  mounted(el: HTMLElement, binding: DirectiveBinding<LiveWidgetRefreshBinding>): void {
+    setTimeout(() => {
+      const segment = MatomoUrl.parsed.value.segment as string;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ($(el).find('#visitsLive') as any).liveWidget({
+        interval: binding.value.liveRefreshAfterMs,
+        onUpdate: () => {
+          // updates the numbers of total visits in startbox
+          AjaxHelper.fetch(
+            {
+              module: 'Live',
+              action: 'ajaxTotalVisitors',
+              segment,
+            },
+            {
+              format: 'html',
+            },
+          ).then((r) => {
+            $(el).find('#visitsTotal').replaceWith(r);
+          });
+        },
+        maxRows: 10,
+        fadeInSpeed: 600,
+        dataUrlParams: {
+          module: 'Live',
+          action: 'getLastVisitsStart',
+          segment,
+        },
+      });
+    });
+  },
+};
diff --git a/plugins/Live/vue/src/index.ts b/plugins/Live/vue/src/index.ts
new file mode 100644
index 0000000000..179e998c6d
--- /dev/null
+++ b/plugins/Live/vue/src/index.ts
@@ -0,0 +1,10 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import './LiveWidget/LiveWidgetRefresh.adapter';
+
+export { default as LiveWidgetRefresh } from './LiveWidget/LiveWidgetRefresh';