diff options
| -rw-r--r-- | cockpit.css | 29 | ||||
| -rw-r--r-- | cockpit.html | 30 | ||||
| -rw-r--r-- | src/cockpit.js | 70 |
3 files changed, 104 insertions, 25 deletions
diff --git a/cockpit.css b/cockpit.css index 6b6295a..c9b529e 100644 --- a/cockpit.css +++ b/cockpit.css @@ -234,3 +234,32 @@ margin-top: 1rem; margin-bottom: 1rem; } + +#graduation-level-change, +#graduation-history { + border: black solid 0.2pt; + border-radius: 10px; + padding-left: 1rem; + padding-bottom: 1rem; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.graduation-delete-state { + margin-left: 1rem; + position: relative; +} + +.graduation-delete-inprogress { + --size: 0.5px; + width: calc(48 * var(--size)); + height: calc(48 * var(--size)); + border: calc(5 * var(--size)) solid black; + border-bottom-color: transparent; + border-radius: 50%; + display: inline; + position: absolute; + right: -1rem; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} diff --git a/cockpit.html b/cockpit.html index 8e77ffe..bda0322 100644 --- a/cockpit.html +++ b/cockpit.html @@ -71,23 +71,27 @@ <details id="graduation"> <summary>Graduierung</summary> - <div id="graduation-level-change"> + <div id="graduation-level-change" data-availability="if-coach"> + <h4 id="graduation-level-change-headline">Graduierung abgeschlossen?</h4> <button id="graduation-level-change-submit">Ändere Level</button> <input type="number" min="1" max="4" id="graduation-level-change-level" /> </div> - <table class="table table-striped"> - <thead> - <tr> - <th>Änderung</th> - <th>Datum</th> - <th>Grund</th> - <th>Coach</th> - <th>Context</th> - </tr> - </thead> - <tbody id="graduation-changes"></tbody> - </table> + <div id="graduation-history"> + <h4 id="graduation-history-headline">Änderungsverlauf</h4> + <table class="table table-striped"> + <thead> + <tr> + <th>Änderung</th> + <th>Datum</th> + <th>Grund</th> + <th>Coach</th> + <th>Context</th> + </tr> + </thead> + <tbody id="graduation-changes"></tbody> + </table> + </div> </details> </div> </body> diff --git a/src/cockpit.js b/src/cockpit.js index 6b2ac35..ed04cde 100644 --- a/src/cockpit.js +++ b/src/cockpit.js @@ -1,4 +1,10 @@ -import { GraduationChange, fetchGraduation, submitGraduationChange } from "./graduation-ENV.ts"; +import { assert } from "./assert.ts"; +import { + GraduationChange, + fetchGraduation, + submitGraduationChange, + deleteGraduationChange, +} from "./graduation-ENV.ts"; import { fetchStudent, fetchStudents } from "./student-ENV.ts"; import { getName, DATETIME_FMT } from "./utils-ENV.js"; @@ -133,19 +139,24 @@ function updateStudentInfo() { } async function updateStudentGraduation() { - console.assert(student.graduation, "Student has no graduation"); + assert(student.graduation, "Student has no graduation"); const graduation = student.graduation; - const levelChangeLvl = document.getElementById("graduation-level-change-level"); - levelChangeLvl.value = Math.min(graduation.level + 1, 4); - - const levelChangeBtn = document.getElementById("graduation-level-change-submit"); - levelChangeBtn.onclick = () => { - const change = GraduationChange.newLevelChange(Number(levelChangeLvl.value)); - submitGraduationChange(student.graduation, change); - updateStudentInfo(); - updateStudentGraduation(); - }; + // Only the coach is allowed to graduate + if (name === student.graduation.coach) { + const levelChangeLvl = document.getElementById("graduation-level-change-level"); + levelChangeLvl.value = Math.min(graduation.level + 1, 4); + + const levelChangeBtn = document.getElementById("graduation-level-change-submit"); + levelChangeBtn.onclick = () => { + const change = GraduationChange.newLevelChange(Number(levelChangeLvl.value), "", name); + submitGraduationChange(student.graduation, change); + updateStudentInfo(); + updateStudentGraduation(); + }; + } else { + document.getElementById("graduation-level-change").remove(); + } const changesTbl = document.getElementById("graduation-changes"); changesTbl.innerHTML = ""; @@ -164,10 +175,12 @@ async function updateStudentGraduation() { break; } + const tds = []; const addTd = (s) => { const changeTd = document.createElement("td"); changeTd.innerHTML = s; changeTr.appendChild(changeTd); + tds.push(changeTd); }; addTd(change.change); @@ -176,6 +189,39 @@ async function updateStudentGraduation() { addTd(change.coach); addTd(JSON.stringify(change.context)); + if (change.coach === name) { + const delBtn = document.createElement("button"); + delBtn.innerHTML = "Löschen"; + + delBtn.addEventListener("click", () => { + const state = document.createElement("span"); + state.classList.add("graduation-delete-state"); + + const inprogress = document.createElement("span"); + inprogress.classList.add("graduation-delete-inprogress"); + state.appendChild(inprogress); + + delBtn.replaceWith(state); + deleteGraduationChange(graduation, change) + .then(() => { + updateStudentInfo(); + state.style.display = "inline"; + state.innerHTML = "✓"; + for (const td of tds) { + td.style["text-decoration"] = "line-through"; + } + }) + .catch(() => { + state.style.display = "inline"; + state.innerHTML = "X"; + }) + .finally(() => { + inprogress.remove(); + }); + }); + changeTr.appendChild(delBtn); + } + changesTbl.appendChild(changeTr); } } |