First steps to add new MonitorJobs
This commit is contained in:
parent
91f587eb91
commit
d9ec9cb969
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -2,30 +2,6 @@
|
|||
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();
|
||||
|
||||
|
||||
const searchBox = document.querySelector("#searchbox");
|
||||
const settingsPopup = document.querySelector("#settingsPopup");
|
||||
const settingsCog = document.querySelector("#settingscog");
|
||||
|
|
@ -56,8 +32,45 @@ 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);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
GetMonitorJobs().then((json) => {
|
||||
json.forEach(job => {
|
||||
if(!jobs.includes(job)){
|
||||
jobs.push(job);
|
||||
}
|
||||
});
|
||||
});
|
||||
ResetContent();
|
||||
}
|
||||
Setup();
|
||||
|
||||
ResetContent();
|
||||
function ResetContent(){
|
||||
//Delete everything
|
||||
tasksContent.replaceChildren();
|
||||
|
|
@ -68,10 +81,44 @@ 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;
|
||||
|
||||
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 item = document.createElement("div");
|
||||
item.className = "mangaResultItem";
|
||||
|
||||
var mangaTitle = document.createElement("span");
|
||||
mangaTitle.className = "mangaResultItemTitle";
|
||||
mangaTitle.innerText = result.sortName;
|
||||
item.appendChild(mangaTitle);
|
||||
|
||||
newMangaResult.appendChild(item);
|
||||
});
|
||||
|
||||
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');
|
||||
|
|
|
|||
|
|
@ -305,138 +305,55 @@ popup popup-window popup-content input, select {
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#selectPublicationPopup publication {
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
#newMangaPopup > div {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#createTaskPopup {
|
||||
z-index: 7;
|
||||
#newMangaPopup > #newMangaPopupSelector {
|
||||
width: 600px;
|
||||
height: 40px;
|
||||
margin: 80px auto 0;
|
||||
}
|
||||
|
||||
#createTaskPopup input {
|
||||
height: 30px;
|
||||
width: 200px;
|
||||
#newMangaPopup > div > #newMangaConnector, #newMangaTitle {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#createMonitorTaskPopup, #createDownloadChaptersTask {
|
||||
z-index: 9;
|
||||
#newMangaPopup #newMangaConnector {
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
padding: 0 0 0 5px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
border-right: 1px solid darkgray;
|
||||
}
|
||||
|
||||
#createMonitorTaskPopup input[type="number"] {
|
||||
width: 40px;
|
||||
#newMangaPopup #newMangaTitle{
|
||||
height: 40px;
|
||||
width: 495px;
|
||||
padding: 0 0 0 5px;
|
||||
border-radius: 0 5px 5px 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#createDownloadChaptersTask popup-content {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
#newMangaResult {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
margin: 5px auto 0 !important;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
width: 590px !important;
|
||||
max-height: 500px;
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#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;
|
||||
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;
|
||||
#newMangaResult .mangaResultItem {
|
||||
width: 100%;
|
||||
margin: 2px 0 !important;
|
||||
}
|
||||
|
||||
blur-background {
|
||||
|
|
@ -448,16 +365,6 @@ blur-background {
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#taskSelectOutput{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-content: start;
|
||||
max-height: 70vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#publicationViewerPopup{
|
||||
z-index: 5;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user