Compare commits
5 Commits
91f587eb91
...
6c209d0f9d
Author | SHA1 | Date | |
---|---|---|---|
6c209d0f9d | |||
6c8dcee056 | |||
2c36b1f64e | |||
4bad1b6382 | |||
d9ec9cb969 |
@ -69,6 +69,10 @@ async function GetChapters(connector, internalId){
|
||||
return json;
|
||||
}
|
||||
|
||||
function GetCoverUrl(internalId){
|
||||
return `${apiUri}/Manga/Cover?internalId=${internalId}`;
|
||||
}
|
||||
|
||||
async function GetAllJobs(){
|
||||
var uri = `${apiUri}/Jobs`;
|
||||
let json = await GetData(uri);
|
||||
@ -129,8 +133,8 @@ async function GetLibraryConnectors(){
|
||||
return json;
|
||||
}
|
||||
|
||||
function CreateMonitorJob(connector, internalId, interval){
|
||||
var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}`;
|
||||
function CreateMonitorJob(connector, internalId){
|
||||
var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=03:00:00`;
|
||||
PostData(uri);
|
||||
}
|
||||
|
||||
|
@ -24,7 +24,7 @@
|
||||
<div id="addPublication">
|
||||
<p>+</p>
|
||||
</div>
|
||||
<publication>
|
||||
<publication onclick="ShowNewMangaSearch()">
|
||||
<img alt="cover" src="media/cover.jpg">
|
||||
<publication-information>
|
||||
<connector-name class="pill">MangaDex</connector-name>
|
||||
@ -33,6 +33,15 @@
|
||||
</publication>
|
||||
</content>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<div id="newMangaResult"></div>
|
||||
</popup>
|
||||
|
||||
<popup id="settingsPopup">
|
||||
<blur-background id="blurBackgroundSettingsPopup" onclick="
|
||||
settingsPopup.style.display = 'none';"></blur-background>
|
||||
@ -80,7 +89,7 @@
|
||||
</popup>
|
||||
|
||||
<popup id="publicationViewerPopup">
|
||||
<blur-background id="blurBackgroundPublicationPopup"></blur-background>
|
||||
<blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
|
||||
<publication-viewer>
|
||||
<img id="pubviewcover" src="media/cover.jpg" alt="cover">
|
||||
<publication-information>
|
||||
|
@ -1,30 +1,7 @@
|
||||
let jobs = [];
|
||||
let notificationConnectorTypes = [];
|
||||
let libraryConnectorTypes = [];
|
||||
|
||||
function Setup(){
|
||||
GetAvailableNotificationConnectors().then((json) => {
|
||||
json.forEach(connector => {
|
||||
notificationConnectorTypes[connector.Key] = connector.Value;
|
||||
});
|
||||
});
|
||||
|
||||
GetAvailableLibraryConnectors().then((json) => {
|
||||
json.forEach(connector => {
|
||||
libraryConnectorTypes[connector.Key] = connector.Value;
|
||||
});
|
||||
});
|
||||
|
||||
GetMonitorJobs().then((json) => {
|
||||
json.forEach(job => {
|
||||
if(!jobs.includes(job)){
|
||||
jobs.push(job);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
Setup();
|
||||
|
||||
let selectedManga;
|
||||
|
||||
const searchBox = document.querySelector("#searchbox");
|
||||
const settingsPopup = document.querySelector("#settingsPopup");
|
||||
@ -32,13 +9,13 @@ const settingsCog = document.querySelector("#settingscog");
|
||||
const tasksContent = document.querySelector("content");
|
||||
const createMonitorTaskButton = document.querySelector("#createMonitorTaskButton");
|
||||
const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterTaskButton");
|
||||
const publicationViewerPopup = document.querySelector("#publicationViewerPopup");
|
||||
const publicationViewerWindow = document.querySelector("publication-viewer");
|
||||
const publicationViewerDescription = document.querySelector("#publicationViewerDescription");
|
||||
const publicationViewerName = document.querySelector("#publicationViewerName");
|
||||
const publicationViewerTags = document.querySelector("#publicationViewerTags");
|
||||
const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor");
|
||||
const pubviewcover = document.querySelector("#pubviewcover");
|
||||
const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
|
||||
const mangaViewerWindow = document.querySelector("publication-viewer");
|
||||
const mangaViewerDescription = document.querySelector("#publicationViewerDescription");
|
||||
const mangaViewerName = document.querySelector("#publicationViewerName");
|
||||
const mangaViewerTags = document.querySelector("#publicationViewerTags");
|
||||
const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor");
|
||||
const mangaViewCover = document.querySelector("#pubviewcover");
|
||||
const publicationDelete = document.querySelector("publication-delete");
|
||||
const publicationTaskStart = document.querySelector("publication-starttask");
|
||||
const settingDownloadLocation = document.querySelector("#downloadLocation");
|
||||
@ -56,8 +33,36 @@ const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
|
||||
const settingGotifyConfigured = document.querySelector("#gotifyConfigured");
|
||||
const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured");
|
||||
const settingApiUri = document.querySelector("#settingApiUri");
|
||||
const newMangaPopup = document.querySelector("#newMangaPopup");
|
||||
const newMangaConnector = document.querySelector("#newMangaConnector");
|
||||
const newMangaTitle = document.querySelector("#newMangaTitle");
|
||||
const newMangaResult = document.querySelector("#newMangaResult");
|
||||
|
||||
function Setup(){
|
||||
GetAvailableNotificationConnectors().then((json) => {
|
||||
json.forEach(connector => {
|
||||
notificationConnectorTypes[connector.Key] = connector.Value;
|
||||
});
|
||||
});
|
||||
|
||||
GetAvailableLibraryConnectors().then((json) => {
|
||||
json.forEach(connector => {
|
||||
libraryConnectorTypes[connector.Key] = connector.Value;
|
||||
});
|
||||
});
|
||||
|
||||
GetAvailableControllers().then((json) => {
|
||||
json.forEach(connector => {
|
||||
var option = document.createElement('option');
|
||||
option.value = connector;
|
||||
option.innerText = connector;
|
||||
newMangaConnector.appendChild(option);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
Setup();
|
||||
|
||||
ResetContent();
|
||||
function ResetContent(){
|
||||
//Delete everything
|
||||
tasksContent.replaceChildren();
|
||||
@ -68,54 +73,92 @@ function ResetContent(){
|
||||
var plus = document.createElement("p");
|
||||
plus.innerText = "+";
|
||||
add.appendChild(plus);
|
||||
add.addEventListener("click", () => ShowNewTaskWindow());
|
||||
add.addEventListener("click", () => ShowNewMangaSearch());
|
||||
tasksContent.appendChild(add);
|
||||
}
|
||||
|
||||
function ShowNewMangaSearch(){
|
||||
newMangaTitle.value = "";
|
||||
newMangaPopup.style.display = "block";
|
||||
newMangaResult.replaceChildren();
|
||||
}
|
||||
|
||||
newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();})
|
||||
function GetNewMangaItems(){
|
||||
if(newMangaTitle.value.length < 4)
|
||||
return;
|
||||
|
||||
newMangaResult.replaceChildren();
|
||||
newMangaConnector.disabled = true;
|
||||
newMangaTitle.disabled = true;
|
||||
GetPublicationFromConnector(newMangaConnector.value, newMangaTitle.value).then((json) => {
|
||||
//console.log(json);
|
||||
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(result, event, true);
|
||||
});
|
||||
});
|
||||
|
||||
newMangaConnector.disabled = false;
|
||||
newMangaTitle.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
//Returns a new "Publication" Item to display in the jobs section
|
||||
function CreatePublication(publication, connector){
|
||||
var publicationElement = document.createElement('publication');
|
||||
publicationElement.setAttribute("id", publication.internalId);
|
||||
var img = document.createElement('img');
|
||||
img.src = `imageCache/${publication.coverFileNameInCache}`;
|
||||
publicationElement.appendChild(img);
|
||||
function CreateManga(manga, connector){
|
||||
var mangaElement = document.createElement('publication');
|
||||
mangaElement.setAttribute("id", manga.internalId);
|
||||
var mangaImage = document.createElement('img');
|
||||
mangaImage.src = GetCoverUrl(manga.internalId);
|
||||
mangaElement.appendChild(mangaImage);
|
||||
var info = document.createElement('publication-information');
|
||||
var connectorName = document.createElement('connector-name');
|
||||
connectorName.innerText = connector;
|
||||
connectorName.className = "pill";
|
||||
info.appendChild(connectorName);
|
||||
var publicationName = document.createElement('publication-name');
|
||||
publicationName.innerText = publication.sortName;
|
||||
info.appendChild(publicationName);
|
||||
publicationElement.appendChild(info);
|
||||
if(publications.filter(pub => pub.internalId === publication.internalId) < 1)
|
||||
publications.push(publication);
|
||||
return publicationElement;
|
||||
var mangaName = document.createElement('publication-name');
|
||||
mangaName.innerText = manga.sortName;
|
||||
info.appendChild(mangaName);
|
||||
mangaElement.appendChild(info);
|
||||
return mangaElement;
|
||||
}
|
||||
|
||||
function ShowPublicationViewerWindow(publicationId, event, add){
|
||||
createMonitorTaskButton.addEventListener("click", () => {
|
||||
NewMonitorJob();
|
||||
mangaViewerPopup.style.display = "none";
|
||||
});
|
||||
function NewMonitorJob(){
|
||||
CreateMonitorJob(newMangaConnector.value, selectedManga.internalId);
|
||||
UpdateJobs();
|
||||
}
|
||||
|
||||
function ShowMangaWindow(manga, event, add){
|
||||
selectedManga = manga;
|
||||
//Show popup
|
||||
publicationViewerPopup.style.display = "block";
|
||||
mangaViewerPopup.style.display = "block";
|
||||
|
||||
//Set position to mouse-position
|
||||
if(event.clientY < window.innerHeight - publicationViewerWindow.offsetHeight)
|
||||
publicationViewerWindow.style.top = `${event.clientY}px`;
|
||||
if(event.clientY < window.innerHeight - mangaViewerWindow.offsetHeight)
|
||||
mangaViewerWindow.style.top = `${event.clientY}px`;
|
||||
else
|
||||
publicationViewerWindow.style.top = `${event.clientY - publicationViewerWindow.offsetHeight}px`;
|
||||
mangaViewerWindow.style.top = `${event.clientY - mangaViewerWindow.offsetHeight}px`;
|
||||
|
||||
if(event.clientX < window.innerWidth - publicationViewerWindow.offsetWidth)
|
||||
publicationViewerWindow.style.left = `${event.clientX}px`;
|
||||
if(event.clientX < window.innerWidth - mangaViewerWindow.offsetWidth)
|
||||
mangaViewerWindow.style.left = `${event.clientX}px`;
|
||||
else
|
||||
publicationViewerWindow.style.left = `${event.clientX - publicationViewerWindow.offsetWidth}px`;
|
||||
mangaViewerWindow.style.left = `${event.clientX - mangaViewerWindow.offsetWidth}px`;
|
||||
|
||||
//Edit information inside the window
|
||||
var publication = publications.filter(pub => pub.internalId === publicationId)[0];
|
||||
publicationViewerName.innerText = publication.sortName;
|
||||
publicationViewerTags.innerText = publication.tags.join(", ");
|
||||
publicationViewerDescription.innerText = publication.description;
|
||||
publicationViewerAuthor.innerText = publication.authors.join(',');
|
||||
pubviewcover.src = `imageCache/${publication.coverFileNameInCache}`;
|
||||
toEditId = publicationId;
|
||||
mangaViewerName.innerText = manga.sortName;
|
||||
mangaViewerTags.innerText = manga.tags.join(", ");
|
||||
mangaViewerDescription.innerText = manga.description;
|
||||
mangaViewerAuthor.innerText = manga.authors.join(',');
|
||||
mangaViewCover.src = GetCoverUrl(manga.internalId);
|
||||
toEditId = manga.internalId;
|
||||
|
||||
//Check what action should be listed
|
||||
if(add){
|
||||
@ -277,3 +320,22 @@ function UpdateSettings(){
|
||||
function utf8_to_b64(str) {
|
||||
return window.btoa(unescape(encodeURIComponent( str )));
|
||||
}
|
||||
|
||||
|
||||
UpdateJobs();
|
||||
setInterval(() => {
|
||||
UpdateJobs();
|
||||
}, 1000);
|
||||
function UpdateJobs(){
|
||||
GetMonitorJobs().then((json) => {
|
||||
ResetContent();
|
||||
console.log(json);
|
||||
json.forEach(job => {
|
||||
var mangaView = CreateManga(job.manga, job.mangaConnector.name);
|
||||
mangaView.addEventListener("click", (event) => {
|
||||
ShowMangaWindow(job.manga, event, false);
|
||||
});
|
||||
tasksContent.appendChild(mangaView);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -305,138 +305,49 @@ popup popup-window popup-content input, select {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#selectPublicationPopup publication {
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
#createTaskPopup {
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
#createTaskPopup input {
|
||||
height: 30px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#createMonitorTaskPopup, #createDownloadChaptersTask {
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
#createMonitorTaskPopup input[type="number"] {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask popup-content {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask popup-content > * {
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask #chapterOutput {
|
||||
max-height: 50vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask #chapterOutput .index{
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask #chapterOutput .index::after{
|
||||
content: ':';
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask #chapterOutput .vol::before{
|
||||
content: 'Vol.';
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask #chapterOutput .vol{
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask #chapterOutput .ch::before{
|
||||
content: 'Ch.';
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask #chapterOutput .ch {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-window {
|
||||
left: 0;
|
||||
top: 80px;
|
||||
margin: 0 0 0 10px;
|
||||
height: calc(100vh - 140px);
|
||||
width: 400px;
|
||||
max-width: 95vw;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div {
|
||||
display: block;
|
||||
height: 80px;
|
||||
#newMangaPopup > div {
|
||||
z-index: 3;
|
||||
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;
|
||||
#newMangaPopup > #newMangaPopupSelector {
|
||||
width: 600px;
|
||||
height: 40px;
|
||||
margin: 80px auto 0;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
#newMangaPopup > div > #newMangaConnector, #newMangaTitle {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > .pubTitle {
|
||||
left: 70px;
|
||||
top: 0;
|
||||
#newMangaPopup #newMangaConnector {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
padding: 0 0 0 5px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
border-right: 1px solid darkgray;
|
||||
}
|
||||
|
||||
#downloadTasksPopup popup-content > div > .chapterName {
|
||||
left: 70px;
|
||||
top: 28pt;
|
||||
#newMangaPopup #newMangaTitle{
|
||||
height: 40px;
|
||||
width: 495px;
|
||||
padding: 0 0 0 5px;
|
||||
border-radius: 0 5px 5px 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#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;
|
||||
#newMangaResult {
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 5px auto 0;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
width: min-content;
|
||||
max-width: 98%;
|
||||
max-height: 400px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
blur-background {
|
||||
@ -444,18 +355,10 @@ blur-background {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#taskSelectOutput{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-content: start;
|
||||
max-height: 70vh;
|
||||
overflow-y: scroll;
|
||||
background: rgba(245, 169, 184, 0.58);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(4.5px);
|
||||
-webkit-backdrop-filter: blur(4.5px);
|
||||
}
|
||||
|
||||
#publicationViewerPopup{
|
||||
|
Loading…
Reference in New Issue
Block a user