HS-Esslingen/swb6-it-sec
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

show tasks in a table

Browse source
This commit is contained in:
Florian Hoss 2022-04-06 14:24:01 +02:00
parent 9b4eb8f7aa
commit bea864d967
4 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Lab01/app/.idea/app.iml
View file

@ -7,5 +7,6 @@
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="bootstrap" level="application" />
<orderEntry type="library" name="axios" level="application" />
<orderEntry type="library" name="bootstrap-icons" level="application" />
</component>
</module>

2
Lab01/app/.idea/jsLibraryMappings.xml
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{axios, bootstrap}" />
<file url="PROJECT" libraries="{axios, bootstrap, bootstrap-icons}" />
</component>
</project>

1
Lab01/app/templates/_base.tmpl
View file

@ -8,6 +8,7 @@
<meta name="theme-color" content="#ffffff">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
{{end}}
{{define "toasts"}}

15
Lab01/app/templates/tasks.tmpl
View file

@ -8,8 +8,8 @@
<body>
{{template "navbar" .}}
<div class="position-absolute top-50 start-50 translate-middle">
<div class="fs-3">{{ .title }}</div>
<div class="container">
<div class="fs-3 text-center mt-5">{{ .title }}</div>
<hr>
<div id="tasks"></div>
</div>
@ -21,6 +21,15 @@
function getAllTasks() {
axios.get("/tasks", axiosConfig).then((response) => {
const taskHeader = document.createElement("div");
taskHeader.classList.add('row', 'g-0', 'align-items-center', 'mb-1');
taskHeader.innerHTML = `
<div class="col-2 overflow-ellipsis text-end pe-4">ID</div>
<div class="col-6 overflow-ellipsis">Description</div>
<div class="col-2 overflow-ellipsis text-end">Done</div>
<hr class="mt-3 mb-2">
`;
tasksEl.appendChild(taskHeader);
const tasks = response.data.tasks;
[...tasks]
.forEach((task) => {
@ -29,7 +38,7 @@
newTask.innerHTML = `
<div class="col-2 overflow-ellipsis text-end pe-4">${task.ID}</div>
<div class="col-6 overflow-ellipsis">${task.Description}</div>
<div class="col-2 overflow-ellipsis text-end">${task.Done}</div>
<div class="col-2 overflow-ellipsis text-end"><i class="bi ${task.Done ? "bi-check-circle" : "bi-circle"}"></i></div>
`;
tasksEl.appendChild(newTask);
});