diff options
Diffstat (limited to 'mass-graducation/src/main.js')
| -rw-r--r-- | mass-graducation/src/main.js | 89 |
1 files changed, 62 insertions, 27 deletions
diff --git a/mass-graducation/src/main.js b/mass-graducation/src/main.js index 4224942..3ed011e 100644 --- a/mass-graducation/src/main.js +++ b/mass-graducation/src/main.js @@ -13,24 +13,27 @@ import { getName, DATETIME_FMT, datetimeStringNow } from "../../js/utils-ENV.js" let group; let name; -function toggle(btn, other) { +function toggle(btn, others) { if (btn.innerHTML === "X") { btn.innerHTML = "o"; } else { btn.innerHTML = "X"; - if (other) - other.innerHTML = "o"; + if (others) { + for (const other of others) + other.innerHTML = "o"; + } } document.getElementById("submit-mass-graduation").style.display = "inline"; + document.getElementById("submit-mass-graduation-state").innerHTML = ""; } -function observationClickHandler(ob, li) { - ob.style.background = "lightgray"; - +function observationClickHandler(li) { let observationDiv = li.observationDiv; // Build the observation container if(!observationDiv) { + li.style.background = "lightgray"; + observationDiv = document.createElement("div"); // Remember the observation div for this student li.observationDiv = observationDiv; @@ -48,6 +51,7 @@ function observationClickHandler(ob, li) { <th></th> <th class="group-member-observation-table-yes">Ja</th> <th class="group-member-observation-table-no">Nein</th> + <th class="group-member-observation-table-maybe">Kann ich nicht beurteilen</th> </tr>`; obsTbl.appendChild(obsTh); @@ -75,11 +79,20 @@ function observationClickHandler(ob, li) { obsNo.classList.add("group-member-observation-table-no"); obsTr.appendChild(obsNo); + const obsMaybe = document.createElement("td"); + obsMaybe.innerHTML = "X"; + obsMaybe.dataset.maybe = "true"; + obsMaybe.classList.add("group-member-observation-table-maybe"); + obsTr.appendChild(obsMaybe); + obsYes.addEventListener("click", () => { - toggle(obsYes, obsNo); + toggle(obsYes, [obsNo, obsMaybe]); }); obsNo.addEventListener("click", () => { - toggle(obsNo, obsYes); + toggle(obsNo, [obsYes, obsMaybe]); + }); + obsMaybe.addEventListener("click", () => { + toggle(obsMaybe, [obsYes, obsNo]); }); obsTbdy.appendChild(obsTr); @@ -88,8 +101,11 @@ function observationClickHandler(ob, li) { } else { if (observationDiv.style.display === "none") { observationDiv.style.display = "block"; + li.style.background = "lightgray"; + } else { observationDiv.style.display = "none"; + li.style.background = "unset"; } } } @@ -105,38 +121,39 @@ async function loadGroup(selected) { ul.innerHTML = ""; for (const student of students) { + const graduationPromise = student.getGraduation(); + const li = document.createElement("li"); li.classList.add("group-member") // Remember the student of the entry li.student = student; + const i = document.createElement("img"); + i.classList.add("group-member-icon") + graduationPromise.then((graduation) => { + i.src = graduation.getIcon(); + }); + li.appendChild(i); + + const n = document.createElement("span"); + n.classList.add("group-member-name") + n.innerHTML = `${student.name}`; + li.appendChild(n); + const ob = document.createElement("button"); ob.classList.add("group-member-observation-icon") - const graduationPromise = student.getGraduation(); graduationPromise.then((graduation) => { if (!graduation.isObserved()) { return; } ob.innerHTML = "👁" - ob.addEventListener("click", () => observationClickHandler(ob, li) ); + ob.addEventListener("click", () => observationClickHandler(li) ); }); graduationPromises.push(graduationPromise); li.appendChild(ob); - const i = document.createElement("img"); - i.classList.add("group-member-icon") - graduationPromise.then((graduation) => { - i.src = graduation.getIcon(); - }); - li.appendChild(i); - - const n = document.createElement("span"); - n.classList.add("group-member-name") - n.innerHTML = `${student.name}`; - li.appendChild(n); - for (const col of ["green", "orange", "red"]) { const b = document.createElement("button"); b.classList.add(`group-member-${col}`) @@ -152,7 +169,7 @@ async function loadGroup(selected) { const p = document.createElement("button"); p.classList.add("group-member-print") p.innerHTML = "🖶"; - p.addEventListener("click", () => printRedPointNote(li) ); + p.addEventListener("click", () => printNote(li) ); li.appendChild(p); ul.appendChild(li); @@ -232,6 +249,13 @@ async function loadGroup(selected) { } function submitMassGraduation() { + const state = document.getElementById("submit-mass-graduation-state"); + state.innerHTML = ""; + state.classList.add("submit-mass-graduation-inprogress"); + state.style.display = "unset"; + + // TODO(muhq): await graduation promises + let promises = []; for(const li of document.querySelectorAll("li.group-member")) { const reason = li.querySelector(".group-member-point-reason").value; @@ -259,7 +283,6 @@ function submitMassGraduation() { } } - const state = document.getElementById("submit-mass-graduation-state"); Promise.all(promises).then(() => { state.style.display = "inline"; state.innerHTML = "✓"; @@ -275,11 +298,13 @@ function submitMassGraduation() { state.innerHTML = "X"; state.style.color = "red"; console.log(error); + }).finally(() => { + state.classList.remove("submit-mass-graduation-inprogress"); }); } let prePrintBody = null; -function printRedPointNote(li) { +function printNote(li) { // save the current DOM prePrintBody = document.body; @@ -287,14 +312,24 @@ function printRedPointNote(li) { const printBdy = document.createElement("body"); const reason = li.querySelector(".group-member-point-reason").value; const dateStr = datetimeStringNow(); + let pointType = ""; + if (li.querySelector(".group-member-orange").innerHTML === "X") { + pointType = "Oranger Punkt"; + } + if (li.querySelector(".group-member-red").innerHTML === "X") { + pointType = "Roter Punkt"; + } printBdy.innerHTML = ` -<h2>Roter Punkt Dokumentation</h2> +<h2>Dokuzettel</h2> +<h3>${pointType}</h3> <p>Schüler*in: ${li.student.name}</p> <p>Datum: ${dateStr}</p> +<p>Lehrkraft: ${name}</p> +<p>Klassenleitung: TODO</p> <h3>Begründung</h3> <p>${reason}</p> -<p>Lehrkraft: ${name}</p>`; +`; document.body = printBdy; print(); |