diff --git a/Website/apiConnector.js b/Website/apiConnector.js index 0a94b9e..52d2dbd 100644 --- a/Website/apiConnector.js +++ b/Website/apiConnector.js @@ -52,8 +52,8 @@ async function GetRunningTasks(){ return json; } -async function GetTasks(){ - var uri = apiUri + "/Tasks/GetList"; +async function GetDownloadTasks(){ + var uri = apiUri + "/Tasks/Get?taskType=DownloadNewChapters"; let json = await GetData(uri); return json; } @@ -64,6 +64,12 @@ async function GetSettings(){ return json; } +async function GetKomgaTask(){ + var uri = apiUri + "/Tasks/Get?taskType=UpdateKomgaLibrary"; + let json = await GetData(uri); + return json; +} + function CreateTask(taskType, reoccurrence, connectorName, publicationId, language){ var uri = apiUri + `/Tasks/Create?taskType=${taskType}&connectorName=${connectorName}&publicationId=${publicationId}&reoccurrenceTime=${reoccurrence}&language=${language}`; PostData(uri); @@ -80,7 +86,7 @@ function EnqueueTask(taskType, connectorName, publicationId){ } function UpdateSettings(downloadLocation, komgaUrl, komgaAuth){ - var uri = apiUri + `/Settings/Update?downloadLocation=${downloadLocation}&komgaUrl=${komgaAuth}&komgaAuth=${komgaAuth}`; + var uri = apiUri + `/Settings/Update?downloadLocation=${downloadLocation}&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`; PostData(uri); } diff --git a/Website/index.html b/Website/index.html index 44b8c62..2a65505 100644 --- a/Website/index.html +++ b/Website/index.html @@ -53,6 +53,7 @@ +
@@ -79,7 +80,17 @@ - + Download Location: + + + Komga +
Configured: ✅❌
+ + + +
+ + diff --git a/Website/interaction.js b/Website/interaction.js index 3d93d40..45dc5b5 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -22,7 +22,6 @@ let publications = []; let tasks = []; let toEditId; -const taskTypesSelect = document.querySelector("#taskTypes") const searchPublicationQuery = document.querySelector("#searchPublicationQuery"); const selectPublication = document.querySelector("#taskSelectOutput"); const connectorSelect = document.querySelector("#connectors"); @@ -40,30 +39,24 @@ const pubviewcover = document.querySelector("#pubviewcover"); const publicationDelete = document.querySelector("publication-delete"); const publicationAdd = document.querySelector("publication-add"); const closetaskpopup = document.querySelector("#closePopupImg"); +const settingDownloadLocation = document.querySelector("#downloadLocation"); +const settingKomgaUrl = document.querySelector("#komgaUrl"); +const settingKomgaUser = document.querySelector("#komgaUsername"); +const settingKomgaPass = document.querySelector("#komgaPassword"); +const settingKomgaTime = document.querySelector("#komgaUpdateTime"); +const settingKomgaConfigured = document.querySelector("#komgaConfigured"); -settingsCog.addEventListener("click", () => slide()); + +settingsCog.addEventListener("click", () => OpenSettings()); closetaskpopup.addEventListener("click", () => HideAddTaskPopup()); document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup()); document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup()); publicationDelete.addEventListener("click", () => DeleteTaskClick()); publicationAdd.addEventListener("click", () => AddTaskClick()); -/* -let availableTaskTypes; -GetTaskTypes() - .then(json => availableTaskTypes = json) - .then(json => - json.forEach(taskType => { - var option = document.createElement('option'); - option.value = taskType; - option.innerText = taskType; - taskTypesSelect.appendChild(option); - }));*/ - let availableConnectors; GetAvailableControllers() .then(json => availableConnectors = json) - //.then(json => console.log(json)) .then(json => json.forEach(connector => { var option = document.createElement('option'); @@ -75,30 +68,37 @@ GetAvailableControllers() searchPublicationQuery.addEventListener("keypress", (event) => { if(event.key === "Enter"){ - selectRecurrence.disabled = true; - connectorSelect.disabled = true; - searchPublicationQuery.disabled = true; - - selectPublication.replaceChildren(); - GetPublication(connectorSelect.value, searchPublicationQuery.value) - //.then(json => console.log(json)); - .then(json => - json.forEach(publication => { - var option = CreatePublication(publication, connectorSelect.value); - option.addEventListener("click", (mouseEvent) => { - ShowPublicationViewerWindow(publication.internalId, mouseEvent, true); - }); - selectPublication.appendChild(option); - } - )) - .then(() => { - selectRecurrence.disabled = false; - connectorSelect.disabled = false; - searchPublicationQuery.disabled = false; - }); + NewSearch(); } }); +function NewSearch(){ + //Disable inputs + selectRecurrence.disabled = true; + connectorSelect.disabled = true; + searchPublicationQuery.disabled = true; + + //Empty previous results + selectPublication.replaceChildren(); + GetPublication(connectorSelect.value, searchPublicationQuery.value) + .then(json => + json.forEach(publication => { + var option = CreatePublication(publication, connectorSelect.value); + option.addEventListener("click", (mouseEvent) => { + ShowPublicationViewerWindow(publication.internalId, mouseEvent, true); + }); + selectPublication.appendChild(option); + } + )) + .then(() => { + //Re-enable inputs + selectRecurrence.disabled = false; + connectorSelect.disabled = false; + searchPublicationQuery.disabled = false; + }); +} + +//Returns a new "Publication" Item to display in the tasks section function CreatePublication(publication, connector){ var publicationElement = document.createElement('publication'); publicationElement.setAttribute("id", publication.internalId); @@ -131,7 +131,7 @@ function AddTaskClick(){ HidePublicationPopup(); } -var slideIn = true; +let slideIn = true; function slide() { if (slideIn) settingsTab.animate(slideInRight, slideInRightTiming); @@ -141,7 +141,10 @@ function slide() { } function ResetContent(){ + //Delete everything tasksContent.replaceChildren(); + + //Add "Add new Task" Button var add = document.createElement("div"); add.setAttribute("id", "addPublication") var plus = document.createElement("p"); @@ -151,16 +154,19 @@ function ResetContent(){ tasksContent.appendChild(add); } function ShowPublicationViewerWindow(publicationId, event, add){ + //Set position to mouse-position publicationViewerWindow.style.top = `${event.clientY - 60}px`; publicationViewerWindow.style.left = `${event.clientX}px`; - var publication = publications.filter(pub => pub.internalId === publicationId)[0]; + //Edit information inside the window + var publication = publications.filter(pub => pub.internalId === publicationId)[0]; publicationViewerName.innerText = publication.sortName; publicationViewerDescription.innerText = publication.description; publicationViewerAuthor.innerText = publication.author; pubviewcover.src = publication.posterUrl; toEditId = publicationId; + //Check what action should be listed if(add){ publicationAdd.style.display = "block"; publicationDelete.style.display = "none"; @@ -170,10 +176,14 @@ function ShowPublicationViewerWindow(publicationId, event, add){ publicationDelete.style.display = "block"; } - toEditId = publicationId; + //Show popup publicationViewerPopup.style.display = "block"; } +function HidePublicationPopup(){ + publicationViewerPopup.style.display = "none"; +} + function ShowNewTaskWindow(){ selectPublication.replaceChildren(); addTaskPopup.style.display = "block"; @@ -182,9 +192,6 @@ function HideAddTaskPopup(){ addTaskPopup.style.display = "none"; } -function HidePublicationPopup(){ - publicationViewerPopup.style.display = "none"; -} const fadeIn = [ { opacity: "0" }, @@ -197,9 +204,46 @@ const fadeInTiming = { fill: "forwards" } +function OpenSettings(){ + GetSettingsClick(); + slide(); +} + +function GetSettingsClick(){ + settingKomgaUrl.value = ""; + settingKomgaUser.value = ""; + settingKomgaPass.value = ""; + + GetSettings().then(json => { + settingDownloadLocation.innerText = json.downloadLocation; + if(json.komga != null) + settingKomgaUrl.placeholder = json.komga.baseUrl; + }); + + GetKomgaTask().then(json => { + if(json.length > 0) + settingKomgaConfigured.innerText = "✅"; + else + settingKomgaConfigured.innerText = "❌"; + }); +} + +function UpdateSettingsClick(){ + var auth = utf8_to_b64(`${settingKomgaUser.value}:${settingKomgaPass.value}`); + console.log(auth); + UpdateSettings("", settingKomgaUrl.value, auth); + CreateTask("UpdateKomgaLibrary", settingKomgaTime.value, "","",""); + setTimeout(() => GetSettingsClick(), 500); +} + +function utf8_to_b64( str ) { + return window.btoa(unescape(encodeURIComponent( str ))); +} + +//Resets the tasks shown ResetContent(); -GetTasks() - //.then(json => console.log(json)) +//Get Tasks and show them +GetDownloadTasks() .then(json => json.forEach(task => { var publication = CreatePublication(task.publication, task.connectorName); publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event, false)); @@ -208,13 +252,16 @@ GetTasks() })); setInterval(() => { + //Tasks from API var cTasks = []; - GetTasks() - //.then(json => console.log(json)) + GetDownloadTasks() .then(json => json.forEach(task => cTasks.push(task))) .then(() => { + //Only update view if tasks-amount has changed if(tasks.length != cTasks.length) { + //Resets the tasks shown ResetContent(); + //Add all currenttasks to view cTasks.forEach(task => { var publication = CreatePublication(task.publication, task.connectorName); publication.addEventListener("click", (event) => ShowPublicationViewerWindow(task.publication.internalId, event, false)); diff --git a/Website/style.css b/Website/style.css index e9220bf..70a2604 100644 --- a/Website/style.css +++ b/Website/style.css @@ -123,6 +123,36 @@ settingstab{ height: calc(100% - var(--topbar-height) - 40px); margin-bottom: 10px; border-radius: 5px 0 0 5px; + display: flex; + flex-direction: column; + flex-wrap: nowrap; +} + +settingstab > * { + margin: 0 20px; +} + +settingstab .title { + font-size: 14pt; + font-weight: bolder; + margin-top: 20px; +} + +komga-settings { + margin-top: 20px; + display: flex; + flex-direction: column; + flex-wrap: nowrap; +} + +komga-settings > * { + margin: 2px 0; +} + +komga-settings input { + padding: 3px; + border-radius: 3px; + border: 0; } #addPublication {