Added JobStatusView
Individual Jobs can now be cancelled
This commit is contained in:
parent
f791d1f977
commit
358c9b511a
@ -114,6 +114,18 @@
|
||||
</publication-information>
|
||||
</publication-viewer>
|
||||
</popup>
|
||||
|
||||
<popup id="jobStatusView">
|
||||
<blur-background id="blurBackgroundJobStatus" onclick="jobStatusView.style.display= 'none';"></blur-background>
|
||||
<popup-window>
|
||||
<div>
|
||||
<div id="jobStatusRunning" style="border-right: 1px solid gray;"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="jobStatusWaiting" style="border-left: 1px solid gray;"></div>
|
||||
</div>
|
||||
</popup-window>
|
||||
</popup>
|
||||
</viewport>
|
||||
|
||||
<footer>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
let jobs = [];
|
||||
let runningJobs = [];
|
||||
let waitingJobs = [];
|
||||
let notificationConnectorTypes = [];
|
||||
let libraryConnectorTypes = [];
|
||||
let selectedManga;
|
||||
@ -42,6 +43,9 @@ const newMangaResult = document.querySelector("#newMangaResult");
|
||||
const jobsRunningTag = document.querySelector("#jobsRunningTag");
|
||||
const jobsQueuedTag = document.querySelector("#jobsQueuedTag");
|
||||
const loaderdiv = document.querySelector('#loaderdiv');
|
||||
const jobStatusView = document.querySelector("#jobStatusView");
|
||||
const jobStatusRunning = document.querySelector("#jobStatusRunning");
|
||||
const jobStatusWaiting = document.querySelector("#jobStatusWaiting");
|
||||
|
||||
function Setup(){
|
||||
Ping().then((ret) => {
|
||||
@ -124,7 +128,7 @@ function GetNewMangaItems(){
|
||||
//Returns a new "Publication" Item to display in the jobs section
|
||||
function CreateManga(manga, connector){
|
||||
var mangaElement = document.createElement('publication');
|
||||
mangaElement.setAttribute("id", manga.internalId);
|
||||
mangaElement.id = GetValidSelector(manga.internalId);
|
||||
var mangaImage = document.createElement('img');
|
||||
mangaImage.src = GetCoverUrl(manga.internalId);
|
||||
mangaElement.appendChild(mangaImage);
|
||||
@ -359,16 +363,120 @@ function UpdateJobs(){
|
||||
tasksContent.appendChild(mangaView);
|
||||
});
|
||||
});
|
||||
|
||||
GetWaitingJobs().then((json) => {
|
||||
jobsQueuedTag.innerText = json.length;
|
||||
|
||||
var nowWaitingJobs = [];
|
||||
|
||||
json.forEach(job => {
|
||||
if(!waitingJobs.includes(GetValidSelector(job.id))){
|
||||
var jobDom = createJob(job);
|
||||
jobStatusWaiting.appendChild(jobDom);
|
||||
}
|
||||
nowWaitingJobs.push(GetValidSelector(job.id));
|
||||
});
|
||||
waitingJobs = nowWaitingJobs;
|
||||
});
|
||||
|
||||
jobStatusWaiting.childNodes.forEach(child => {
|
||||
if(!waitingJobs.includes(child.id))
|
||||
jobStatusWaiting.removeChild(child);
|
||||
});
|
||||
|
||||
GetRunningJobs().then((json) => {
|
||||
console.log("Running");
|
||||
console.log(json);
|
||||
jobsRunningTag.innerText = json.length;
|
||||
|
||||
var nowRunningJobs = [];
|
||||
|
||||
json.forEach(job => {
|
||||
if(!runningJobs.includes(GetValidSelector(job.id))){
|
||||
var jobDom = createJob(job);
|
||||
jobStatusRunning.appendChild(jobDom);
|
||||
}
|
||||
nowRunningJobs.push(GetValidSelector(job.id));
|
||||
UpdateJobProgress(job.id);
|
||||
});
|
||||
|
||||
runningJobs = nowRunningJobs;
|
||||
});
|
||||
|
||||
GetWaitingJobs().then((json) => {
|
||||
console.log("Waiting");
|
||||
console.log(json);
|
||||
jobsQueuedTag.innerText = json.length;
|
||||
jobStatusRunning.childNodes.forEach(child => {
|
||||
if(!runningJobs.includes(child.id))
|
||||
jobStatusRunning.removeChild(child);
|
||||
});
|
||||
}
|
||||
|
||||
function createJob(jobjson){
|
||||
var manga;
|
||||
if(jobjson.chapter != null)
|
||||
manga = jobjson.chapter.parentManga;
|
||||
else if(jobjson.manga != null)
|
||||
manga = jobjson.manga;
|
||||
else return null;
|
||||
|
||||
|
||||
var wrapper = document.createElement("div");
|
||||
wrapper.className = "jobWrapper";
|
||||
wrapper.id = GetValidSelector(jobjson.id);
|
||||
|
||||
var image = document.createElement("img");
|
||||
image.className = "jobImage";
|
||||
image.src = GetCoverUrl(manga.internalId);
|
||||
wrapper.appendChild(image);
|
||||
|
||||
var title = document.createElement("span");
|
||||
title.className = "jobTitle";
|
||||
if(jobjson.chapter != null)
|
||||
title.innerText = `${manga.sortName} - ${jobjson.chapter.fileName}`;
|
||||
else if(jobjson.manga != null)
|
||||
title.innerText = manga.sortName;
|
||||
wrapper.appendChild(title);
|
||||
|
||||
var progressBar = document.createElement("progress");
|
||||
progressBar.className = "jobProgressBar";
|
||||
progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
|
||||
wrapper.appendChild(progressBar);
|
||||
|
||||
var progressSpan = document.createElement("span");
|
||||
progressSpan.className = "jobProgressSpan";
|
||||
progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`;
|
||||
progressSpan.innerText = "0% 00:00:00";
|
||||
wrapper.appendChild(progressSpan);
|
||||
|
||||
var cancelSpan = document.createElement("span");
|
||||
cancelSpan.className = "jobCancel";
|
||||
cancelSpan.innerText = "Cancel";
|
||||
cancelSpan.addEventListener("click", () => CancelJob(jobjson.id));
|
||||
wrapper.appendChild(cancelSpan);
|
||||
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
function ShowJobQueue(){
|
||||
jobStatusView.style.display = "initial";
|
||||
}
|
||||
|
||||
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}`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function GetValidSelector(str){
|
||||
var clean = [...str.matchAll(/[a-zA-Z0-9]*-*_*/g)];
|
||||
return clean.join('');
|
||||
}
|
||||
@ -545,4 +545,85 @@ footer-tag-popup::before{
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#jobStatusView {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
#jobStatusView > popup-window {
|
||||
top: 80px;
|
||||
width: 50%;
|
||||
max-height: calc(100% - 140px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#jobStatusView > popup-window > div {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
width: 50%;
|
||||
margin: 0;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#jobStatusView > popup-window > div > div {
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.jobWrapper {
|
||||
width: 90%;
|
||||
margin: 2px 5%;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
background-color: rgba(187,187,187,0.4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobImage {
|
||||
height: 90%;
|
||||
width: 20%;
|
||||
left: 5px;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobTitle {
|
||||
position: absolute;
|
||||
left: calc(20% + 10px);
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobProgressBar {
|
||||
position: absolute;
|
||||
left: calc(20% + 10px);
|
||||
bottom: calc(12pt + 10px);
|
||||
width: calc(80% - 20px);
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobProgressSpan {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: calc(12pt + 20px);
|
||||
width: 60%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobCancel {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 5px;
|
||||
font-size: 12pt;
|
||||
color: var(--secondary-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user