From 37ac6a9e3d52227ff6b7aaba97d5ac8049d85157 Mon Sep 17 00:00:00 2001 From: Florian Fischer Date: Fri, 7 Aug 2026 10:06:32 +0200 Subject: cockpit: cleanup, remove observation code and add level change button --- cockpit.html | 36 ++++--------- 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 @@
⚫Rote Punkte 0
-
- Graduierungsstatus: - +
+ ∑
@@ -67,39 +66,24 @@ - - - - - - - - - - - - - - - - - - - - - - -
Graduierung + +
+ + +
+ + + 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 = - '👁 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); } } -- cgit v1.2.3
Änderung Datum Grund CoachContext