Can add new MonitorTasks

BlurBackground now has glass-style
List of newManga now scrolls sideways
2023-09-01 23:43:41 +02:00 · 2023-09-01 23:43:30 +02:00 · 2023-09-01 23:42:52 +02:00 · 2023-09-01 23:42:31 +02:00 · 2023-08-31 23:45:13 +02:00
4 changed files with 177 additions and 199 deletions
--- a/Website/apiConnector.js
+++ b/Website/apiConnector.js
@ -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);
 }

--- a/Website/index.html
+++ b/Website/index.html
@ -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>
--- a/Website/interaction.js
+++ b/Website/interaction.js
@ -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);
+    });
+  });
+}
--- a/Website/style.css
+++ b/Website/style.css
@ -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{
Author	SHA1	Message	Date
glax	6c209d0f9d	Can add new MonitorTasks	2023-09-01 23:43:41 +02:00
glax	6c8dcee056	BlurBackground now has glass-style List of newManga now scrolls sideways	2023-09-01 23:43:30 +02:00
glax	2c36b1f64e	Added onclick to hide PublicationViewer	2023-09-01 23:42:52 +02:00
glax	4bad1b6382	Set Interval for MonitorJob to 3 hrs Added function to retrieve Cover-Url	2023-09-01 23:42:31 +02:00
glax	d9ec9cb969	First steps to add new MonitorJobs	2023-08-31 23:45:13 +02:00