Cleaned up media_cleaner_table.js and renamed to home.js. Updated table with no data to have a message.
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<div data-role="page" class="page type-interior pluginConfigurationPage"
|
||||
data-controller="__plugin/media_cleaner_table.js">
|
||||
data-controller="__plugin/home.js">
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
<div id="loading">Loading...</div>
|
||||
<div id="page" style="visibility: hidden;">
|
||||
<div id="homepage" style="visibility: hidden;">
|
||||
<button class="links" data-target="configurationpage?name=Settings">Settings</button>
|
||||
<h2>Media Cleaner</h2>
|
||||
|
||||
|
||||
151
Jellyfin.Plugin.MediaCleaner/Pages/home.js
Normal file
151
Jellyfin.Plugin.MediaCleaner/Pages/home.js
Normal file
@@ -0,0 +1,151 @@
|
||||
document.addEventListener('pageshow', async () => {
|
||||
await fetchHomepageCSS();
|
||||
await updateMediaCleanerState();
|
||||
|
||||
var moviesTitle = document.getElementById("moviesTitle");
|
||||
var seriesTitle = document.getElementById("seriesTitle");
|
||||
|
||||
moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
|
||||
seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();
|
||||
|
||||
await populateTables();
|
||||
addClickHandlersToLinks();
|
||||
finishLoading();
|
||||
});
|
||||
|
||||
const getMediaCleanerSeriesInfo = async () => {
|
||||
const response = await fetch("/mediacleaner/state/getSeriesInfo");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const getMediaCleanerMovieInfo = async () => {
|
||||
const response = await fetch("/mediacleaner/state/getMovieInfo");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const updateMediaCleanerState = async () => {
|
||||
const response = await fetch("/mediacleaner/state/updateState");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const getMediaCleanerSeriesTitle = async () => {
|
||||
const response = await fetch("/mediacleaner/state/getSeriesTitle");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const getMediaCleanerMoviesTitle = async () => {
|
||||
const response = await fetch("/mediacleaner/state/getMoviesTitle");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const populateTables = async () => {
|
||||
var moviesInfo = await getMediaCleanerMovieInfo();
|
||||
var seriesInfo = await getMediaCleanerSeriesInfo();
|
||||
|
||||
var seriesTableBody = seriesTable.getElementsByTagName('tbody')[0];
|
||||
seriesTableBody.replaceChildren();
|
||||
|
||||
var moviesTableBody = moviesTable.getElementsByTagName('tbody')[0];
|
||||
moviesTableBody.replaceChildren();
|
||||
|
||||
if (moviesInfo.length > 0){
|
||||
for(let i = 0; i < moviesInfo.length; i++){
|
||||
var row = moviesTableBody.insertRow(-1);
|
||||
var cell1 = row.insertCell(0);
|
||||
var cell2 = row.insertCell(1);
|
||||
cell1.innerHTML = moviesInfo[i].Name;
|
||||
// Will need to be enabled once radarr and sonarr integration is enabled.
|
||||
// Maybe change this to an element to remove hard coding.
|
||||
cell2.innerHTML = "<button type=\"button\" disabled>Delete</button>";
|
||||
}
|
||||
}
|
||||
else{
|
||||
var columnCount = moviesTable.tHead.rows[0].cells.length;
|
||||
var row = moviesTableBody.insertRow(-1);
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.colSpan = columnCount;
|
||||
cell1.innerHTML = "No stale movies found.";
|
||||
}
|
||||
|
||||
if(seriesInfo.length > 0){
|
||||
for(let i = 0; i < seriesInfo.length; i++){
|
||||
var row = seriesTableBody.insertRow(-1);
|
||||
var cell1 = row.insertCell(0);
|
||||
var cell2 = row.insertCell(1);
|
||||
var cell3 = row.insertCell(2);
|
||||
cell1.innerHTML = seriesInfo[i].Name;
|
||||
cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
|
||||
// Will need to be enabled once radarr and sonarr integration is enabled.
|
||||
// Maybe change this to an element to remove hard coding.
|
||||
cell3.innerHTML = "<button type=\"button\" disabled>Delete</button>";
|
||||
cell3.className = "actions-cell";
|
||||
}
|
||||
}
|
||||
else{
|
||||
var columnCount = seriesTable.tHead.rows[0].cells.length;
|
||||
var row = seriesTableBody.insertRow(-1);
|
||||
var cell1 = row.insertCell(0);
|
||||
cell1.colSpan = columnCount;
|
||||
cell1.innerHTML = "No stale series found.";
|
||||
}
|
||||
};
|
||||
|
||||
const addClickHandlersToLinks = () => {
|
||||
const linkbtns = document.querySelectorAll("button.links")
|
||||
linkbtns.forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
const target = btn.dataset.target;
|
||||
if (!target) return;
|
||||
window.location.hash = target;
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const finishLoading = () => {
|
||||
const loadingElement = document.getElementById("loading");
|
||||
|
||||
const homepage = document.getElementById("homepage");
|
||||
loadingElement.style.visibility = "hidden";
|
||||
homepage.style.visibility = "visible";
|
||||
|
||||
console.log("Loading element: ", loadingElement);
|
||||
console.log("Homepage element: ", homepage);
|
||||
}
|
||||
|
||||
const fetchHomepageCSS = async () => {
|
||||
const response = await fetch('/web/configurationpage?name=home.css')
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`);
|
||||
}
|
||||
|
||||
const css = await response.text();
|
||||
const styles = document.createElement('style');
|
||||
styles.textContent = css;
|
||||
document.head.appendChild(styles);
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
document.addEventListener('pageshow', async () => {
|
||||
var moviesTitle = document.getElementById("moviesTitle");
|
||||
var seriesTitle = document.getElementById("seriesTitle");
|
||||
var moviesTable = document.getElementById("moviesTable");
|
||||
var seriesTable = document.getElementById("seriesTable");
|
||||
|
||||
const getMediaCleanerSeriesInfo = async () => {
|
||||
const response = await fetch("/mediacleaner/state/getSeriesInfo");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const getMediaCleanerMovieInfo = async () => {
|
||||
const response = await fetch("/mediacleaner/state/getMovieInfo");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const updateMediaCleanerState = async () => {
|
||||
const response = await fetch("/mediacleaner/state/updateState");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`)
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const getMediaCleanerSeriesTitle = async () => {
|
||||
const response = await fetch("/mediacleaner/state/getSeriesTitle");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const getMediaCleanerMoviesTitle = async () => {
|
||||
const response = await fetch("/mediacleaner/state/getMoviesTitle");
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const populateTables = () => {
|
||||
var seriesTableBody = seriesTable.getElementsByTagName('tbody')[0];
|
||||
seriesTableBody.replaceChildren();
|
||||
seriesTableBody.style.border = "1px solid";
|
||||
seriesTableBody.style.borderCollapse = "collapse";
|
||||
|
||||
var moviesTableBody = moviesTable.getElementsByTagName('tbody')[0];
|
||||
moviesTableBody.replaceChildren();
|
||||
moviesTableBody.style.border = "1px solid";
|
||||
|
||||
for(let i = 0; i < moviesInfo.length; i++){
|
||||
var row = moviesTableBody.insertRow(-1);
|
||||
var cell1 = row.insertCell(0);
|
||||
var cell2 = row.insertCell(1);
|
||||
cell1.innerHTML = moviesInfo[i].Name;
|
||||
// Will need to be enabled once radarr and sonarr integration is enabled.
|
||||
// Maybe change this to an element to remove hard coding.
|
||||
cell2.innerHTML = "<button type=\"button\" disabled>Delete</button>";
|
||||
}
|
||||
|
||||
for(let i = 0; i < seriesInfo.length; i++){
|
||||
var row = seriesTableBody.insertRow(-1);
|
||||
var cell1 = row.insertCell(0);
|
||||
var cell2 = row.insertCell(1);
|
||||
var cell3 = row.insertCell(2);
|
||||
cell1.innerHTML = seriesInfo[i].Name;
|
||||
cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
|
||||
// Will need to be enabled once radarr and sonarr integration is enabled.
|
||||
// Maybe change this to an element to remove hard coding.
|
||||
cell3.innerHTML = "<button type=\"button\" disabled>Delete</button>";
|
||||
cell3.className = "actions-cell";
|
||||
}
|
||||
};
|
||||
|
||||
// const styleTables = () => {
|
||||
// const tables = document.querySelectorAll("table");
|
||||
// const cells = document.querySelectorAll("th, td");
|
||||
|
||||
// tables.forEach(table => {
|
||||
// table.style.border = "1px solid";
|
||||
// table.style.borderCollapse = "collapse";
|
||||
// })
|
||||
|
||||
// cells.forEach(cell => {
|
||||
// cell.style.border = "1px solid";
|
||||
// cell.style.padding = "0.5rem 0.75rem";
|
||||
// cell.style.textAlign = "left"
|
||||
// });
|
||||
// };
|
||||
|
||||
const addClickHandlersToLinks = () => {
|
||||
const linkbtns = document.querySelectorAll("button.links")
|
||||
linkbtns.forEach(btn => {
|
||||
btn.addEventListener("click", () => {
|
||||
const target = btn.dataset.target;
|
||||
if (!target) return;
|
||||
window.location.hash = target;
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const showElements = () => {
|
||||
const loadingElement = document.querySelector("#loading");
|
||||
const elements = document.querySelectorAll("div #page");
|
||||
elements.forEach(element => {
|
||||
element.style.visibility = "visible";
|
||||
})
|
||||
loadingElement.style.visibility = "hidden";
|
||||
}
|
||||
|
||||
const fetchCss = async () => {
|
||||
const response = await fetch('/web/configurationpage?name=home.css')
|
||||
|
||||
if(!response.ok){
|
||||
throw new Error(`Response status: ${response.status}`);
|
||||
}
|
||||
|
||||
const css = await response.text();
|
||||
const styles = document.createElement('style');
|
||||
styles.textContent = css;
|
||||
document.head.appendChild(styles);
|
||||
}
|
||||
|
||||
moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
|
||||
seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();
|
||||
|
||||
await updateMediaCleanerState();
|
||||
var moviesInfo = await getMediaCleanerMovieInfo();
|
||||
var seriesInfo = await getMediaCleanerSeriesInfo();
|
||||
populateTables();
|
||||
addClickHandlersToLinks();
|
||||
showElements();
|
||||
fetchCss();
|
||||
});
|
||||
Reference in New Issue
Block a user