diff options
Diffstat (limited to 'mass-graducation/src')
| -rw-r--r-- | mass-graducation/src/main.js | 163 |
1 files changed, 145 insertions, 18 deletions
diff --git a/mass-graducation/src/main.js b/mass-graducation/src/main.js index bae20bb..3d20f0b 100644 --- a/mass-graducation/src/main.js +++ b/mass-graducation/src/main.js @@ -13,13 +13,16 @@ import { getName } from "../../js/utils-ENV.js"; let group; let name; -function toggle(btn) { - if (btn.innerHTML === "X") +function toggle(btn, other) { + if (btn.innerHTML === "X") { btn.innerHTML = "o"; - else + } else { btn.innerHTML = "X"; + if (other) + other.innerHTML = "o"; + } - document.getElementById("submit-mass-graduation").style.display = "block"; + document.getElementById("submit-mass-graduation").style.display = "inline"; } function observationClickHandler(ob, li) { @@ -36,11 +39,17 @@ function observationClickHandler(ob, li) { li.appendChild(observationDiv); const obsTbl = document.createElement("table"); - obsTbl.id = "group-member-observation-table"; + obsTbl.classList.add("group-member-observation-table"); observationDiv.appendChild(obsTbl); const obsTh = document.createElement("thead"); - obsTh.innerHTML = "<tr><td></td><td>Ja</td><td>Nein</td></tr>"; + obsTh.innerHTML = ` +<tr> + <th></th> + <th class="group-member-observation-table-yes">Ja</th> + <th class="group-member-observation-table-no">Nein</th> +</tr>`; + obsTbl.appendChild(obsTh); const obsTbdy = document.createElement("tbody"); @@ -51,19 +60,28 @@ function observationClickHandler(ob, li) { const obsDesc = document.createElement("td"); obsDesc.innerHTML = obsType; + obsDesc.classList.add("group-member-observation-table-description"); obsTr.appendChild(obsDesc); const obsYes = document.createElement("td"); obsYes.innerHTML = "o"; - obsYes.addEventListener("click", () => toggle(obsYes)); obsYes.dataset.yes = "true"; + obsYes.classList.add("group-member-observation-table-yes"); obsTr.appendChild(obsYes); const obsNo = document.createElement("td"); obsNo.innerHTML = "o"; - obsNo.addEventListener("click", () => toggle(obsNo) ); + obsNo.dataset.no = "true"; + obsNo.classList.add("group-member-observation-table-no"); obsTr.appendChild(obsNo); + obsYes.addEventListener("click", () => { + toggle(obsYes, obsNo); + }); + obsNo.addEventListener("click", () => { + toggle(obsNo, obsYes); + }); + obsTbdy.appendChild(obsTr); } // Toggle the observation container visibility @@ -79,6 +97,7 @@ function observationClickHandler(ob, li) { async function loadGroup(selected) { group = selected; const students = await group.getStudents(); + let graduationPromises = []; document.getElementById("group-content").style.display = "block"; const ul = document.getElementById("group-members"); @@ -93,18 +112,22 @@ async function loadGroup(selected) { const ob = document.createElement("button"); ob.classList.add("group-member-observation-icon") - student.getGraduation().then((graduation) => { + + const graduationPromise = student.getGraduation(); + graduationPromise.then((graduation) => { if (!graduation.isObserved()) { return; } ob.innerHTML = "👁" ob.addEventListener("click", () => observationClickHandler(ob, li) ); }); + graduationPromises.push(graduationPromise); + li.appendChild(ob); const i = document.createElement("img"); i.classList.add("group-member-icon") - student.getGraduation().then((graduation) => { + graduationPromise.then((graduation) => { i.src = graduation.getIcon(); }); li.appendChild(i); @@ -134,42 +157,146 @@ async function loadGroup(selected) { ul.appendChild(li); } + + const graduations = await Promise.all(graduationPromises); + let observations = graduations.filter( + (g) => g.observationRequested || (g.observation && !g.observation.end) + ); + + const observationReuqestsContainer = document.getElementById("observation-requests-container"); + + if (observations.length == 0) { + observationReuqestsContainer.style.display = "none"; + return; + } else { + observationReuqestsContainer.style.display = "unset"; + } + + const observationReuqestsNode = document.getElementById("observation-requests"); + observationReuqestsNode.innerHTML = ""; + observations.sort((g1, g2) => { + let g1D, g2D; + g1D = g1.observationRequested ? g1.observationRequested : g1.observation.start; + g2D = g2.observationRequested ? g2.observationRequested : g2.observation.start; + return g1D - g2D; + }); + + for (const graduation of observations) { + const row = document.createElement("tr"); + const iconCell = document.createElement("td"); + const icon = document.createElement("img"); + icon.src = graduation.getIcon(); + row.appendChild(iconCell); + + const nameCell = document.createElement("td"); + nameCell.innerHTML = `${graduation.student.name}`; + row.appendChild(nameCell); + + const dateCell = document.createElement("td"); + let date; + if (graduation.observationRequested) { + date = graduation.observationRequested; + } else { + date = graduation.observation.start; + } + dateCell.innerHTML = date.toLocaleString("de-DE", { month: "numeric", day: "numeric", year: "numeric", hour: "numeric", minute: "numeric" }); + row.appendChild(dateCell); + + const btnCell = document.createElement("td"); + if (graduation.observation && !graduation.observation.ready()) { + btnCell.innerHTML = "In Beobachtungsphase"; + } else { + const startBtn = document.createElement("button"); + if (graduation.observationRequested) { + startBtn.addEventListener("click", () => { + graduation.startObservation(); + //TODO(muhq): Add observation icon-button. + startBtn.remove(); + btnCell.innerHTML = "In Beobachtungsphase"; + }); + startBtn.innerHTML = `Beobachtungsphase beginnen`; + startBtn.classList.add("start-observation"); + } else { + startBtn.addEventListener("click", () => { + window.open(`/mod/page/view.php?id=93017047&userToLoad=${graduation.student.id}`, '_blank'); + }); + startBtn.innerHTML = `Graduierung abschließen`; + startBtn.classList.add("end-observation"); + } + btnCell.appendChild(startBtn); + } + row.appendChild(btnCell); + + observationReuqestsNode.appendChild(row); + } } function submitMassGraduation() { + let promises = []; for(const li of document.querySelectorAll("li.group-member")) { const reason = li.querySelector(".group-member-point-reason").value; const student = li.student; if (li.querySelector(".group-member-green").innerHTML === "X") { - submitGraduationChange(student, GraduationChange.newGreenPointChange(reason, name)); + promises.push(submitGraduationChange(student, GraduationChange.newGreenPointChange(reason, name))); } if (li.querySelector(".group-member-orange").innerHTML === "X") { - submitGraduationChange(student, GraduationChange.newOrangePointChange(reason, name)); + promises.push(submitGraduationChange(student, GraduationChange.newOrangePointChange(reason, name))); } if (li.querySelector(".group-member-red").innerHTML === "X") { - submitGraduationChange(student, GraduationChange.newRedPointChange(reason, name)); + promises.push(submitGraduationChange(student, GraduationChange.newRedPointChange(reason, name))); } if (li.observationDiv) { let status = []; for (const row of li.observationDiv.querySelectorAll("tbody > tr")) { - status.push(row.querySelector('td[data-yes="true"]').innerHTML === "X"); + if (row.querySelector('td[data-yes="true"]').innerHTML === "X") + status.push("yes"); + else if (row.querySelector('td[data-no="true"]').innerHTML === "X") + status.push("no"); + else + status.push(""); } - submitObservation(student, new Observation(Date.now(), status)); + promises.push(submitObservation(student, new Observation(new Date(), status))); } } + + const state = document.getElementById("submit-mass-graduation-state"); + Promise.all(promises).then(() => { + state.style.display = "inline"; + state.innerHTML = "✓"; + state.style.color = "green"; + for (const li of document.querySelectorAll("li.group-member")) { + if (!li.observationDiv) + continue; + li.observationDiv.remove(); + li.observationDiv = null; + } + }).catch((error) => { + state.style.display = "inline"; + state.innerHTML = "X"; + state.style.color = "red"; + console.log(error); + }); } function printRedPointNote(li) { print(); } -window.onload = function() { +async function init() { + document.getElementById("submit-mass-graduation").addEventListener("click", submitMassGraduation); + name = getName(); + initSelection( "group-selection", async function() { return (await fetchGroups()).values(); }, (group) => `${group.name}`, loadGroup, ); - document.getElementById("submit-mass-graduation").addEventListener("click", submitMassGraduation); - name = getName(); } + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", init); +} else { + init(); +} + |