From aa7da09cf3a9e07120209d610b26889ae92fe2f5 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Wed, 15 Feb 2023 15:24:43 -0600
Subject: [PATCH 01/16] Removed duplicate semicolon

---
 src/controllers/homework.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controllers/homework.js b/src/controllers/homework.js
index 5a09833..c268ed1 100644
--- a/src/controllers/homework.js
+++ b/src/controllers/homework.js
@@ -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 = [];

From 734316f2b69e4e8f19826e0d5d0a470143e718c0 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Wed, 15 Feb 2023 15:25:21 -0600
Subject: [PATCH 02/16] Simplified boolean expression

---
 src/controllers/homework.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controllers/homework.js b/src/controllers/homework.js
index c268ed1..fff3ab8 100644
--- a/src/controllers/homework.js
+++ b/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);

From 0dbaab11226916643982486b2c7a7296427650c9 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Thu, 16 Feb 2023 17:49:43 -0600
Subject: [PATCH 03/16] Add progressBar mixin to allLessons page

---
 src/views/allLessons.pug | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/allLessons.pug b/src/views/allLessons.pug
index 42b783e..536c184 100644
--- a/src/views/allLessons.pug
+++ b/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")

From a87226537feec49257824ba6b6c605748fe18061 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Thu, 16 Feb 2023 17:49:59 -0600
Subject: [PATCH 04/16] Add initial progress bar styling

---
 src/assets/css/index.css | 82 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index b68f0f4..d7cc227 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -1876,6 +1876,88 @@ dd ol {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+
+/* Progress Meter styles */
+.meter {
+  box-sizing: content-box;
+  height: 2rem;
+  position: relative;
+  margin: 2rem 0;
+  background: linear-gradient(#901782, #ff1d69);
+  border-radius: 25px;
+  padding: 10px;
+  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
+}
+.meter > span {
+  display: block;
+  height: 100%;
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: bold;
+  text-align: right;
+  padding: 0 1rem;
+  border-radius: 20px 8px 8px 20px;
+  background: linear-gradient(75deg, #f94355 1%, #fe951a 70%);
+  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
+  inset 0 -2px 6px rgba(0, 0, 0, 0.4);
+  position: relative;
+  overflow: hidden;
+}
+.meter > span:after,
+.animate > span > span {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-image: linear-gradient(
+          -45deg,
+          rgba(255, 255, 255, 0.2) 25%,
+          transparent 25%,
+          transparent 50%,
+          rgba(255, 255, 255, 0.2) 50%,
+          rgba(255, 255, 255, 0.2) 75%,
+          transparent 75%,
+          transparent
+  );
+  z-index: 1;
+  background-size: 50px 50px;
+  animation: move 2s linear infinite;
+  border-radius: 20px 8px 8px 20px;
+  overflow: hidden;
+}
+
+.animate > span:after {
+  display: none;
+}
+
+@keyframes move {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 50px 50px;
+  }
+}
+
+.orange > span {
+  background-image: linear-gradient(#f1a165, #f36d0a);
+}
+
+.red > span {
+  background-image: linear-gradient(#f0a3a3, #f42323);
+}
+
+.green {
+  background-image: linear-gradient(#9ec400, #38761d);
+}
+
+.nostripes > span > span,
+.nostripes > span::after {
+  background-image: none;
+}
+
 @media (min-width: 640px) {
   .xs\:w-1\/3 {
     width: 33.333333%;

From bc7541868c273f7541958c5bbaae66363922ea96 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Thu, 16 Feb 2023 17:50:11 -0600
Subject: [PATCH 05/16] Add progressBar client-side logic

---
 src/assets/js/progressBar.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/assets/js/progressBar.js

diff --git a/src/assets/js/progressBar.js b/src/assets/js/progressBar.js
new file mode 100644
index 0000000..ed71b83
--- /dev/null
+++ b/src/assets/js/progressBar.js
@@ -0,0 +1,30 @@
+const meter = document.querySelector('.meter > span');
+const checkboxes = document.querySelectorAll('.watched');
+let completed = 0
+
+for (const checkbox of checkboxes) {
+    checkbox.addEventListener('change', updateProgress);
+    if (checkbox.checked) {
+        completed += 1;
+    }
+}
+
+function updateWidth() {
+    meter.style.width = `${completed / checkboxes.length * 100}%`;
+    meter.innerText = `${completed} / ${checkboxes.length}  `;
+    if (completed === checkboxes.length) {
+        meter.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()

From 1f7a06aa3694a70301088127b9380d2bf9b74684 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Thu, 16 Feb 2023 17:50:28 -0600
Subject: [PATCH 06/16] Create basic progress bar mixin

---
 src/views/mixins/progressBar.pug | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/views/mixins/progressBar.pug

diff --git a/src/views/mixins/progressBar.pug b/src/views/mixins/progressBar.pug
new file mode 100644
index 0000000..51a77a0
--- /dev/null
+++ b/src/views/mixins/progressBar.pug
@@ -0,0 +1,3 @@
+mixin progressBar
+    .meter.animate
+        span current

From af86276ea625b3d7423310b1b971d75e76f05148 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sat, 25 Feb 2023 20:58:55 -0600
Subject: [PATCH 07/16] Revert "Add initial progress bar styling"

This reverts commit a87226537feec49257824ba6b6c605748fe18061.
---
 src/assets/css/index.css | 82 ----------------------------------------
 1 file changed, 82 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index d7cc227..b68f0f4 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -1876,88 +1876,6 @@ dd ol {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-
-/* Progress Meter styles */
-.meter {
-  box-sizing: content-box;
-  height: 2rem;
-  position: relative;
-  margin: 2rem 0;
-  background: linear-gradient(#901782, #ff1d69);
-  border-radius: 25px;
-  padding: 10px;
-  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-}
-.meter > span {
-  display: block;
-  height: 100%;
-  color: #fff;
-  font-size: 1.1rem;
-  font-weight: bold;
-  text-align: right;
-  padding: 0 1rem;
-  border-radius: 20px 8px 8px 20px;
-  background: linear-gradient(75deg, #f94355 1%, #fe951a 70%);
-  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
-  inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-  position: relative;
-  overflow: hidden;
-}
-.meter > span:after,
-.animate > span > span {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-image: linear-gradient(
-          -45deg,
-          rgba(255, 255, 255, 0.2) 25%,
-          transparent 25%,
-          transparent 50%,
-          rgba(255, 255, 255, 0.2) 50%,
-          rgba(255, 255, 255, 0.2) 75%,
-          transparent 75%,
-          transparent
-  );
-  z-index: 1;
-  background-size: 50px 50px;
-  animation: move 2s linear infinite;
-  border-radius: 20px 8px 8px 20px;
-  overflow: hidden;
-}
-
-.animate > span:after {
-  display: none;
-}
-
-@keyframes move {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 50px 50px;
-  }
-}
-
-.orange > span {
-  background-image: linear-gradient(#f1a165, #f36d0a);
-}
-
-.red > span {
-  background-image: linear-gradient(#f0a3a3, #f42323);
-}
-
-.green {
-  background-image: linear-gradient(#9ec400, #38761d);
-}
-
-.nostripes > span > span,
-.nostripes > span::after {
-  background-image: none;
-}
-
 @media (min-width: 640px) {
   .xs\:w-1\/3 {
     width: 33.333333%;

From 2b7c349f2f15baf6ef90b69e7ee58dc863a8e480 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sat, 25 Feb 2023 22:07:54 -0600
Subject: [PATCH 08/16] Convert progressBar pug classes to tailwind (...) - See
 https://github.com/labrocadabro/communitytaught/pull/19#pullrequestreview-1314601531

---
 src/views/mixins/progressBar.pug | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/mixins/progressBar.pug b/src/views/mixins/progressBar.pug
index 51a77a0..e3bb547 100644
--- a/src/views/mixins/progressBar.pug
+++ b/src/views/mixins/progressBar.pug
@@ -1,3 +1,3 @@
 mixin progressBar
-    .meter.animate
-        span current
+    div.meter.w-full.h-8.rounded.mb-6.bg-twilight-50.border
+        div.meter-inner.text-center.text-lg.font-medium.h-8.text-twilight-50.bg-pink-800 current progress

From 66138746ce6f5869fac0a27caeadeefd21958deb Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sat, 25 Feb 2023 22:08:22 -0600
Subject: [PATCH 09/16] Refactor meter selector and variable name to be more
 specific

---
 src/assets/js/progressBar.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/js/progressBar.js b/src/assets/js/progressBar.js
index ed71b83..3ff2181 100644
--- a/src/assets/js/progressBar.js
+++ b/src/assets/js/progressBar.js
@@ -1,4 +1,4 @@
-const meter = document.querySelector('.meter > span');
+const innerMeter = document.querySelector('.meter-inner');
 const checkboxes = document.querySelectorAll('.watched');
 let completed = 0
 
@@ -10,10 +10,10 @@ for (const checkbox of checkboxes) {
 }
 
 function updateWidth() {
-    meter.style.width = `${completed / checkboxes.length * 100}%`;
-    meter.innerText = `${completed} / ${checkboxes.length}  `;
+    innerMeter.style.width = `${completed / checkboxes.length * 100}%`;
+    innerMeter.innerText = `${completed} / ${checkboxes.length}  `;
     if (completed === checkboxes.length) {
-        meter.innerText = "You are a software engineer.";
+        innerMeter.innerText = "You are a software engineer.";
     }
 }
 

From ecad5409efaae0c7db3b913c022c4aeb0959eae5 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sat, 25 Feb 2023 22:08:56 -0600
Subject: [PATCH 10/16] Add tailwind transition styling to progress meter (...)
 - See
 https://github.com/labrocadabro/communitytaught/pull/19#pullrequestreview-1314601531

---
 src/tailwind.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/tailwind.css b/src/tailwind.css
index 72f6497..8665f77 100644
--- a/src/tailwind.css
+++ b/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;

From fd0251a1b4c6f23fd4be40f96493d169ac2d5f1d Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sun, 26 Feb 2023 02:22:44 -0600
Subject: [PATCH 11/16] Add conditional render depending on presence of
 totalCount from server

---
 src/views/mixins/progressBar.pug | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/views/mixins/progressBar.pug b/src/views/mixins/progressBar.pug
index e3bb547..f95fb6a 100644
--- a/src/views/mixins/progressBar.pug
+++ b/src/views/mixins/progressBar.pug
@@ -1,3 +1,6 @@
-mixin progressBar
+mixin progressBar(completedCount, totalCount)
     div.meter.w-full.h-8.rounded.mb-6.bg-twilight-50.border
-        div.meter-inner.text-center.text-lg.font-medium.h-8.text-twilight-50.bg-pink-800 current progress
+        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}

From f51252f940b0c91b8f6f16a8f3b30f02c75fdea7 Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sun, 26 Feb 2023 02:25:11 -0600
Subject: [PATCH 12/16] Refactor initial completed count to be based on
 server-side rendered value (...) - This allows for use of progress bar
 anywhere on the app. - The server will render the current completed
 lessonProgress count as inner meter's initial text.

---
 src/assets/js/progressBar.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/assets/js/progressBar.js b/src/assets/js/progressBar.js
index 3ff2181..7093515 100644
--- a/src/assets/js/progressBar.js
+++ b/src/assets/js/progressBar.js
@@ -1,11 +1,10 @@
 const innerMeter = document.querySelector('.meter-inner');
 const checkboxes = document.querySelectorAll('.watched');
-let completed = 0
+let completed = Number(innerMeter.innerText);
 
-for (const checkbox of checkboxes) {
-    checkbox.addEventListener('change', updateProgress);
-    if (checkbox.checked) {
-        completed += 1;
+if (checkboxes) {
+    for (const checkbox of checkboxes) {
+        checkbox.addEventListener('change', updateProgress);
     }
 }
 
@@ -23,8 +22,8 @@ function updateProgress(e) {
     } else {
         completed -= 1;
     }
-    updateWidth()
+    updateWidth();
 }
 
 // Set the progress bar width on page load
-updateWidth()
+updateWidth();

From f6cba91b6f4a707dac034137cd7d8a6ddb26a5bb Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sun, 26 Feb 2023 02:26:06 -0600
Subject: [PATCH 13/16] Include total and completed lesson counts in dashboard
 render

---
 src/controllers/pages.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/controllers/pages.js b/src/controllers/pages.js
index e79f3f4..2a2e0ff 100644
--- a/src/controllers/pages.js
+++ b/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) => {

From 12863e0f111c2f14017275534e4b4581332aa96d Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sun, 26 Feb 2023 02:26:33 -0600
Subject: [PATCH 14/16] Include completed lesson count in allLessons render

---
 src/controllers/lessons.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/controllers/lessons.js b/src/controllers/lessons.js
index f37ab42..ecc9768 100644
--- a/src/controllers/lessons.js
+++ b/src/controllers/lessons.js
@@ -104,10 +104,15 @@ export const getAllLessonsProgress = async (userId, lessons) => {
 
 export const allLessons = async (req, res) => {
 	let lessons = await Lesson.find().lean().sort({ _id: 1 });
+	let completedCount = 0
 	if (req.isAuthenticated()) {
 		lessons = await getAllLessonsProgress(req.user.id, lessons);
+		completedCount = await LessonProgress.countDocuments({
+			user: req.user.id,
+			watched: true,
+		});
 	}
-	res.render("allLessons", { lessons });
+	res.render("allLessons", { lessons, completedCount });
 };
 
 export const getLessonProgress = async (userId, lesson) => {

From a03dcb9bb9da9ff2c1a6af28228f6136ff88dd6a Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sun, 26 Feb 2023 02:27:17 -0600
Subject: [PATCH 15/16] Render progress bar conditionally when logged in (...)
 - Pass in completed count to progress bar mixin

---
 src/views/allLessons.pug | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/allLessons.pug b/src/views/allLessons.pug
index 536c184..eecae94 100644
--- a/src/views/allLessons.pug
+++ b/src/views/allLessons.pug
@@ -12,7 +12,9 @@ block content
 
 	h1.mb-4 All Classes
 
-	+progressBar
+	if loggedIn
+		+progressBar(completedCount)
+
 	#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)

From cd69c35b5b6b9643256e0898117c831b6aea63de Mon Sep 17 00:00:00 2001
From: 7MinutesDead-Git <7minutesdead@gmail.com>
Date: Sun, 26 Feb 2023 02:27:39 -0600
Subject: [PATCH 16/16] Render progress bar conditionally when logged in (...)
 - Pass in completed and total lesson counts to progress bar mixin

---
 src/views/dashboard.pug | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/views/dashboard.pug b/src/views/dashboard.pug
index c300a19..75d2399 100644
--- a/src/views/dashboard.pug
+++ b/src/views/dashboard.pug
@@ -1,5 +1,6 @@
 extends layouts/default.pug
 include ./mixins/lessonCard.pug
+include ./mixins/progressBar.pug
 
 block variables
 	- title = "Dashboard"
@@ -11,6 +12,10 @@ block content
 	.flex.justify-center.items-baseline.flex-wrap.flex-wrap-reverse
 		h1.mb-6.mr-auto Your Progress
 		h3.mb-6.text-xl.text-twilight-900.font-medium #{user.username}
+
+	if loggedIn
+		+progressBar(completedCount, totalCount)
+
 	h2.mb-3 Next Class
 	#next-lesson.w-full.max-w-80
 		if lesson