diff --git a/Website/index.html b/Website/index.html index 59e123c..d1ba6db 100644 --- a/Website/index.html +++ b/Website/index.html @@ -24,7 +24,7 @@

+

- + cover MangaDex @@ -33,6 +33,15 @@ + + +
+ +
+
+
+ diff --git a/Website/interaction.js b/Website/interaction.js index f67efe3..45760b7 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -2,30 +2,6 @@ let notificationConnectorTypes = []; let libraryConnectorTypes = []; -function Setup(){ - GetAvailableNotificationConnectors().then((json) => { - json.forEach(connector => { - notificationConnectorTypes[connector.Key] = connector.Value; - }); - }); - - GetAvailableLibraryConnectors().then((json) => { - json.forEach(connector => { - libraryConnectorTypes[connector.Key] = connector.Value; - }); - }); - - GetMonitorJobs().then((json) => { - json.forEach(job => { - if(!jobs.includes(job)){ - jobs.push(job); - } - }); - }); -} -Setup(); - - const searchBox = document.querySelector("#searchbox"); const settingsPopup = document.querySelector("#settingsPopup"); const settingsCog = document.querySelector("#settingscog"); @@ -56,8 +32,45 @@ const settingKavitaConfigured = document.querySelector("#kavitaConfigured"); const settingGotifyConfigured = document.querySelector("#gotifyConfigured"); const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured"); const settingApiUri = document.querySelector("#settingApiUri"); +const newMangaPopup = document.querySelector("#newMangaPopup"); +const newMangaConnector = document.querySelector("#newMangaConnector"); +const newMangaTitle = document.querySelector("#newMangaTitle"); +const newMangaResult = document.querySelector("#newMangaResult"); + +function Setup(){ + GetAvailableNotificationConnectors().then((json) => { + json.forEach(connector => { + notificationConnectorTypes[connector.Key] = connector.Value; + }); + }); + + GetAvailableLibraryConnectors().then((json) => { + json.forEach(connector => { + libraryConnectorTypes[connector.Key] = connector.Value; + }); + }); + + GetAvailableControllers().then((json) => { + json.forEach(connector => { + var option = document.createElement('option'); + option.value = connector; + option.innerText = connector; + newMangaConnector.appendChild(option); + }); + + }); + + GetMonitorJobs().then((json) => { + json.forEach(job => { + if(!jobs.includes(job)){ + jobs.push(job); + } + }); + }); + ResetContent(); +} +Setup(); -ResetContent(); function ResetContent(){ //Delete everything tasksContent.replaceChildren(); @@ -68,10 +81,44 @@ function ResetContent(){ var plus = document.createElement("p"); plus.innerText = "+"; add.appendChild(plus); - add.addEventListener("click", () => ShowNewTaskWindow()); + add.addEventListener("click", () => ShowNewMangaSearch()); tasksContent.appendChild(add); } +function ShowNewMangaSearch(){ + newMangaTitle.value = ""; + newMangaPopup.style.display = "block"; + newMangaResult.replaceChildren(); +} + +newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();}) +function GetNewMangaItems(){ + if(newMangaTitle.value.length < 4) + return; + + newMangaConnector.disabled = true; + newMangaTitle.disabled = true; + GetPublicationFromConnector(newMangaConnector.value, newMangaTitle.value).then((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); + }); + + newMangaConnector.disabled = false; + newMangaTitle.disabled = false; + }); +} + //Returns a new "Publication" Item to display in the jobs section function CreatePublication(publication, connector){ var publicationElement = document.createElement('publication'); diff --git a/Website/style.css b/Website/style.css index f7114ed..853ec31 100644 --- a/Website/style.css +++ b/Website/style.css @@ -305,138 +305,55 @@ popup popup-window popup-content input, select { border-radius: 3px; } -#selectPublicationPopup publication { - width: 150px; - height: 250px; +#newMangaPopup > div { + z-index: 3; + position: relative; } -#createTaskPopup { - z-index: 7; +#newMangaPopup > #newMangaPopupSelector { + width: 600px; + height: 40px; + margin: 80px auto 0; } -#createTaskPopup input { - height: 30px; - width: 200px; +#newMangaPopup > div > #newMangaConnector, #newMangaTitle { + margin: 0; + display: inline-block; } -#createMonitorTaskPopup, #createDownloadChaptersTask { - z-index: 9; +#newMangaPopup #newMangaConnector { + height: 40px; + width: 100px; + padding: 0 0 0 5px; + border-radius: 5px 0 0 5px; + border-right: 1px solid darkgray; } -#createMonitorTaskPopup input[type="number"] { - width: 40px; +#newMangaPopup #newMangaTitle{ + height: 40px; + width: 495px; + padding: 0 0 0 5px; + border-radius: 0 5px 5px 0; + border: 0; } -#createDownloadChaptersTask popup-content { - flex-direction: column; - align-items: start; +#newMangaResult { + display: none; + flex-direction: column; + margin: 5px auto 0 !important; + border-radius: 5px; + padding: 5px; + width: 590px !important; + max-height: 500px; + flex-grow: 1; + overflow-y: scroll; + background-color: white; + color: black; } -#createDownloadChaptersTask popup-content > * { - margin: 3px 0; -} - -#createDownloadChaptersTask #chapterOutput { - max-height: 50vh; - overflow-y: scroll; -} - -#createDownloadChaptersTask #chapterOutput .index{ - display: inline-block; - width: 25px; -} - -#createDownloadChaptersTask #chapterOutput .index::after{ - content: ':'; -} - -#createDownloadChaptersTask #chapterOutput .vol::before{ - content: 'Vol.'; -} - -#createDownloadChaptersTask #chapterOutput .vol{ - display: inline-block; - width: 45px; -} - -#createDownloadChaptersTask #chapterOutput .ch::before{ - content: 'Ch.'; -} - -#createDownloadChaptersTask #chapterOutput .ch { - display: inline-block; - width: 60px; -} - -#downloadTasksPopup popup-window { - left: 0; - top: 80px; - margin: 0 0 0 10px; - height: calc(100vh - 140px); - width: 400px; - max-width: 95vw; - overflow-y: scroll; -} - -#downloadTasksPopup popup-content { - flex-direction: column; - align-items: start; - margin: 5px; -} - -#downloadTasksPopup popup-content > div { - display: block; - height: 80px; - position: relative; - margin: 5px 0; -} - -#downloadTasksPopup popup-content > div > img { - display: block; - position: absolute; - height: 100%; - width: 60px; - left: 0; - top: 0; - object-fit: cover; - border-radius: 4px; -} - -#downloadTasksPopup popup-content > div > span { - display: block; - position: absolute; - width: max-content; -} - -#downloadTasksPopup popup-content > div > .pubTitle { - left: 70px; - top: 0; -} - -#downloadTasksPopup popup-content > div > .chapterName { - left: 70px; - top: 28pt; -} - -#downloadTasksPopup popup-content > div > .chapterNumber { - left: 70px; - top: 14pt; -} - -#downloadTasksPopup popup-content > div > progress { - display: block; - position: absolute; - left: 150px; - bottom: 0; - width: 200px; -} - -#downloadTasksPopup popup-content > div > .progressStr { - display: block; - position: absolute; - left: 70px; - bottom: 0; - width: 70px; +#newMangaResult .mangaResultItem { + width: 100%; + margin: 2px 0 !important; } blur-background { @@ -448,16 +365,6 @@ blur-background { opacity: 0.5; } -#taskSelectOutput{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: start; - align-content: start; - max-height: 70vh; - overflow-y: scroll; -} - #publicationViewerPopup{ z-index: 5; }