diff --git a/Website/apiConnector.js b/Website/apiConnector.js
index f27b912..67e94bd 100644
--- a/Website/apiConnector.js
+++ b/Website/apiConnector.js
@@ -152,6 +152,12 @@ async function GetRateLimits() {
return json;
}
+async function GetMangaChapters(connector, id) {
+ var uri = `${apiUri}/Manga/Chapters?connector=${connector}&internalId=${id}`
+ let json = await GetData(uri);
+ return json;
+}
+
function CreateMonitorJob(connector, internalId, language, interval, folder = null, chapterNo){
var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=${interval}&translatedLanguage=${language}&ignoreBelowChapterNum=${chapterNo}`;
if (folder != '') {
@@ -181,6 +187,11 @@ function RefreshLibraryMetadata() {
PostData(uri);
}
+function RefreshMangaMetadata(id) {
+ var uri = `${apiUri}/Jobs/UpdateMetadata?internalId=${id}`;
+ PostData(uri);
+}
+
async function DownloadLogs() {
var uri = `${apiUri}/LogFile`;
@@ -367,4 +378,4 @@ async function GetLogmessages(count){
let json = await GetData(uri);
console.log(json);
return json;
-}
\ No newline at end of file
+}
diff --git a/Website/index.html b/Website/index.html
index 7260bd0..93250b2 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -7,6 +7,9 @@
+
+
+
@@ -254,24 +257,32 @@
diff --git a/Website/interaction.js b/Website/interaction.js
index 5c6a0c1..5434535 100644
--- a/Website/interaction.js
+++ b/Website/interaction.js
@@ -19,11 +19,6 @@ const filterContent = document.querySelector("#filterContent");
const settingsCog = document.querySelector("#settingscog");
const filterFunnel = document.querySelector("#filterFunnel");
const tasksContent = document.querySelector("content");
-const createMonitorTaskButton = document.querySelector("#createMonitoJobButton");
-const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterJobButton");
-const startJobButton = document.querySelector("#startJobButton");
-const cancelJobButton = document.querySelector("#cancelJobButton");
-const deleteJobButton = document.querySelector("#deleteJobButton");
//Manga viewer popup
const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
@@ -31,8 +26,10 @@ 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 mangaViewConn = document.querySelector('#publicationViewerConnector');
+const mangaViewStatus = document.querySelector('#publicationViewerStatus');
+const mangaViewChapterNo = document.querySelector('#publicationViewerChapterNo');
//General Rate Limits
const defaultRL = document.querySelector("#defaultRL");
@@ -475,7 +472,7 @@ function CreateSearchResult(manga, connector) {
//Description
var description = document.createElement('div');
- description.className = 'mangaDescription';
+ description.className = 'mangaDescription abbreviated';
description.innerText = manga.description;
mangaDetails.appendChild(description);
@@ -578,60 +575,93 @@ function AddManga(id, connector) {
CreateMonitorJob(mangaConnector, mangaID, mangaLanguage, mangaInterval, mangaFolder, mangaChapter);
}
-startJobButton.addEventListener("click", () => {
- StartJob(selectedJob.id);
- mangaViewerPopup.style.display = "none";
-});
-cancelJobButton.addEventListener("click", () => {
- CancelJob(selectedJob.id);
- mangaViewerPopup.style.display = "none";
-});
-deleteJobButton.addEventListener("click", () => {
- RemoveJob(selectedJob.id);
- UpdateJobs();
- mangaViewerPopup.style.display = "none";
-});
-
function ShowMangaWindow(job, manga, event, add){
selectedManga = manga;
selectedJob = job;
- //Show popup
- mangaViewerPopup.style.display = "block";
- //Set position to mouse-position
- if(event.clientY < window.innerHeight - mangaViewerWindow.offsetHeight)
- mangaViewerWindow.style.top = `${event.clientY}px`;
- else
- mangaViewerWindow.style.top = `${event.clientY - mangaViewerWindow.offsetHeight}px`;
-
- if(event.clientX < window.innerWidth - mangaViewerWindow.offsetWidth)
- mangaViewerWindow.style.left = `${event.clientX}px`;
- else
- mangaViewerWindow.style.left = `${event.clientX - mangaViewerWindow.offsetWidth}px`;
-
- //Edit information inside the window
+ //Title
mangaViewerName.innerText = manga.sortName;
- mangaViewerTags.innerText = manga.tags.join(", ");
+ mangaViewerName.href = manga.websiteUrl;
+
+ //Author and Genre Tag Cloud
+ mangaViewerTags.replaceChildren();
+ 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);
+
+ mangaViewerTags.appendChild(authorCard);
+ });
+ manga.tags.forEach(tag => {
+ var tagElement = document.createElement('manga-tag');
+ tagElement.innerText = tag;
+ mangaViewerTags.appendChild(tagElement);
+ });
+
+ //Description
mangaViewerDescription.innerText = manga.description;
- mangaViewerAuthor.innerText = manga.authors.join(',');
+
+ //Image and Connector
mangaViewCover.src = GetCoverUrl(manga.internalId);
- toEditId = manga.internalId;
-
- //Check what action should be listed
- if(add){
- createMonitorJobButton.style.display = "initial";
- createDownloadChapterJobButton.style.display = "none";
- cancelJobButton.style.display = "none";
- startJobButton.style.display = "none";
- deleteJobButton.style.display = "none";
- }
- else{
- createMonitorJobButton.style.display = "none";
- createDownloadChapterJobButton.style.display = "none";
- cancelJobButton.style.display = "initial";
- startJobButton.style.display = "initial";
- deleteJobButton.style.display = "initial";
+ mangaViewConn.innerText = job.mangaConnector.name.toUpperCase();
+ mangaViewConn.style.backgroundColor = stringToColour(job.mangaConnector.name);
+ mangaViewChapterNo.innerText = manga.latestChapterAvailable.toString();
+
+ //Release Status
+ switch(manga.releaseStatus){
+ case 0:
+ mangaViewStatus.setAttribute("release-status", "Ongoing");
+ mangaViewStatus.innerText = "Ongoing";
+ break;
+ case 1:
+ mangaViewStatus.setAttribute("release-status", "Completed");
+ mangaViewStatus.innerText = "Completed";
+ break;
+ case 2:
+ mangaViewStatus.setAttribute("release-status", "On Hiatus");
+ mangaViewStatus.innerText = "On Hiatus";
+ break;
+ case 3:
+ mangaViewStatus.setAttribute("release-status", "Cancelled");
+ mangaViewStatus.innerText = "Cancelled";
+ break;
+ case 4:
+ mangaViewStatus.setAttribute("release-status", "Upcoming");
+ mangaViewStatus.innerText = "Upcoming";
+ break;
+ default:
+ mangaViewStatus.setAttribute("release-status", "Status Unavailable");
+ mangaViewStatus.innerText = "Status Unavailable";
+ break;
}
+
+ // //Individual Manga Chapters
+ // chapters = document.querySelector('#publicationViewerChapters');
+ // chapters.replaceChildren();
+ // var mangaChapters = GetMangaChapters(job.mangaConnector.name, manga.internalId);
+
+ // mangaChapters.then(value => {
+
+ // sortedChapters = value.sort((a, b) => b.chapterNumber - a.chapterNumber);
+
+ // sortedChapters.forEach(chapter => {
+ // chapterNo = chapter.chapterNumber;
+ // var chapterElement = document.createElement('chapter-row');
+ // chapterElement.innerText = chapter.fileName;
+ // chapters.appendChild(chapterElement);
+ // })
+ // }).then(() => {
+ // //Show popup
+ // mangaViewerPopup.style.display = "block";
+ // });
+
+ mangaViewerPopup.style.display = "block"
}
function HidePublicationPopup(){
diff --git a/Website/styles/base.css b/Website/styles/base.css
index 68de789..031a17f 100644
--- a/Website/styles/base.css
+++ b/Website/styles/base.css
@@ -20,6 +20,7 @@ body{
background-color: var(--background-color);
font-family: "Inter", sans-serif;
overflow-x: hidden;
+ font-weight: 400;
}
wrapper {
@@ -420,11 +421,14 @@ popup popup-window {
overflow: hidden;
}
-popup#jobStatusView popup-window {
- left: 10%;
- top: 10%;
- height: 80%;
- width: 80%;
+/*Remove below when individual chapter download is implemented*/
+#publicationViewerPopup > popup-window {
+ height: fit-content;
+ width: auto;
+ max-width: 80%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
popup-content{
@@ -642,9 +646,9 @@ a:active {
user-select: none; /* Standard syntax */
}
-.section-button#reset:hover {
- color: red;
- border-color: red;
+#reset:hover {
+ color: rgb(255, 44, 29);
+ border-color: rgb(255, 44, 29);
}
.section-buttons-container > .section-button:hover {
border-color: var(--secondary-color);
@@ -711,111 +715,6 @@ blur-background {
z-index: 5;
}
-publication-viewer{
- display: block;
- width: 460px;
- position: absolute;
- top: 200px;
- left: 400px;
- background-color: var(--accent-color);
- border-radius: 5px;
- overflow: hidden;
- padding: 15px;
-}
-
-publication-viewer::after{
- content: '';
- position: absolute;
- left: 0; top: 0;
- border-radius: 5px;
- width: 100%;
- height: 100%;
- background: rgba(0,0,0,0.8);
- backdrop-filter: blur(3px);
-}
-
-publication-viewer img {
- position: absolute;
- left: 0;
- top: 0;
- height: 100%;
- width: 100%;
- object-fit: cover;
- border-radius: 5px;
- z-index: 0;
-}
-
-publication-viewer publication-details > * {
- margin: 5px 0;
-}
-
-publication-viewer publication-details publication-name {
- width: initial;
- overflow-x: scroll;
- white-space: nowrap;
- scrollbar-width: none;
-}
-
-publication-viewer publication-details publication-tags::before {
- content: "Tags";
- display: block;
- font-weight: bolder;
-}
-
-publication-viewer publication-details publication-tags {
- overflow-x: scroll;
- white-space: nowrap;
- scrollbar-width: none;
-}
-
-publication-viewer publication-details publication-author::before {
- content: "Author: ";
- font-weight: bolder;
-}
-
-publication-viewer publication-details publication-description::before {
- content: "Description";
- display: block;
- font-weight: bolder;
-}
-
-publication-viewer publication-details publication-description {
- font-size: 12pt;
- margin: 5px 0;
- height: 145px;
- overflow-x: scroll;
-}
-
-publication-viewer publication-details publication-interactions {
- display: flex;
- flex-direction: row;
- justify-content: end;
- align-items: start;
- width: 100%;
-}
-
-publication-viewer publication-details publication-interactions > * {
- margin: 0 10px;
- font-size: 16pt;
- cursor: pointer;
-}
-
-publication-viewer publication-details publication-interactions publication-starttask {
- color: var(--secondary-color);
-}
-
-publication-viewer publication-details publication-interactions publication-delete {
- color: red;
-}
-
-publication-view publication-details publication-interactions publication-canceltask {
- color: yellow;
-}
-
-publication-viewer publication-details publication-interactions publication-add {
- color: limegreen;
-}
-
footer-tag-popup {
display: none;
padding: 2px 4px;
@@ -920,12 +819,14 @@ popup-content #loaderdiv {
img-container {
height: 300px;
- width: 200px;
+ width: 180px;
position: relative;
left: 0;
top: 0;
border-radius: 10px;
overflow: hidden;
+ flex-shrink: 0;
+ flex-grow: 0;
}
img-container > img {
@@ -954,6 +855,43 @@ manga-connector {
text-align: center;
}
+manga-details {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ margin: 2px;
+}
+
+manga-details > .mangaDescription {
+ width: 100%;
+}
+
+manga-chapter {
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+ overflow-y: auto;
+ overflow-x: hidden;
+ border-style: solid;
+ border-width: 2px;
+ margin: 5px;
+ border-radius: 10px;
+ border-color: #bbb;
+ scrollbar-width: thin;
+ scrollbar-color: var(--secondary-color) var(--second-background-color);
+}
+
+chapter-row {
+ font-size: 12pt;
+ width: 100%;
+ border-style: solid;
+ border-color: #ccc;
+ border-width: 1px;
+ padding-left: 50px;
+ padding-top: 7px;
+ padding-bottom: 7px;
+}
+
span.latest-chapter-no {
position: absolute;
right: 5px;
@@ -1008,11 +946,11 @@ div.new-manga-download-settings {
@media only screen and (max-width: 768px) {
/* For mobile phones: */
- .section-item > img-container {
+ img-container {
display: none;
}
- tag-cloud {
+ .section-item > tag-cloud {
display: none !important;
}
.new-manga-download-settings > row, .downloadManga, border-bar-button.in-library {
@@ -1158,6 +1096,16 @@ author-tag > img {
margin: 2px;
}
+.abbreviated {
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 10;
+ line-clamp: 10;
+ -webkit-box-orient: vertical;
+ text-overflow: ellipsis;
+ word-wrap: break-word;
+}
+
.downloadManga {
position: relative;
float: right;
-