diff options
Diffstat (limited to 'src/cockpit.js')
| -rw-r--r-- | src/cockpit.js | 182 |
1 files changed, 92 insertions, 90 deletions
diff --git a/src/cockpit.js b/src/cockpit.js index 67619d8..97d6fed 100644 --- a/src/cockpit.js +++ b/src/cockpit.js @@ -1,6 +1,6 @@ // import { - // fetchSubjectsMock as fetchSubjects, - // fetchProgressMock as fetchProgress, +// fetchSubjectsMock as fetchSubjects, +// fetchProgressMock as fetchProgress, // } from "../../js/mock.ts"; import { @@ -8,15 +8,11 @@ import { LEVEL_NAMES, GraduationChange, fetchGraduation, - submitGraduationChange + submitGraduationChange, } from "./graduation-ENV.ts"; import { fetchStudent, fetchStudents } from "./student-ENV.ts"; -import { - getName, - DATE_FMT, - DATETIME_FMT, -} from "./utils-ENV.js"; +import { getName, DATE_FMT, DATETIME_FMT } from "./utils-ENV.js"; import { initSelection } from "./selection.js"; let name; @@ -35,7 +31,7 @@ function initStudentSelection() { "student-selection", fetchStudents, (student) => `${student.name} ${student.getGroup()}`, - loadStudent + loadStudent, ); } @@ -46,46 +42,46 @@ function pointClickHandler(color) { // TODO(muhq): Prefill the textarea with common reasons switch (color) { - case "green": - textarea.style.background = "rgb(from green r g b / 20%)"; - textarea.value = ""; - break; - case "orange": - textarea.style.background = "rgb(from orange r g b / 20%)"; - textarea.value = ""; - break; - case "red": - textarea.style.background = "rgb(from red r g b / 20%)"; - textarea.value = ""; - break; + case "green": + textarea.style.background = "rgb(from green r g b / 20%)"; + textarea.value = ""; + break; + case "orange": + textarea.style.background = "rgb(from orange r g b / 20%)"; + textarea.value = ""; + break; + case "red": + textarea.style.background = "rgb(from red r g b / 20%)"; + textarea.value = ""; + break; } textareaDiv.style.display = "block"; textarea.focus(); const coach = name; - const submit = function() { + const submit = function () { let change; switch (color) { - case "green": - change = GraduationChange.newGreenPointChange(textarea.value, coach); - break; - case "orange": - change = GraduationChange.newOrangePointChange(textarea.value, coach); - break; - case "red": - change = GraduationChange.newRedPointChange(textarea.value, coach); - break; - default: - throw new Error("Invalid color"); + case "green": + change = GraduationChange.newGreenPointChange(textarea.value, coach); + break; + case "orange": + change = GraduationChange.newOrangePointChange(textarea.value, coach); + break; + case "red": + change = GraduationChange.newRedPointChange(textarea.value, coach); + break; + default: + throw new Error("Invalid color"); } submitGraduationChange(student, change); textareaDiv.style.display = "none"; updateStudentInfo(); - student.fetchGraduation().then(() => updateStudentGraduation() ); + student.fetchGraduation().then(() => updateStudentGraduation()); }; // Use onEVENT to override any previous handler - textarea.onkeydown = function(e) { + textarea.onkeydown = function (e) { if (e.shiftKey && e.key === "Enter") { submit(); } @@ -108,12 +104,12 @@ function updateStudentInfo() { document.getElementById("student-info-icon").src = DEFAULT_STUDENT_ICON; // Try to replace the generic icon with the user's icon - var img = document.createElement('img'); - img.onload = function() { + var img = document.createElement("img"); + img.onload = function () { document.getElementById("student-info-icon").src = img.src; img = img.onload = null; }; - student.getIconUrl().then( (url) => img.src = url ); + student.getIconUrl().then((url) => (img.src = url)); document.getElementById("student-info-name").innerHTML = `${student.name}`; @@ -126,12 +122,15 @@ function updateStudentInfo() { document.getElementById("student-info-points-orange").innerHTML = student.graduation.orange; document.getElementById("student-info-points-red").innerHTML = student.graduation.red; - document.getElementById("student-info-green").addEventListener('click', - () => pointClickHandler("green")); - document.getElementById("student-info-orange").addEventListener('click', - () => pointClickHandler("orange")); - document.getElementById("student-info-red").addEventListener('click', - () => pointClickHandler("red")); + document + .getElementById("student-info-green") + .addEventListener("click", () => pointClickHandler("green")); + document + .getElementById("student-info-orange") + .addEventListener("click", () => pointClickHandler("orange")); + document + .getElementById("student-info-red") + .addEventListener("click", () => pointClickHandler("red")); renderGraduationLevel(student.graduation); @@ -152,11 +151,11 @@ function renderGraduationLevel(graduation) { } // function renderGraduationStickers(graduation, node) { - // node.innerHTML = ""; +// node.innerHTML = ""; // } // function renderGraduationBonus(graduation, node) { - // node.innerHTML = ""; +// node.innerHTML = ""; // } function renderObservationStatus(graduation, node) { @@ -167,9 +166,10 @@ function renderObservationStatus(graduation, node) { 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.'; + 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.'; + status.innerHTML = "Beobachtungsphase noch nicht begonnen."; } else { status.innerHTML = "Nicht in Beobachtung."; } @@ -178,7 +178,7 @@ function renderObservationStatus(graduation, node) { 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() { + status.addEventListener("click", async function () { await graduation.requestObservation(); // Rerender the observation status renderObservationStatus(graduation, node); @@ -188,37 +188,37 @@ function renderObservationStatus(graduation, node) { } // 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 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); - // } +// 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"); +// let cal = document.getElementById("calendar"); // } async function updateStudentGraduation() { @@ -227,26 +227,26 @@ async function 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.filter((ch) => + ["Grün", "Rot", "Orange"].includes(ch.change), + )) { 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}`); + 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; } @@ -291,7 +291,9 @@ async function updateStudentGraduation() { endDiv.style.display = "block"; - const reason = document.getElementById("graduation-current-observation-period-end-reason").value; + const reason = document.getElementById( + "graduation-current-observation-period-end-reason", + ).value; const successBtn = document.getElementById("graduation-current-observation-period-end-success"); successBtn.addEventListener("click", () => { submitGraduationChange(graduation.student, GraduationChange.newObservationEnd(reason, true)); @@ -336,7 +338,7 @@ async function initCockpit() { } } -window.onload = function() { +window.onload = function () { DEFAULT_STUDENT_ICON = document.getElementById("student-info-icon").src; name = getName(); initCockpit(); |