Fix overflow of tooltip release-status.

Added button to settings pop-up to refresh library metadata through POST request

Website/apiConnector.js

@@ -168,6 +168,11 @@ function ChangeStyleSheet(sheet){
     PostData(uri);
 }
 
+function RefreshLibraryMetadata() {
+    var uri = `${apiUri}/Jobs/UpdateMetadata`;
+    PostData(uri);
+}
+
 function UpdateKomga(komgaUrl, komgaAuth){
     var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
     PostData(uri);

Website/index.html

@@ -98,12 +98,15 @@
               <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
             </div>
             <div>
-              <input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css">
+              <input type="checkbox" id="mangaHoverCheckbox" name="css-style" value="style_mangahover.css" onclick="updateCSS()">
               <label for="css-style"> Show manga titles and sources on hover</label><br>
             </div>
             <div>
               <input type="submit" value="Update" onclick="UpdateSettings()">
             </div>
+            <div>
+              <input type="submit" value="Refresh Library Metadata" style="width: fit-content;"onclick="RefreshLibraryMetadata()">
+            </div>
           </popup-content>
         </popup-window>
       </popup>

Website/interaction.js

@@ -101,6 +101,18 @@ function Setup(){
 }
 Setup();
 
+function updateCSS(){
+  if (document.getElementById("mangaHoverCheckbox").checked == true){
+    ChangeStyleSheet('hover')
+    document.getElementById('pagestyle').setAttribute('href', 'styles/style_mangahover.css');
+    //console.log('Changing theme to mangahover')
+  } else {
+    ChangeStyleSheet('default');
+    document.getElementById('pagestyle').setAttribute('href', 'styles/style_default.css');
+    //console.log('Changing theme to default')
+  }
+}
+
 function ResetContent(){
     //Delete everything
     tasksContent.replaceChildren();
@@ -163,21 +175,54 @@ function GetNewMangaItems(){
 
 //Returns a new "Publication" Item to display in the jobs section
 function CreateManga(manga, connector){
+  //Create a new publication and set an internal ID
     var mangaElement = document.createElement('publication');
     mangaElement.id = GetValidSelector(manga.internalId);
+    
+  //Append the cover image to the publication
     var mangaImage = document.createElement('img');
     mangaImage.src = GetCoverUrl(manga.internalId);
     mangaElement.appendChild(mangaImage);
+  
+//Append the publication information to the publication
+    //console.log(manga);
     var info = document.createElement('publication-information');
     var connectorName = document.createElement('connector-name');
     connectorName.innerText = connector;
     connectorName.className = "pill";
     connectorName.style.backgroundColor = stringToColour(connector);
     info.appendChild(connectorName);
+
     var mangaName = document.createElement('publication-name');
     mangaName.innerText = manga.sortName;
+
+    //Create the publication status indicator
+    var releaseStatus = document.createElement('publication-status');
+    releaseStatus.setAttribute("release-status", manga.releaseStatus);
+    switch(manga.releaseStatus){
+      case 0:
+        releaseStatus.setAttribute("release-status", "Ongoing");
+        break;
+      case 1:
+        releaseStatus.setAttribute("release-status", "Completed");
+        break;
+      case 2:
+        releaseStatus.setAttribute("release-status", "On Hiatus");
+        break;
+      case 3:
+        releaseStatus.setAttribute("release-status", "Cancelled");
+        break;
+      case 4:
+        releaseStatus.setAttribute("release-status", "Upcoming");
+        break;
+      default:
+        releaseStatus.setAttribute("release-status", "Status Unavailable");
+        break;
+    }
+
     info.appendChild(mangaName);
     mangaElement.appendChild(info);
+    mangaElement.appendChild(releaseStatus);                  //Append the release status indicator to the publication element
     return mangaElement;
 }
 
@@ -380,15 +425,6 @@ function UpdateSettings(){
     Setup();
   }
   
-  // If the checkbox is checked, set the style to style_mangahover.css and 
-  if (document.getElementById("mangaHoverCheckbox").checked == true){
-    ChangeStyleSheet('hover')
-    //console.log('Changing theme to mangahover')
-  } else {
-    ChangeStyleSheet('default');
-    //console.log('Changing theme to default')
-  }
-  
   if(settingKomgaUrl.value != "" &&
      settingKomgaUser.value != "" &&
      settingKomgaPass.value != ""){

Website/styles/style_default.css

@@ -100,6 +100,8 @@ viewport {
     flex-grow: 1;
     height: 100%;
     overflow-y: scroll;
+    scrollbar-color: var(--accent-color) var(--primary-color);
+    scrollbar-width: thin;
 }
 
 footer {
@@ -203,7 +205,7 @@ publication{
     height: 300px;
     border-radius: 5px;
     margin: 10px 10px;
-    padding: 15px 20px;
+    padding: 15px 19px;
     position: relative;
     flex-shrink: 0;
 }
@@ -250,6 +252,69 @@ publication-name{
     font-weight: bold;
 }
 
+publication-status {
+    display:block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
+}
+
+publication-status::after {
+    content: attr(release-status);
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    visibility: hidden;
+
+    /*Text Properties*/
+    font-size:10pt;
+    font-weight:bold;
+    color:white;
+    text-align: center;
+
+    /*Size*/
+    padding: 3px 8px;
+    border-radius: 6px;
+    border: 0px;
+    background-color: inherit;
+}
+
+publication-status:hover::after{
+    visibility:visible;
+}
+
+
+publication-status[release-status="Ongoing"]{
+    background-color: limegreen;
+}
+
+publication-status[release-status="Completed"]{
+    background-color: blueviolet;
+}
+
+publication-status[release-status="On Hiatus"]{
+    background-color: darkorange;
+}
+
+publication-status[release-status="Cancelled"]{
+    background-color: firebrick;
+}
+
+publication-status[release-status="Upcoming"]{
+    background-color: aqua;
+}
+
+publication-status[release-status="Status Unavailable"]{
+    background-color: gray;
+}
+
 publication img {
     position: absolute;
     top: 0;

Website/styles/style_mangahover.css

@@ -100,6 +100,8 @@ viewport {
     flex-grow: 1;
     height: 100%;
     overflow-y: scroll;
+    scrollbar-color: var(--accent-color) var(--primary-color);
+    scrollbar-width: thin;
 }
 
 footer {
@@ -203,7 +205,7 @@ publication{
     height: 300px;
     border-radius: 5px;
     margin: 10px 10px;
-    padding: 15px 20px;
+    padding: 15px 19px;
     position: relative;
     flex-shrink: 0;
 }
@@ -251,6 +253,70 @@ publication-name{
     font-weight: bold;
 }
 
+publication-status {
+    display:block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
+}
+
+publication-status::after {
+    content: attr(release-status);
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    visibility: hidden;
+
+    /*Text Properties*/
+    font-size:10pt;
+    font-weight:bold;
+    color:white;
+    text-align: center;
+
+    /*Size*/
+    padding: 3px 8px;
+    border-radius: 6px;
+    border: 0px;
+    background-color: inherit;
+}
+
+publication-status:hover::after{
+    visibility:visible;
+}
+
+
+publication-status[release-status="Ongoing"]{
+    background-color: limegreen;
+}
+
+publication-status[release-status="Completed"]{
+    background-color: blueviolet;
+}
+
+publication-status[release-status="On Hiatus"]{
+    background-color: darkorange;
+}
+
+publication-status[release-status="Cancelled"]{
+    background-color: firebrick;
+}
+
+publication-status[release-status="Upcoming"]{
+    background-color: aqua;
+}
+
+publication-status[release-status="Status Unavailable"]{
+    background-color: gray;
+}
+
+
 publication-details {
     display: flex;
     flex-direction: column;