schoolbox web extension :)
42willow.github.io
1import { dataAttr, injectInlineStyles, setDataAttr, uninjectInlineStyles } from "@/utils";
2import type { Period } from "@/utils/periodUtils";
3import { getListOfPeriods } from "@/utils/periodUtils";
4import { Plugin } from "@/utils/plugin";
5import styleText from "./styles.css?inline";
6
7const ID = "progressBar";
8const PLUGIN_ID = `plugin-${ID}`;
9
10export default new Plugin(
11 {
12 id: ID,
13 name: "Progress Bar",
14 description: "Displays a progress bar below the timetable to show the time of the day.",
15 },
16 true,
17 null,
18 () => {
19 if (window.location.pathname === "/" && document.querySelector(".timetable")) {
20 const periodList = getListOfPeriods();
21
22 const progressRow = document.createElement("tr");
23 progressRow.classList.add("progress-container");
24 document.querySelector(".timetable > thead")?.insertAdjacentElement("beforeend", progressRow);
25
26 injectInlineStyles(styleText, PLUGIN_ID);
27 injectProgressBars(periodList, progressRow);
28
29 setDataAttr(progressRow, `${PLUGIN_ID}-row`);
30 }
31 },
32 () => {
33 uninjectInlineStyles(PLUGIN_ID);
34 uninjectProgressBars();
35 },
36 [".timetable"],
37);
38
39function injectProgressBars(periodList: Period[], container: HTMLElement) {
40 if (document.querySelector(dataAttr(`${PLUGIN_ID}-row`))) return;
41
42 for (const period of periodList) {
43 const td = document.createElement("td");
44 const progressBar = document.createElement("progress");
45 const progress = period.getProgress();
46 progressBar.className = "progress-bar";
47 progressBar.max = 100;
48 progressBar.style.width = "100%";
49 progressBar.value = progress;
50
51 if (progress < 100) {
52 const intervalId = setInterval(() => {
53 progressBar.value = period.getProgress();
54 if (progressBar.value === 100) {
55 clearInterval(intervalId);
56 }
57 }, 10000);
58 }
59
60 td.appendChild(progressBar);
61 container.appendChild(td);
62 }
63}
64
65function uninjectProgressBars() {
66 const row = document.querySelector(dataAttr(`${PLUGIN_ID}-row`));
67 row?.parentElement?.removeChild(row);
68}