diff options
| -rw-r--r-- | cockpit.html | 36 | ||||
| -rw-r--r-- | src/cockpit.js | 160 |
2 files changed, 48 insertions, 148 deletions
diff --git a/cockpit.html b/cockpit.html index c06eb07..8e77ffe 100644 --- a/cockpit.html +++ b/cockpit.html @@ -56,9 +56,8 @@ <div id="student-info-red" class="student-info-mid-element"> ⚫Rote Punkte <span class="student-info-points" id="student-info-points-red">0</span> </div> - <div id="student-info-level-container" class="student-info-mid-element"> - Graduierungsstatus: - <span id="student-info-level"></span> + <div id="student-info-points-sum-container" class="student-info-mid-element"> + ∑ <span class="student-info-points" id="student-info-points-sum"></span> </div> </div> @@ -67,39 +66,24 @@ </textarea> <button id="student-info-point-reason-submit">↵</button> </div> - - <!-- <div id="student-info-bottom" class="student-info-banner"> --> - <!-- <div id="student-info-stickers-container" class="student-info-bottom-element"> --> - <!-- Monstersticker --> - <!-- <div id="student-info-stickers"> --> - <!-- </div> --> - <!-- </div> --> - <!-- <div id="student-info-bonus-container" class="student-info-bottom-element"> --> - <!-- Bonuskarten --> - <!-- <div id="student-info-bonus-row"> --> - <!-- <img /> --> - <!-- <span id="student-info-bonus-amount">0</span> --> - <!-- </div> --> - <!-- </div> --> - <!-- </div> --> </div> - <!-- <details id="progress"> --> - <!-- <summary>Lernfortschritt</summary> --> - <!-- </details> --> - - <!-- <details id="calendar"> --> - <!-- <summary>Kalender</summary> --> - <!-- </details> --> - <details id="graduation"> <summary>Graduierung</summary> + + <div id="graduation-level-change"> + <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> diff --git a/src/cockpit.js b/src/cockpit.js index e78d50b..fa10a11 100644 --- a/src/cockpit.js +++ b/src/cockpit.js @@ -1,14 +1,4 @@ -// import { -// fetchSubjectsMock as fetchSubjects, -// fetchProgressMock as fetchProgress, -// } from "../../js/mock.ts"; - -import { - LEVEL_NAMES, - GraduationChange, - fetchGraduation, - submitGraduationChange, -} from "./graduation-ENV.ts"; +import { GraduationChange, fetchGraduation, submitGraduationChange } from "./graduation-ENV.ts"; import { fetchStudent, fetchStudents } from "./student-ENV.ts"; import { getName, DATETIME_FMT } from "./utils-ENV.js"; @@ -120,6 +110,8 @@ function updateStudentInfo() { document.getElementById("student-info-points-green").innerHTML = student.graduation.green; document.getElementById("student-info-points-orange").innerHTML = student.graduation.orange; document.getElementById("student-info-points-red").innerHTML = student.graduation.red; + document.getElementById("student-info-points-sum").innerHTML = + student.graduation.getNettoPoints(); document .getElementById("student-info-green") @@ -131,133 +123,57 @@ function updateStudentInfo() { .getElementById("student-info-red") .addEventListener("click", () => pointClickHandler("red")); - renderGraduationLevel(student.graduation); - - // renderGraduationStickers(student.graduation, document.getElementById("student-info-stickers")); - // renderGraduationBonus(student.graduation, document.getElementById("student-info-stickers")); - - renderObservationStatus(student.graduation, document.getElementById("student-observation")); + const icon = document.getElementById("student-level-icon"); + icon.src = student.graduation.getIcon(); } document.getElementById("student-content").style.display = "block"; } -function renderGraduationLevel(graduation) { - const label = document.getElementById("student-info-level"); - label.innerHTML = graduation.getLevelName(); - const icon = document.getElementById("student-level-icon"); - icon.src = graduation.getIcon(); -} - -// function renderGraduationStickers(graduation, node) { -// node.innerHTML = ""; -// } - -// function renderGraduationBonus(graduation, node) { -// node.innerHTML = ""; -// } - -function renderObservationStatus(graduation, node) { - node.innerHTML = ""; - - let status; - if (graduation.isObserved() || graduation.observationRequested) { - status = document.createElement("span"); - status.classList.add("student-observation-status"); - if (graduation.isObserved()) { - status.innerHTML = - '<span style="font-size: larger;">👁</span> Ich befinde mich in der Beobachtungsphase zum Levelaufstieg.'; - } else if (graduation.observationRequested) { - status.innerHTML = "Beobachtungsphase noch nicht begonnen."; - } else { - status.innerHTML = "Nicht in Beobachtung."; - } - } else { - status = document.createElement("button"); - status.classList.add("student-request-observation-button"); - // Level is 1-based - status.innerHTML = `Ich will ${LEVEL_NAMES[graduation.level]} werden`; - status.addEventListener("click", async function () { - await graduation.requestObservation(); - // Rerender the observation status - renderObservationStatus(graduation, node); - }); - } - node.appendChild(status); -} - -// function newProgressBar(subject) { -// let bar = document.createElement("div"); -// fetchProgress(subject).then((progress) => { -// bar.progress = progress; -// }); - -// let s1 = document.createElement("div"); -// s1.onhover - -// bar.appendChild(s1); -// let s2 = document.createElement("div"); -// bar.appendChild(s2); -// let s3 = document.createElement("div"); -// bar.appendChild(s3); -// return bar; -// } - -// let selectedSubjects; -// async function updateStudentProgress() { -// selectedSubjects = await fetchSubjects(student); - -// let prog = document.getElementById("progress"); -// for(const subj of selectedSubjects) { -// let subjDiv = document.createElement("div"); -// subjDiv.innerHTML = subj; -// subjDiv.appendChild(newProgressBar(subj)) -// prog.appendChild(subjDiv); -// } -// } - -// async function updateStudentCalendar() { -// let cal = document.getElementById("calendar"); -// } - async function updateStudentGraduation() { console.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(levelChangeLvl.value); + submitGraduationChange(student, change); + updateStudentInfo(); + updateStudentGraduation(); + }; + const changesTbl = document.getElementById("graduation-changes"); changesTbl.innerHTML = ""; - for (const change of graduation.changes.filter((ch) => - ["Grün", "Rot", "Orange"].includes(ch.change), - )) { + for (const change of graduation.changes) { const changeTr = document.createElement("tr"); - for (const key in change) { - if (key == "json" || key == "id" || key == "name") continue; - - if (key == "change") { - switch (change.change) { - case "Grün": - changeTr.style.background = "green"; - break; - case "Rot": - changeTr.style.background = "red"; - break; - case "Orange": - changeTr.style.background = "orange"; - break; - default: - console.error(`unexpected change: ${change.change}`); - } - continue; - } - const value = change[key]; - const fmt = key == "date" ? DATETIME_FMT.format(value) : value; + switch (change.change) { + case "Grün": + changeTr.style.background = "green"; + break; + case "Rot": + changeTr.style.background = "red"; + break; + case "Orange": + changeTr.style.background = "orange"; + break; + } + const addTd = (s) => { const changeTd = document.createElement("td"); - changeTd.innerHTML = fmt; - changeTd.dataset.key = key; + changeTd.innerHTML = s; changeTr.appendChild(changeTd); - } + }; + + addTd(change.change); + addTd(DATETIME_FMT.format(change.date)); + addTd(change.reason); + addTd(change.coach); + addTd(JSON.stringify(change.context)); + changesTbl.appendChild(changeTr); } } |