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

Done Better Task-Adder

Browse Source
This commit is contained in:
glax 2023-05-23 18:46:06 +02:00
parent 4bd54f096d
commit 8bf9df4419
3 changed files with 59 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Website/index.html
View File

@ -37,8 +37,8 @@
</publication> </publication>
</content> </content>
<popup> <popup id="addTaskPopup">
<blur-background></blur-background> <blur-background id="blurBackgroundTaskPopup"></blur-background>
<addtask-window> <addtask-window>
<window-titlebar> <window-titlebar>
<p>Add Task</p> <p>Add Task</p>
@ -57,6 +57,9 @@
<div id="taskSelectOutput"></div> <div id="taskSelectOutput"></div>
</window-content> </window-content>
</addtask-window> </addtask-window>
</popup>
<popup id="publicationViewerPopup">
<blur-background id="blurBackgroundPublicationPopup"></blur-background>
<publication-viewer> <publication-viewer>
<img id="pubviewcover" src="media/cover.jpg" alt="cover"> <img id="pubviewcover" src="media/cover.jpg" alt="cover">
<publication-information> <publication-information>

69
Website/interaction.js
View File

@ -30,9 +30,9 @@ const settingsTab = document.querySelector("#settingstab");
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 generalPopup = document.querySelector("popup"); const addTaskPopup = document.querySelector("#addTaskPopup");
const addTaskWindow = document.querySelector("addtask-window"); const publicationViewerPopup = document.querySelector("#publicationViewerPopup");
const publicationViewer = document.querySelector("publication-viewer"); const publicationViewerWindow = document.querySelector("publication-viewer");
const publicationViewerDescription = document.querySelector("#publicationViewerDescription"); const publicationViewerDescription = document.querySelector("#publicationViewerDescription");
const publicationViewerName = document.querySelector("#publicationViewerName"); const publicationViewerName = document.querySelector("#publicationViewerName");
const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor"); const publicationViewerAuthor = document.querySelector("#publicationViewerAuthor");
@ -42,10 +42,11 @@ const publicationAdd = document.querySelector("publication-add");
const closetaskpopup = document.querySelector("#closePopupImg"); const closetaskpopup = document.querySelector("#closePopupImg");
settingsCog.addEventListener("click", () => slide()); settingsCog.addEventListener("click", () => slide());
closetaskpopup.addEventListener("click", () => HidePopup()); closetaskpopup.addEventListener("click", () => HideAddTaskPopup());
document.querySelector("blur-background").addEventListener("click", () => HidePopup()); document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup());
document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
publicationDelete.addEventListener("click", () => DeleteTaskClick()); publicationDelete.addEventListener("click", () => DeleteTaskClick());
publicationAdd.addEventListener("click", () => CreateTask("DownloadNewChapters", selectRecurrence.value, connectorSelect.value, toEditId, "en")); publicationAdd.addEventListener("click", () => AddTaskClick());
/* /*
let availableTaskTypes; let availableTaskTypes;
@ -74,18 +75,27 @@ GetAvailableControllers()
searchPublicationQuery.addEventListener("keypress", (event) => { searchPublicationQuery.addEventListener("keypress", (event) => {
if(event.key === "Enter"){ if(event.key === "Enter"){
selectRecurrence.disabled = true;
connectorSelect.disabled = true;
searchPublicationQuery.disabled = true;
selectPublication.replaceChildren(); selectPublication.replaceChildren();
GetPublication(connectorSelect.value, searchPublicationQuery.value) GetPublication(connectorSelect.value, searchPublicationQuery.value)
//.then(json => console.log(json)); //.then(json => console.log(json));
.then(json => .then(json =>
json.forEach(publication => { json.forEach(publication => {
var option = CreatePublication(publication, connectorSelect.value); var option = CreatePublication(publication, connectorSelect.value);
option.addEventListener("click", () => { option.addEventListener("click", (mouseEvent) => {
ShowPublicationViewerWindow(publication.internalId, event, true); ShowPublicationViewerWindow(publication.internalId, mouseEvent, true);
}); });
selectPublication.appendChild(option); selectPublication.appendChild(option);
} }
)); ))
.then(() => {
selectRecurrence.disabled = false;
connectorSelect.disabled = false;
searchPublicationQuery.disabled = false;
});
} }
}); });
@ -112,7 +122,12 @@ function CreatePublication(publication, connector){
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);
HidePopup(); HideAddTaskPopup();
}
function AddTaskClick(){
CreateTask("DownloadNewChapters", selectRecurrence.value, connectorSelect.value, toEditId, "en")
HideAddTaskPopup();
} }
var slideIn = true; var slideIn = true;
@ -134,15 +149,9 @@ function ResetContent(){
add.addEventListener("click", () => ShowNewTaskWindow()); add.addEventListener("click", () => ShowNewTaskWindow());
tasksContent.appendChild(add); tasksContent.appendChild(add);
} }
function ShowPopup(){
generalPopup.style.display = "block";
generalPopup.animate(fadeIn, fadeInTiming);
}
function ShowPublicationViewerWindow(publicationId, event, add){ function ShowPublicationViewerWindow(publicationId, event, add){
publicationViewer.style.top = `${event.clientY - 60}px`; publicationViewerWindow.style.top = `${event.clientY - 60}px`;
publicationViewer.style.left = `${event.clientX}px`; publicationViewerWindow.style.left = `${event.clientX}px`;
var publication = publications.filter(pub => pub.internalId === publicationId)[0]; var publication = publications.filter(pub => pub.internalId === publicationId)[0];
publicationViewerName.innerText = publication.sortName; publicationViewerName.innerText = publication.sortName;
@ -152,28 +161,28 @@ function ShowPublicationViewerWindow(publicationId, event, add){
toEditId = publicationId; toEditId = publicationId;
if(add){ if(add){
publicationAdd.style.display = "none";
publicationDelete.style.display = "block";
}
else{
publicationAdd.style.display = "block"; publicationAdd.style.display = "block";
publicationDelete.style.display = "none"; publicationDelete.style.display = "none";
} }
else{
publicationAdd.style.display = "none";
publicationDelete.style.display = "block";
}
toEditId = publicationId; toEditId = publicationId;
publicationViewer.style.display = "block"; publicationViewerPopup.style.display = "block";
ShowPopup();
} }
function ShowNewTaskWindow(){ function ShowNewTaskWindow(){
selectPublication.replaceChildren(); selectPublication.replaceChildren();
addTaskWindow.style.display = "flex"; addTaskPopup.style.display = "block";
ShowPopup();
} }
function HidePopup(){ function HideAddTaskPopup(){
generalPopup.style.display = "none"; addTaskPopup.style.display = "none";
addTaskWindow.style.display = "none"; }
publicationViewer.style.display = "none";
function HidePublicationPopup(){
publicationViewerPopup.style.display = "none";
} }
const fadeIn = [ const fadeIn = [

17
Website/style.css
View File

@ -226,7 +226,7 @@ blur-background {
} }
addtask-window { addtask-window {
display: none; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
position: absolute; position: absolute;
@ -307,8 +307,12 @@ addtask-settings addtask-setting{
align-content: start; align-content: start;
} }
#publicationViewerPopup{
z-index: 6;
}
publication-viewer{ publication-viewer{
display: none; display: block;
width: 500px; width: 500px;
height: 300px; height: 300px;
position: absolute; position: absolute;
@ -375,4 +379,13 @@ publication-viewer publication-information publication-delete {
color: red; color: red;
margin: 20px; margin: 20px;
font-size: 16pt; font-size: 16pt;
}
publication-viewer publication-information publication-add {
position: absolute;
bottom: 0px;
right: 0px;
color: limegreen;
margin: 20px;
font-size: 16pt;
} }