Text inputs now actually remember their state

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));
 }