glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Complete rewrite #2

Merged
glax merged 30 commits from cuttingedge into master 2023-09-19 17:02:12 +02:00
Conversation 0 Commits 30 Files Changed 11 +120 -157
3 changed files with 120 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d9ec9cb969 - Show all commits

11
Website/index.html
View File

@ -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>

99
Website/interaction.js
View File

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

167
Website/style.css
View File

@ -305,138 +305,55 @@ popup popup-window popup-content input, select {
border-radius: 3px;
}
#selectPublicationPopup publication {
width: 150px;
height: 250px;
#newMangaPopup > div {
z-index: 3;
position: relative;
}
#createTaskPopup {
z-index: 7;
#newMangaPopup > #newMangaPopupSelector {
width: 600px;
height: 40px;
margin: 80px auto 0;
}
#createTaskPopup input {
height: 30px;
width: 200px;
#newMangaPopup > div > #newMangaConnector, #newMangaTitle {
margin: 0;
display: inline-block;
}
#createMonitorTaskPopup, #createDownloadChaptersTask {
z-index: 9;
#newMangaPopup #newMangaConnector {
height: 40px;
width: 100px;
padding: 0 0 0 5px;
border-radius: 5px 0 0 5px;
border-right: 1px solid darkgray;
}
#createMonitorTaskPopup input[type="number"] {
width: 40px;
#newMangaPopup #newMangaTitle{
height: 40px;
width: 495px;
padding: 0 0 0 5px;
border-radius: 0 5px 5px 0;
border: 0;
}
#createDownloadChaptersTask popup-content {
flex-direction: column;
align-items: start;
#newMangaResult {
display: none;
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;
}
#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 {
display: block;
position: absolute;
height: 100%;
width: 60px;
left: 0;
top: 0;
object-fit: cover;
border-radius: 4px;
}
#downloadTasksPopup popup-content > div > span {
display: block;
position: absolute;
width: max-content;
}
#downloadTasksPopup popup-content > div > .pubTitle {
left: 70px;
top: 0;
}
#downloadTasksPopup popup-content > div > .chapterName {
left: 70px;
top: 28pt;
}
#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 .mangaResultItem {
width: 100%;
margin: 2px 0 !important;
}
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;
}