Text inputs now actually remember their state

ui.js

@@ -44,20 +44,12 @@ async function thesis_layout(content, result) {
 }
 
 async function thesis_title_layout(content, result) {
-	let cs_name = new ElementBuilder("input")
+	content.appendChild(new TextInputBuilder(result, "cs")
-		.type("text")
 		.placeholder("Název práce (v češtině)")
-		.on_input((e) => result.cs = e.target.value)
+		.finish());
-		.finish();
+	content.appendChild(new TextInputBuilder(result, "en")
-
-	let en_name = new ElementBuilder("input")
-		.type("text")
 		.placeholder("Název práce (v angličtině)")
-		.on_input((e) => result.en = e.target.value)
+		.finish());
-		.finish();
-	
-	content.appendChild(cs_name);
-	content.appendChild(en_name);
 	content.appendChild(new ElementBuilder("div.vertical-spacer").finish());
 	content.appendChild(new ElementBuilder("div.hint")
 		.text("Pokud si zatím nejste jisti, můžete tato pole ponechat prázdná.")
@@ -65,12 +57,6 @@ async function thesis_title_layout(content, result) {
 }
 
 async function author_info_layout(content, result) {
-	let author_name = new ElementBuilder("input")
-		.type("text")
-		.placeholder("Vaše jméno (vč. titulů), příp. jména všech autorů")
-		.on_input((e) => result.name = e.target.value)
-		.finish();
-
 	if(!Object.keys(pronounss).includes(result.pronouns)) {
 		document.querySelector("#next-button").disabled = true;
 	}
@@ -84,7 +70,9 @@ async function author_info_layout(content, result) {
 		})
 		.finish();
 
-	content.appendChild(author_name);
+	content.appendChild(new TextInputBuilder(result, "name")
+		.placeholder("Vaše jméno (vč. titulů), příp. jména všech autorů")
+		.finish());
 	content.appendChild(new ElementBuilder("div.hint")
 		.text("Pokud si zatím nejste jisti, můžete ponechat toto pole prázdné.")
 		.finish());
@@ -98,53 +86,23 @@ async function author_info_layout(content, result) {
 }
 
 async function collaborators_layout(content, result) {
-	let supervisor_name = new ElementBuilder("input")
+	let supervisor_name = new TextInputBuilder(result, "supervisor_name")
-		.type("text")
 		.placeholder("Jméno vedoucího práce (vč. titulů), příp. vedoucích")
-		.on_input((e) => result.supervisor_name = e.target.value)
 		.finish();
 
-	let consultant_name = new ElementBuilder("input")
+	let consultant_name = new TextInputBuilder(result, "consultant_name")
-		.type("text")
 		.placeholder("Jméno konzultanta práce (vč. titulů), příp. konzultantů")
-		.on_input((e) => result.consultant_name = e.target.value)
 		.finish();
 
-	let has_supervisor = new ElementBuilder("input#has-supervisor")
+	content.appendChild(new BinaryInputBuilder(result, "has_supervisor")
-		.type("checkbox")
+		.label("Práce má vedoucího")
-		.checked(result.has_supervisor)
+		.on_update(val => supervisor_name.disabled = !val)
-		.on_click(() => update())
-		.finish();
-
-	let has_consultant = new ElementBuilder("input#has-consultant")
-		.type("checkbox")
-		.checked(result.has_consultant)
-		.on_click(() => update())
-		.finish();
-
-	function update() {
-		supervisor_name.disabled = !has_supervisor.checked;
-		consultant_name.disabled = !has_consultant.checked;
-
-		result.has_supervisor = has_supervisor.checked;
-		result.has_consultant = has_consultant.checked;
-	}
-
-	update();
-
-	content.appendChild(new ElementBuilder("div.horizontal-list")
-		.append(has_supervisor)
-		.append(new ElementBuilder("label")
-			.for("has-supervisor")
-			.text("Práce má vedoucího"))
 		.finish());
 	content.appendChild(supervisor_name);
 	content.appendChild(new ElementBuilder("div.vertical-spacer").finish());
-	content.appendChild(new ElementBuilder("div.horizontal-list")
+	content.appendChild(new BinaryInputBuilder(result, "has_consultant")
-		.append(has_consultant)
+		.label("Práce má konzultanta")
-		.append(new ElementBuilder("label")
+		.on_update(val => consultant_name.disabled = !val)
-			.for("has-consultant")
-			.text("Práce má konzultanta"))
 		.finish());
 	content.appendChild(consultant_name);
 	content.appendChild(new ElementBuilder("div.vertical-spacer").finish());

utils.js

@@ -91,6 +91,11 @@ class ElementBuilder {
 		return this;
 	}
 
+	value(value) {
+		this.element.value = value;
+		return this;
+	}
+
 	checked(checked) {
 		this.element.checked = checked;
 		return this;
@@ -181,6 +186,72 @@ class ButtonListBuilder {
 	}
 }
 
+class TextInputBuilder {
+	constructor(result, key) {
+		this.result = result;
+		this.key = key;
+		this.text = "";
+	}
+
+	placeholder(placeholder) {
+		this.text = placeholder;
+		return this;
+	}
+
+	finish() {
+		return new ElementBuilder("input")
+			.type("text")
+			.placeholder(this.text)
+			.value(this.result[this.key])
+			.on_input((e) => this.result[this.key] = e.target.value)
+			.finish();
+	}
+}
+
+class BinaryInputBuilder {
+	constructor(result, key) {
+		this.result = result;
+		this.key = key;
+		this.text = "";
+		this.update_handler = null;
+	}
+
+	label(label) {
+		this.text = label;
+		return this;
+	}
+
+	on_update(handler) {
+		this.update_handler = handler;
+		return this;
+	}
+
+	finish() {
+		let input = new ElementBuilder("input#" + this.key)
+			.type("checkbox")
+			.checked(this.result[this.key])
+			.if(this.update_handler !== null, b => b.on_click(e => {
+				console.log(e.target.checked);
+				this.result[this.key] = e.target.checked;
+				this.update_handler(e.target.checked);
+			}))
+			.finish();
+
+		let bundle = new ElementBuilder("div.horizontal-list")
+			.append(input)
+			.append(new ElementBuilder("label")
+				.for(this.key)
+				.text(this.text))
+			.finish();
+
+		if(this.update_handler !== null) {
+			this.update_handler(this.result[this.key]);
+		}
+
+		return bundle;
+	}
+}
+
 async function delay_ms(ms) {
 	await new Promise((r) => setTimeout(r, ms));
 }