From 2c045740fc9de96c5cdc2222aa8942bbcda1d257 Mon Sep 17 00:00:00 2001
From: db-2001 <adityabhatnagar2001@gmail.com>
Date: Wed, 24 Apr 2024 22:23:49 -0400
Subject: [PATCH] Search Window refresh

---
 Website/apiConnector.js        |  11 +-
 Website/index.html             |  32 ++--
 Website/interaction.js         | 224 ++++++++++++++++++++++--
 Website/media/check-circle.svg |   4 +
 Website/media/person.svg       |   3 +
 Website/styles/base.css        | 306 +++++++++++++++++++++++++++++----
 6 files changed, 519 insertions(+), 61 deletions(-)
 create mode 100644 Website/media/check-circle.svg
 create mode 100644 Website/media/person.svg

diff --git a/Website/apiConnector.js b/Website/apiConnector.js
index aa5f40a..9bf7d7d 100644
--- a/Website/apiConnector.js
+++ b/Website/apiConnector.js
@@ -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){
diff --git a/Website/index.html b/Website/index.html
index c5ea14a..9df5fba 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -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>
diff --git a/Website/interaction.js b/Website/interaction.js
index 7700f8b..355590d 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -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) => {
diff --git a/Website/media/check-circle.svg b/Website/media/check-circle.svg
new file mode 100644
index 0000000..e509f4d
--- /dev/null
+++ b/Website/media/check-circle.svg
@@ -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>
\ No newline at end of file
diff --git a/Website/media/person.svg b/Website/media/person.svg
new file mode 100644
index 0000000..975b8a6
--- /dev/null
+++ b/Website/media/person.svg
@@ -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>
\ No newline at end of file
diff --git a/Website/styles/base.css b/Website/styles/base.css
index 714cdd2..dfc3e0b 100644
--- a/Website/styles/base.css
+++ b/Website/styles/base.css
@@ -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 {