diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html index f37005e..1354a81 100644 --- a/frontends/etiquette_flask/templates/album.html +++ b/frontends/etiquette_flask/templates/album.html @@ -57,11 +57,12 @@ p

{{album.description}}

{% set viewparam = "?view=list" if view == "list" else "" %} @@ -127,10 +128,11 @@ var title_editor = document.getElementById("title_editor"); var description_text = document.getElementById("description_text"); var description_editor = document.getElementById("description_editor"); var description_editor_box = document.getElementById("description_editor_box"); +var edit_submitting_spinner = document.getElementById("edit_submitting_spinner"); bind_box_to_button(title_editor, save_button); -var title_is_blank = "{{album.title}}" === ""; +var title_is_blank = {{ (album.title == '')|int }}; var blank_title_text = "Album {{album.id}}"; function submit_tag(callback) @@ -139,14 +141,37 @@ function submit_tag(callback) add_tag_box.value = ""; } -function start_editing() +function show_editor() { edit_button.classList.add("hidden"); + edit_submitting_spinner.classList.add("hidden"); + title_text.classList.add("hidden"); title_editor.classList.remove("hidden"); + description_text.classList.add("hidden"); description_editor.classList.remove("hidden"); +} +function show_spinner() +{ + edit_submitting_spinner.classList.remove("hidden"); +} + +function hide_editor() +{ + edit_button.classList.remove("hidden"); + edit_submitting_spinner.classList.add("hidden"); + + title_text.classList.remove("hidden"); + title_editor.classList.add("hidden"); + + description_text.classList.remove("hidden"); + description_editor.classList.add("hidden"); +} + +function start_editing() +{ if (title_is_blank) { title_editor.value = ""; @@ -155,6 +180,7 @@ function start_editing() { title_editor.value = title_text.innerText; } + show_editor(); title_editor.focus(); description_editor_box.value = description_text.innerText; } @@ -163,10 +189,30 @@ function finish_editing(do_save) { if (do_save === true) { - console.log("save"); var title = title_editor.value; var description = description_editor_box.value; - if (title === "") + + var url = "/album/{{album.id}}/edit"; + var data = new FormData(); + data.append("title", title); + data.append("description", description); + + show_spinner(); + post(url, data, callback_edit); + } + else + { + + } + +} + +function callback_edit(response) +{ + console.log(response); + if (response["_status"] == 200) + { + if (response["title"] === "") { document.title = "Album {{album.id}}"; title_text.innerText = blank_title_text; @@ -174,24 +220,13 @@ function finish_editing(do_save) } else { - document.title = "Album " + title; - title_text.innerText = title; + document.title = "Album " + response["title"]; + title_text.innerText = response["title"]; title_is_blank = false; } - description_text.innerText = description; - - var url = "/album/{{album.id}}/edit"; - var data = new FormData(); - data.append("title", title); - data.append("description", description); - callback = function(){}; - post(url, data, callback); + description_text.innerText = response["description"]; + hide_editor(); } - edit_button.classList.remove("hidden"); - title_text.classList.remove("hidden"); - title_editor.classList.add("hidden"); - description_text.classList.remove("hidden"); - description_editor.classList.add("hidden"); }