Media-Cleaner-Homepage-and-Api #7
@@ -1,9 +1,9 @@
|
|||||||
<div data-role="page" class="page type-interior pluginConfigurationPage"
|
<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 data-role="content">
|
||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
<div id="loading">Loading...</div>
|
<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>
|
<button class="links" data-target="configurationpage?name=Settings">Settings</button>
|
||||||
<h2>Media Cleaner</h2>
|
<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();
|
|
||||||
});
|
|
||||||
@@ -57,8 +57,8 @@ public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
|
|||||||
},
|
},
|
||||||
new PluginPageInfo
|
new PluginPageInfo
|
||||||
{
|
{
|
||||||
Name = "media_cleaner_table.js",
|
Name = "home.js",
|
||||||
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.media_cleaner_table.js", GetType().Namespace),
|
EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.home.js", GetType().Namespace),
|
||||||
},
|
},
|
||||||
new PluginPageInfo
|
new PluginPageInfo
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user