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

add form to add task

Browse source
This commit is contained in:
Florian Hoss 2022-04-06 20:23:14 +02:00
parent bea864d967
commit 87e66f74bd
1 changed files with 25 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,6 +12,21 @@
<div class="fs-3 text-center mt-5">{{ .title }}</div> <div class="fs-3 text-center mt-5">{{ .title }}</div>
<hr> <hr>
<div id="tasks"></div> <div id="tasks"></div>
<hr>
<form class="row g-3 needs-validation" novalidate>
<div class="col-1"></div>
<div class="col-8">
<div class="input-group has-validation">
<input type="text" class="form-control" id="description" required>
<div class="invalid-feedback">
Please provide a description.
</div>
</div>
</div>
<div class="col-3">
<button class="btn btn-primary" id="button" type="submit"><i class="bi bi-plus-lg"></i></button>
</div>
</form>
</div> </div>
{{template "scripts" .}} {{template "scripts" .}}
@ -24,9 +39,10 @@
const taskHeader = document.createElement("div"); const taskHeader = document.createElement("div");
taskHeader.classList.add('row', 'g-0', 'align-items-center', 'mb-1'); taskHeader.classList.add('row', 'g-0', 'align-items-center', 'mb-1');
taskHeader.innerHTML = ` taskHeader.innerHTML = `
<div class="col-2 overflow-ellipsis text-end pe-4">ID</div> <div class="fw-bold col-1 text-center">ID</div>
<div class="col-6 overflow-ellipsis">Description</div> <div class="fw-bold col-8">Description</div>
<div class="col-2 overflow-ellipsis text-end">Done</div> <div class="fw-bold col-2 text-center">Done</div>
<div class="fw-bold col-1 text-center">Delete</div>
<hr class="mt-3 mb-2"> <hr class="mt-3 mb-2">
`; `;
tasksEl.appendChild(taskHeader); tasksEl.appendChild(taskHeader);
@ -36,9 +52,12 @@
const newTask = document.createElement('div'); const newTask = document.createElement('div');
newTask.classList.add('row', 'g-0', 'align-items-center', 'mb-1'); newTask.classList.add('row', 'g-0', 'align-items-center', 'mb-1');
newTask.innerHTML = ` newTask.innerHTML = `
<div class="col-2 overflow-ellipsis text-end pe-4">${task.ID}</div> <div class="col-1 text-center">${task.ID}</div>
<div class="col-6 overflow-ellipsis">${task.Description}</div> <div class="col-8">${task.Description}</div>
<div class="col-2 overflow-ellipsis text-end"><i class="bi ${task.Done ? "bi-check-circle" : "bi-circle"}"></i></div> <div class="col-2 form-check form-switch d-flex justify-content-center">
<input class="text-center form-check-input" type="checkbox" ${task.Done && "checked"} role="switch" id="flexSwitchCheckDefault">
</div>
<button class="col-1 btn btn-danger"><i class="bi bi-trash"></i></button>
`; `;
tasksEl.appendChild(newTask); tasksEl.appendChild(newTask);
}); });