Make iframe previews clickable

And thanks JavaScript and iframes for being so annoying.

frontend/src/main.less

@@ -217,6 +217,7 @@ main {
 
 		.preview {
 			width: 15rem;
+			cursor: pointer;
 		}
 
 		img {

frontend/src/main.ts

 import './main.less';
 
-console.log("Hello World");
-
 function onInputHandler(event: Event) {
 	const preview = document.getElementById('preview') as HTMLIFrameElement;
 	const previewDoc = preview.contentDocument as Document;
@@ -12,9 +10,30 @@ function onInputHandler(event: Event) {
 
 window.addEventListener("load", () => {
 	if (document.getElementById('preview')) {
-		for (let el of document.getElementsByClassName('input-dispatch')) {
+		for (const el of document.getElementsByClassName('input-dispatch')) {
 			console.log(el);
 			el.addEventListener('input', onInputHandler);
 		}
+
+		for (const op of document.querySelectorAll('.option .preview')) {
+			console.log(op);
+			const input_id = (op as HTMLElement).dataset.for;
+			if (!input_id) {
+				console.error("Missing data-for attribute for", op);
+				continue;
+			}
+			const input = document.getElementById(input_id);
+			if (!input || input === null) {
+				console.error("Unable to find input for", op);
+				continue;
+			}
+
+			const handler = (_: Event) => {
+				console.log("clicked");
+				(input as HTMLInputElement).checked = true;
+			};
+			op.addEventListener('click', handler);
+			(op as HTMLIFrameElement).contentDocument?.addEventListener('click', handler);
+		}
 	}
 });

schilder2000/templates/schild.html.j2

@@ -64,6 +64,7 @@
 						class="preview option-border"
 						src="{{ url_for('instance.sample_html', template=t.name) }}"
 						id="template-preview:{{ t.name }}"
+						data-for="template:{{ t.name }}"
 					>
 					</iframe>
 					<label for="template:{{ t.name }}" class="preview-label">