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;
}
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);
}

43
Website/interaction.js
View File

@ -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;
}
});
}

46
Website/styles/base.css
View File

@ -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 {