Initial commit
This commit is contained in:
255
ui.js
Normal file
255
ui.js
Normal file
@@ -0,0 +1,255 @@
|
||||
let tul_prdel = null;
|
||||
|
||||
function get_step(id) {
|
||||
return steps[Object.keys(steps)[id]];
|
||||
}
|
||||
|
||||
async function faculty_layout(content, result) {
|
||||
if(!Object.keys(faculties).includes(result.name)) {
|
||||
document.querySelector("#next-button").disabled = true;
|
||||
}
|
||||
|
||||
let buttons = new ButtonListBuilder(Object.keys(faculties))
|
||||
.should_be_pressed((key) => result.name == key)
|
||||
.modify((b, key) => b.class("narrow").text(faculties[key].name))
|
||||
.on_click((key) => {
|
||||
result.name = key;
|
||||
document.querySelector("#next-button").disabled = false;
|
||||
document.documentElement.setAttribute("data-faculty", key);
|
||||
})
|
||||
.finish();
|
||||
|
||||
for(const button of buttons) {
|
||||
content.appendChild(button);
|
||||
}
|
||||
}
|
||||
|
||||
async function thesis_layout(content, result) {
|
||||
if(!Object.keys(theses).includes(result.type)) {
|
||||
document.querySelector("#next-button").disabled = true;
|
||||
}
|
||||
|
||||
let buttons = new ButtonListBuilder(Object.keys(theses))
|
||||
.should_be_pressed((key) => result.type == key)
|
||||
.modify((b, key) => b.class("narrow").text(theses[key].name))
|
||||
.on_click((key) => {
|
||||
result.type = key;
|
||||
document.querySelector("#next-button").disabled = false;
|
||||
})
|
||||
.finish();
|
||||
|
||||
for(const button of buttons) {
|
||||
content.appendChild(button);
|
||||
}
|
||||
}
|
||||
|
||||
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(genders).includes(result.gender)) {
|
||||
document.querySelector("#next-button").disabled = true;
|
||||
}
|
||||
|
||||
let gender_buttons = new ButtonListBuilder(Object.keys(genders))
|
||||
.should_be_pressed((key) => result.gender == key)
|
||||
.modify((b, key) => b.class("expand").text(genders[key].name))
|
||||
.on_click((key) => {
|
||||
result.gender = key;
|
||||
document.querySelector("#next-button").disabled = false;
|
||||
})
|
||||
.finish();
|
||||
|
||||
content.appendChild(author_name);
|
||||
content.appendChild(new ElementBuilder("div.vertical-spacer").finish());
|
||||
content.appendChild(new ElementBuilder("div")
|
||||
.text("Způsob sebeoslovení")
|
||||
.finish());
|
||||
content.appendChild(new ElementBuilder("div.horizontal-list")
|
||||
.append_all(gender_buttons)
|
||||
.finish());
|
||||
}
|
||||
|
||||
async function collaborators_layout(content, result) {
|
||||
let supervisor_name = new ElementBuilder("input")
|
||||
.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")
|
||||
.type("text")
|
||||
.placeholder("Jméno konzultanta práce (vč. titulů), příp. konzultantů")
|
||||
.on_input((e) => result.supervisor_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"))
|
||||
.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"))
|
||||
.finish());
|
||||
content.appendChild(consultant_name);
|
||||
}
|
||||
|
||||
async function run() {
|
||||
startbutton.style.cursor = "auto";
|
||||
startbutton.disabled = true;
|
||||
|
||||
let main_container = document.querySelector(".main-container");
|
||||
let start_content = main_container.querySelector(".main-content");
|
||||
start_content.style.opacity = 0;
|
||||
|
||||
await delay_ms(300);
|
||||
|
||||
start_content.remove();
|
||||
|
||||
let container = new ElementBuilder("div.vertical-list")
|
||||
.style("justifyContent", "space-between")
|
||||
.finish();
|
||||
|
||||
let back_button = new ElementBuilder("button#back-button")
|
||||
.text("← Zpět")
|
||||
.finish();
|
||||
|
||||
let next_button = new ElementBuilder("button.accent#next-button").finish();
|
||||
|
||||
let main_content = new ElementBuilder("div.main-content")
|
||||
.style("opacity", 0)
|
||||
.append(container)
|
||||
.append(new ElementBuilder("div.horizontal-list")
|
||||
.append(back_button)
|
||||
.append(new ElementBuilder("div.filler"))
|
||||
.append(next_button))
|
||||
.finish();
|
||||
|
||||
main_container.appendChild(main_content);
|
||||
await delay_ms(100);
|
||||
main_content.style.opacity = 1;
|
||||
|
||||
let id = 0;
|
||||
let animation = 0;
|
||||
|
||||
let steps_len = Object.keys(steps).length;
|
||||
|
||||
while(id < steps_len) {
|
||||
back_button.style.display = (id != 0) ? "" : "none";
|
||||
next_button.innerText = (id < steps_len - 1) ? "Další →" : "Dokončit";
|
||||
next_button.disabled = false;
|
||||
|
||||
container.innerHTML = "";
|
||||
|
||||
let step = get_step(id);
|
||||
|
||||
let title = new ElementBuilder("h1")
|
||||
.html(step.title)
|
||||
.finish();
|
||||
|
||||
let content = new ElementBuilder("div.vertical-list")
|
||||
.style("gap", "12px")
|
||||
.finish();
|
||||
|
||||
let subcontainer = new ElementBuilder("div.vertical-list.slide-animation")
|
||||
.append(title)
|
||||
.append(content)
|
||||
.if(animation < 0, c => c.class("slide-from-left"))
|
||||
.if(animation > 0, c => c.class("slide-from-right"))
|
||||
.finish();
|
||||
|
||||
await step.layout(content, step.result);
|
||||
|
||||
container.appendChild(subcontainer);
|
||||
animation = 0;
|
||||
|
||||
let new_id = await new Promise((r) => {
|
||||
back_button.onclick = () => {
|
||||
r(id - 1);
|
||||
}
|
||||
next_button.onclick = () => {
|
||||
r(id + 1);
|
||||
}
|
||||
});
|
||||
|
||||
if(new_id < steps_len) {
|
||||
subcontainer.classList.add((new_id > id) ? "slide-to-left" : "slide-to-right");
|
||||
await delay_ms(250);
|
||||
subcontainer.remove();
|
||||
animation = new_id - id;
|
||||
}
|
||||
|
||||
id = new_id;
|
||||
}
|
||||
|
||||
main_content.style.opacity = 0;
|
||||
let [_, out_blob] = await Promise.all([delay_ms(300), generate_zip()])
|
||||
main_content.remove();
|
||||
|
||||
let color = window.getComputedStyle(document.body).getPropertyValue("--" + steps.faculty.result.name + "-color");
|
||||
let logo = tul_prdel.replaceAll('fill="#5948ad"', 'fill="' + color + '"');
|
||||
|
||||
main_content = new ElementBuilder("div.main-content")
|
||||
.style("opacity", 0)
|
||||
.append(new ElementBuilder("h1").text("Vaše šablona je připravena!"))
|
||||
.append(new ElementBuilder("img")
|
||||
.src(URL.createObjectURL(new Blob([logo], { type: "image/svg+xml" })))
|
||||
.style("width", "100px")
|
||||
.style("height", "100px"))
|
||||
.append(new ElementBuilder("div.paragraphs")
|
||||
.append(new ElementBuilder("p").html(`
|
||||
Po stažení archivu můžete šablonu rozbalit a
|
||||
buď ji otevřít ve svém oblíbeném textovém editoru,
|
||||
nebo ji nahrát do webového rozhraní Typstu.
|
||||
`))
|
||||
.append(new ElementBuilder("p").append(new ElementBuilder("a")
|
||||
.text("Webové rozhraní Typstu otevřete kliknutím zde.")
|
||||
.href("https://typst.app")
|
||||
.target("_blank"))))
|
||||
.append(new ElementBuilder("a.button.accent")
|
||||
.href(URL.createObjectURL(out_blob))
|
||||
.download("tul-thesis-typst.zip")
|
||||
.text("Klikněte zde pro stažení archivu"))
|
||||
.finish();
|
||||
|
||||
main_container.appendChild(main_content);
|
||||
await delay_ms(100);
|
||||
main_content.style.opacity = 1;
|
||||
}
|
||||
|
||||
window.onload = async () => {
|
||||
let img = await fetch("tul_prdel.svg"); // Should already be cached by now (hopefully)
|
||||
tul_prdel = await img.text();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user