glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Custom Progress Bar with Half Working Animation

Browse Source
This commit is contained in:
db-2001 2024-04-25 02:49:34 -04:00
parent 3648ee221c
commit 1aa230bce2
3 changed files with 59 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Website/apiConnector.js
View File

@ -152,9 +152,12 @@ async function GetRateLimits() {
return json; return json;
} }
function CreateMonitorJob(connector, internalId, language, interval, folder, chapterNo){ function CreateMonitorJob(connector, internalId, language, interval, folder = null, chapterNo){
var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}&customFolderName=${folder}`; var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}`;
//console.log(uri); if (folder != '') {
uri = uri.concat(`&customFolderName=${folder}`);
}
console.log(uri);
PostData(uri); PostData(uri);
} }

41
Website/interaction.js
View File

@ -551,15 +551,13 @@ function IsInLibrary(id) {
} }
function AddManga(id, connector) { function AddManga(id, connector) {
//console.log('Adding Manga'); console.log('Adding Manga');
mangaID = id; mangaID = id;
mangaConnector = connector; mangaConnector = connector;
mangaLanguage = document.getElementById('newMangaTranslatedLanguage').value.toLowerCase(); mangaLanguage = document.getElementById('newMangaTranslatedLanguage').value.toLowerCase();
folderInput = document.getElementById(id.concat('-downloadfolder')).value; folderInput = document.getElementById(id.concat('-downloadfolder')).value;
if (folderInput == null || folderInput == '') { if (folderInput != null || folderInput != '') {
mangaFolder = document.getElementById(id.concat('-downloadfolder')).placeholder;
} else {
mangaFolder = folderInput; mangaFolder = folderInput;
} }
@ -580,11 +578,6 @@ function AddManga(id, connector) {
CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter); 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", () => { startJobButton.addEventListener("click", () => {
StartJob(selectedJob.id); StartJob(selectedJob.id);
mangaViewerPopup.style.display = "none"; mangaViewerPopup.style.display = "none";
@ -1029,16 +1022,14 @@ function createJob(jobjson){
title.innerText = manga.sortName; title.innerText = manga.sortName;
details.appendChild(title); details.appendChild(title);
var progressBar = document.createElement("progress"); var progressBarContainer = document.createElement('div');
progressBar.className = "jobProgressBar"; progressBarContainer.className = 'progress-container';
progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
details.appendChild(progressBar);
var progressSpan = document.createElement("span"); var progressBar = document.createElement("div");
progressSpan.className = "jobProgressSpan"; progressBar.className = "pending";
progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`; progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
progressSpan.innerText = "Pending..."; progressBarContainer.appendChild(progressBar);
details.appendChild(progressSpan); details.appendChild(progressBarContainer);
var cancelSpan = document.createElement("span"); var cancelSpan = document.createElement("span");
cancelSpan.className = "jobCancel"; cancelSpan.className = "jobCancel";
@ -1058,18 +1049,12 @@ function ShowJobQueue(){
function UpdateJobProgress(jobId){ function UpdateJobProgress(jobId){
GetProgress(jobId).then((json) => { GetProgress(jobId).then((json) => {
var progressBar = document.querySelector(`#jobProgressBar${GetValidSelector(jobId)}`); var progressBar = document.querySelector(`#jobProgressBar${GetValidSelector(jobId)}`);
var progressSpan = document.querySelector(`#jobProgressSpan${GetValidSelector(jobId)}`);
if(progressBar != null && json.progress != 0){ if(progressBar != null && json.progress != 0){
progressBar.value = json.progress; progressBar.className = 'jobProgressBar';
}
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); percentageStr = Intl.NumberFormat("en-US", { style: "percent"}).format(json.progress);
timeleftStr = json.timeRemaining.split('.')[0]; console.log(percentageStr);
} progressBar.style.width = percentageStr;
progressSpan.innerText = `${percentageStr} ${timeleftStr}`; progressBar.innerText = percentageStr;
} }
}); });
} }

46
Website/styles/base.css
View File

@ -1166,16 +1166,48 @@ border-bar-button.in-library:hover {
color: #fff; color: #fff;
} }
.section-item > .jobDetails > .jobProgressBar { .section-item > .jobDetails > .progress-container {
margin: 5px; margin: 5px;
height: 10px; height: 15px;
border-radius: 7px; border-radius: 12px;
overflow: hidden;
background-color: #999999;
position: relative;
} }
.section-item > .jobDetails > .jobProgressSpan { .progress-container > .jobProgressBar {
margin: 5px; margin: 0px;
margin-left: auto; display: block;
margin-right: 5px; 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 { .section-item > .jobDetails > .jobCancel {