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

Applied new popup style to Jobs view and fixed manga library populating twice sometimes

Browse Source
This commit is contained in:
db-2001 2024-02-10 13:49:51 -05:00
parent 9309a4e28f
commit 9accca0ad2
3 changed files with 88 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
Website/index.html
View File

@ -242,16 +242,37 @@
</popup> </popup>
<popup id="jobStatusView"> <popup id="jobStatusView">
<blur-background id="blurBackgroundJobStatus" onclick="jobStatusView.style.display= 'none';"></blur-background> <blur-background id="blurBackgroundSettingsPopup" onclick="jobStatusView.style.display = 'none';"></blur-background>
<popup-window> <popup-window>
<div> <border-bar>
<div id="jobStatusRunning" style="border-right: 1px solid gray;"></div> <popup-title>Jobs</popup-title>
</div> <popup-close onclick="jobStatusView.style.display = 'none'">&times</popup-close>
<div> </border-bar>
<div id="jobStatusWaiting" style="border-left: 1px solid gray;"></div> <popup-content>
</div>
<div class="popup-section">
RUNNING JOBS
<div class="section-content" id="jobStatusRunning">
</div>
</div>
<div class="popup-section">
QUEUED JOBS
<div class="section-content" id="jobStatusWaiting">
</div>
</div>
</popup-content>
<border-bar>
<!-- <div class="button-container">
<border-bar-button class="primary" onclick="UpdateSettings()">Apply Settings</border-bar-button>
</div> -->
</border-bar>
</popup-window> </popup-window>
</popup>
</viewport> </viewport>
<footer> <footer>

27
Website/interaction.js
View File

@ -360,7 +360,6 @@ createMonitorJobButton.addEventListener("click", () => {
CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value); CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
UpdateJobs(); UpdateJobs();
mangaViewerPopup.style.display = "none"; mangaViewerPopup.style.display = "none";
ResetContent();
}); });
startJobButton.addEventListener("click", () => { startJobButton.addEventListener("click", () => {
StartJob(selectedJob.id); StartJob(selectedJob.id);
@ -374,7 +373,6 @@ deleteJobButton.addEventListener("click", () => {
RemoveJob(selectedJob.id); RemoveJob(selectedJob.id);
UpdateJobs(); UpdateJobs();
mangaViewerPopup.style.display = "none"; mangaViewerPopup.style.display = "none";
ResetContent();
}); });
function ShowMangaWindow(job, manga, event, add){ function ShowMangaWindow(job, manga, event, add){
@ -764,14 +762,6 @@ function UpdateJobs(){
GetMonitorJobs().then((json) => { GetMonitorJobs().then((json) => {
if(monitoringJobsCount != json.length){ if(monitoringJobsCount != json.length){
ResetContent(); ResetContent();
//console.log(json);
json.forEach(job => {
var mangaView = CreateManga(job.manga, job.mangaConnector.name);
mangaView.addEventListener("click", (event) => {
ShowMangaWindow(job, job.manga, event, false);
});
tasksContent.appendChild(mangaView);
});
monitoringJobsCount = json.length; monitoringJobsCount = json.length;
} }
}); });
@ -831,7 +821,7 @@ function createJob(jobjson){
var wrapper = document.createElement("div"); var wrapper = document.createElement("div");
wrapper.className = "jobWrapper"; wrapper.className = "section-item";
wrapper.id = GetValidSelector(jobjson.id); wrapper.id = GetValidSelector(jobjson.id);
var image = document.createElement("img"); var image = document.createElement("img");
@ -839,30 +829,35 @@ function createJob(jobjson){
image.src = GetCoverUrl(manga.internalId); image.src = GetCoverUrl(manga.internalId);
wrapper.appendChild(image); wrapper.appendChild(image);
var details = document.createElement("div");
details.className = 'jobDetails';
var title = document.createElement("span"); var title = document.createElement("span");
title.className = "jobTitle"; title.className = "jobTitle";
if(jobjson.chapter != null) if(jobjson.chapter != null)
title.innerText = `${manga.sortName} - ${jobjson.chapter.fileName}`; title.innerText = `${manga.sortName} - ${jobjson.chapter.fileName}`;
else if(jobjson.manga != null) else if(jobjson.manga != null)
title.innerText = manga.sortName; title.innerText = manga.sortName;
wrapper.appendChild(title); details.appendChild(title);
var progressBar = document.createElement("progress"); var progressBar = document.createElement("progress");
progressBar.className = "jobProgressBar"; progressBar.className = "jobProgressBar";
progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`; progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
wrapper.appendChild(progressBar); details.appendChild(progressBar);
var progressSpan = document.createElement("span"); var progressSpan = document.createElement("span");
progressSpan.className = "jobProgressSpan"; progressSpan.className = "jobProgressSpan";
progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`; progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`;
progressSpan.innerText = "0% 00:00:00"; progressSpan.innerText = "Pending...";
wrapper.appendChild(progressSpan); details.appendChild(progressSpan);
var cancelSpan = document.createElement("span"); var cancelSpan = document.createElement("span");
cancelSpan.className = "jobCancel"; cancelSpan.className = "jobCancel";
cancelSpan.innerText = "Cancel"; cancelSpan.innerText = "Cancel";
cancelSpan.addEventListener("click", () => CancelJob(jobjson.id)); cancelSpan.addEventListener("click", () => CancelJob(jobjson.id));
wrapper.appendChild(cancelSpan); details.appendChild(cancelSpan);
wrapper.appendChild(details);
return wrapper; return wrapper;
} }

107
Website/styles/base.css
View File

@ -420,6 +420,13 @@ popup popup-window {
overflow: hidden; overflow: hidden;
} }
popup#jobStatusView popup-window {
left: 20%;
top: 20%;
height: 60%;
width: 60%;
}
popup-content{ popup-content{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -894,82 +901,60 @@ footer-tag-popup::before{
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
#jobStatusView { #jobStatusRunning > .section-item {
z-index: 50; flex-direction: row;
height: 150px;
padding: 0;
overflow: hidden;
} }
#jobStatusView > popup-window { #jobStatusWaiting > .section-item {
top: 80px; flex-direction: row;
width: 50%; height: 150px;
max-height: calc(100% - 140px); padding: 0;
display: flex; overflow: hidden;
flex-direction: row;
flex-wrap: nowrap;
background-color: transparent;
} }
#jobStatusView > popup-window > div { .section-item > .jobImage {
overflow-y: scroll; height: 100%;
overflow-x: hidden; width: auto;
width: 50%; left: 0;
margin: 0; top: 0;
max-height: 100%; border-radius: 10px;
} }
#jobStatusView > popup-window > div > div { .jobDetails {
overflow-x: hidden; display: flex;
display: flex; flex-direction: column;
flex-direction: column; height: 100%;
flex-wrap: nowrap; width: 100%;
width: 100%;
margin: 0;
} }
.jobWrapper { .section-item > .jobDetails > .jobTitle {
width: 90%; margin: 5px;
margin: 2px 5%; font-size: 11pt;
height: 100px; font-weight: bold;
position: relative; text-wrap: wrap;
flex-shrink: 0;
background-color: rgba(187,187,187,0.4);
border-radius: 3px;
} }
.jobWrapper > .jobImage { .section-item > .jobDetails > .jobProgressBar {
height: 90%; margin: 5px;
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; height: 10px;
border-radius: 5px;
overflow: hidden;
} }
.jobWrapper > .jobProgressSpan { .section-item > .jobDetails > .jobProgressSpan {
position: absolute; margin: 5px;
right: 10px; margin-left: auto;
bottom: calc(12pt + 20px); margin-right: 5px;
width: 60%;
text-align: right;
} }
.jobWrapper > .jobCancel { .section-item > .jobDetails > .jobCancel {
position: absolute; margin-top: auto;
right: 10px; margin-bottom: 5px;
bottom: 5px; margin-left: auto;
margin-right: 5px;
font-size: 12pt; font-size: 12pt;
color: var(--secondary-color); color: var(--secondary-color);
cursor: pointer; cursor: pointer;