Replaced Task-Progress-Tracking Window with more fancy one
This commit is contained in:
parent
5763d50409
commit
16c1094875
@ -140,25 +140,27 @@
|
||||
</popup-content>
|
||||
</popup-window>
|
||||
</popup>
|
||||
|
||||
<popup id="downloadTasksPopup">
|
||||
<blur-background id="blurBackgroundTasksQueuePopup"></blur-background>
|
||||
<popup-window>
|
||||
<popup-title>Task Progress</popup-title>
|
||||
<popup-content>
|
||||
|
||||
</popup-content>
|
||||
</popup-window>
|
||||
</popup>
|
||||
</viewport>
|
||||
<footer>
|
||||
<div>
|
||||
<div onclick="ShowTasksQueue();">
|
||||
<img src="media/running.svg" alt="running"><div id="tasksRunningTag">0</div>
|
||||
</div>
|
||||
<div>
|
||||
<div onclick="ShowTasksQueue();">
|
||||
<img src="media/queue.svg" alt="queue"><div id="tasksQueuedTag">0</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="media/tasks.svg" alt="queue"><div id="totalTasksTag">0</div>
|
||||
</div>
|
||||
<p id="madeWith">Made with Blåhaj 🦈</p>
|
||||
</footer>
|
||||
</wrapper>
|
||||
<footer-tag-popup>
|
||||
<footer-tag-content>
|
||||
<footer-tag-task-name>Test</footer-tag-task-name>
|
||||
</footer-tag-content>
|
||||
</footer-tag-popup>
|
||||
|
||||
<script src="apiConnector.js"></script>
|
||||
<script src="interaction.js"></script>
|
||||
|
||||
@ -39,9 +39,7 @@ const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
|
||||
const settingApiUri = document.querySelector("#settingApiUri");
|
||||
const tagTasksRunning = document.querySelector("#tasksRunningTag");
|
||||
const tagTasksQueued = document.querySelector("#tasksQueuedTag");
|
||||
const tagTasksTotal = document.querySelector("#totalTasksTag");
|
||||
const tagTaskPopup = document.querySelector("footer-tag-popup");
|
||||
const tagTasksPopupContent = document.querySelector("footer-tag-content");
|
||||
const downloadTasksPopup = document.querySelector("#downloadTasksPopup");
|
||||
|
||||
searchbox.addEventListener("keyup", (event) => FilterResults());
|
||||
settingsCog.addEventListener("click", () => OpenSettings());
|
||||
@ -50,6 +48,7 @@ document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", ()
|
||||
document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
|
||||
document.querySelector("#blurBackgroundCreateMonitorTaskPopup").addEventListener("click", () => createMonitorTaskPopup.style.display = "none");
|
||||
document.querySelector("#blurBackgroundCreateDownloadChaptersTask").addEventListener("click", () => createDownloadChaptersTask.style.display = "none");
|
||||
document.querySelector("#blurBackgroundTasksQueuePopup").addEventListener("click", () => downloadTasksPopup.style.display = "none");
|
||||
selectedChapters.addEventListener("keypress", (event) => {
|
||||
if(event.key === "Enter"){
|
||||
DownloadChapterTaskClick();
|
||||
@ -77,12 +76,7 @@ searchPublicationQuery.addEventListener("keypress", (event) => {
|
||||
NewSearch();
|
||||
}
|
||||
});
|
||||
tagTasksRunning.addEventListener("mouseover", (event) => ShowRunningTasks(event));
|
||||
tagTasksRunning.addEventListener("mouseout", () => CloseTasksPopup());
|
||||
tagTasksQueued.addEventListener("mouseover", (event) => ShowQueuedTasks(event));
|
||||
tagTasksQueued.addEventListener("mouseout", () => CloseTasksPopup());
|
||||
tagTasksTotal.addEventListener("mouseover", (event) => ShowAllTasks(event));
|
||||
tagTasksTotal.addEventListener("mouseout", () => CloseTasksPopup());
|
||||
|
||||
|
||||
let availableConnectors;
|
||||
GetAvailableControllers()
|
||||
@ -284,7 +278,6 @@ function OpenSettings(){
|
||||
settingsPopup.style.display = "flex";
|
||||
}
|
||||
|
||||
|
||||
function GetSettingsClick(){
|
||||
settingApiUri.value = "";
|
||||
settingKomgaUrl.value = "";
|
||||
@ -343,66 +336,6 @@ function utf8_to_b64( str ) {
|
||||
return window.btoa(unescape(encodeURIComponent( str )));
|
||||
}
|
||||
|
||||
|
||||
function ShowRunningTasks(event){
|
||||
GetRunningTasks()
|
||||
.then(json => {
|
||||
tagTasksPopupContent.replaceChildren();
|
||||
json.forEach(task => {
|
||||
if(task.publication != null){
|
||||
var taskname = document.createElement("footer-tag-task-name");
|
||||
if(task.task == 2)
|
||||
taskname.innerText = `${task.publication.sortName} - ${task.progress.toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2})}`;
|
||||
else if(task.task == 4)
|
||||
taskname.innerText = `${task.publication.sortName} Vol.${task.chapter.volumeNumber} Ch.${task.chapter.chapterNumber} - ${task.progress.toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2})}`;
|
||||
tagTasksPopupContent.appendChild(taskname);
|
||||
}
|
||||
});
|
||||
if(tagTasksPopupContent.children.length > 0){
|
||||
tagTaskPopup.style.display = "block";
|
||||
tagTaskPopup.style.left = `${tagTasksRunning.offsetLeft - 20}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function ShowQueuedTasks(event){
|
||||
GetQueue()
|
||||
.then(json => {
|
||||
tagTasksPopupContent.replaceChildren();
|
||||
json.forEach(task => {
|
||||
var taskname = document.createElement("footer-tag-task-name");
|
||||
if(task.task == 2)
|
||||
taskname.innerText = `${task.publication.sortName}`;
|
||||
else if(task.task == 4)
|
||||
taskname.innerText = `${task.publication.sortName} Vol.${task.chapter.volumeNumber} Ch.${task.chapter.chapterNumber}`;
|
||||
tagTasksPopupContent.appendChild(taskname);
|
||||
});
|
||||
if(json.length > 0){
|
||||
tagTaskPopup.style.display = "block";
|
||||
tagTaskPopup.style.left = `${tagTasksQueued.offsetLeft- 20}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
function ShowAllTasks(event){
|
||||
GetDownloadTasks()
|
||||
.then(json => {
|
||||
tagTasksPopupContent.replaceChildren();
|
||||
json.forEach(task => {
|
||||
var taskname = document.createElement("footer-tag-task-name");
|
||||
taskname.innerText = task.publication.sortName;
|
||||
tagTasksPopupContent.appendChild(taskname);
|
||||
});
|
||||
if(json.length > 0){
|
||||
tagTaskPopup.style.display = "block";
|
||||
tagTaskPopup.style.left = `${tagTasksTotal.offsetLeft - 20}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function CloseTasksPopup(){
|
||||
tagTaskPopup.style.display = "none";
|
||||
}
|
||||
|
||||
function FilterResults(){
|
||||
if(searchBox.value.length > 0){
|
||||
tasksContent.childNodes.forEach(publication => {
|
||||
@ -423,8 +356,80 @@ function FilterResults(){
|
||||
}else{
|
||||
tasksContent.childNodes.forEach(publication => publication.style.display = "initial");
|
||||
}
|
||||
}
|
||||
|
||||
function ShowTasksQueue(){
|
||||
downloadTasksPopup.style.display = "flex";
|
||||
var outputDom = downloadTasksPopup.querySelector("popup-content");
|
||||
outputDom.replaceChildren();
|
||||
GetRunningTasks().then((taskJson) => {
|
||||
console.log(taskJson);
|
||||
taskJson.forEach(task => {
|
||||
outputDom.appendChild(CreateProgressChild(task));
|
||||
});
|
||||
});
|
||||
GetQueue().then((taskJson) => {
|
||||
taskJson.forEach(task => {
|
||||
outputDom.appendChild(CreateProgressChild(task));
|
||||
});
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
GetRunningTasks().then((json) => {
|
||||
json.forEach(task => {
|
||||
if(task.chapter != undefined){
|
||||
document.querySelector(`#progress${task.publication.internalId}-${task.chapter.sortNumber}`).value = task.progress;
|
||||
document.querySelector(`#progressStr${task.publication.internalId}-${task.chapter.sortNumber}`).innerText = task.progress.toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2});
|
||||
}else{
|
||||
document.querySelector(`#progress${task.publication.internalId}`).value = task.progress;
|
||||
document.querySelector(`#progressStr${task.publication.internalId}`).innerText = task.progress.toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2});
|
||||
}
|
||||
});
|
||||
});
|
||||
},500);
|
||||
}
|
||||
|
||||
function CreateProgressChild(task){
|
||||
var child = document.createElement("div");
|
||||
var img = document.createElement('img');
|
||||
img.src = `imageCache/${task.publication.coverFileNameInCache}`;
|
||||
child.appendChild(img);
|
||||
|
||||
var name = document.createElement("span");
|
||||
name.innerText = task.publication.sortName;
|
||||
name.className = "pubTitle";
|
||||
child.appendChild(name);
|
||||
|
||||
|
||||
var progress = document.createElement("progress");
|
||||
progress.value = 0;
|
||||
child.appendChild(progress);
|
||||
|
||||
var progressStr = document.createElement("span");
|
||||
progressStr.innerText = "00.00%";
|
||||
progressStr.className = "progressStr";
|
||||
child.appendChild(progressStr);
|
||||
|
||||
if(task.chapter != undefined){
|
||||
var chapterNumber = document.createElement("span");
|
||||
chapterNumber.className = "chapterNumber";
|
||||
chapterNumber.innerText = `Vol.${task.chapter.volumeNumber} Ch.${task.chapter.chapterNumber}`;
|
||||
child.appendChild(chapterNumber);
|
||||
|
||||
var chapterName = document.createElement("span");
|
||||
chapterName.className = "chapterName";
|
||||
chapterName.innerText = task.chapter.name;
|
||||
child.appendChild(chapterName);
|
||||
|
||||
progress.id = `progress${task.publication.internalId}-${task.chapter.sortNumber}`;
|
||||
progressStr.id = `progressStr${task.publication.internalId}-${task.chapter.sortNumber}`;
|
||||
}else{
|
||||
progress.id = `progress${task.publication.internalId}`;
|
||||
progressStr.id = `progressStr${task.publication.internalId}`;
|
||||
}
|
||||
|
||||
|
||||
return child;
|
||||
}
|
||||
|
||||
//Resets the tasks shown
|
||||
@ -443,11 +448,6 @@ GetRunningTasks()
|
||||
tagTasksRunning.innerText = json.length;
|
||||
});
|
||||
|
||||
GetDownloadTasks()
|
||||
.then(json => {
|
||||
tagTasksTotal.innerText = json.length;
|
||||
});
|
||||
|
||||
GetQueue()
|
||||
.then(json => {
|
||||
tagTasksQueued.innerText = json.length;
|
||||
@ -479,11 +479,6 @@ setInterval(() => {
|
||||
.then(json => {
|
||||
tagTasksRunning.innerText = json.length;
|
||||
});
|
||||
|
||||
GetDownloadTasks()
|
||||
.then(json => {
|
||||
tagTasksTotal.innerText = json.length;
|
||||
});
|
||||
|
||||
GetQueue()
|
||||
.then(json => {
|
||||
|
||||
@ -332,7 +332,6 @@ popup popup-window popup-content input, select {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
|
||||
#createDownloadChaptersTask popup-content > * {
|
||||
margin: 3px 0;
|
||||
}
|
||||
@ -369,6 +368,77 @@ popup popup-window popup-content input, select {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-window {
|
||||
left: 0;
|
||||
top: 80px;
|
||||
margin: 0 0 0 10px;
|
||||
height: calc(100vh - 140px);
|
||||
width: 400px;
|
||||
max-width: 50vw;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div {
|
||||
display: block;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > .pubTitle {
|
||||
left: 70px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > .chapterName {
|
||||
left: 70px;
|
||||
top: 28pt;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > .chapterNumber {
|
||||
left: 70px;
|
||||
top: 14pt;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > progress {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
bottom: 0;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > .progressStr {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 70px;
|
||||
bottom: 0;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
blur-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user