From 1aa230bce2313b537ec3638a8ea075b3b3f195d5 Mon Sep 17 00:00:00 2001 From: db-2001 Date: Thu, 25 Apr 2024 02:49:34 -0400 Subject: [PATCH] Custom Progress Bar with Half Working Animation --- Website/apiConnector.js | 9 +++++--- Website/interaction.js | 43 +++++++++++++------------------------- Website/styles/base.css | 46 ++++++++++++++++++++++++++++++++++------- 3 files changed, 59 insertions(+), 39 deletions(-) diff --git a/Website/apiConnector.js b/Website/apiConnector.js index 9bf7d7d..f27b912 100644 --- a/Website/apiConnector.js +++ b/Website/apiConnector.js @@ -152,9 +152,12 @@ async function GetRateLimits() { return json; } -function CreateMonitorJob(connector, internalId, language, interval, folder, chapterNo){ - var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}&customFolderName=${folder}`; - //console.log(uri); +function CreateMonitorJob(connector, internalId, language, interval, folder = null, chapterNo){ + var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}`; + if (folder != '') { + uri = uri.concat(`&customFolderName=${folder}`); + } + console.log(uri); PostData(uri); } diff --git a/Website/interaction.js b/Website/interaction.js index 6ad02b4..8095181 100644 --- a/Website/interaction.js +++ b/Website/interaction.js @@ -551,15 +551,13 @@ function IsInLibrary(id) { } function AddManga(id, connector) { - //console.log('Adding Manga'); + console.log('Adding Manga'); mangaID = id; mangaConnector = connector; mangaLanguage = document.getElementById('newMangaTranslatedLanguage').value.toLowerCase(); folderInput = document.getElementById(id.concat('-downloadfolder')).value; - if (folderInput == null || folderInput == '') { - mangaFolder = document.getElementById(id.concat('-downloadfolder')).placeholder; - } else { + if (folderInput != null || folderInput != '') { mangaFolder = folderInput; } @@ -580,11 +578,6 @@ function AddManga(id, connector) { CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter); } -createMonitorJobButton.addEventListener("click", () => { - CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value); - UpdateJobs(); - mangaViewerPopup.style.display = "none"; -}); startJobButton.addEventListener("click", () => { StartJob(selectedJob.id); mangaViewerPopup.style.display = "none"; @@ -1029,16 +1022,14 @@ function createJob(jobjson){ title.innerText = manga.sortName; details.appendChild(title); - var progressBar = document.createElement("progress"); - progressBar.className = "jobProgressBar"; + var progressBarContainer = document.createElement('div'); + progressBarContainer.className = 'progress-container'; + + var progressBar = document.createElement("div"); + progressBar.className = "pending"; progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`; - details.appendChild(progressBar); - - var progressSpan = document.createElement("span"); - progressSpan.className = "jobProgressSpan"; - progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`; - progressSpan.innerText = "Pending..."; - details.appendChild(progressSpan); + progressBarContainer.appendChild(progressBar); + details.appendChild(progressBarContainer); var cancelSpan = document.createElement("span"); cancelSpan.className = "jobCancel"; @@ -1058,18 +1049,12 @@ function ShowJobQueue(){ function UpdateJobProgress(jobId){ GetProgress(jobId).then((json) => { var progressBar = document.querySelector(`#jobProgressBar${GetValidSelector(jobId)}`); - var progressSpan = document.querySelector(`#jobProgressSpan${GetValidSelector(jobId)}`); if(progressBar != null && json.progress != 0){ - progressBar.value = json.progress; - } - if(progressSpan != null){ - var percentageStr = "0%"; - var timeleftStr = "00:00:00"; - if(json.progress != 0){ - percentageStr = Intl.NumberFormat("en-US", { style: "percent"}).format(json.progress); - timeleftStr = json.timeRemaining.split('.')[0]; - } - progressSpan.innerText = `${percentageStr} ${timeleftStr}`; + progressBar.className = 'jobProgressBar'; + percentageStr = Intl.NumberFormat("en-US", { style: "percent"}).format(json.progress); + console.log(percentageStr); + progressBar.style.width = percentageStr; + progressBar.innerText = percentageStr; } }); } diff --git a/Website/styles/base.css b/Website/styles/base.css index dfc3e0b..d0cfc74 100644 --- a/Website/styles/base.css +++ b/Website/styles/base.css @@ -1166,16 +1166,48 @@ border-bar-button.in-library:hover { color: #fff; } -.section-item > .jobDetails > .jobProgressBar { +.section-item > .jobDetails > .progress-container { margin: 5px; - height: 10px; - border-radius: 7px; + height: 15px; + border-radius: 12px; + overflow: hidden; + background-color: #999999; + position: relative; } -.section-item > .jobDetails > .jobProgressSpan { - margin: 5px; - margin-left: auto; - margin-right: 5px; +.progress-container > .jobProgressBar { + margin: 0px; + display: block; + height: 15px; + padding-left: 5px; + border-radius: 12px; + position: absolute; + left: 0; + top: 0; + background-color: #0075fa; + color: white; + justify-content: left; + font-size: 8pt; + line-height: 15px; +} + +.progress-container > .pending { + width: 50%; + display: block; + height: 15px; + top: 0%; + position: absolute; + border-radius: 12px; + background-color: #0075fa; + animation: bounce; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@keyframes bounce { + 0% {width: 10%; transform: translateX(0);}; + 50% {width: 50%; transform: translateX(100%);}; + 100% {width: 10%; transform: translateX(0);}; } .section-item > .jobDetails > .jobCancel {