glax/Tranga
2
0
Fork 0
Code

Website:

Browse Source 
New task-Creation dialog
Redesigned Settings dialog
This commit is contained in:
glax 2023-06-08 19:25:28 +02:00
parent dc83cc2194
commit c685bd622f
3 changed files with 276 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
Website/index.html
View File

@ -25,7 +25,7 @@
<p>+</p> <p>+</p>
</div> </div>
<publication> <publication>
<img src="media/cover.jpg"> <img alt="cover" src="media/cover.jpg">
<publication-information> <publication-information>
<connector-name class="pill">MangaDex</connector-name> <connector-name class="pill">MangaDex</connector-name>
<publication-name>Tensei Pandemic</publication-name> <publication-name>Tensei Pandemic</publication-name>
@ -33,28 +33,56 @@
</publication> </publication>
</content> </content>
<popup id="addTaskPopup"> <popup id="selectPublicationPopup">
<blur-background id="blurBackgroundTaskPopup"></blur-background> <blur-background id="blurBackgroundTaskPopup"></blur-background>
<addtask-window> <popup-window>
<window-titlebar> <popup-title>Select Publication</popup-title>
<p>Add Task</p> <popup-content>
<img id="closePopupImg" src="media/close-x.svg" alt="Close"> <div>
</window-titlebar> <label for="connectors">Connector</label>
<window-content>
<addtask-settings>
<addtask-setting><label for="selectReccurrence">Recurrence</label><input id="selectReccurrence" type="time" value="01:00:00" step="3600"></addtask-setting>
<addtask-setting><label for="connectors">Connector</label>
<select id="connectors"> <select id="connectors">
<option value=""></option> <option value=""></option>
</select> </select>
</addtask-setting> </div>
<addtask-setting><label for="searchPublicationQuery">Search Title</label><input id="searchPublicationQuery" type="text"></addtask-setting> <div>
<input type="submit" value="Search" onclick="NewSearch();"> <label for="searchPublicationQuery">Search Title</label><input id="searchPublicationQuery" type="text"></addtask-setting>
</addtask-settings> </div>
<input type="submit" value="Search" style="font-weight: bolder" onclick="NewSearch();">
</popup-content>
<div id="taskSelectOutput"></div> <div id="taskSelectOutput"></div>
</window-content> </popup-window>
</addtask-window>
</popup> </popup>
<popup id="createMonitorTaskPopup">
<blur-background id="blurBackgroundCreateMonitorTaskPopup"></blur-background>
<popup-window>
<popup-title>Create Task: Monitor Publication</popup-title>
<popup-content>
<div>
<p>Every</p>
<label for="hours">Hours: </label><input id="hours" type="number" value="3" min="0" max="23">
<label for="minutes">Minutes: </label><input id="minutes" type="number" value="0" min="0" max="59">
<input type="submit" value="Create" onclick="AddMonitorTask()">
</div>
</popup-content>
</popup-window>
</popup>
<popup id="createDownloadChaptersTask">
<blur-background id="blurBackgroundCreateDownloadChaptersTask"></blur-background>
<popup-window>
<popup-title>Create Task: Download Chapter(s)</popup-title>
<popup-content>
<div>
<label for="selectedChapters">Chapters:</label><input id="selectedChapters" placeholder="Select"><input type="submit" value="Select" onclick="DownloadChapterTaskClick()">
</div>
<div id="chapterOutput">
</div>
</popup-content>
</popup-window>
</popup>
<popup id="publicationViewerPopup"> <popup id="publicationViewerPopup">
<blur-background id="blurBackgroundPublicationPopup"></blur-background> <blur-background id="blurBackgroundPublicationPopup"></blur-background>
<publication-viewer> <publication-viewer>
@ -71,15 +99,18 @@
<publication-interactions> <publication-interactions>
<publication-starttask>Start Task ▶️</publication-starttask> <publication-starttask>Start Task ▶️</publication-starttask>
<publication-delete>Delete Task ❌</publication-delete> <publication-delete>Delete Task ❌</publication-delete>
<publication-add>Add Task ➕</publication-add> <publication-add id="createMonitorTaskButton">Monitor ➕</publication-add>
<publication-add id="createDownloadChapterTaskButton">Download Chapter ➕</publication-add>
</publication-interactions> </publication-interactions>
</publication-information> </publication-information>
</publication-viewer> </publication-viewer>
</popup> </popup>
<popup id="settingsPopup"> <popup id="settingsPopup">
<blur-background id="blurBackgroundSettingsPopup"></blur-background> <blur-background id="blurBackgroundSettingsPopup"></blur-background>
<settings> <popup-window>
<span style="font-weight: bold; text-align: center; font-size: 16pt;">Settings</span> <popup-title>Settings</popup-title>
<popup-content>
<div> <div>
<p class="title">Download Location:</p> <p class="title">Download Location:</p>
<span id="downloadLocation"></span> <span id="downloadLocation"></span>
@ -88,25 +119,26 @@
<p class="title">API-URI</p> <p class="title">API-URI</p>
<label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri"> <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
</div> </div>
<komga-settings> <div>
<span class="title">Komga</span> <span class="title">Komga</span>
<div>Configured: <span id="komgaConfigured">✅❌</span></div> <div>Configured: <span id="komgaConfigured">✅❌</span></div>
<label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text"> <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
<label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text"> <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
<label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password"> <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
</komga-settings> </div>
<kavita-settings> <div>
<span class="title">Kavita</span> <span class="title">Kavita</span>
<div>Configured: <span id="kavitaConfigured">✅❌</span></div> <div>Configured: <span id="kavitaConfigured">✅❌</span></div>
<label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text"> <label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
<label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text"> <label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
<label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password"> <label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
</kavita-settings> </div>
<div> <div>
<label for="libraryUpdateTime" style="margin-right: 5px;">Update Time</label><input id="libraryUpdateTime" type="time" value="00:01:00" step="10"> <label for="libraryUpdateTime" style="margin-right: 5px;">Update Time</label><input id="libraryUpdateTime" type="time" value="00:01:00" step="10">
<input type="submit" value="Update" onclick="UpdateLibrarySettings()"> <input type="submit" value="Update" onclick="UpdateLibrarySettings()">
</div> </div>
</settings> </popup-content>
</popup-window>
</popup> </popup>
</viewport> </viewport>
<footer> <footer>

104
Website/interaction.js
View File

@ -10,7 +10,13 @@ const settingsPopup = document.querySelector("#settingsPopup");
const settingsCog = document.querySelector("#settingscog"); const settingsCog = document.querySelector("#settingscog");
const selectRecurrence = document.querySelector("#selectReccurrence"); const selectRecurrence = document.querySelector("#selectReccurrence");
const tasksContent = document.querySelector("content"); const tasksContent = document.querySelector("content");
const addTaskPopup = document.querySelector("#addTaskPopup"); const selectPublicationPopup = document.querySelector("#selectPublicationPopup");
const createMonitorTaskButton = document.querySelector("#createMonitorTaskButton");
const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterTaskButton");
const createMonitorTaskPopup = document.querySelector("#createMonitorTaskPopup");
const createDownloadChaptersTask = document.querySelector("#createDownloadChaptersTask");
const chapterOutput = document.querySelector("#chapterOutput");
const selectedChapters = document.querySelector("#selectedChapters");
const publicationViewerPopup = document.querySelector("#publicationViewerPopup"); const publicationViewerPopup = document.querySelector("#publicationViewerPopup");
const publicationViewerWindow = document.querySelector("publication-viewer"); const publicationViewerWindow = document.querySelector("publication-viewer");
const publicationViewerDescription = document.querySelector("#publicationViewerDescription"); const publicationViewerDescription = document.querySelector("#publicationViewerDescription");
@ -19,9 +25,7 @@ const publicationViewerTags = document.querySelector("#publicationViewerTags");
const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor"); const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor");
const pubviewcover = document.querySelector("#pubviewcover"); const pubviewcover = document.querySelector("#pubviewcover");
const publicationDelete = document.querySelector("publication-delete"); const publicationDelete = document.querySelector("publication-delete");
const publicationAdd = document.querySelector("publication-add");
const publicationTaskStart = document.querySelector("publication-starttask"); const publicationTaskStart = document.querySelector("publication-starttask");
const closetaskpopup = document.querySelector("#closePopupImg");
const settingDownloadLocation = document.querySelector("#downloadLocation"); const settingDownloadLocation = document.querySelector("#downloadLocation");
const settingKomgaUrl = document.querySelector("#komgaUrl"); const settingKomgaUrl = document.querySelector("#komgaUrl");
const settingKomgaUser = document.querySelector("#komgaUsername"); const settingKomgaUser = document.querySelector("#komgaUsername");
@ -41,12 +45,25 @@ const tagTasksPopupContent = document.querySelector("footer-tag-content");
searchbox.addEventListener("keyup", (event) => FilterResults()); searchbox.addEventListener("keyup", (event) => FilterResults());
settingsCog.addEventListener("click", () => OpenSettings()); settingsCog.addEventListener("click", () => OpenSettings());
document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => HideSettings()); document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => settingsPopup.style.display = "none");
closetaskpopup.addEventListener("click", () => HideAddTaskPopup()); document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => selectPublicationPopup.style.display = "none");
document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup());
document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup()); document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
document.querySelector("#blurBackgroundCreateMonitorTaskPopup").addEventListener("click", () => createMonitorTaskPopup.style.display = "none");
document.querySelector("#blurBackgroundCreateDownloadChaptersTask").addEventListener("click", () => createDownloadChaptersTask.style.display = "none");
selectedChapters.addEventListener("keypress", (event) => {
if(event.key === "Enter"){
DownloadChapterTaskClick();
}
})
publicationDelete.addEventListener("click", () => DeleteTaskClick()); publicationDelete.addEventListener("click", () => DeleteTaskClick());
publicationAdd.addEventListener("click", () => AddTaskClick()); createMonitorTaskButton.addEventListener("click", () => {
HidePublicationPopup();
createMonitorTaskPopup.style.display = "block";
});
createDownloadChapterTaskButton.addEventListener("click", () => {
HidePublicationPopup();
OpenDownloadChapterTaskPopup();
})
publicationTaskStart.addEventListener("click", () => StartTaskClick()); publicationTaskStart.addEventListener("click", () => StartTaskClick());
settingApiUri.addEventListener("keypress", (event) => { settingApiUri.addEventListener("keypress", (event) => {
if(event.key === "Enter"){ if(event.key === "Enter"){
@ -82,14 +99,10 @@ GetAvailableControllers()
function NewSearch(){ function NewSearch(){
//Disable inputs //Disable inputs
selectRecurrence.disabled = true;
connectorSelect.disabled = true; connectorSelect.disabled = true;
searchPublicationQuery.disabled = true; searchPublicationQuery.disabled = true;
//Waitcursor //Waitcursor
document.body.style.cursor = "wait"; document.body.style.cursor = "wait";
selectRecurrence.style.cursor = "wait";
connectorSelect.style.cursor = "wait";
searchPublicationQuery.style.cursor = "wait";
//Empty previous results //Empty previous results
selectPublication.replaceChildren(); selectPublication.replaceChildren();
@ -105,14 +118,10 @@ function NewSearch(){
)) ))
.then(() => { .then(() => {
//Re-enable inputs //Re-enable inputs
selectRecurrence.disabled = false;
connectorSelect.disabled = false; connectorSelect.disabled = false;
searchPublicationQuery.disabled = false; searchPublicationQuery.disabled = false;
//Cursor //Cursor
document.body.style.cursor = "initial"; document.body.style.cursor = "initial";
selectRecurrence.style.cursor = "initial";
connectorSelect.style.cursor = "initial";
searchPublicationQuery.style.cursor = "initial";
}); });
} }
@ -137,18 +146,57 @@ function CreatePublication(publication, connector){
return publicationElement; return publicationElement;
} }
function AddMonitorTask(){
var hours = document.querySelector("#hours").value;
var minutes = document.querySelector("#minutes").value;
CreateMonitorTask(connectorSelect.value, toEditId, `${hours}:${minutes}:00`, "en");
HidePublicationPopup();
createMonitorTaskPopup.style.display = "none";
selectPublicationPopup.style.display = "none";
}
function OpenDownloadChapterTaskPopup(){
createDownloadChaptersTask.style.display = "block";
GetChapters(toEditId, connectorSelect.value, "en").then((json) => {
var i = 0;
json.forEach(chapter => {
var chapterDom = document.createElement("div");
var indexDom = document.createElement("span");
indexDom.className = "index";
indexDom.innerText = i++;
chapterDom.appendChild(indexDom);
var volDom = document.createElement("span");
volDom.className = "vol";
volDom.innerText = chapter.volumeNumber;
chapterDom.appendChild(volDom);
var chDom = document.createElement("span");
chDom.className = "ch";
chDom.innerText = chapter.chapterNumber;
chapterDom.appendChild(chDom);
var titleDom = document.createElement("span");
titleDom.innerText = chapter.name;
chapterDom.appendChild(titleDom);
chapterOutput.appendChild(chapterDom);
});
});
}
function DownloadChapterTaskClick(){
CreateDownloadChaptersTask(connectorSelect.value, toEditId, selectedChapters.value, "en");
HidePublicationPopup();
createDownloadChaptersTask.style.display = "none";
selectPublicationPopup.style.display = "none";
}
function DeleteTaskClick(){ function DeleteTaskClick(){
taskToDelete = tasks.filter(tTask => tTask.publication.internalId === toEditId)[0]; taskToDelete = tasks.filter(tTask => tTask.publication.internalId === toEditId)[0];
DeleteTask("DownloadNewChapters", taskToDelete.connectorName, toEditId); DeleteTask("DownloadNewChapters", taskToDelete.connectorName, toEditId);
HidePublicationPopup(); HidePublicationPopup();
} }
function AddTaskClick(){
CreateTask("DownloadNewChapters", selectRecurrence.value, connectorSelect.value, toEditId, "en")
HideAddTaskPopup();
HidePublicationPopup();
}
function StartTaskClick(){ function StartTaskClick(){
var toEditTask = tasks.filter(task => task.publication.internalId == toEditId)[0]; var toEditTask = tasks.filter(task => task.publication.internalId == toEditId)[0];
StartTask("DownloadNewChapters", toEditTask.connectorName, toEditId); StartTask("DownloadNewChapters", toEditTask.connectorName, toEditId);
@ -194,12 +242,14 @@ function ShowPublicationViewerWindow(publicationId, event, add){
//Check what action should be listed //Check what action should be listed
if(add){ if(add){
publicationAdd.style.display = "initial"; createMonitorTaskButton.style.display = "initial";
createDownloadChapterTaskButton.style.display = "initial";
publicationDelete.style.display = "none"; publicationDelete.style.display = "none";
publicationTaskStart.style.display = "none"; publicationTaskStart.style.display = "none";
} }
else{ else{
publicationAdd.style.display = "none"; createMonitorTaskButton.style.display = "none";
createDownloadChapterTaskButton.style.display = "none";
publicationDelete.style.display = "initial"; publicationDelete.style.display = "initial";
publicationTaskStart.style.display = "initial"; publicationTaskStart.style.display = "initial";
} }
@ -211,10 +261,7 @@ function HidePublicationPopup(){
function ShowNewTaskWindow(){ function ShowNewTaskWindow(){
selectPublication.replaceChildren(); selectPublication.replaceChildren();
addTaskPopup.style.display = "block"; selectPublicationPopup.style.display = "flex";
}
function HideAddTaskPopup(){
addTaskPopup.style.display = "none";
} }
@ -234,9 +281,6 @@ function OpenSettings(){
settingsPopup.style.display = "flex"; settingsPopup.style.display = "flex";
} }
function HideSettings(){
settingsPopup.style.display = "none";
}
function GetSettingsClick(){ function GetSettingsClick(){
settingApiUri.value = ""; settingApiUri.value = "";

227
Website/style.css
View File

@ -147,46 +147,22 @@ content {
align-content: start; align-content: start;
} }
settings {
width: 50%;
background-color: var(--accent-color);
display: flex;
flex-direction: column;
z-index: 10;
position: absolute;
left: 25%;
top: 100px;
border-radius: 5px;
padding: 10px 0;
}
#settingsPopup{ #settingsPopup{
z-index: 10; z-index: 10;
} }
settings > * { #settingsPopup popup-content{
margin: 0 20%;
}
settings input {
margin: 3px 0;
padding: 3px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.2);
width: 100%;
}
settings .title {
font-weight: bolder;
font-size: 14pt;
margin: 15px 0 2px 0;
}
komga-settings {
margin-top: 20px;
display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; align-items: start;
margin: 15px 10px;
}
#settingsPopup popup-content > * {
margin: 5px 10px;
}
#settingsPopup popup-content .title {
font-weight: bolder;
} }
#addPublication { #addPublication {
@ -281,6 +257,112 @@ popup{
left: 0; left: 0;
position: fixed; position: fixed;
z-index: 2; z-index: 2;
flex-direction: column;
}
popup popup-window {
position: absolute;
z-index: 3;
left: 25%;
top: 100px;
width: 50%;
display: flex;
flex-direction: column;
background-color: var(--second-background-color);
border-radius: 3px;
overflow: hidden;
}
popup popup-window popup-title {
height: 30px;
font-size: 14pt;
font-weight: bolder;
padding: 5px 10px;
margin: 0;
display: flex;
align-items: center;
background-color: var(--primary-color);
color: var(--accent-color)
}
popup popup-window popup-content{
margin: 15px 10px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
popup popup-window popup-content div > * {
margin: 2px 3px 0 0;
}
popup popup-window popup-content input, select {
padding: 3px 4px;
width: 130px;
border: 1px solid lightgrey;
background-color: var(--accent-color);
border-radius: 3px;
}
#selectPublicationPopup publication {
width: 150px;
height: 250px;
}
#createTaskPopup {
z-index: 7;
}
#createTaskPopup input {
height: 30px;
width: 200px;
}
#createMonitorTaskPopup, #createDownloadChaptersTask {
z-index: 9;
}
#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;
} }
blur-background { blur-background {
@ -292,79 +374,6 @@ blur-background {
opacity: 0.5; opacity: 0.5;
} }
addtask-window {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
position: absolute;
left: 12.5%;
top: 15%;
width: 75%;
min-height: 70%;
max-height: 80%;
padding: 0;
background-color: var(--accent-color);
border-radius: 5px;
}
window-titlebar {
width: 100%;
height: 60px;
background-color: var(--primary-color);
border-radius: 5px 5px 0 0;
color: var(--accent-color);
display: flex block;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
window-titlebar p {
margin: 0 30px;
font-size: 14pt;
font-weight: bolder;
letter-spacing: 1px;
}
window-titlebar #closePopupImg {
height: 70%;
cursor: pointer;
margin-right: 20px;
filter: invert(100%) sepia(0%) saturate(100%) hue-rotate(115deg) brightness(116%) contrast(101%);
}
window-content {
display: flex;
flex-direction: column;
padding: 20px 5%;
overflow-x: scroll;
}
addtask-settings{
display: flex;
justify-content: center;
align-items: center;
}
addtask-settings select, addtask-settings input{
padding: 5px;
font-size: 10pt;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 3px;
background-color: transparent;
margin: 10px 0;
width: 150px;
}
addtask-settings label {
font-weight: bolder;
margin: 0 5px;
}
addtask-settings addtask-setting{
margin: 0 15px;
}
#taskSelectOutput{ #taskSelectOutput{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -512,7 +521,7 @@ footer-tag-popup::before{
border-left: 10px solid transparent; border-left: 10px solid transparent;
border-top: 10px solid var(--second-background-color); border-top: 10px solid var(--second-background-color);
border-bottom: 10px solid transparent; border-bottom: 10px solid transparent;
left: 0px; left: 0;
bottom: -17px; bottom: -17px;
border-radius: 0 0 0 5px; border-radius: 0 0 0 5px;
} }