glax/Tranga
2
0
Fork 0
Code

Add Task window

Browse Source
This commit is contained in:
glax 2023-05-23 14:44:59 +02:00
parent ba5ae67aa7
commit dd651adc15
4 changed files with 125 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
Website/index.html
View File

@ -36,10 +36,26 @@
</publication-information>
</publication>
</content>
<addtask-popup>
<addtask-background></addtask-background>
<addtask-window>
<window-titlebar>
<p>Add Task</p>
<img src="media/close-x.svg" alt="Close">
</window-titlebar>
<window-content>
<label for="taskTypes">TaskType</label><select id="taskTypes"></select>
<label for="connectors">Connector</label><select id="connectors"></select>
</window-content>
</addtask-window>
</addtask-popup>
</viewport>
<settingstab id="settingstab">
</settingstab>
<script src="apiConnector.js"></script>
<script src="interaction.js"></script>
</body>

38
Website/interaction.js
View File

@ -18,6 +18,34 @@ const slideOutRightTiming = {
easing: "ease-in"
}
const taskTypesSelect = document.querySelector("#taskTypes")
let availableTaskTypes;
GetTaskTypes()
.then(json => availableTaskTypes = json)
.then(json =>
json.forEach(taskType => {
var option = document.createElement('option');
option.value = taskType;
option.innerText = taskType;
taskTypesSelect.appendChild(option);
}));
const connectorSelect = document.querySelector("#connectors");
let availableConnectors;
GetAvailableControllers()
.then(json => availableConnectors = json)
.then(json => console.log(json));
/*.then(json =>
json.forEach(connector => {
var option = document.createElement('option');
option.value = connector.name;
option.innerText = connector.name;
taskTypesSelect.appendChild(option);
}));*/
const settingsTab = document.querySelector("#settingstab");
const settingsCog = document.querySelector("#settingscog");
var slideIn = true;
@ -29,4 +57,12 @@ function slide(){
slideIn = !slideIn;
}
settingsCog.addEventListener("click", () => slide());
settingsCog.addEventListener("click", () => slide());
const addTask = document.querySelector("addPublication");
setInterval(() => {
GetTasks().then(json => {
//TODO
});
}, 1000);

4
Website/media/close-x.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#0F1729"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 804 B

70
Website/style.css
View File

@ -120,7 +120,7 @@ settingstab{
bottom: 0;
background-color: rgba(0,0,0,0.5);
width: 20rem;
height: calc(100% - var(--topbar-height) - 20px);
height: calc(100% - var(--topbar-height) - 40px);
margin-bottom: 10px;
border-radius: 5px 0 0 5px;
}
@ -179,7 +179,7 @@ publication-information {
display: flex;
flex-direction: column;
justify-content: start;
background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73))
background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73));
z-index: 1;
}
@ -204,4 +204,70 @@ publication img {
width: 100%;
height: 100%;
z-index: 0;
}
addtask-popup{
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
addtask-background {
width: 100%;
height: 100%;
position: absolute;
left: 0;
background-color: black;
opacity: 0.5;
z-index: 5;
}
addtask-window {
display: block;
position: absolute;
left: 25%;
top: 15%;
width: 50%;
height: 70%;
padding: 0;
background-color: var(--accent-color);
z-index: 6;
border-radius: 5px;
}
window-titlebar {
width: 100%;
height: 60px;
background-color: var(--primary-color);
position: absolute;
left: 0;
top: 0;
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 img {
height: 70%;
}
window-content {
position: absolute;
width: 100%;
top: 60px;
left: 0;
}