Skip to content

Commit db428f7

Browse files
iceljciceljc
authored
Merge pull request #410 from iceljc/features/refine-chat-window
refine embedding page
2 parents f5f0697 + a540c7e commit db428f7

3 files changed

Lines changed: 111 additions & 86 deletions

File tree

‎src/lib/common/embedding/EmbeddingPage.svelte‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<script>
2+
import { onMount, onDestroy } from 'svelte';
3+
import { derived } from 'svelte/store';
4+
import { page } from '$app/stores';
5+
import { _ } from 'svelte-i18n';
6+
import { Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
7+
import { getUserStore, globalMenuStore } from '$lib/helpers/store';
8+
9+
/** @type {string} */
10+
export let htmlTagId = 'embedding-page';
11+
12+
/** @type {string} */
13+
export let slugName = 'embedding-slug';
14+
15+
/** @type {string?} */
16+
export let label = '';
17+
18+
/** @type {any} */
19+
let menuUnsubscribe;
20+
21+
/** @type {string} */
22+
let curSlug = '';
23+
24+
const slug = derived(page, $page => $page.params[slugName]);
25+
26+
const contentSubscribe = slug.subscribe(value => {
27+
if (curSlug && curSlug !== value) {
28+
location.reload();
29+
}
30+
curSlug = value;
31+
});
32+
33+
onMount(async () => {
34+
menuUnsubscribe = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
35+
const url = getPathUrl();
36+
let found = menu.find(x => x.link === url);
37+
label = found?.label || null;
38+
if (!found?.embeddingInfo) {
39+
const subFound = menu.find(x => !!x.subMenu?.find(y => y.link === url));
40+
found = subFound?.subMenu?.find(x => x.link === url);
41+
label = found?.label || null;
42+
}
43+
embed(found?.embeddingInfo || null);
44+
});
45+
});
46+
47+
onDestroy(() => {
48+
menuUnsubscribe?.();
49+
contentSubscribe?.();
50+
});
51+
52+
53+
/** @param {import('$pluginTypes').EmbeddingInfoModel?} data */
54+
function embed(data) {
55+
if (!data) return;
56+
57+
if (data.scriptSrc) {
58+
const script = document.createElement("script");
59+
script.id = data.source;
60+
script.src = data.scriptSrc;
61+
script.async = true;
62+
63+
if (data.scriptType) {
64+
script.type = data.scriptType;
65+
}
66+
document.head.appendChild(script);
67+
}
68+
69+
const div = document.querySelector(`#${htmlTagId}`);
70+
if (!data.url || !div) return;
71+
72+
if (data.htmlTag) {
73+
const elem = document.createElement(data.htmlTag);
74+
elem.id = data.source;
75+
elem.style = data.htmlStyle || 'width: 100%; height: 100%; justify-content: center;';
76+
77+
let url = data.url;
78+
if (data.appendTokenName) {
79+
const user = getUserStore();
80+
url += `${url.includes('?') ? '&' : '?'}${data.appendTokenName}=${user?.token}`;
81+
}
82+
83+
// @ts-ignore
84+
elem.src = url;
85+
div.appendChild(elem);
86+
}
87+
}
88+
89+
const getPathUrl = () => {
90+
const path = $page.url.pathname;
91+
return path?.startsWith('/') ? path.substring(1) : path;
92+
};
93+
</script>
94+
95+
<Row>
96+
<Col lg="12">
97+
<Card>
98+
<CardBody id={`${htmlTagId}`}></CardBody>
99+
</Card>
100+
</Col>
101+
</Row>

‎src/lib/helpers/types/pluginTypes.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@
2727
* @property {string?} [scriptSrc]
2828
* @property {string?} [scriptType]
2929
* @property {string?} [url]
30-
* @property {string?} [htmlTag]
30+
* @property {string?} [htmlTag]
31+
* @property {string?} [htmlStyle]
32+
* @property {string?} [appendTokenName]
3133
*/
3234

3335
/**

‎src/routes/page/agent/reporting/[reportType]/+page.svelte‎

Lines changed: 7 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,18 @@
11
<script>
2-
import { onMount, onDestroy, afterUpdate } from 'svelte';
3-
import { derived } from 'svelte/store';
4-
import { page } from '$app/stores';
52
import { _ } from 'svelte-i18n';
6-
import { Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
73
import HeadTitle from "$lib/common/HeadTitle.svelte";
84
import Breadcrumb from '$lib/common/Breadcrumb.svelte';
9-
import { globalMenuStore } from '$lib/helpers/store';
10-
11-
12-
/** @type {any} */
13-
let menuUnsubscribe;
5+
import EmbeddingPage from '$lib/common/embedding/EmbeddingPage.svelte';
146
157
/** @type {string?} */
168
let label = '';
17-
18-
/** @type {string} */
19-
let curSlug = '';
20-
21-
const slug = derived(page, $page => $page.params.reportType);
22-
23-
const contentSubscribe = slug.subscribe(value => {
24-
if (curSlug && curSlug !== value) {
25-
location.reload();
26-
}
27-
curSlug = value;
28-
});
29-
30-
onMount(async () => {
31-
menuUnsubscribe = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
32-
const url = getPathUrl();
33-
let found = menu.find(x => x.link === url);
34-
label = found?.label || null;
35-
if (!found?.embeddingInfo) {
36-
const subFound = menu.find(x => !!x.subMenu?.find(y => y.link === url));
37-
found = subFound?.subMenu?.find(x => x.link === url);
38-
label = found?.label || null;
39-
}
40-
embed(found?.embeddingInfo || null);
41-
});
42-
});
43-
44-
onDestroy(() => {
45-
menuUnsubscribe?.();
46-
contentSubscribe?.();
47-
});
48-
49-
50-
/** @param {import('$pluginTypes').EmbeddingInfoModel?} data */
51-
function embed(data) {
52-
if (!data) return;
53-
54-
if (data.scriptSrc) {
55-
const script = document.createElement("script");
56-
script.id = data.source;
57-
script.src = data.scriptSrc;
58-
script.async = true;
59-
60-
if (data.scriptType) {
61-
script.type = data.scriptType;
62-
}
63-
document.head.appendChild(script);
64-
}
65-
66-
const div = document.querySelector('#agent-reporting-content');
67-
if (!data.url || !div) return;
68-
69-
if (data.htmlTag) {
70-
const elem = document.createElement(data.htmlTag);
71-
elem.id = data.source;
72-
elem.style.width = '100%';
73-
elem.style.height = '100%';
74-
elem.style.justifyContent = 'center';
75-
// @ts-ignore
76-
elem.src = data.url;
77-
div.appendChild(elem);
78-
}
79-
}
80-
81-
const getPathUrl = () => {
82-
const path = $page.url.pathname;
83-
return path?.startsWith('/') ? path.substring(1) : path;
84-
};
859
</script>
8610

87-
<HeadTitle title="{$_(label || 'Reporting')}" />
11+
<HeadTitle title="{$_(label || 'Reporting')}" addOn="Reporting" />
8812
<Breadcrumb title="{$_('Agent')}" pagetitle="{$_(label || 'Reporting')}" />
8913

90-
<Row>
91-
<Col lg="12">
92-
<Card>
93-
<CardBody id="agent-reporting-content"></CardBody>
94-
</Card>
95-
</Col>
96-
</Row>
14+
<EmbeddingPage
15+
htmlTagId="agent-reporting-content"
16+
slugName="reportType"
17+
bind:label={label}
18+
/>

0 commit comments

Comments
 (0)