From 65726859eada5a58dd4f0388c3799aa89ef9be62 Mon Sep 17 00:00:00 2001
From: Satont <satontworldwide@gmail.com>
Date: Sat, 16 Sep 2023 06:24:26 +0300
Subject: [PATCH] feat: add switch to disable overlays layers update

---
 .../impl_protected/overlays/overlays.go       | 37 ++++++++++---------
 .../src/components/registry/overlays/edit.vue |  2 +
 .../registry/overlays/layers/html.vue         | 15 ++++++--
 .../registry/overlays/layers/htmlForm.vue     |  7 +++-
 .../registry/overlays/newSelector.vue         |  3 +-
 frontend/dashboard/src/locales/en.json        |  3 +-
 .../overlays/src/pages/overlaysRegistry.tsx   |  8 ++--
 libs/gomodels/channel_overlay_layer.go        | 21 ++++++-----
 libs/grpc/protos/api/overlays.proto           |  2 +
 ...rlays_boolean_for_periodically_refetch.sql | 10 +++++
 10 files changed, 72 insertions(+), 36 deletions(-)
 create mode 100644 libs/migrations/migrations/20230916055208_overlays_boolean_for_periodically_refetch.sql

diff --git a/apps/api/internal/impl_protected/overlays/overlays.go b/apps/api/internal/impl_protected/overlays/overlays.go
index 941be7b57..fe465621f 100644
--- a/apps/api/internal/impl_protected/overlays/overlays.go
+++ b/apps/api/internal/impl_protected/overlays/overlays.go
@@ -92,13 +92,14 @@ func (c *Overlays) convertEntity(entity model.ChannelOverlay) *overlays.Overlay
 				HtmlOverlayJs:                          base64ToText(l.Settings.HtmlOverlayJS),
 				HtmlOverlayHtmlDataPollSecondsInterval: int32(l.Settings.HtmlOverlayDataPollSecondsInterval),
 			},
-			OverlayId: id,
-			PosX:      int32(l.PosX),
-			PosY:      int32(l.PosY),
-			Width:     int32(l.Width),
-			Height:    int32(l.Height),
-			CreatedAt: fmt.Sprint(l.CreatedAt.UnixMilli()),
-			UpdatedAt: fmt.Sprint(l.UpdatedAt.UnixMilli()),
+			OverlayId:               id,
+			PosX:                    int32(l.PosX),
+			PosY:                    int32(l.PosY),
+			Width:                   int32(l.Width),
+			Height:                  int32(l.Height),
+			CreatedAt:               fmt.Sprint(l.CreatedAt.UnixMilli()),
+			UpdatedAt:               fmt.Sprint(l.UpdatedAt.UnixMilli()),
+			PeriodicallyRefetchData: l.PeriodicallyRefetchData,
 		}
 	}
 
@@ -214,11 +215,12 @@ func (c *Overlays) OverlaysUpdate(ctx context.Context, req *overlays.UpdateReque
 						HtmlOverlayJS:                      textToBase64(l.Settings.HtmlOverlayJs),
 						HtmlOverlayDataPollSecondsInterval: int(l.Settings.HtmlOverlayHtmlDataPollSecondsInterval),
 					},
-					OverlayID: entity.ID,
-					PosX:      int(l.PosX),
-					PosY:      int(l.PosY),
-					Width:     int(l.Width),
-					Height:    int(l.Height),
+					OverlayID:               entity.ID,
+					PosX:                    int(l.PosX),
+					PosY:                    int(l.PosY),
+					Width:                   int(l.Width),
+					Height:                  int(l.Height),
+					PeriodicallyRefetchData: l.PeriodicallyRefetchData,
 				}
 
 				if err := tx.Save(&layer).Error; err != nil {
@@ -297,11 +299,12 @@ func (c *Overlays) OverlaysCreate(ctx context.Context, req *overlays.CreateReque
 						HtmlOverlayJS:                      textToBase64(l.Settings.HtmlOverlayJs),
 						HtmlOverlayDataPollSecondsInterval: int(l.Settings.HtmlOverlayHtmlDataPollSecondsInterval),
 					},
-					OverlayID: entity.ID,
-					PosX:      int(l.PosX),
-					PosY:      int(l.PosY),
-					Width:     int(l.Width),
-					Height:    int(l.Height),
+					OverlayID:               entity.ID,
+					PosX:                    int(l.PosX),
+					PosY:                    int(l.PosY),
+					Width:                   int(l.Width),
+					Height:                  int(l.Height),
+					PeriodicallyRefetchData: l.PeriodicallyRefetchData,
 				}
 
 				if err := tx.Save(&layer).Error; err != nil {
diff --git a/frontend/dashboard/src/components/registry/overlays/edit.vue b/frontend/dashboard/src/components/registry/overlays/edit.vue
index 4254add28..89ae219a1 100644
--- a/frontend/dashboard/src/components/registry/overlays/edit.vue
+++ b/frontend/dashboard/src/components/registry/overlays/edit.vue
@@ -157,6 +157,7 @@ const copyUrl = async (id: string) => {
 						:index="index"
 						:text="layer.settings?.htmlOverlayHtml ?? ''"
 						:css="layer.settings?.htmlOverlayCss ?? ''"
+						:periodicallyRefetchData="layer.periodicallyRefetchData"
 					/>
 					<Moveable
 						className="moveable"
@@ -228,6 +229,7 @@ const copyUrl = async (id: string) => {
 						v-model:html="formValue.layers[index].settings!.htmlOverlayHtml"
 						v-model:css="formValue.layers[index].settings!.htmlOverlayCss"
 						v-model:pollInterval="formValue.layers[index].settings!.htmlOverlayHtmlDataPollSecondsInterval"
+						v-model:periodicallyRefetchData="formValue.layers[index].periodicallyRefetchData"
 						:isFocused="currentlyFocused === index"
 						:layerIndex="index"
 						:type="layer.type"
diff --git a/frontend/dashboard/src/components/registry/overlays/layers/html.vue b/frontend/dashboard/src/components/registry/overlays/layers/html.vue
index 634ff05f8..250b6a0ab 100644
--- a/frontend/dashboard/src/components/registry/overlays/layers/html.vue
+++ b/frontend/dashboard/src/components/registry/overlays/layers/html.vue
@@ -1,7 +1,8 @@
+<!-- eslint-disable vue/no-v-html -->
 <!-- eslint-disable no-undef -->
 <script setup lang="ts">
 import { useIntervalFn } from '@vueuse/core';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 import { useOverlaysParseHtml } from '@/api/registry';
 
@@ -13,16 +14,24 @@ const props = defineProps<{
 	height: number;
 	text: string;
 	css: string;
+	periodicallyRefetchData: boolean,
 }>();
 
 const fetcher = useOverlaysParseHtml();
 
 const exampleValue = ref('');
 
-useIntervalFn(async () => {
+const { pause, resume } = useIntervalFn(async () => {
 	const data = await fetcher.mutateAsync(props.text ?? '');
 	exampleValue.value = data ?? '';
-}, 1000, { immediate: true });
+}, 1000, { immediate: true, immediateCallback: true });
+
+watch(props, (p) => {
+	const v = p.periodicallyRefetchData;
+
+	if (!v) pause();
+	else resume();
+}, { immediate: true });
 </script>
 
 <template>
diff --git a/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue b/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
index 853718e45..3f844bcaa 100644
--- a/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
+++ b/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable no-undef -->
 <script lang="ts" setup>
-import { NModal, NInputNumber, NFormItem, NAlert, NSelect, useMessage } from 'naive-ui';
+import { NModal, NInputNumber, NFormItem, NAlert, NSelect, useMessage, NSwitch } from 'naive-ui';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -19,6 +19,7 @@ defineEmits<{
 const html = defineModel('html');
 const css = defineModel('css');
 const pollInterval = defineModel('pollInterval', { default: 5 });
+const periodicallyRefetchData = defineModel('periodicallyRefetchData');
 
 const showModal = ref(false);
 
@@ -82,6 +83,10 @@ const { t } = useI18n();
 		style="width: 50vw"
 	>
 		<div style="display: flex; flex-direction: column; gap: 20px">
+			<n-form-item :label="t('overlaysRegistry.html.periodicallyRefetchData')">
+				<n-switch v-model:value="periodicallyRefetchData" />
+			</n-form-item>
+
 			<n-form-item :label="t('overlaysRegistry.html.updateInterval')">
 				<n-input-number v-model:value="pollInterval" :min="5" :max="300" />
 			</n-form-item>
diff --git a/frontend/dashboard/src/components/registry/overlays/newSelector.vue b/frontend/dashboard/src/components/registry/overlays/newSelector.vue
index 14861a667..4a2c0004a 100644
--- a/frontend/dashboard/src/components/registry/overlays/newSelector.vue
+++ b/frontend/dashboard/src/components/registry/overlays/newSelector.vue
@@ -34,7 +34,8 @@ const { t } = useI18n();
 						createdAt: '',
 						overlayId: '',
 						type: OverlayLayerType.HTML,
-						updatedAt: ''
+						updatedAt: '',
+						periodicallyRefetchData: true,
 					})
 				}"
 			>
diff --git a/frontend/dashboard/src/locales/en.json b/frontend/dashboard/src/locales/en.json
index 92bd58a27..d28757426 100644
--- a/frontend/dashboard/src/locales/en.json
+++ b/frontend/dashboard/src/locales/en.json
@@ -493,7 +493,8 @@
 			"variablesAlert": {
 				"title": "You can use some variables in html, click the button for show available options",
 				"selectToCopy": "Select variable, to copy it to clipboard"
-			}
+			},
+			"periodicallyRefetchData": "Periodically parse html data from server"
 		}
 	}
 }
diff --git a/frontend/overlays/src/pages/overlaysRegistry.tsx b/frontend/overlays/src/pages/overlaysRegistry.tsx
index cfc2f6d4b..6d36c1744 100644
--- a/frontend/overlays/src/pages/overlaysRegistry.tsx
+++ b/frontend/overlays/src/pages/overlaysRegistry.tsx
@@ -20,6 +20,7 @@ interface Layer {
 	createdAt: string
 	updatedAt: string
 	overlay: any
+	periodically_refetch_data: boolean;
 
 	htmlContent?: string;
 }
@@ -79,7 +80,7 @@ export const OverlaysRegistry: React.FC = () => {
 				setLayers(parsedData.layers);
 				for (const layer of parsedData.layers) {
 					if (layer.type === 'HTML') {
-						pollHtmlOverlayData(layer as Layer);
+						preparePollHtmlOverlayData(layer as Layer);
 					}
 				}
 			}
@@ -107,8 +108,7 @@ export const OverlaysRegistry: React.FC = () => {
 		});
 	}, [layers]);
 
-	const pollHtmlOverlayData = useCallback((l: Layer) => {
-		if (l.type !== 'HTML') return;
+	const preparePollHtmlOverlayData = useCallback((l: Layer) => {
 		if (l.settings.htmlOverlayDataPollSecondsInterval <= 0) return;
 
 		const getInfo = () => sendMessage(JSON.stringify({
@@ -119,6 +119,8 @@ export const OverlaysRegistry: React.FC = () => {
 		}));
 		getInfo();
 
+		if (!l.periodically_refetch_data) return;
+
 		const interval = setInterval(() => {
 			getInfo();
 		}, l.settings.htmlOverlayDataPollSecondsInterval * 1000);
diff --git a/libs/gomodels/channel_overlay_layer.go b/libs/gomodels/channel_overlay_layer.go
index e4f407df0..4af3258f7 100644
--- a/libs/gomodels/channel_overlay_layer.go
+++ b/libs/gomodels/channel_overlay_layer.go
@@ -10,16 +10,17 @@ import (
 )
 
 type ChannelOverlayLayer struct {
-	ID        uuid.UUID                   `gorm:"primary_key;column:id;type:UUID;"  json:"id"`
-	Type      ChannelOverlayType          `gorm:"column:type;type:TEXT;"  json:"type"`
-	Settings  ChannelOverlayLayerSettings `gorm:"column:settings;type:JSONB;"  json:"settings"`
-	OverlayID uuid.UUID                   `gorm:"column:overlay_id;type:UUID;"  json:"overlay_id"`
-	PosX      int                         `gorm:"column:pos_x;type:INTEGER;"  json:"pos_x"`
-	PosY      int                         `gorm:"column:pos_y;type:INTEGER;"  json:"pos_y"`
-	Width     int                         `gorm:"column:width;type:INTEGER;"  json:"width"`
-	Height    int                         `gorm:"column:height;type:INTEGER;"  json:"height"`
-	CreatedAt time.Time                   `gorm:"column:created_at;data:timestamp;"  json:"createdAt"`
-	UpdatedAt time.Time                   `gorm:"column:updated_at;data:timestamp;"  json:"updatedAt"`
+	ID                      uuid.UUID                   `gorm:"primary_key;column:id;type:UUID;"  json:"id"`
+	Type                    ChannelOverlayType          `gorm:"column:type;type:TEXT;"  json:"type"`
+	Settings                ChannelOverlayLayerSettings `gorm:"column:settings;type:JSONB;"  json:"settings"`
+	OverlayID               uuid.UUID                   `gorm:"column:overlay_id;type:UUID;"  json:"overlay_id"`
+	PosX                    int                         `gorm:"column:pos_x;type:INTEGER;"  json:"pos_x"`
+	PosY                    int                         `gorm:"column:pos_y;type:INTEGER;"  json:"pos_y"`
+	Width                   int                         `gorm:"column:width;type:INTEGER;"  json:"width"`
+	Height                  int                         `gorm:"column:height;type:INTEGER;"  json:"height"`
+	CreatedAt               time.Time                   `gorm:"column:created_at;data:timestamp;"  json:"createdAt"`
+	UpdatedAt               time.Time                   `gorm:"column:updated_at;data:timestamp;"  json:"updatedAt"`
+	PeriodicallyRefetchData bool                        `gorm:"column:periodically_refetch_data;type:BOOLEAN"  json:"periodically_refetch_data"`
 
 	Overlay *ChannelOverlay `gorm:"foreignKey:OverlayID" json:"overlay"`
 }
diff --git a/libs/grpc/protos/api/overlays.proto b/libs/grpc/protos/api/overlays.proto
index 340489e4a..efe5c8afd 100644
--- a/libs/grpc/protos/api/overlays.proto
+++ b/libs/grpc/protos/api/overlays.proto
@@ -24,6 +24,7 @@ message OverlayLayer {
 	int32 height = 8;
 	string createdAt = 9;
 	string updatedAt = 10;
+	bool periodically_refetch_data = 11;
 }
 
 message Overlay {
@@ -56,6 +57,7 @@ message CreateLayer {
 	int32 pos_y = 4;
 	int32 width = 5;
 	int32 height = 6;
+	bool periodically_refetch_data = 7;
 }
 
 message CreateRequest {
diff --git a/libs/migrations/migrations/20230916055208_overlays_boolean_for_periodically_refetch.sql b/libs/migrations/migrations/20230916055208_overlays_boolean_for_periodically_refetch.sql
new file mode 100644
index 000000000..cce207df6
--- /dev/null
+++ b/libs/migrations/migrations/20230916055208_overlays_boolean_for_periodically_refetch.sql
@@ -0,0 +1,10 @@
+-- +goose Up
+-- +goose StatementBegin
+SELECT 'up SQL query';
+ALTER TABLE "channels_overlays_layers" ADD COLUMN periodically_refetch_data boolean NOT NULL DEFAULT true;
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+SELECT 'down SQL query';
+-- +goose StatementEnd