Frontend: Implement live preview updates

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;
+	const src = event.target as HTMLInputElement;
+	const dest = previewDoc.getElementById(src.id) as HTMLElement;
+	dest.innerText = src.value;
+}
+
+window.addEventListener("load", () => {
+	for (let el of document.getElementsByClassName('input-dispatch')) {
+		console.log(el);
+		el.addEventListener('input', onInputHandler);
+	}
+});

schilder2000/templates/schild.html.j2

@@ -6,7 +6,7 @@
 	{%- else -%}
 		<div class="box">
 			{{ field.label }}
-			{{ field }}
+			{{ field(class="input-dispatch") }}
 		</div>
 	{%- endif -%}
 {%- endmacro %}