diff --git a/Website/interaction.js b/Website/interaction.js index 45760b7..96b0905 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -1,6 +1,7 @@ let jobs = []; let notificationConnectorTypes = []; let libraryConnectorTypes = []; +let selectedManga; const searchBox = document.querySelector("#searchbox"); const settingsPopup = document.querySelector("#settingsPopup"); @@ -8,13 +9,13 @@ const settingsCog = document.querySelector("#settingscog"); const tasksContent = document.querySelector("content"); const createMonitorTaskButton = document.querySelector("#createMonitorTaskButton"); const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterTaskButton"); -const publicationViewerPopup = document.querySelector("#publicationViewerPopup"); -const publicationViewerWindow = document.querySelector("publication-viewer"); -const publicationViewerDescription = document.querySelector("#publicationViewerDescription"); -const publicationViewerName = document.querySelector("#publicationViewerName"); -const publicationViewerTags = document.querySelector("#publicationViewerTags"); -const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor"); -const pubviewcover = document.querySelector("#pubviewcover"); +const mangaViewerPopup = document.querySelector("#publicationViewerPopup"); +const mangaViewerWindow = document.querySelector("publication-viewer"); +const mangaViewerDescription = document.querySelector("#publicationViewerDescription"); +const mangaViewerName = document.querySelector("#publicationViewerName"); +const mangaViewerTags = document.querySelector("#publicationViewerTags"); +const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor"); +const mangaViewCover = document.querySelector("#pubviewcover"); const publicationDelete = document.querySelector("publication-delete"); const publicationTaskStart = document.querySelector("publication-starttask"); const settingDownloadLocation = document.querySelector("#downloadLocation"); @@ -59,15 +60,6 @@ function Setup(){ }); }); - - GetMonitorJobs().then((json) => { - json.forEach(job => { - if(!jobs.includes(job)){ - jobs.push(job); - } - }); - }); - ResetContent(); } Setup(); @@ -96,22 +88,19 @@ function GetNewMangaItems(){ if(newMangaTitle.value.length < 4) return; + newMangaResult.replaceChildren(); newMangaConnector.disabled = true; newMangaTitle.disabled = true; GetPublicationFromConnector(newMangaConnector.value, newMangaTitle.value).then((json) => { - console.log(json); + //console.log(json); if(json.length > 0) newMangaResult.style.display = "flex"; json.forEach(result => { - var item = document.createElement("div"); - item.className = "mangaResultItem"; - - var mangaTitle = document.createElement("span"); - mangaTitle.className = "mangaResultItemTitle"; - mangaTitle.innerText = result.sortName; - item.appendChild(mangaTitle); - - newMangaResult.appendChild(item); + var mangaElement = CreateManga(result, newMangaConnector.value) + newMangaResult.appendChild(mangaElement); + mangaElement.addEventListener("click", (event) => { + ShowMangaWindow(result, event, true); + }); }); newMangaConnector.disabled = false; @@ -120,49 +109,56 @@ function GetNewMangaItems(){ } //Returns a new "Publication" Item to display in the jobs section -function CreatePublication(publication, connector){ - var publicationElement = document.createElement('publication'); - publicationElement.setAttribute("id", publication.internalId); - var img = document.createElement('img'); - img.src = `imageCache/${publication.coverFileNameInCache}`; - publicationElement.appendChild(img); +function CreateManga(manga, connector){ + var mangaElement = document.createElement('publication'); + mangaElement.setAttribute("id", manga.internalId); + var mangaImage = document.createElement('img'); + mangaImage.src = GetCoverUrl(manga.internalId); + mangaElement.appendChild(mangaImage); var info = document.createElement('publication-information'); var connectorName = document.createElement('connector-name'); connectorName.innerText = connector; connectorName.className = "pill"; info.appendChild(connectorName); - var publicationName = document.createElement('publication-name'); - publicationName.innerText = publication.sortName; - info.appendChild(publicationName); - publicationElement.appendChild(info); - if(publications.filter(pub => pub.internalId === publication.internalId) < 1) - publications.push(publication); - return publicationElement; + var mangaName = document.createElement('publication-name'); + mangaName.innerText = manga.sortName; + info.appendChild(mangaName); + mangaElement.appendChild(info); + return mangaElement; } -function ShowPublicationViewerWindow(publicationId, event, add){ +createMonitorTaskButton.addEventListener("click", () => { + NewMonitorJob(); + mangaViewerPopup.style.display = "none"; +}); +function NewMonitorJob(){ + CreateMonitorJob(newMangaConnector.value, selectedManga.internalId); + UpdateJobs(); +} + +function ShowMangaWindow(manga, event, add){ + selectedManga = manga; //Show popup - publicationViewerPopup.style.display = "block"; + mangaViewerPopup.style.display = "block"; //Set position to mouse-position - if(event.clientY < window.innerHeight - publicationViewerWindow.offsetHeight) - publicationViewerWindow.style.top = `${event.clientY}px`; + if(event.clientY < window.innerHeight - mangaViewerWindow.offsetHeight) + mangaViewerWindow.style.top = `${event.clientY}px`; else - publicationViewerWindow.style.top = `${event.clientY - publicationViewerWindow.offsetHeight}px`; + mangaViewerWindow.style.top = `${event.clientY - mangaViewerWindow.offsetHeight}px`; - if(event.clientX < window.innerWidth - publicationViewerWindow.offsetWidth) - publicationViewerWindow.style.left = `${event.clientX}px`; + if(event.clientX < window.innerWidth - mangaViewerWindow.offsetWidth) + mangaViewerWindow.style.left = `${event.clientX}px`; else - publicationViewerWindow.style.left = `${event.clientX - publicationViewerWindow.offsetWidth}px`; + mangaViewerWindow.style.left = `${event.clientX - mangaViewerWindow.offsetWidth}px`; //Edit information inside the window - var publication = publications.filter(pub => pub.internalId === publicationId)[0]; - publicationViewerName.innerText = publication.sortName; - publicationViewerTags.innerText = publication.tags.join(", "); - publicationViewerDescription.innerText = publication.description; - publicationViewerAuthor.innerText = publication.authors.join(','); - pubviewcover.src = `imageCache/${publication.coverFileNameInCache}`; - toEditId = publicationId; + mangaViewerName.innerText = manga.sortName; + mangaViewerTags.innerText = manga.tags.join(", "); + mangaViewerDescription.innerText = manga.description; + mangaViewerAuthor.innerText = manga.authors.join(','); + mangaViewCover.src = GetCoverUrl(manga.internalId); + toEditId = manga.internalId; //Check what action should be listed if(add){ @@ -324,3 +320,22 @@ function UpdateSettings(){ function utf8_to_b64(str) { return window.btoa(unescape(encodeURIComponent( str ))); } + + +UpdateJobs(); +setInterval(() => { + UpdateJobs(); +}, 1000); +function UpdateJobs(){ + GetMonitorJobs().then((json) => { + ResetContent(); + console.log(json); + json.forEach(job => { + var mangaView = CreateManga(job.manga, job.mangaConnector.name); + mangaView.addEventListener("click", (event) => { + ShowMangaWindow(job.manga, event, false); + }); + tasksContent.appendChild(mangaView); + }); + }); +}