Add progress meter

src/assets/js/progressBar.js

@@ -0,0 +1,29 @@
+const innerMeter = document.querySelector('.meter-inner');
+const checkboxes = document.querySelectorAll('.watched');
+let completed = Number(innerMeter.innerText);
+
+if (checkboxes) {
+    for (const checkbox of checkboxes) {
+        checkbox.addEventListener('change', updateProgress);
+    }
+}
+
+function updateWidth() {
+    innerMeter.style.width = `${completed / checkboxes.length * 100}%`;
+    innerMeter.innerText = `${completed} / ${checkboxes.length}  `;
+    if (completed === checkboxes.length) {
+        innerMeter.innerText = "You are a software engineer.";
+    }
+}
+
+function updateProgress(e) {
+    if (e.target.checked) {
+        completed += 1;
+    } else {
+        completed -= 1;
+    }
+    updateWidth();
+}
+
+// Set the progress bar width on page load
+updateWidth();

src/controllers/homework.js

@@ -40,7 +40,7 @@ export const addEditHomework = async (req, res) => {
 				class: hwClass[i],
 				due: req.body.due,
 				description: hwDesc[i],
-				required: hwRequired[i] === "true" ? true : false,
+				required: hwRequired[i] === "true",
 			};
 			const hwItem = await HomeworkItem.findByIdAndUpdate(hwId[i] || mongoose.Types.ObjectId(), item, {upsert: true, new: true});
 			items.push(hwItem._id);
@@ -113,7 +113,7 @@ export const showHomework =  async (req, res) => {
 };
 
 export const importData = async (req, res) => { 
-	if (!req.isAuthenticated()) return notLoggedIn(req, res);;
+	if (!req.isAuthenticated()) return notLoggedIn(req, res);
 	try {
 		const data = JSON.parse(JSON.parse(req.body.import).CBState);
 		const submitData = [];

src/controllers/pages.js

@@ -23,7 +23,13 @@ export const dashboard = async (req, res) => {
 		currentLesson = await Lesson.findById(req.user.currentClass);
 		currentLesson = await getLessonProgress(req.user.id, currentLesson);
 	}
-	res.render("dashboard", { lesson: currentLesson });
+
+	const totalCount = await LessonProgress.countDocuments();
+	const completedCount = await LessonProgress.countDocuments({
+		user: req.user.id,
+		watched: true,
+	});
+	res.render("dashboard", { lesson: currentLesson, completedCount, totalCount });
 };
 
 export const account = (req, res) => {

src/tailwind.css

@@ -191,6 +191,14 @@
 		@apply shadow-[0_2px_10px_0_rgba(0,0,0,0.1)];
 	}
 
+	/*** PROGRESS METER ***/
+	.meter-inner {
+		@apply transition-all duration-500 ease-in-out;
+	}
+	.meter {
+		@apply overflow-hidden;
+	}
+
 	/********* temporary ************/
 	#video {
 		max-width: 960px;

src/views/allLessons.pug

@@ -1,5 +1,6 @@
 extends layouts/default.pug
 include ./mixins/lessonCard.pug
+include ./mixins/progressBar.pug
 
 block variables
 	- title = "Classes"
@@ -11,6 +12,7 @@ block content
 
 	h1.mb-4 All Classes
 
+	+progressBar
 	#lessons.grid.gap-y-12.gap-x-16(class="sm:gap-y-24 grid-cols-[repeat(auto-fill,_minmax(285px,_1fr))]")
 		each lesson in lessons
 			+lessonCard(lesson)
@@ -21,3 +23,4 @@ append scripts
 	if loggedIn
 		script(src="/js/lessonProgress.js")
 		script(src="/js/lessonDone.js")
+		script(src="/js/progressBar.js")

src/views/mixins/progressBar.pug

@@ -0,0 +1,6 @@
+mixin progressBar(completedCount, totalCount)
+    div.meter.w-full.h-8.rounded.mb-6.bg-twilight-50.border
+        if totalCount
+            div.meter-inner.text-center.text-lg.font-medium.h-8.text-twilight-50.bg-pink-800(style=`width: ${completedCount / totalCount * 100}%`) #{completedCount} / #{totalCount}
+        else
+            div.meter-inner.text-center.text-lg.font-medium.h-8.text-twilight-50.bg-pink-800 #{completedCount}