From: Christian Heller Date: Fri, 28 Feb 2025 16:36:36 +0000 (+0100) Subject: Major templates refactoring. X-Git-Url: https://plomlompom.com/repos/booking/%7B%7Bdb.prefix%7D%7D/%7B%7B%20web_path%20%7D%7D/decks?a=commitdiff_plain;h=9c27a8be965d654d6ea8d1d05015f11aebf4f88f;p=ytplom Major templates refactoring. --- diff --git a/src/templates/_base.tmpl b/src/templates/_base.tmpl index d7523f6..56e5df5 100644 --- a/src/templates/_base.tmpl +++ b/src/templates/_base.tmpl @@ -7,10 +7,36 @@ const RETRY_INTERVAL_S = 5; const PATH_EVENTS = "/{{page_names.events}}"; const PATH_PLAYER = "/{{page_names.player}}"; -const PATH_PLAYLIST = "/{{page_names.playlist}}"; const PATH_PREFIX_FILE = "/{{page_names.file}}/"; const PATH_FILES = "/{{page_names.files}}"; +function add_child_to(tag, parent, attrs={}) { + const el = document.createElement(tag); + parent.appendChild(el); + for (const [key, value] of Object.entries(attrs)) { + el[key] = value; + } + return el; +} + +function add_a_to(parent, text, href) { + add_child_to('a', parent, {textContent: text, href: href}); +} + +function add_player_btn_to(parent, label, command, disabled=false) { + add_child_to('button', parent, { + textContent: label, + onclick: function() { player_command(command) }, + disabled: disabled + }); +} + +function add_text_to(parent, text) { + const node = document.createTextNode(text); + parent.appendChild(node); + return node; +} + var events_params = ""; var events_stream = null; var event_handlers = {'ping': function(data) {}}; @@ -40,13 +66,6 @@ function connect_events() { } } -function new_child_to(tag, parent, textContent='') { - const el = document.createElement(tag); - parent.appendChild(el); - el.textContent = textContent; - return el; -} - async function wrapped_fetch(target, fetch_kwargs=null, verbose=false) { if (verbose) { console.log(`Trying to fetch ${target}, kwargs:`, fetch_kwargs); @@ -77,28 +96,27 @@ function player_command(command) { wrapped_post(PATH_PLAYER, {command: [command]}) } -function father_tag_links(parent_element, tags) { +function add_tag_links_to(parent_element, tags) { tags.forEach((tag) => { - const a_tag = new_child_to('a', parent_element, tag); - a_tag.href = `${PATH_FILES}?needed_tag=${encodeURIComponent(tag)}`; - parent_element.appendChild(document.createTextNode(' ')); + add_a_to(parent_element, tag, `${PATH_FILES}?needed_tag=${encodeURIComponent(tag)}`); + add_text_to(parent_element, ' '); }); } event_handlers.player = function(data) { - for (const [id, text] of [ - ["a_playing", data.title], - ["player_state", data.is_running ? (data.is_playing ? "playing:" : "paused:") : "stopped" + (data.title ? ':' : '')], - ["btn_play", data.is_playing ? "pause" : "play"]]) { - document.getElementById(id).textContent = text; - } - const span_tags = document.getElementById("playing_tags"); - span_tags.innerHTML = ""; - father_tag_links(span_tags, data.title_tags); - for (const btn of document.getElementsByClassName("btn_if_can_play")) { - btn.disabled = !data.can_play; + const div = document.getElementById("player_controls"); + div.innerHTML = ""; + add_player_btn_to(div, "prev", "prev", !data.can_play); + add_player_btn_to(div, "next", "next", !data.can_play); + add_player_btn_to(div, data.is_playing ? "pause" : "play", "play", !data.can_play); + add_text_to(div, " · "); + add_text_to(div, data.is_running ? (data.is_playing ? "playing:" : "paused:") + : "stopped" + (data.title ? ':' : '')); + if (data.title_digest) { + add_a_to(div, data.title, `${PATH_PREFIX_FILE}${data.title_digest}`); + add_text_to(div, " · "); + add_tag_links_to(div, data.title_tags); } - document.getElementById("a_playing").href = data.title_digest ? `${PATH_PREFIX_FILE}${data.title_digest}` : PATH_PLAYLIST ; }; {% block script %} @@ -122,10 +140,7 @@ td, th { vertical-align: top; text-align: left; margin: 0; padding: 0; } · {{ macros.link_if("tags" != selected, page_names.tags) }} · {{ macros.link_if("yt_queries" != selected, page_names.yt_queries, "queries") }}
- - - -· +
{% block body %} {% endblock %} diff --git a/src/templates/_macros.tmpl b/src/templates/_macros.tmpl index 9cf18c9..8f5457f 100644 --- a/src/templates/_macros.tmpl +++ b/src/templates/_macros.tmpl @@ -4,12 +4,16 @@ {% if cond %}{% endif %} {% endmacro %} + + {% macro css_sortable_table() %} button.sorter { background-color: transparent; } button.sorting { background-color: white; color: black; } button.reverse { background-color: black; color: white; } {% endmacro %} + + {% macro js_manage_sortable_table(default_sort_key) %} var sort_key = "{{default_sort_key}}"; @@ -26,7 +30,7 @@ function draw_sortable_table() { const table = document.getElementById("sortable_table"); Array.from(document.getElementsByClassName("sortable_row")).forEach((row) => row.remove()); items_for_sortable_table.forEach((item) => { - const tr = new_child_to('tr', table); + const tr = add_child_to('tr', table); tr.classList.add("sortable_row"); populate_list_item_row(tr, item); }); @@ -46,3 +50,4 @@ function sort_by(button, key) { draw_sortable_table(); } {% endmacro %} + diff --git a/src/templates/file_data.tmpl b/src/templates/file_data.tmpl index f4aa050..0b069fa 100644 --- a/src/templates/file_data.tmpl +++ b/src/templates/file_data.tmpl @@ -8,35 +8,29 @@ async function update_file_data() { const file_data = await wrapped_fetch(PATH_FILE_JSON).then((response) => response.json()); Array.from(document.getElementsByClassName("listed_tags")).forEach((row) => row.remove()); file_data.tags_showable.forEach((tag) => { - const tr = new_child_to("tr", document.getElementById("tags_table")); + const tr = add_child_to("tr", document.getElementById("tags_table")); tr.classList.add("listed_tags"); {% if allow_edit %} - td_checkbox = new_child_to("td", tr); + td_checkbox = add_child_to("td", tr); td_checkbox.classList.add("tag_checkboxes"); - const input = new_child_to("input", td_checkbox); - input.type = "checkbox"; - input.checked = true; - input.onclick = send_update; + add_child_to("input", td_checkbox, {type: "checkbox", checked: true, onclick: send_update}); {% endif %} - const a = new_child_to("a", new_child_to("td", new_child_to("td", tr))); - a.href = `${PATH_FILES}?needed_tag=${encodeURIComponent(tag)}`; - a.textContent = tag; + add_a_to(add_child_to("td", add_child_to("td", tr)), tag, + `${PATH_FILES}?needed_tag=${encodeURIComponent(tag)}`); }); {% if allow_edit %} document.getElementById("sync_checkbox").checked = ! file_data.flags.includes("do not sync"); document.getElementById("added_tag").value = ""; const datalist = document.getElementById("unused_tags"); datalist.innerHTML = ""; - file_data.unused_tags.forEach((tag) => { new_child_to("option", datalist, tag); }); + file_data.unused_tags.forEach((tag) => { add_child_to("option", datalist, {textContent: tag}); }); {% endif %} td_present = document.getElementById("presence"); td_present.innerHTML = ""; if (file_data.present) { - const a = new_child_to("a", td_present, "yes"); - a.href = "/{{page_names.download}}/{{file.yt_id}}"; - td_present.appendChild(document.createTextNode(" ")); - const button = new_child_to("button", td_present, "add as next"); - button.onclick = function() { player_command("inject_{{file.digest.b64}}"); } + add_a_to(td_present, "yes", "/{{page_names.download}}/{{file.yt_id}}"); + add_text_to(td_present, " "); + add_player_btn_to(td_present, 'add as next', `inject_${file_data.digest}`); } else { td_present.textContent = "no"; } diff --git a/src/templates/files.tmpl b/src/templates/files.tmpl index 76147ff..8909d89 100644 --- a/src/templates/files.tmpl +++ b/src/templates/files.tmpl @@ -8,40 +8,41 @@ const all_tags = {{showable_tags|tojson|safe}}; var needed_tags = {{needed_tags|tojson|safe}}; function select_tag() { - if (tags_select.selectedIndex < 1) { - return; - } - const chosen_tag = document.getElementById('tags_select').value; - needed_tags.push(chosen_tag); - update_filter_inputs(); + if (tags_select.selectedIndex < 1) { + return; + } + const chosen_tag = document.getElementById('tags_select').value; + needed_tags.push(chosen_tag); + update_filter_inputs(); } function update_filter_inputs() { - const tags_select = document.getElementById('tags_select'); - while (tags_select.options.length > 0) { - tags_select.remove(0); - } - new_child_to('option', tags_select, 'add'); - all_tags.forEach((tag) => { - if (needed_tags.includes(tag)) { - return; + const tags_select = document.getElementById('tags_select'); + while (tags_select.options.length > 0) { + tags_select.remove(0); } - const option = new_child_to('option', tags_select, tag); - }); - const tags_div = document.getElementById("tags"); - tags_div.innerHTML = ''; - needed_tags.forEach((chosen_tag) => { - const tag_text_node = document.createTextNode(` ${chosen_tag} `); - tags_div.appendChild(tag_text_node); - const btn_del = new_child_to('button', tags_div, 'x'); - btn_del.onclick = function() { - tag_text_node.remove(); - btn_del.remove(); - needed_tags = needed_tags.filter(tag => tag !== chosen_tag); - update_filter_inputs(); - }; - }); - update_files_list(); + add_child_to('option', tags_select, {textContent: 'add'}); + all_tags.forEach((tag) => { + if (needed_tags.includes(tag)) { + return; + } + add_child_to('option', tags_select, {textContent: tag}); + }); + const tags_div = document.getElementById("tags"); + tags_div.innerHTML = ''; + needed_tags.forEach((chosen_tag) => { + const tag_text_node = add_text_to(tags_div, ` ${chosen_tag} `); + add_child_to('button', tags_div, { + textContent: 'x', + onclick: function() { + tag_text_node.remove(); + btn_del.remove(); + needed_tags = needed_tags.filter(tag => tag !== chosen_tag); + update_filter_inputs(); + } + }); + }); + update_files_list(); } async function update_files_list() { @@ -63,17 +64,12 @@ function inject_all() { {{ macros.js_manage_sortable_table("rel_path") }} var items_for_sortable_table = []; function populate_list_item_row(tr, file) { - new_child_to('td', tr, file.size); - new_child_to('td', tr, file.duration); - const td_inject = new_child_to('td', tr); - const btn_inject = new_child_to('button', td_inject); - btn_inject.onclick = function() { player_command(`inject_${file.digest}`) }; - btn_inject.disabled = !file.present; - btn_inject.textContent = 'inject'; - father_tag_links(new_child_to('td', tr), file.tags_showable); - const td_link = new_child_to('td', tr); - const a = new_child_to('a', td_link, file.rel_path); - a.href = `${PATH_PREFIX_FILE}${file.digest}`; + add_child_to('td', tr, {textContent: file.size}); + add_child_to('td', tr, {textContent: file.duration}); + const td_inject = add_child_to('td', tr); + add_player_btn_to(td_inject, 'add as next', `inject_${file.digest}`, !file.present) + add_tag_links_to(add_child_to('td', tr), file.tags_showable); + add_a_to(add_child_to('td', tr), file.rel_path, `${PATH_PREFIX_FILE}${file.digest}`); } window.addEventListener('load', update_filter_inputs); {% endblock %} diff --git a/src/templates/playlist.tmpl b/src/templates/playlist.tmpl index 1933323..f956ea2 100644 --- a/src/templates/playlist.tmpl +++ b/src/templates/playlist.tmpl @@ -18,13 +18,10 @@ event_handlers.playlist = function(data) { // update playlist while (old_rows[0]) { old_rows[0].remove(); } for (let i = 0; i < data.playlist_files.length; i++) { const file = data.playlist_files[i]; - const tr = new_child_to('tr', table); + const tr = add_child_to('tr', table); tr.classList.add(CLS_PLAYLIST_ROW); - const td_anchor = new_child_to('td', tr); - td_anchor.id = `${i}` - const a_row = new_child_to('a', td_anchor, '#'); - a_row.href = `#${i}` - const td_entry_control = new_child_to('td', tr); + add_a_to(add_child_to('td', tr, {id: `${i}`}), '#', `#${i}`); + const td_entry_control = add_child_to('td', tr); td_entry_control.classList.add('entry_control'); if (i == data.idx) { td_entry_control.textContent = 'playing'; @@ -38,13 +35,10 @@ event_handlers.playlist = function(data) { // update playlist ['^', 'up'], ['v', 'down'], ['x', 'rm']]) { - const btn = new_child_to('button', td_entry_control, symbol); - btn.onclick = function() { player_command(`${prefix}_${i}`) }; + add_player_btn_to(td_entry_control, symbol, `${prefix}_${i}`); } } - const td_link = new_child_to('td', tr); - const a_file = new_child_to('a', td_link, file.rel_path); - a_file.href = `${PATH_PREFIX_FILE}${file.digest}`; + add_a_to(add_child_to('td', tr), file.rel_path, `${PATH_PREFIX_FILE}${file.digest}`); } }; {% endblock %} diff --git a/src/templates/tags.tmpl b/src/templates/tags.tmpl index f6db85b..aae3eab 100644 --- a/src/templates/tags.tmpl +++ b/src/templates/tags.tmpl @@ -5,9 +5,9 @@ {{ macros.js_manage_sortable_table("name") }} var items_for_sortable_table = {{tags|tojson|safe}}; function populate_list_item_row(tr, tag) { - a_name = new_child_to('a', new_child_to('td', tr), tag.name); - a_name.href = `${PATH_FILES}?needed_tag=${encodeURIComponent(tag.name)}`; - new_child_to('td', tr, tag.number); + add_a_to(add_child_to('td', tr), tag.name, + `${PATH_FILES}?needed_tag=${encodeURIComponent(tag.name)}`); + add_child_to('td', tr, {textContent: tag.number}); } window.addEventListener('load', draw_sortable_table); {% endblock %} diff --git a/src/templates/yt_result.tmpl b/src/templates/yt_result.tmpl index 123b8c2..9a7ca49 100644 --- a/src/templates/yt_result.tmpl +++ b/src/templates/yt_result.tmpl @@ -7,13 +7,11 @@ event_handlers.download = function(data) { const td = document.getElementById("status"); td.innerHTML = ""; if ("absent" == data.status) { - a = new_child_to("a", td, "download?"); - a.href = "/{{page_names.download}}/{{video_data.id_}}"; + add_a_to(td, "download?", "/{{page_names.download}}/{{video_data.id_}}"); } else if ("present" == data.status) { - a = new_child_to("a", td, data.path); - a.href = "/{{page_names.file}}/" + data.digest; + add_a_to(td, data.path, "/{{page_names.file}}/" + data.digest); } else { - td.appendChild(document.createTextNode(`${data.status}`)); + add_text_to(td, `${data.status}`); } } {% endblock %}