From 1aa230bce2313b537ec3638a8ea075b3b3f195d5 Mon Sep 17 00:00:00 2001
From: db-2001 <adityabhatnagar2001@gmail.com>
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 {