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/Editor.ts
+++ b/Frontend/pages/home/ts/Editor.ts
@@ -0,0 +1,468 @@
+var Editor: Editor = {
+	elements: {
+		container: document.querySelector('.edit'),
+		appearence: {
+			text: {
+				content: document.querySelector('.ap_text_value'),
+				size: document.querySelector('.ap_text_size'),
+				color: document.querySelector('.ap_text_color'),
+				offsetX: document.querySelector('.ap_text_offsetx').querySelector('input[type="range"]'),
+				offsetY: document.querySelector('.ap_text_offsety').querySelector('input[type="range"]')
+			},
+			background: {
+				color: document.querySelector('.ap_background_color')
+			},
+			image: {
+				size: document.querySelector('.ap_image_size').querySelector('input[type="range"]'),
+				offsetX: document.querySelector('.ap_image_offsetx').querySelector('input[type="range"]'),
+				offsetY: document.querySelector('.ap_image_offsety').querySelector('input[type="range"]'),
+				rotation: document.querySelector('.ap_image_rotation').querySelector('input[type="range"]')
+			}
+		},
+		imageui: {
+			imagetypes: document.querySelector('.imagetype'),
+			imageinfopanels: document.querySelector('.imagemenu').querySelector('.info'),
+			imagepanels: document.querySelector('.row.image').querySelector('.panels'),
+			advanced: document.querySelector('.row.image').querySelector('.advanced')
+		},
+		buttonui: {
+			buttontypes: document.querySelector('.buttontype'),
+			visual: document.querySelector('.vis'),
+			actioninner: document.querySelector('.actioninner'),
+			containerTitles: document.querySelector('.editcontainer').querySelectorAll('.containertitle')
+		},
+		checks: {
+			toggle: {
+				container: document.querySelector('.checks').querySelector('.check.toggle'),
+				checkbox: document.querySelector('.checks').querySelector('.check.toggle').querySelector('input')
+			},
+			confirm: {
+				container: document.querySelector('.checks').querySelector('.check.confirm'),
+				checkbox: document.querySelector('.checks').querySelector('.check.confirm').querySelector('input')
+			}
+		}
+	},
+
+	currentX: null,
+	currentY: null,
+	currentKey: null,
+	currentImageType: null,
+	currentButtonType: null,
+	isToggle: null,
+	isConfirm: null,
+
+	isOpen: false,
+
+	registerChange() {
+		if (Editor.currentKey != null) {
+			var editorExport = Editor.export();
+			KeyHandler.render(Editor.currentX, Editor.currentY, editorExport);
+
+			socket.emit(
+				'page',
+				'setkey',
+				PageHandler.currentPageID,
+				Editor.currentX,
+				Editor.currentY,
+				editorExport,
+				responseToken
+			);
+		}
+	},
+
+	listeners() {
+		for (var inputCategory in Editor.elements.appearence) {
+			for (var inputName in Editor.elements.appearence[inputCategory]) {
+				var inputElement: HTMLInputElement = Editor.elements.appearence[inputCategory][inputName];
+
+				inputElement.oninput = Editor.registerChange;
+
+				if (inputElement.type == 'range')
+					((range: HTMLInputElement, number: HTMLInputElement) => {
+						range.addEventListener('input', () => {
+							number.value = range.value;
+						});
+						number.addEventListener('input', () => {
+							range.value = number.value;
+							Editor.registerChange();
+						});
+					})(inputElement, inputElement.parentElement.querySelector('input[type="number"]'));
+			}
+		}
+
+		Editor.elements.imageui.imagetypes.querySelectorAll('.selectoritem').forEach((item: HTMLDivElement) => {
+			item.onclick = () => {
+				var panelType: 'none' | 'icon' | 'upload' = <any>item.getAttribute('panel');
+
+				Editor.selectImageTab(panelType);
+			};
+		});
+
+		Editor.elements.buttonui.buttontypes.querySelectorAll('.buttonitem').forEach((item: HTMLDivElement) => {
+			item.onclick = () => {
+				var buttonType: 'empty' | 'custom' | 'pageup' | 'pagedown' = <any>item.getAttribute('type');
+
+				Editor.selectButtonType(buttonType);
+			};
+		});
+
+		Editor.elements.checks.toggle.container.onclick = () =>
+			Editor.setActionOptions(!Editor.elements.checks.toggle.checkbox.checked, Editor.isConfirm);
+
+		Editor.elements.checks.confirm.container.onclick = () =>
+			Editor.setActionOptions(Editor.isToggle, !Editor.elements.checks.confirm.checkbox.checked);
+	},
+
+	export(): Page_Key {
+		if (Editor.isOpen) {
+			return {
+				id: Editor.currentKey.id,
+				actions: Editor.currentKey.actions,
+				state: {
+					type: Editor.currentButtonType,
+					confirm: Editor.isConfirm,
+					toggle: Editor.isToggle
+				},
+				appearence: {
+					text: Editor.getElementCategoryValues('text'),
+					background: Editor.getElementCategoryValues('background'),
+					image: Editor.getElementCategoryValues('image')
+				}
+			};
+		}
+		return null;
+	},
+
+	open(x: string, y: string, key: Page_Key) {
+		if (Editor.isOpen) Editor.close();
+		Editor.currentKey = key;
+		Editor.currentX = x;
+		Editor.currentY = y;
+		Editor.isOpen = true;
+
+		document.querySelectorAll('.actionselector').forEach((selector: HTMLInputElement) => {
+			selector.value = '';
+		});
+
+		// --------- TEXT ---------
+		{
+			var textElems = Editor.elements.appearence.text;
+			var textData: Page_Key_Text = Editor.getAppearenceCategory('text', key);
+			textElems.content.value = textData.value != undefined ? textData.value : '';
+			textElems.size.value = textData.size != undefined ? String(textData.size) : '10';
+			textElems.color.value = textData.color != undefined ? textData.color : '#000000';
+			textElems.offsetX.value = textData.offsetX != undefined ? String(textData.offsetX) : '0';
+			var offsetXNumber: HTMLInputElement = textElems.offsetX.parentElement.querySelector('input[type="number"]');
+			offsetXNumber.value = textData.offsetX != undefined ? String(textData.offsetX) : '0';
+			textElems.offsetY.value = textData.offsetY != undefined ? String(textData.offsetY) : '0';
+			var offsetYNumber: HTMLInputElement = textElems.offsetY.parentElement.querySelector('input[type="number"]');
+			offsetYNumber.value = textData.offsetY != undefined ? String(textData.offsetY) : '0';
+		}
+
+		// --------- BACKGROUND ---------
+		{
+			var backgroundElems = Editor.elements.appearence.background;
+			var backgroundData: Page_Key_Background = Editor.getAppearenceCategory('background', key);
+			backgroundElems.color.value = backgroundData.color != undefined ? backgroundData.color : '#000000';
+		}
+
+		// --------- IMAGE ---------
+		{
+			var imageElems = Editor.elements.appearence.image;
+			var imageData: Page_Key_Image = Editor.getAppearenceCategory('image', key);
+			imageElems.size.value = imageData.size != undefined ? String(imageData.size) : '100';
+			var sizeNumber: HTMLInputElement = imageElems.size.parentElement.querySelector('input[type="number"]');
+			sizeNumber.value = imageData.size != undefined ? String(imageData.size) : '100';
+			imageElems.rotation.value = imageData.rotation != undefined ? String(imageData.rotation) : '0';
+			var rotationNumber: HTMLInputElement = imageElems.rotation.parentElement.querySelector(
+				'input[type="number"]'
+			);
+			rotationNumber.value = imageData.rotation != undefined ? String(imageData.rotation) : '0';
+			imageElems.offsetX.value = imageData.offsetX != undefined ? String(imageData.offsetX) : '0';
+			var offsetXNumber: HTMLInputElement = imageElems.offsetX.parentElement.querySelector(
+				'input[type="number"]'
+			);
+			offsetXNumber.value = imageData.offsetX != undefined ? String(imageData.offsetX) : '0';
+			imageElems.offsetY.value = imageData.offsetY != undefined ? String(imageData.offsetY) : '0';
+			var offsetYNumber: HTMLInputElement = imageElems.offsetY.parentElement.querySelector(
+				'input[type="number"]'
+			);
+			offsetYNumber.value = imageData.offsetY != undefined ? String(imageData.offsetY) : '0';
+		}
+
+		if (imageData.address != undefined) {
+			Editor.selectImageTab('upload', true);
+		} else if (imageData.iconid != undefined) {
+			Editor.selectImageTab('icon', true);
+			Icons.select(imageData.iconid);
+		}
+
+		Editor.selectButtonType(key.state.type, true);
+		Editor.setActionOptions(key.state.toggle, key.state.confirm, true);
+
+		var actions = key.actions != undefined ? key.actions : { up: {}, down: {} };
+		ActionEditor.open(actions, x, y, key, PageHandler.currentPageID);
+
+		Editor.elements.container.classList.remove('disabled');
+	},
+
+	close() {
+		Editor.isOpen = false;
+		Editor.currentKey = null;
+		Editor.currentX = null;
+		Editor.currentY = null;
+
+		document.querySelectorAll('.actionselector').forEach((selector: HTMLInputElement) => {
+			selector.value = '';
+		});
+
+		var text = Editor.elements.appearence.text;
+		text.content.value = 'Button';
+		text.size.value = '20';
+		text.color.value = '#ffffff';
+
+		var background = Editor.elements.appearence.background;
+		background.color.value = '#000000';
+
+		Editor.elements.container.classList.add('disabled');
+
+		Editor.selectImageTab('none', true);
+
+		ActionEditor.close();
+
+		Icons.deselect();
+	},
+
+	selectImageTab(panelType: 'none' | 'icon' | 'upload', ignoreUpdate = false) {
+		Editor.elements.imageui.imagetypes.querySelectorAll('.selectoritem').forEach((selectoritem: HTMLDivElement) => {
+			if (panelType == selectoritem.getAttribute('panel')) selectoritem.classList.add('selected');
+			else selectoritem.classList.remove('selected');
+		});
+		Editor.elements.imageui.imagepanels.querySelectorAll('.panel').forEach((panel: HTMLDivElement) => {
+			if (panelType == panel.getAttribute('panel')) panel.classList.add('selected');
+			else panel.classList.remove('selected');
+		});
+		Editor.elements.imageui.imageinfopanels.querySelectorAll('.infopanel').forEach((infopanel: HTMLDivElement) => {
+			if (panelType == infopanel.getAttribute('panel')) infopanel.classList.add('selected');
+			else infopanel.classList.remove('selected');
+		});
+
+		Editor.currentImageType = panelType != 'none' ? panelType : null;
+
+		if (panelType == 'none') Editor.elements.imageui.advanced.style.display = 'none';
+		else Editor.elements.imageui.advanced.style.display = 'flex';
+
+		if (panelType == 'icon') Icons.loadOnScreen();
+		if (ignoreUpdate == false) Editor.registerChange();
+	},
+
+	selectButtonType(buttonType: KeyTypes, ignoreUpdate = false) {
+		if (buttonType == 'ghost') buttonType = 'custom';
+
+		Editor.elements.buttonui.buttontypes.querySelectorAll('.buttonitem').forEach((selectoritem: HTMLDivElement) => {
+			if (buttonType == selectoritem.getAttribute('type')) selectoritem.classList.add('selected');
+			else selectoritem.classList.remove('selected');
+		});
+
+		Editor.currentButtonType = buttonType;
+
+		switch (buttonType) {
+			case 'empty':
+			case 'pageup':
+			case 'pagedown':
+			case 'currentpage':
+				Editor.elements.buttonui.visual.style.display = 'none';
+				Editor.elements.buttonui.actioninner.style.display = 'none';
+
+				Editor.elements.buttonui.containerTitles.forEach((title) => (title.style.display = 'none'));
+				break;
+
+			case 'custom':
+				Editor.elements.buttonui.visual.style.display = 'block';
+				Editor.elements.buttonui.actioninner.style.display = 'block';
+				Editor.elements.buttonui.containerTitles.forEach((title) => (title.style.display = 'flex'));
+				break;
+		}
+
+		if (ignoreUpdate == false) Editor.registerChange();
+	},
+
+	setActionOptions(toggle: boolean, confirm: boolean, ignoreUpdate = false) {
+		if (toggle) {
+			ActionEditor.elements.up.container.style.display = 'none';
+			ActionEditor.elements.latch.container.style.display = 'block';
+		} else {
+			ActionEditor.elements.up.container.style.display = 'block';
+			ActionEditor.elements.latch.container.style.display = 'none';
+		}
+		if (confirm) {
+			ActionEditor.elements.down.container.style.display = 'none';
+		} else {
+			ActionEditor.elements.down.container.style.display = 'block';
+		}
+
+		Editor.isToggle = toggle;
+		Editor.isConfirm = confirm;
+
+		Editor.elements.checks.toggle.checkbox.checked = toggle;
+		Editor.elements.checks.confirm.checkbox.checked = confirm;
+
+		if (ignoreUpdate == false) Editor.registerChange();
+	},
+
+	getAppearenceCategory(category: Editor_Categories, key: Page_Key = Editor.currentKey) {
+		switch (category) {
+			case 'text':
+				var textData: Page_Key_Text =
+					key.appearence != undefined && key.appearence.text != undefined
+						? key.appearence.text
+						: { value: '', size: 10, color: '#000000', offsetX: 0, offsetY: 0 };
+				return textData;
+			case 'background':
+				var backgroundData: Page_Key_Background =
+					key.appearence != undefined && key.appearence.background != undefined
+						? key.appearence.background
+						: { color: '#000000' };
+				return backgroundData;
+			case 'image':
+				var imageData: Page_Key_Image =
+					key.appearence != undefined && key.appearence.image != undefined
+						? key.appearence.image
+						: { offsetX: 0, offsetY: 0, size: 100, rotation: 0 };
+				return imageData;
+		}
+	},
+
+	getElementCategoryValues(category: Editor_Categories) {
+		switch (category) {
+			case 'text':
+				var textData: Page_Key_Text = {
+					value: Editor.currentButtonType != 'empty' ? Editor.elements.appearence.text.content.value : '',
+					color:
+						Editor.currentButtonType != 'empty' ? Editor.elements.appearence.text.color.value : '#ffffff',
+					size:
+						Editor.currentButtonType != 'empty' ? parseInt(Editor.elements.appearence.text.size.value) : 20,
+					offsetX:
+						Editor.currentButtonType != 'empty'
+							? parseFloat(Editor.elements.appearence.text.offsetX.value)
+							: 0,
+					offsetY:
+						Editor.currentButtonType != 'empty'
+							? parseFloat(Editor.elements.appearence.text.offsetY.value)
+							: 0
+				};
+				return textData;
+			case 'background':
+				var backgroundData: Page_Key_Background = {
+					color:
+						Editor.currentButtonType != 'empty'
+							? Editor.elements.appearence.background.color.value
+							: '#000000'
+				};
+				return backgroundData;
+			case 'image':
+				var imageData: Page_Key_Image = {
+					size:
+						Editor.currentButtonType != 'empty'
+							? parseFloat(Editor.elements.appearence.image.size.value)
+							: 100,
+					rotation:
+						Editor.currentButtonType != 'empty'
+							? parseFloat(Editor.elements.appearence.image.rotation.value)
+							: 0,
+					offsetX:
+						Editor.currentButtonType != 'empty'
+							? parseFloat(Editor.elements.appearence.image.offsetX.value)
+							: 0,
+					offsetY:
+						Editor.currentButtonType != 'empty'
+							? parseFloat(Editor.elements.appearence.image.offsetY.value)
+							: 0
+				};
+
+				if (Editor.currentImageType != null && Editor.currentButtonType != 'empty') {
+					switch (Editor.currentImageType) {
+						case 'icon':
+							imageData.iconid = Icons.currentSelected;
+							imageData.iconstyle = 'white';
+							break;
+					}
+				}
+
+				return imageData;
+		}
+	}
+};
+
+Editor.listeners();
+
+interface Editor {
+	elements: {
+		container: HTMLDivElement;
+		appearence: {
+			text: {
+				content: HTMLInputElement;
+				size: HTMLSelectElement;
+				color: HTMLInputElement;
+				offsetX: HTMLInputElement;
+				offsetY: HTMLInputElement;
+			};
+			background: {
+				color: HTMLInputElement;
+			};
+			image: {
+				size: HTMLInputElement;
+				offsetX: HTMLInputElement;
+				offsetY: HTMLInputElement;
+				rotation: HTMLInputElement;
+			};
+		};
+		imageui: {
+			imagetypes: HTMLDivElement;
+			imageinfopanels: HTMLDivElement;
+			imagepanels: HTMLDivElement;
+			advanced: HTMLDivElement;
+		};
+
+		buttonui: {
+			buttontypes: HTMLDivElement;
+			visual: HTMLDivElement;
+			actioninner: HTMLDivElement;
+			containerTitles: NodeListOf<HTMLDivElement>;
+		};
+
+		checks: {
+			toggle: {
+				container: HTMLDivElement;
+				checkbox: HTMLInputElement;
+			};
+			confirm: {
+				container: HTMLDivElement;
+				checkbox: HTMLInputElement;
+			};
+		};
+	};
+
+	isOpen: boolean;
+	currentKey: Page_Key;
+	currentX: string;
+	currentY: string;
+	currentImageType: 'icon' | 'upload';
+	currentButtonType: KeyTypes;
+	isToggle: boolean;
+	isConfirm: boolean;
+
+	listeners: () => void;
+	export: () => Page_Key;
+	open: (x: string, y: string, key: Page_Key) => void;
+	close: () => void;
+	registerChange: () => void;
+	selectImageTab: (panelType: string, ignoreUpdate?: boolean) => void;
+	selectButtonType: (buttonType: KeyTypes, ignoreUpdate?: boolean) => void;
+	setActionOptions: (toggle: boolean, confirm: boolean, ignoreUpdate?: boolean) => void;
+
+	getAppearenceCategory: (category: Editor_Categories, key?: Page_Key) => any;
+	getElementCategoryValues: (category: Editor_Categories) => any;
+}
+
+type Editor_Categories = 'text' | 'background' | 'image';