First steps to add new MonitorJobs

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>

Website/interaction.js

@@ -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();
+
 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');

Website/style.css

@@ -305,138 +305,55 @@ popup popup-window popup-content input, select {
     border-radius: 3px;
 }
 
-#selectPublicationPopup publication {
+#newMangaPopup > div {
-    width: 150px;
+  z-index: 3;
-    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;
   position: relative;
-    margin: 5px 0;
 }
 
-#downloadTasksPopup popup-content > div > img {
+#newMangaPopup > #newMangaPopupSelector {
-    display: block;
+  width: 600px;
-    position: absolute;
+  height: 40px;
-    height: 100%;
+  margin: 80px auto 0;
-    width: 60px;
-    left: 0;
-    top: 0;
-    object-fit: cover;
-    border-radius: 4px;
 }
 
-#downloadTasksPopup popup-content > div > span {
+#newMangaPopup > div > #newMangaConnector, #newMangaTitle {
-    display: block;
+  margin: 0;
-    position: absolute;
+  display: inline-block;
-    width: max-content;
 }
 
-#downloadTasksPopup popup-content > div > .pubTitle {
+#newMangaPopup #newMangaConnector {
-    left: 70px;
+  height: 40px;
-    top: 0;
+  width: 100px;
+  padding: 0 0 0 5px;
+  border-radius: 5px 0 0 5px;
+  border-right: 1px solid darkgray;
 }
 
-#downloadTasksPopup popup-content > div > .chapterName {
+#newMangaPopup #newMangaTitle{
-    left: 70px;
+  height: 40px;
-    top: 28pt;
+  width: 495px;
+  padding: 0 0 0 5px;
+  border-radius: 0 5px 5px 0;
+  border: 0;
 }
 
-#downloadTasksPopup popup-content > div > .chapterNumber {
+#newMangaResult {
-    left: 70px;
+  display: none;
-    top: 14pt;
+  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;
 }
 
-#downloadTasksPopup popup-content > div > progress {
+#newMangaResult .mangaResultItem {
-    display: block;
+  width: 100%;
-    position: absolute;
+  margin: 2px 0 !important;
-    left: 150px;
-    bottom: 0;
-    width: 200px;
-}
-
-#downloadTasksPopup popup-content > div > .progressStr {
-    display: block;
-    position: absolute;
-    left: 70px;
-    bottom: 0;
-    width: 70px;
 }
 
 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;
 }