From a540c7e864aaf657c1aeb489e05718068fce08c6 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Mon, 22 Dec 2025 15:18:02 -0600
Subject: [PATCH] refine embedding page

---
 src/lib/common/embedding/EmbeddingPage.svelte | 101 ++++++++++++++++++
 src/lib/helpers/types/pluginTypes.js          |   4 +-
 .../agent/reporting/[reportType]/+page.svelte |  92 ++--------------
 3 files changed, 111 insertions(+), 86 deletions(-)
 create mode 100644 src/lib/common/embedding/EmbeddingPage.svelte

diff --git a/src/lib/common/embedding/EmbeddingPage.svelte b/src/lib/common/embedding/EmbeddingPage.svelte
new file mode 100644
index 00000000..4fadb064
--- /dev/null
+++ b/src/lib/common/embedding/EmbeddingPage.svelte
@@ -0,0 +1,101 @@
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { derived } from 'svelte/store';
+    import { page } from '$app/stores';
+    import { _ } from 'svelte-i18n';
+    import { Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
+	import { getUserStore, globalMenuStore } from '$lib/helpers/store';
+	
+    /** @type {string} */
+    export let htmlTagId = 'embedding-page';
+
+    /** @type {string} */
+    export let slugName = 'embedding-slug';
+
+    /** @type {string?} */
+    export let label = '';
+
+    /** @type {any} */
+    let menuUnsubscribe;
+
+    /** @type {string} */
+    let curSlug = '';
+
+    const slug = derived(page, $page => $page.params[slugName]);
+
+    const contentSubscribe = slug.subscribe(value => {
+        if (curSlug && curSlug !== value) {
+            location.reload();
+        }
+        curSlug = value;
+    });
+
+    onMount(async () => {
+        menuUnsubscribe = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
+            const url = getPathUrl();
+            let found = menu.find(x => x.link === url);
+            label = found?.label || null;
+            if (!found?.embeddingInfo) {
+                const subFound = menu.find(x => !!x.subMenu?.find(y => y.link === url));
+                found = subFound?.subMenu?.find(x => x.link === url);
+                label = found?.label || null;
+            }
+            embed(found?.embeddingInfo || null);
+        });
+    });
+
+    onDestroy(() => {
+        menuUnsubscribe?.();
+        contentSubscribe?.();
+    });
+
+    
+    /** @param {import('$pluginTypes').EmbeddingInfoModel?} data */
+    function embed(data) {
+        if (!data) return;
+
+        if (data.scriptSrc) {
+            const script = document.createElement("script");
+            script.id = data.source;
+            script.src = data.scriptSrc;
+            script.async = true;
+
+            if (data.scriptType) {
+                script.type = data.scriptType;
+            }
+            document.head.appendChild(script);
+        }
+
+        const div = document.querySelector(`#${htmlTagId}`);
+        if (!data.url || !div) return;
+
+        if (data.htmlTag) {
+            const elem = document.createElement(data.htmlTag);
+            elem.id = data.source;
+            elem.style = data.htmlStyle || 'width: 100%; height: 100%; justify-content: center;';
+
+            let url = data.url;
+            if (data.appendTokenName) {
+                const user = getUserStore();
+                url += `${url.includes('?') ? '&' : '?'}${data.appendTokenName}=${user?.token}`;
+            }
+
+            // @ts-ignore
+            elem.src = url;
+            div.appendChild(elem);
+        }
+    }
+
+    const getPathUrl = () => {
+		const path = $page.url.pathname;
+		return path?.startsWith('/') ? path.substring(1) : path;
+	};
+</script>
+
+<Row>
+	<Col lg="12">
+		<Card>
+			<CardBody id={`${htmlTagId}`}></CardBody>
+        </Card>
+    </Col>
+</Row>
\ No newline at end of file
diff --git a/src/lib/helpers/types/pluginTypes.js b/src/lib/helpers/types/pluginTypes.js
index 84d41030..95fb65d7 100644
--- a/src/lib/helpers/types/pluginTypes.js
+++ b/src/lib/helpers/types/pluginTypes.js
@@ -27,7 +27,9 @@
  * @property {string?} [scriptSrc]
  * @property {string?} [scriptType]
  * @property {string?} [url]
- *  @property {string?} [htmlTag]
+ * @property {string?} [htmlTag]
+ * @property {string?} [htmlStyle]
+ * @property {string?} [appendTokenName]
  */
 
 /**
diff --git a/src/routes/page/agent/reporting/[reportType]/+page.svelte b/src/routes/page/agent/reporting/[reportType]/+page.svelte
index 44283589..0d66d7d2 100644
--- a/src/routes/page/agent/reporting/[reportType]/+page.svelte
+++ b/src/routes/page/agent/reporting/[reportType]/+page.svelte
@@ -1,96 +1,18 @@
 <script>
-    import { onMount, onDestroy, afterUpdate } from 'svelte';
-    import { derived } from 'svelte/store';
-    import { page } from '$app/stores';
     import { _ } from 'svelte-i18n';
-    import { Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
 	import HeadTitle from "$lib/common/HeadTitle.svelte";
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import { globalMenuStore } from '$lib/helpers/store';
-	
-
-    /** @type {any} */
-    let menuUnsubscribe;
+	import EmbeddingPage from '$lib/common/embedding/EmbeddingPage.svelte';
 
     /** @type {string?} */
     let label = '';
-
-    /** @type {string} */
-    let curSlug = '';
-
-    const slug = derived(page, $page => $page.params.reportType);
-
-    const contentSubscribe = slug.subscribe(value => {
-        if (curSlug && curSlug !== value) {
-            location.reload();
-        }
-        curSlug = value;
-    });
-
-    onMount(async () => {
-        menuUnsubscribe = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
-            const url = getPathUrl();
-            let found = menu.find(x => x.link === url);
-            label = found?.label || null;
-            if (!found?.embeddingInfo) {
-                const subFound = menu.find(x => !!x.subMenu?.find(y => y.link === url));
-                found = subFound?.subMenu?.find(x => x.link === url);
-                label = found?.label || null;
-            }
-            embed(found?.embeddingInfo || null);
-        });
-    });
-
-    onDestroy(() => {
-        menuUnsubscribe?.();
-        contentSubscribe?.();
-    });
-
-    
-    /** @param {import('$pluginTypes').EmbeddingInfoModel?} data */
-    function embed(data) {
-        if (!data) return;
-
-        if (data.scriptSrc) {
-            const script = document.createElement("script");
-            script.id = data.source;
-            script.src = data.scriptSrc;
-            script.async = true;
-
-            if (data.scriptType) {
-                script.type = data.scriptType;
-            }
-            document.head.appendChild(script);
-        }
-
-        const div = document.querySelector('#agent-reporting-content');
-        if (!data.url || !div) return;
-
-        if (data.htmlTag) {
-            const elem = document.createElement(data.htmlTag);
-            elem.id = data.source;
-            elem.style.width = '100%';
-            elem.style.height = '100%';
-            elem.style.justifyContent = 'center';
-            // @ts-ignore
-            elem.src = data.url;
-            div.appendChild(elem);
-        }
-    }
-
-    const getPathUrl = () => {
-		const path = $page.url.pathname;
-		return path?.startsWith('/') ? path.substring(1) : path;
-	};
 </script>
 
-<HeadTitle title="{$_(label || 'Reporting')}" />
+<HeadTitle title="{$_(label || 'Reporting')}" addOn="Reporting" />
 <Breadcrumb title="{$_('Agent')}" pagetitle="{$_(label || 'Reporting')}" />
 
-<Row>
-	<Col lg="12">
-		<Card>
-			<CardBody id="agent-reporting-content"></CardBody>
-        </Card>
-    </Col>
-</Row>
\ No newline at end of file
+<EmbeddingPage
+    htmlTagId="agent-reporting-content"
+    slugName="reportType"
+    bind:label={label}
+/>
\ No newline at end of file