schoolbox web extension :)
1import { injectStyles } from "@/utils";
2import type { Period } from "@/utils/periodUtils";
3import { getListOfPeriods } from "@/utils/periodUtils";
4import { definePlugin } from "@/utils/plugin";
5import styleText from "./styles.css?inline";
6
7export default function init() {
8 definePlugin(
9 "progressBar",
10 () => {
11 if (window.location.pathname === "/" && document.querySelector(".timetable")) {
12 const periodList = getListOfPeriods();
13
14 const progressRow = document.createElement("tr");
15 progressRow.classList.add("progress-container");
16 document.querySelector(".timetable > thead")?.insertAdjacentElement("beforeend", progressRow);
17
18 injectStyles(styleText);
19 insertProgressBars(periodList, progressRow);
20 }
21 },
22 [".timetable"],
23 );
24}
25
26function insertProgressBars(periodList: Period[], container: HTMLElement) {
27 periodList.forEach((period) => {
28 const td = document.createElement("td");
29 const progressBar = document.createElement("progress");
30 const progress = period.getProgress();
31 progressBar.className = "progress-bar";
32 progressBar.max = 100;
33 progressBar.style.width = "100%";
34 progressBar.value = progress;
35
36 if (progress < 100) {
37 const intervalId = setInterval(() => {
38 progressBar.value = period.getProgress();
39 if (progressBar.value === 100) {
40 clearInterval(intervalId);
41 }
42 }, 10000);
43 }
44
45 td.appendChild(progressBar);
46 container.appendChild(td);
47 });
48}