glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-01-30 16:37:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

resolves #26

Browse Source
This commit is contained in:
glax 2023-05-25 21:58:45 +02:00
parent 7423ae6ace
commit d1a21af15d
3 changed files with 215 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Website/index.html
View File

@ -6,6 +6,7 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<wrapper>
<topbar>
<titlebox>
<img src="media/blahaj.png">
@ -106,6 +107,13 @@
</div>
<p id="madeWith">Made with Blåhaj 🦈</p>
</footer>
</wrapper>
<footer-tag-popup>
<footer-tag-content>
<footer-tag-task-name>Test</footer-tag-task-name>
</footer-tag-content>
</footer-tag-popup>
<script src="apiConnector.js"></script>
<script src="interaction.js"></script>
</body>

62
Website/interaction.js
View File

@ -29,6 +29,8 @@ const settingApiUri = document.querySelector("#settingApiUri");
const tagTasksRunning = document.querySelector("#tasksRunningTag");
const tagTasksQueued = document.querySelector("#tasksQueuedTag");
const tagTasksTotal = document.querySelector("#totalTasksTag");
const tagTaskPopup = document.querySelector("footer-tag-popup");
const tagTasksPopupContent = document.querySelector("footer-tag-content");
settingsCog.addEventListener("click", () => OpenSettings());
document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => HideSettings());
@ -49,6 +51,12 @@ searchPublicationQuery.addEventListener("keypress", (event) => {
NewSearch();
}
});
tagTasksRunning.addEventListener("mouseover", (event) => ShowRunningTasks(event));
tagTasksRunning.addEventListener("mouseout", () => CloseTasksPopup());
tagTasksQueued.addEventListener("mouseover", (event) => ShowQueuedTasks(event));
tagTasksQueued.addEventListener("mouseout", () => CloseTasksPopup());
tagTasksTotal.addEventListener("mouseover", (event) => ShowAllTasks(event));
tagTasksTotal.addEventListener("mouseout", () => CloseTasksPopup());
let availableConnectors;
GetAvailableControllers()
@ -238,6 +246,60 @@ function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
}
function ShowRunningTasks(event){
GetRunningTasks()
.then(json => {
tagTasksPopupContent.replaceChildren();
json.forEach(task => {
var taskname = document.createElement("footer-tag-task-name");
taskname.innerText = task.publication.sortName;
tagTasksPopupContent.appendChild(taskname);
});
if(json.length > 0){
tagTaskPopup.style.display = "block";
tagTaskPopup.style.left = `${event.client - 20}px`;
}
});
}
function ShowQueuedTasks(event){
GetQueue()
.then(json => {
tagTasksPopupContent.replaceChildren();
json.forEach(task => {
var taskname = document.createElement("footer-tag-task-name");
taskname.innerText = task.publication.sortName;
tagTasksPopupContent.appendChild(taskname);
});
if(json.length > 0){
tagTaskPopup.style.display = "block";
tagTaskPopup.style.left = `${event.clientX - 20}px`;
}
});
}
function ShowAllTasks(event){
GetDownloadTasks()
.then(json => {
tagTasksPopupContent.replaceChildren();
json.forEach(task => {
var taskname = document.createElement("footer-tag-task-name");
taskname.innerText = task.publication.sortName;
tagTasksPopupContent.appendChild(taskname);
});
if(json.length > 0){
tagTaskPopup.style.display = "block";
tagTaskPopup.style.left = `${event.clientX - 20}px`;
}
});
}
function CloseTasksPopup(){
tagTaskPopup.style.display = "none";
}
//Resets the tasks shown
ResetContent();
//Get Tasks and show them

49
Website/style.css
View File

@ -11,15 +11,19 @@
body{
padding: 0;
margin: 0;
display: flex;
flex-flow: column;
flex-wrap: nowrap;
height: 100vh;
background-color: var(--background-color);
font-family: "Inter", sans-serif;
overflow-x: hidden;
}
wrapper {
display: flex;
flex-flow: column;
flex-wrap: nowrap;
height: 100vh;
}
background-placeholder{
background-color: var(--second-background-color);
opacity: 1;
@ -448,3 +452,42 @@ publication-viewer publication-information publication-add {
margin: 20px;
font-size: 16pt;
}
footer-tag-popup {
display: none;
padding: 5px;
position: fixed;
bottom: 55px;
left: 20px;
background-color: var(--secondary-color);
z-index: 8;
border-radius: 5px;
max-height: 400px;
}
footer-tag-content{
position: relative;
max-height: 400px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow-y: scroll;
}
footer-tag-content > * {
margin: 2px 0;
}
footer-tag-popup::before{
content: "";
width: 0;
height: 0;
position: absolute;
border-right: 20px solid var(--secondary-colorr);
border-left: 20px solid transparent;
border-top: 20px solid var(--secondary-color);
border-bottom: 20px solid transparent;
left: 0px;
bottom: -36px;
border-radius: 0 0 0 5px;
}