| |
| |
| import { swr } from "./api.js"; |
| import { esc, fmt } from "./math.js"; |
| import { forSubject, shortDate, tabs } from "./ui.js"; |
|
|
| const day = iso => iso ? new Date(iso).toLocaleDateString("he-IL", { day: "numeric", month: "numeric" }) : ""; |
| const tries = n => `${n} ${n === 1 ? "谞讬住讬讜谉" : "谞讬住讬讜谞讜转"}`; |
|
|
| function row({ attrs, href, title, best, attempts, last }) { |
| return `<li ${attrs}><a href="${href}"><b>${title}</b></a> |
| <span class="gr-num" aria-label="讛爪讬讜谉 讛讟讜讘 讘讬讜转专 ${best}">${best}</span> |
| <span class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${best}"><i style="width:${best}%"></i></span> |
| <span class="muted">${tries(attempts)}${last ? ` 路 讛讗讞专讜谉 讘志${day(last)}` : ""}</span></li>`; |
| } |
|
|
| const testTitle = (t, suffix) => `诪讘讞谉 讘志${shortDate(t.date)}: ${suffix}${t.removed ? " (讛讜住专)" : ""}`; |
|
|
| export const show = view => swr(forSubject("/api/grades"), data => draw(view, data)); |
|
|
| function draw(view, { quizzes, exercise_tests: exercises = [], simulations = [], assignments = [] }) { |
| const none = !quizzes.length && !exercises.length && !simulations.length && !assignments.length; |
| view(`${tabs("grades")}<section class="card" id="grades"><h2>讛爪讬讜谞讬诐 砖诇讬</h2> |
| ${none ? `<p class="muted" id="no-grades">注讜讚 讗讬谉 爪讬讜谞讬诐. 讛讘讜讞谉 砖诇 讻诇 砖讬注讜专 诪讞讻讛 讘住讜祝 讛砖讬注讜专 讘诪住诇讜诇.</p>` : ""} |
| ${quizzes.length ? `<h3>讘讞谞讬诐</h3><ul class="plain grades" id="quiz-grades">${quizzes.map(g => row({ attrs: `data-lesson="${esc(g.lesson.id)}"`, href: `#/quiz/${esc(g.lesson.id)}`, |
| title: fmt(g.lesson.name), best: g.best, attempts: g.attempts, last: g.last })).join("")}</ul>` : ""} |
| ${exercises.length ? `<h3>诪讘讞谞讬 转专讙讜诇</h3><ul class="plain grades" id="exercise-grades">${exercises.map(g => row({ attrs: `data-test="${g.test.id}" data-number="${g.number}"`, |
| href: `#/test/${g.test.id}`, title: testTitle(g.test, g.title || `诪讘讞谉 转专讙讜诇 ${g.number}`), best: g.best, attempts: g.attempts, last: g.last })).join("")}</ul>` : ""} |
| ${assignments.length ? `<h3>诪砖讬诪讜转</h3><ul class="plain grades" id="assignment-grades">${assignments.map(g => `<li data-assignment="${g.assignment.id}"> |
| <a href="#/assignment/${g.assignment.id}"><b>${fmt(g.assignment.title)}</b>${g.assignment.removed ? " (讛讜住专讛)" : ""}</a> |
| <span class="gr-num" aria-label="讛爪讬讜谉 ${g.grade}">${g.grade}</span> |
| <span class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${g.grade}"><i style="width:${g.grade}%"></i></span> |
| ${g.note ? `<span class="muted gr-note">讛注专转 讛诪讜专讛: ${fmt(g.note)}</span>` : `<span class="muted">${g.assignment.kind === "exercise_test" ? "诪讘讞谉 转专讙讜诇" : "诪砖讬诪讛"}</span>`}</li>`).join("")}</ul>` : ""} |
| ${simulations.length ? `<h3>诪讘讞谞讬 住讬诪讜诇爪讬讛</h3><ul class="plain grades" id="simulation-grades">${simulations.map(g => row({ attrs: `data-test="${g.test.id}"`, |
| href: `#/test/${g.test.id}`, title: testTitle(g.test, "诪讘讞谉 住讬诪讜诇爪讬讛"), best: g.best, attempts: g.attempts, last: g.last })).join("")}</ul>` : ""}</section>`); |
| } |
|
|
