Initial commit

2023-08-29 19:55:48 +02:00
commit 7c2eec4446
473 changed files with 40947 additions and 0 deletions
--- a/Frontend/pages/home/ts/ActionSelector.ts
+++ b/Frontend/pages/home/ts/ActionSelector.ts
@@ -0,0 +1,110 @@
+var ActionSelector: ActionSelector = {
+	elements: {
+		actiondialog: document.querySelector('.actiondialog')
+	},
+
+	fadeTimeout: null,
+
+	maps: {
+		integrationNames: {},
+		actionNames: {}
+	},
+
+	init() {
+		ActionSelector.elements.actiondialog.querySelectorAll('.item').forEach((item: HTMLDivElement) => {
+			var integrationID = item.getAttribute('integrationID');
+			var actionID = item.getAttribute('actionID');
+			var integrationName = (<HTMLDivElement>item.querySelector('.integration')).innerText.trim();
+			var actionName = (<HTMLDivElement>item.querySelector('.action')).innerText.trim();
+
+			if (ActionSelector.maps.integrationNames[integrationID] == undefined)
+				ActionSelector.maps.integrationNames[integrationID] = integrationName;
+			if (ActionSelector.maps.actionNames[actionID] == undefined)
+				ActionSelector.maps.actionNames[actionID] = actionName;
+		});
+	},
+
+	register(input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) {
+		input.onfocus = () => ActionSelector.show(input, callback);
+		input.onblur = () => setTimeout(ActionSelector.hide, 200);
+		input.oninput = () => ActionSelector.search(input.value);
+	},
+
+	show(input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) {
+		clearTimeout(ActionSelector.fadeTimeout);
+
+		ActionSelector.search('');
+
+		var boundingbox = input.getBoundingClientRect();
+
+		ActionSelector.elements.actiondialog.style.top = `${boundingbox.top - 31}px`;
+		ActionSelector.elements.actiondialog.style.left = `${boundingbox.left - 10}px`;
+		ActionSelector.elements.actiondialog.style.width = `${boundingbox.width - 4}px`;
+		ActionSelector.elements.actiondialog.style.maxHeight = `${Math.min(
+			window.innerHeight - boundingbox.top,
+			200
+		)}px`;
+
+		ActionSelector.elements.actiondialog.style.display = 'flex';
+		ActionSelector.elements.actiondialog.style.transitionDuration = '.3s';
+		ActionSelector.elements.actiondialog.style.opacity = '1';
+		ActionSelector.elements.actiondialog.style.pointerEvents = 'auto';
+
+		ActionSelector.elements.actiondialog.querySelectorAll('.item').forEach((item: HTMLDivElement) => {
+			item.onclick = () => {
+				var integrationID = item.getAttribute('integrationID');
+				var actionID = item.getAttribute('actionID');
+				callback(integrationID, actionID);
+
+				input.value = '';
+			};
+		});
+	},
+
+	hide() {
+		ActionSelector.elements.actiondialog.style.transitionDuration = '.3s';
+		ActionSelector.elements.actiondialog.style.opacity = '0';
+		ActionSelector.elements.actiondialog.style.pointerEvents = 'none';
+
+		clearTimeout(ActionSelector.fadeTimeout);
+		ActionSelector.fadeTimeout = setTimeout(() => {
+			ActionSelector.elements.actiondialog.style.display = 'none';
+		}, 300);
+	},
+
+	search(query: string) {
+		ActionSelector.elements.actiondialog.querySelectorAll('.item').forEach((item: HTMLDivElement) => {
+			var integration: HTMLDivElement = item.querySelector('.integration');
+			var action: HTMLDivElement = item.querySelector('.action');
+
+			var interactionQuery = integration.innerText.toLowerCase();
+			var actionQuery = action.innerText.toLowerCase();
+
+			query = query.toLowerCase();
+
+			if (interactionQuery.includes(query) || actionQuery.includes(query) || query.length == 0)
+				item.classList.remove('hidden');
+			else item.classList.add('hidden');
+		});
+	}
+};
+ActionSelector.init();
+
+interface ActionSelector {
+	elements: {
+		actiondialog: HTMLDivElement;
+	};
+
+	fadeTimeout: any;
+
+	maps: {
+		integrationNames: { [integrationID: string]: string };
+		actionNames: { [actionID: string]: string };
+	};
+
+	init: () => void;
+	register: (input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) => void;
+	show: (input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) => void;
+	hide: () => void;
+	search: (query: string) => void;
+}