feat: add javascript support for dashboard/overlays

frontend/dashboard/src/components/registry/overlays/edit.vue

@@ -163,8 +163,10 @@ const innerWidth = computed(() => window.innerWidth);
 						:index="index"
 						:text="layer.settings?.htmlOverlayHtml ?? ''"
 						:css="layer.settings?.htmlOverlayCss ?? ''"
+						:js="layer.settings?.htmlOverlayJs ?? ''"
 						:periodicallyRefetchData="layer.periodicallyRefetchData"
 					/>
+
 					<Moveable
 						className="moveable"
 						:target="'#layer-' + index"
@@ -190,17 +192,26 @@ const innerWidth = computed(() => window.innerWidth);
 			</div>
 		</div>
 		<div style="display: flex; gap: 4px; flex-direction: column;">
-			<n-button :disabled="!formValue.name || !formValue.layers.length" block secondary type="success" @click="save">
+			<n-button
+				:disabled="!formValue.name || !formValue.layers.length" block secondary
+				type="success" @click="save"
+			>
 				<IconDeviceFloppy />
 				{{ t('sharedButtons.save') }}
 			</n-button>
-			<n-button block secondary type="info" :disabled="!formValue.id" @click="copyUrl(formValue.id)">
+			<n-button
+				block secondary type="info" :disabled="!formValue.id"
+				@click="copyUrl(formValue.id)"
+			>
 				<IconCopy />
 				{{ t('overlays.copyOverlayLink') }}
 			</n-button>
 
 			<n-form-item :label="t('overlaysRegistry.name')">
-				<n-input v-model:value="formValue.name" :placeholder="t('overlaysRegistry.name')" :maxlength="30" />
+				<n-input
+					v-model:value="formValue.name" :placeholder="t('overlaysRegistry.name')"
+					:maxlength="30"
+				/>
 			</n-form-item>
 
 			<n-form-item :label="t('overlaysRegistry.customWidth')">
@@ -234,6 +245,7 @@ const innerWidth = computed(() => window.innerWidth);
 						:key="index"
 						v-model:html="formValue.layers[index].settings!.htmlOverlayHtml"
 						v-model:css="formValue.layers[index].settings!.htmlOverlayCss"
+						v-model:js="formValue.layers[index].settings!.htmlOverlayJs"
 						v-model:pollInterval="formValue.layers[index].settings!.htmlOverlayHtmlDataPollSecondsInterval"
 						v-model:periodicallyRefetchData="formValue.layers[index].periodicallyRefetchData"
 						:isFocused="currentlyFocused === index"
@@ -247,7 +259,10 @@ const innerWidth = computed(() => window.innerWidth);
 		</div>
 	</div>
 
-	<n-modal v-model:show="isOverlayNewModalOpened" style="width: 50vw" preset="card" :title="t('sharedButtons.create')">
+	<n-modal
+		v-model:show="isOverlayNewModalOpened" style="width: 50vw" preset="card"
+		:title="t('sharedButtons.create')"
+	>
 		<new-selector
 			@select="v => {
 				formValue.layers.push(v)

frontend/dashboard/src/components/registry/overlays/layers/html.vue

@@ -2,7 +2,7 @@
 <!-- eslint-disable no-undef -->
 <script setup lang="ts">
 import { useIntervalFn } from '@vueuse/core';
-import { ref, watch } from 'vue';
+import { ref, watch, nextTick, computed } from 'vue';
 
 import { useOverlaysParseHtml } from '@/api/registry';
 
@@ -14,6 +14,7 @@ const props = defineProps<{
 	height: number;
 	text: string;
 	css: string;
+	js: string
 	periodicallyRefetchData: boolean,
 }>();
 
@@ -26,6 +27,24 @@ const { pause, resume } = useIntervalFn(async () => {
 	exampleValue.value = data ?? '';
 }, 1000, { immediate: true, immediateCallback: true });
 
+const executeFunc = computed(() => {
+	return new Function(`${props.js}; onDataUpdate();`);
+});
+
+watch(exampleValue, async () => {
+	await nextTick();
+	// calling user defined function
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore
+	executeFunc.value?.();
+});
+
+const componentKey = ref(0);
+
+watch(() => props.js, async () => {
+	componentKey.value += 1;
+}, { immediate: true });
+
 watch(props, (p) => {
 	const v = p.periodicallyRefetchData;
 
@@ -53,10 +72,7 @@ watch(props, (p) => {
 				}`
 			}}
 		</component>
+
 		<div :id="'layersExampleRender'+index" :style="css" v-html="exampleValue" />
 	</div>
 </template>
-
-<style scoped>
-
-</style>

frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue

@@ -28,6 +28,7 @@ defineEmits<{
 
 const html = defineModel('html');
 const css = defineModel('css');
+const js = defineModel('js');
 const pollInterval = defineModel('pollInterval', { default: 5 });
 const periodicallyRefetchData = defineModel('periodicallyRefetchData');
 
@@ -127,6 +128,15 @@ const { t } = useI18n();
 						language="css"
 					/>
 				</n-tab-pane>
+
+				<n-tab-pane name="JS">
+					<vue-monaco-editor
+						v-model:value="js"
+						theme="vs-dark"
+						height="500px"
+						language="javascript"
+					/>
+				</n-tab-pane>
 			</n-tabs>
 		</div>
 	</n-modal>

frontend/dashboard/src/components/registry/overlays/newSelector.vue

@@ -29,7 +29,12 @@ const { t } = useI18n();
 							htmlOverlayCss: '.text { color: red }',
 							htmlOverlayHtml: `<span class='text'>$(stream.uptime)</span>`,
 							htmlOverlayHtmlDataPollSecondsInterval: 5,
-							htmlOverlayJs: ''
+							htmlOverlayJs: `
+// will be triggered, when new overlay data comes from backend
+function onDataUpdate() {
+	console.log('updated')
+}
+							`
 						},
 						createdAt: '',
 						overlayId: '',

frontend/overlays/src/components/htmlLayer.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
 import { transform } from 'nested-css-to-flat';
+import { watch, nextTick, computed } from 'vue';
 
 import { Layer } from '../sockets/overlays';
 
-defineProps<{
+const props = defineProps<{
 	layer: Layer
 	parsedData?: string
 }>();
+
+const executeFunc = computed(() => {
+	return new Function(`${props.layer.settings.htmlOverlayJs}; onDataUpdate();`);
+});
+
+watch(() => props.parsedData, async () => {
+	await nextTick();
+	executeFunc.value?.();
+});
 </script>
 
 <template>

frontend/overlays/src/sockets/overlays.ts

@@ -62,6 +62,7 @@ export const useOverlays = (apiKey: string, overlayId: string) => {
 				settings: {
 					...l.settings,
 					htmlOverlayCss: b64DecodeUnicode(l.settings.htmlOverlayCss),
+					htmlOverlayJs: b64DecodeUnicode(l.settings.htmlOverlayJs),
 				},
 			}));
 		}