some refactoring
This commit is contained in:
parent
f569d26744
commit
de08f9fa0c
66
layout.html
66
layout.html
|
@ -376,35 +376,49 @@
|
||||||
const api_url = "media.php";
|
const api_url = "media.php";
|
||||||
fetch(api_url).then((response) => {
|
fetch(api_url).then((response) => {
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
response.json().then((rows) => {
|
response.json().then(populate_media_library);
|
||||||
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);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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 edit_media_item = (media_item_element) => {
|
||||||
const template = document.getElementById("media_item_editor");
|
const template = document.getElementById("media_item_editor");
|
||||||
|
|
Loading…
Reference in New Issue