some refactoring

This commit is contained in:
Sundog Jones 2024-09-03 11:34:40 -04:00
parent f569d26744
commit de08f9fa0c

View File

@ -376,35 +376,49 @@
const api_url = "media.php";
fetch(api_url).then((response) => {
if (response.ok) {
response.json().then((rows) => {
const media_library_target = document.getElementById("media_library_contents");
media_library_target.innerHTML = "";
rows.forEach((row) => {
const duration = new Date(row['duration_secs'] * 1000).toISOString().substring(11, 19);
const template = document.getElementById("media_item_template");
const template_clone = template.content.firstElementChild.cloneNode(true);
template_clone.querySelector(".media_item_title").innerHTML = row['title'];
template_clone.querySelector(".media_item_info").innerHTML = "<p>" + row['description'] + "</p><p>Season " + row['season'] + " Episode " + row['episode_number'] + " - (Duration " + duration + ")</p>";
const thisRow = media_library_target.appendChild(template_clone);
thisRow.setAttribute("data-id", row['id']);
thisRow.setAttribute("data-title", row['title']);
thisRow.setAttribute("data-description", row['description']);
thisRow.setAttribute("data-season", row['season']);
thisRow.setAttribute("data-episode-number", row['episode_number']);
thisRow.setAttribute("data-duration", row['duration_secs']);
});
const nodes = document.querySelectorAll(".media_item_list_element");
nodes.forEach((node) => {
node.addEventListener("click", (event) => {
// open media item details editing pane
const media_item = event.target.classList.contains(".media_item_list_element") ? event.target : event.target.closest(".media_item_list_element");
edit_media_item(media_item);
});
});
});
response.json().then(populate_media_library);
}
});
}
const fetch_filtered_media_items = () => {
const filter_term = document.querySelector("#media_library_filter").value;
const api_url = "media.php?filter=" + filter_term;
fetch(api_url).then((response) => {
if (response.ok) {
response.json().then(populate_media_library);
}
});
}
const populate_media_library = (rows) => {
const media_library_target = document.querySelector("#media_library_contents");
media_library_target.innerHTML = "";
rows.forEach((row) => {
const duration = new Date(row['duration_secs'] * 1000).toISOString().substring(11, 19);
const template = document.getElementById("media_item_template");
const template_clone = template.content.firstElementChild.cloneNode(true);
template_clone.querySelector(".media_item_title").innerHTML = row['title'];
template_clone.querySelector(".media_item_info").innerHTML = `<p>${row['description']}</p><p>Season ${row['season']} Episode ${row['episode_number']} - (Duration ${duration})</p>`;
const thisRow = media_library_target.appendChild(template_clone);
thisRow.setAttribute("data-id", row['id']);
thisRow.setAttribute("data-title", row['title']);
thisRow.setAttribute("data-description", row['description']);
thisRow.setAttribute("data-season", row['season']);
thisRow.setAttribute("data-episode-number", row['episode_number']);
thisRow.setAttribute("data-duration", row['duration_secs']);
});
const nodes = document.querySelectorAll(".media_item_list_element");
nodes.forEach((node) => {
node.addEventListener("click", (event) => {
// open media item details editing pane
const media_item = event.target.classList.contains(".media_item_list_element") ? event.target : event.target.closest(".media_item_list_element");
edit_media_item(media_item);
});
});
}
const edit_media_item = (media_item_element) => {
const template = document.getElementById("media_item_editor");