Search Window refresh

This commit is contained in:
db-2001 2024-04-24 22:23:49 -04:00
parent a3479bcf8b
commit 2c045740fc
6 changed files with 519 additions and 61 deletions

View File

@ -1,4 +1,6 @@
let apiUri = `${window.location.protocol}//${window.location.host}/api`
//let apiUri = `${window.location.protocol}//${window.location.host}/api`
let apiUri = `http://192.168.1.79:6531`;
// if(getCookie("apiUri") != ""){
// apiUri = getCookie("apiUri");
@ -150,9 +152,10 @@ async function GetRateLimits() {
return json;
}
function CreateMonitorJob(connector, internalId, language){
var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=03:00:00&translatedLanguage=${language}`;
PostData(uri);
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);
PostData(uri);
}
function CreateDownloadNewChaptersJob(connector, internalId, language){

View File

@ -68,16 +68,27 @@
<popup id="newMangaPopup">
<blur-background id="blurBackgroundNewMangaPopup" onclick="newMangaPopup.style.display = 'none';"></blur-background>
<div id="newMangaPopupSelector">
<select id="newMangaConnector" />
<input type="text" placeholder="Title" id="newMangaTitle" />
<select id="newMangaTranslatedLanguage">
<option selected="selected">en</option>
<option>it</option>
<option>de</option>
</select>
</div>
<div id="newMangaResult"></div>
<popup-window>
<border-bar>
<popup-title>Search</popup-title>
<popup-close onclick="newMangaPopup.style.display = 'none'">&times</popup-close>
</border-bar>
<popup-content>
<div id="loaderdiv">
<div id="loader"></div>
</div>
<div id="newMangaPopupSelector">
<select id="newMangaConnector">
<input type="text" placeholder="Title" id="newMangaTitle" />
<select id="newMangaTranslatedLanguage">
<option selected="selected">EN</option>
<option>IT</option>
<option>DE</option>
</select>
</div>
<div id="newMangaResult"></div>
</popup-content>
</popup-window>
</popup>
<popup id="settingsPopup">
@ -294,6 +305,7 @@
</border-bar>
</popup-window>
</popup>
</viewport>
<footer>

View File

@ -76,11 +76,15 @@ const settingUserAgent = document.querySelector("#userAgent");
const settingApiUri = document.querySelector("#settingApiUri");
const settingAprilFoolsMode = document.querySelector("#aprilFoolsMode");
const settingCSSStyle = document.querySelector('#cssStyle');
const settingDownloadLocation = [];
//Search and Add
const newMangaPopup = document.querySelector("#newMangaPopup");
const newMangaConnector = document.querySelector("#newMangaConnector");
const newMangaTitle = document.querySelector("#newMangaTitle");
const newMangaResult = document.querySelector("#newMangaResult");
const newMangaTranslatedLanguage = document.querySelector("#newMangaTranslatedLanguage");
const newMangaLoader = document.querySelector("popup-content #loaderdiv");
//Jobs
const jobsRunningTag = document.querySelector("#jobsRunningTag");
@ -153,6 +157,9 @@ function Setup(){
GetSettings().then((json) => {
//console.log(json);
settingApiUri.placeholder = apiUri;
settingDownloadLocation.value = json.downloadLocation;
settingUserAgent.value = json.userAgent;
settingAprilFoolsMode.checked = json.aprilFoolsMode;
});
GetRateLimits().then((json) => {
defaultRL.placeholder = json.Default + ' Requests/Minute';
@ -290,31 +297,30 @@ function ShowNewMangaSearch(){
newMangaTitle.value = "";
newMangaPopup.style.display = "block";
newMangaResult.replaceChildren();
newMangaLoader.style.display = 'none';
}
newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();});
function GetNewMangaItems(){
if(newMangaTitle.value.length < 4)
return;
if(newMangaTitle.value.length < 4) {
return;
}
newMangaResult.replaceChildren();
newMangaConnector.disabled = true;
newMangaTitle.disabled = true;
newMangaTranslatedLanguage.disabled = true;
newMangaLoader.style.display = 'block';
GetPublicationFromConnector(newMangaConnector.value, newMangaTitle.value).then((json) => {
//console.log(json);
newMangaLoader.style.display = 'none';
newMangaResult.scrollTop = 0;
if(json.length > 0)
newMangaResult.style.display = "flex";
json.forEach(result => {
var mangaElement = CreateManga(result, newMangaConnector.value)
newMangaResult.appendChild(mangaElement);
mangaElement.addEventListener("click", (event) => {
ShowMangaWindow(null, result, event, true);
});
var searchResult = CreateSearchResult(result, newMangaConnector.value)
newMangaResult.appendChild(searchResult);
});
newMangaConnector.disabled = false;
@ -376,6 +382,203 @@ function CreateManga(manga, connector){
return mangaElement;
}
//Returns a new "Search Result" item to display in the search window
function CreateSearchResult(manga, connector) {
//Create a new publication and set an internal ID
var searchResult = document.createElement('div');
searchResult.id = GetValidSelector(manga.internalId);
searchResult.className = "section-item";
//Append the cover image to the publication
var imageCont = document.createElement('img-container');
var mangaImage = document.createElement('img');
mangaImage.src = GetCoverUrl(manga.internalId);
imageCont.appendChild(mangaImage);
var connectorName = document.createElement('manga-connector');
connectorName.innerText = connector.toUpperCase();
connectorName.style.backgroundColor = stringToColour(connector);
imageCont.appendChild(connectorName);
var chapterNo = document.createElement('span');
chapterNo.className = 'latest-chapter-no';
chapterNo.innerText = manga.latestChapterAvailable.toString();
imageCont.appendChild(chapterNo);
searchResult.appendChild(imageCont);
var mangaDetails = document.createElement('div');
mangaDetails.className = 'jobDetails';
var headerRow = document.createElement('header-row');
var mangaTitle = document.createElement('span');
mangaTitle.innerText = manga.sortName;
mangaTitle.className = 'mangaTitle';
headerRow.appendChild(mangaTitle);
//Create the publication status indicator
var releaseStatus = document.createElement('status-filter');
switch(manga.releaseStatus){
case 0:
releaseStatus.setAttribute("release-status", "Ongoing");
releaseStatus.innerText = "Ongoing";
break;
case 1:
releaseStatus.setAttribute("release-status", "Completed");
releaseStatus.innerText = "Completed";
break;
case 2:
releaseStatus.setAttribute("release-status", "On Hiatus");
releaseStatus.innerText = "On Hiatus";
break;
case 3:
releaseStatus.setAttribute("release-status", "Cancelled");
releaseStatus.innerText = "Cancelled";
break;
case 4:
releaseStatus.setAttribute("release-status", "Upcoming");
releaseStatus.innerText = "Upcoming";
break;
default:
releaseStatus.setAttribute("release-status", "Status Unavailable");
releaseStatus.innerText = "Status Unavailable";
break;
}
headerRow.appendChild(releaseStatus);
mangaDetails.appendChild(headerRow);
//Genres
var tagCloud = document.createElement('tag-cloud');
manga.authors.forEach(author => {
var authorCard = document.createElement('author-tag');
var personImg = document.createElement('img');
personImg.src = 'media/person.svg';
authorCard.appendChild(personImg);
var authorName = document.createElement('span');
authorName.innerText = author;
authorCard.appendChild(authorName);
tagCloud.appendChild(authorCard);
});
manga.tags.forEach(tag => {
var tagElement = document.createElement('manga-tag');
tagElement.innerText = tag;
tagCloud.appendChild(tagElement);
});
mangaDetails.appendChild(tagCloud);
//Description
var description = document.createElement('div');
description.className = 'mangaDescription';
description.innerText = manga.description;
mangaDetails.appendChild(description);
searchResult.appendChild(mangaDetails);
//Download Settings
var dlSett = document.createElement('div');
dlSett.className = 'new-manga-download-settings'
folderRow = document.createElement('row');
folderLabel = document.createElement('label');
folderLabel.innerText = 'Download Path:';
folderRow.appendChild(folderLabel);
folderInput = document.createElement('input');
downloadFolder = '~/' + manga.folderName + '/';
folderInput.placeholder = downloadFolder.toString();
folderInput.type = 'text';
folderInput.id = manga.internalId.concat('-downloadfolder')
folderRow.appendChild(folderInput);
dlSett.appendChild(folderRow);
intervalRow = document.createElement('row');
intervalLabel = document.createElement('label');
intervalLabel.innerText = 'Job Interval:';
intervalRow.appendChild(intervalLabel);
intervalInput = document.createElement('input');
intervalInput.placeholder = '03:00:00 (HH:MM:SS)';
intervalInput.type = 'text';
intervalInput.id = manga.internalId.concat('-downloadinterval')
intervalRow.appendChild(intervalInput);
dlSett.appendChild(intervalRow);
chapterRow = document.createElement('row');
chapterLabel = document.createElement('label');
chapterLabel.innerText = 'Download from Chapter:';
chapterRow.appendChild(chapterLabel);
chapterInput = document.createElement('input');
chapterInput.placeholder = (manga.ignoreChaptersBelow + 1).toString();
chapterInput.type = 'number';
chapterInput.id = manga.internalId.concat('-downloadchapter')
chapterRow.appendChild(chapterInput);
dlSett.appendChild(chapterRow);
dlButton = document.createElement('border-bar-button');
if (IsInLibrary(manga.internalId)) {
dlButton.className = 'section in-library';
dlButton.innerText = 'In Library';
} else {
dlButton.className = 'section downloadManga';
dlButton.innerText = 'Monitor Manga';
dlButton.addEventListener('click', function() { AddManga(manga.internalId, connector) });
}
dlSett.appendChild(dlButton);
mangaDetails.appendChild(dlSett);
//Append the publication information to the publication
//console.log(manga);
return searchResult;
}
function IsInLibrary(id) {
matchFound = false;
tasksContent.childNodes.forEach(publication => {
if (id.toLowerCase().includes(publication.id.toLowerCase())) {
console.log('Match found');
matchFound = true;
}
});
return matchFound;
}
function AddManga(id, connector) {
//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 {
mangaFolder = folderInput;
}
intervalInput = document.getElementById(id.concat('-downloadinterval')).value;
if (intervalInput == null || intervalInput == '') {
mangaInterval = '03:00:00';
} else {
mangaInterval = intervalInput;
}
chapterInput = document.getElementById(id.concat('-downloadchapter')).value;
if (chapterInput == null || chapterInput == '') {
mangaChapter = 0;
} else {
mangaChapter = chapterInput;
}
CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter);
}
createMonitorJobButton.addEventListener("click", () => {
CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
UpdateJobs();
@ -574,6 +777,7 @@ function OpenSettings(){
settingApiUri.value = apiUri;
settingUserAgent.value = json.userAgent;
settingAprilFoolsMode.checked = json.aprilFoolsMode;
settingDownloadLocation.value = json.downloadLocation;
//console.log(json.styleSheet);
});
GetRateLimits().then((json) => {

View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
</svg>

After

Width:  |  Height:  |  Size: 285 B

3
Website/media/person.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-person" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
</svg>

After

Width:  |  Height:  |  Size: 370 B

View File

@ -145,6 +145,10 @@ status-filter {
user-select: none; /* Standard syntax */
}
row > status-filter {
cursor: default;
}
status-filter[release-status="Ongoing"]{
background-color: limegreen;
}
@ -647,57 +651,49 @@ a:active {
color: var(--secondary-color);
}
#newMangaPopup > div {
z-index: 3;
position: relative;
}
#newMangaPopup > #newMangaPopupSelector {
width: 600px;
height: 40px;
margin: 80px auto 0;
}
#newMangaPopup > div > #newMangaConnector, #newMangaTitle, #newMangaTranslatedLanguage {
margin: 0;
display: inline-block;
height: 40px;
}
#newMangaPopupSelector {
display: flex;
padding: 5px;
margin: 10px;
width: calc(100%-20px)
}
#newMangaPopup #newMangaConnector {
width: 100px;
padding: 0 0 0 5px;
border-radius: 5px 0 0 5px;
border: 0;
border-right: 1px solid darkgray;
padding: 5px;
border-radius: 10px;
border: 0;;
}
#newMangaPopup #newMangaTitle{
width: 445px;
padding: 0 5px 0 5px;
border: 0;
margin: 0px 10px;
padding: 5px;
height: 20px;
border-radius: 10px;
border-style: solid;
outline: none;
flex-grow: 1;
width: auto;
}
#newMangaPopup #newMangaTranslatedLanguage {
width: 45px;
border-radius: 0 5px 5px 0;
width: 60px;
padding: 5px;
border-radius: 10px;
border: 0;
border-left: 1px solid darkgray;
margin-left: -5px;
}
#newMangaResult {
display: none;
flex-direction: row;
flex-direction: column;
justify-content: flex-start;
margin: 5px auto 0;
margin: 5px;
border-radius: 5px;
padding: 5px;
width: min-content;
max-width: 98%;
max-height: 400px;
overflow-x: scroll;
overflow-y: hidden;
width: 98%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
blur-background {
@ -882,6 +878,10 @@ footer-tag-popup::before{
z-index: 201;
}
popup-content #loaderdiv {
display: none;
}
#loaderText {
position: relative;
margin: 0 auto;
@ -911,6 +911,107 @@ footer-tag-popup::before{
overflow: hidden;
}
#newMangaResult > .section-item {
flex-direction: row;
min-height: 300px;
flex-grow: 0;
width: auto;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
img-container {
height: 100%;
width: 200px;
position: relative;
left: 0;
top: 0;
border-radius: 10px;
overflow: hidden;
}
img-container > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
border-radius: 5px;
}
manga-connector {
display: block;
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
/*Text Properties*/
font-size:8pt;
font-weight:bold;
color:white;
text-align: center;
}
span.latest-chapter-no {
position: absolute;
right: 5px;
bottom: 5px;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 10pt;
font-weight: bold;
color: white;
background-color: var(--primary-color);;
}
div.new-manga-download-settings {
position: absolute;
overflow: hidden;
bottom: 0;
right: 0;
width: 100%;
height: auto;
padding: 10px;
}
.new-manga-download-settings > row {
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 5px;
margin-bottom: 5px;
}
.new-manga-download-settings > row > label {
margin-left: 15px;
text-wrap: nowrap;
font-size: 11pt;
}
.new-manga-download-settings > row > input {
margin-left: auto;
margin-right: 5px;
padding: 5px;
height: 20px;
border-radius: 10px;
border-style: solid;
border-color: lightgray;
outline: none;
text-align: end;
float: right;
width: 300px;
}
.new-manga-download-settings > row > input:focus {
border-color: var(--secondary-color);
}
.section-item > .jobImage {
height: 100%;
width: auto;
@ -923,7 +1024,9 @@ footer-tag-popup::before{
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
width: calc(100% - 15px);
margin-left: 7px;
position: relative;
}
.section-item > .jobDetails > .jobTitle {
@ -933,6 +1036,136 @@ footer-tag-popup::before{
text-wrap: wrap;
}
header-row {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
align-items: center
}
.mangaTitle {
margin: 5px;
font-size: 14pt;
font-weight: bold;
text-wrap: wrap;
display: flex;
}
tag-cloud {
display: inline-flex;
flex-direction: row;
margin-left: 10px;
width: calc(100% - 30px);
flex-wrap: wrap;
}
manga-tag {
display: inline-block;
height: 24px;
line-height: 24px;
position: relative;
margin: 0 5px 8px 17px;
padding: 0 10px 0 12px;
background: darkslategrey;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
color: #fff;
font-size: 11px;
text-decoration: none;
font-weight: bold;
}
manga-tag:before {
content: "";
position: absolute;
top:0;
left: -12px;
width: 0;
height: 0;
border-color: transparent darkslategrey transparent transparent;
border-style: solid;
border-width: 12px 12px 12px 0;
}
manga-tag:after {
content: "";
position: absolute;
top: 10px;
left: 1px;
float: left;
width: 5px;
height: 5px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fff;
}
author-tag {
display: inline-block;
height: 24px;
line-height: 24px;
position: relative;
margin-left: 0px;
margin-right: 5px;
padding: 0 5px 0 5px;
background: #800000;
border-radius: 5px;
color: #fff;
font-size: 11px;
text-decoration: none;
font-weight: bold;
align-items: center;
display: flex;
}
author-tag > img {
height: 18px;
width: 18px;
float: left;
background: #800000;
}
.mangaDescription {
font-size: 10pt;
max-height: 120px;
overflow-y: auto;
padding: 4px;
height: auto;
margin: 2px;
}
.downloadManga {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 5px;
padding: 5px 10px;
font-size: 10pt;
}
border-bar-button.in-library {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 5px;
padding: 5px 10px;
font-size: 10pt;
background-color: #08962e;
color: #fff;
border: none;
}
border-bar-button.in-library:hover {
border: none;
color: #fff;
}
.section-item > .jobDetails > .jobProgressBar {
margin: 5px;
height: 10px;
@ -983,8 +1216,7 @@ footer-tag-popup::before{
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
transition: .4s; border-radius: 34px;
}
.slider:before {