feat/video tags #27

.env.example

@@ -25,5 +25,6 @@ GOOGLE_ID = x
 GOOGLE_SECRET = x
 
 # Only needed if you are using Github login
+# For local development, use http://localhost:3000 as the homepage URL and http://localhost:3000/oauth/github/callback as the callback URL
 GITHUB_ID = x
 GITHUB_SECRET = x

src/assets/js/addLesson.js

@@ -1,48 +1,53 @@
-const title = document.getElementById('video-title');
-const videoId = document.getElementById('video-id');
-const classNo = document.getElementById('number');
-const addTsButton = document.getElementById('add-timestamp');
-let tsIndex = document.querySelectorAll('.timestamp').length;
+const title = document.getElementById("video-title");
+const videoId = document.getElementById("video-id");
+const classNo = document.getElementById("number");
+const addTsButton = document.getElementById("add-timestamp");
+let tsIndex = document.querySelectorAll(".timestamp").length;
 
 title.addEventListener("change", addPermalink);
 videoId.addEventListener("change", addThumbnail);
 classNo.addEventListener("change", updateSlidesClass);
-addTsButton.addEventListener('click', addTimestamp);
+addTsButton.addEventListener("click", addTimestamp);
 
 function addPermalink() {
-	const permalink = title.value
-
-		.split('')
-		.map(c => c.toLowerCase())
-		.filter(c => {
-			return (c.charCodeAt(0) >= 97 && c.charCodeAt(0) <= 122) || c.charCodeAt(0) === 32;
-		})
-		.join('')
-		.replace(/\s/g, "-");
-		document.getElementById("permalink").value = permalink;
-		document.getElementById("permalink").disabled = false;
+  const permalink = title.value
+
+    .split("")
+    .map((c) => c.toLowerCase())
+    .filter((c) => {
+      return (
+        (c.charCodeAt(0) >= 97 && c.charCodeAt(0) <= 122) ||
+        c.charCodeAt(0) === 32
+      );
+    })
+    .join("")
+    .replace(/\s/g, "-");
+  document.getElementById("permalink").value = permalink;
+  document.getElementById("permalink").disabled = false;
 }
 
 function addThumbnail() {
-	const thumbnail = `https://i3.ytimg.com/vi/${videoId.value}/maxresdefault.jpg`;
-	document.getElementById("thumbnail").value = thumbnail;
-	document.getElementById("thumbnail").disabled = false;
+  const thumbnail = `https://i3.ytimg.com/vi/${videoId.value}/maxresdefault.jpg`;
+  document.getElementById("thumbnail").value = thumbnail;
+  document.getElementById("thumbnail").disabled = false;
 }
 
 function updateSlidesClass() {
-	document.getElementById("slides-classNo").value = classNo.value;
+  document.getElementById("slides-classNo").value = classNo.value;
 }
 
 function addTimestamp(e) {
-	e.preventDefault();
-	const newTs = document.createElement('div');
-	newTs.classList.add('timestamp');
-	newTs.innerHTML = `
+  e.preventDefault();
+  const newTs = document.createElement("div");
+  newTs.classList.add("timestamp");
+  newTs.innerHTML = `
 		<label for="ts-time-${tsIndex}">Time</label>
 		<input id="ts-time-${tsIndex}" type="number" name="tsTime">
 		<label for="ts-title-${tsIndex}">Title</label>
 		<input id="ts-title-${tsIndex}" type="text" name="tsTitle">
 	`;
-	tsIndex += 1;
-	document.getElementById('timestamps').append(newTs);
-}
+  tsIndex += 1;
+  document.getElementById("timestamps").append(newTs);
+}
+
+

src/assets/js/filterTags.js

@@ -0,0 +1,34 @@
+const filterTags = document.querySelectorAll(".filter-tag");
+const clearFilterBtn = document.getElementById("filter-tag-clear");
+
+// when clicking on a filter tag, add it to the url query string like /class/filter?tags=tag1,tag2
+filterTags.forEach((tag) => {
+  tag.addEventListener("click", (e) => {
+    const tag = e.target.value;
+
+    //url encode the tag
+    const encodedTag = encodeURIComponent(tag);
+
+    const tags = new URLSearchParams(window.location.search).get("tags");
+
+    // if the tag is already in the query string, remove it
+    let newTags = "";
+
+    if (tags) {
+      const tagArr = tags.split(",");
+      if (tagArr.includes(tag)) {
+        tagArr.splice(tagArr.indexOf(tag), 1);
+      } else {
+        tagArr.push(encodedTag);
+      }
+      newTags = tagArr.join(",");
+    } else {
+      newTags = tag;
+    }
+    window.location.href = `/class/filter?tags=${newTags}`;
+  });
+});
+
+clearFilterBtn.addEventListener("click", (e) => {
+  window.location.href = `/class/filter`;
+});