diff --git a/ui.js b/ui.js index 9cec3af..b956e9f 100644 --- a/ui.js +++ b/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") - .type("text") + content.appendChild(new TextInputBuilder(result, "cs") .placeholder("Název práce (v češtině)") - .on_input((e) => result.cs = e.target.value) - .finish(); - - let en_name = new ElementBuilder("input") - .type("text") + .finish()); + content.appendChild(new TextInputBuilder(result, "en") .placeholder("Název práce (v angličtině)") - .on_input((e) => result.en = e.target.value) - .finish(); - - content.appendChild(cs_name); - content.appendChild(en_name); + .finish()); 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") - .type("text") + let supervisor_name = new TextInputBuilder(result, "supervisor_name") .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") - .type("text") + let consultant_name = new TextInputBuilder(result, "consultant_name") .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") - .type("checkbox") - .checked(result.has_supervisor) - .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")) + content.appendChild(new BinaryInputBuilder(result, "has_supervisor") + .label("Práce má vedoucího") + .on_update(val => supervisor_name.disabled = !val) .finish()); content.appendChild(supervisor_name); content.appendChild(new ElementBuilder("div.vertical-spacer").finish()); - content.appendChild(new ElementBuilder("div.horizontal-list") - .append(has_consultant) - .append(new ElementBuilder("label") - .for("has-consultant") - .text("Práce má konzultanta")) + content.appendChild(new BinaryInputBuilder(result, "has_consultant") + .label("Práce má konzultanta") + .on_update(val => consultant_name.disabled = !val) .finish()); content.appendChild(consultant_name); content.appendChild(new ElementBuilder("div.vertical-spacer").finish()); diff --git a/utils.js b/utils.js index a285876..4d7c93b 100644 --- a/utils.js +++ b/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)); }