From 21cdbdb5aa9b41d32407163e03c1f2b6286876c1 Mon Sep 17 00:00:00 2001
From: Paul Schaefer <yeppaul2@gmail.com>
Date: Thu, 14 Jun 2018 18:57:22 -0400
Subject: [PATCH] Added hide/show watched movie functionality fixing #13

---
 public/index.jade    |  4 ++++
 public/js/app.coffee | 52 +++++++++++++++++++++++++++-----------------
 public/main.sass     | 10 +++++++++
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/public/index.jade b/public/index.jade
index 1db6ef3..02aad3e 100644
--- a/public/index.jade
+++ b/public/index.jade
@@ -10,3 +10,7 @@ for movie, index in movies
 		label(for="#{index}")= index
 p.text-center#count
 	em #{watchedCount} watched, #{unwatchedCount} unwatched, #{totalCount} total.
+	br
+	input(type="checkbox" id="hide" name="hide")
+	label(for="hide")
+		| Hide Watched
diff --git a/public/js/app.coffee b/public/js/app.coffee
index 17952a3..c2c116d 100644
--- a/public/js/app.coffee
+++ b/public/js/app.coffee
@@ -6,27 +6,29 @@ logging = false
 # Loops through inputs and label names, then performs search request for details & adds watched movies to localStorage
 listMovies = () ->
 	for movie in document.getElementsByTagName('label')
-		movie.addEventListener('click', (event) ->
-			event.preventDefault()
-			searchTMDb(event.target.innerHTML)
-		)
+		if movie.htmlFor != 'hide'
+			movie.addEventListener('click', (event) ->
+				event.preventDefault()
+				searchTMDb(event.target.innerHTML)
+			)
 	for input in document.getElementsByTagName('input')
-		if localStorage.getItem(input.name)
-			document.getElementById(input.name).parentElement.title = 'watched'
-			document.getElementById(input.name).setAttribute('checked', 'checked')
-		input.addEventListener('click', (event) ->
-			if event.target.checked
-				localStorage.setItem(event.target.name, 'watched')
-				event.target.parentElement.title = 'watched'
-			else
-				localStorage.removeItem(event.target.name)
-				event.target.parentElement.title = ''
-		)
-		# Press `Enter` when focused on an input to open the modal
-		input.addEventListener('keyup', (event) ->
-			if (event.keyCode == 13)
-				document.querySelector('label[for="' + event.target.id + '"]').click()
-		)
+		if input.id != 'hide'
+			if localStorage.getItem(input.name)
+				document.getElementById(input.name).parentElement.title = 'watched'
+				document.getElementById(input.name).setAttribute('checked', 'checked')
+			input.addEventListener('click', (event) ->
+				if event.target.checked
+					localStorage.setItem(event.target.name, 'watched')
+					event.target.parentElement.title = 'watched'
+				else
+					localStorage.removeItem(event.target.name)
+					event.target.parentElement.title = ''
+			)
+			# Press `Enter` when focused on an input to open the modal
+			input.addEventListener('keyup', (event) ->
+				if (event.keyCode == 13)
+					document.querySelector('label[for="' + event.target.id + '"]').click()
+			)
 
 # Search The Movie Database - https://www.themoviedb.org/
 searchTMDb = (query) ->
@@ -121,6 +123,16 @@ document.onkeyup = (event) ->
 	if (event.keyCode == 27)
 		document.getElementById('overlay').classList.remove('open')
 
+# Hides watched videos on click
+document.getElementById('hide').addEventListener('click', (event) ->
+	for movie in document.getElementsByClassName('movie')
+		if movie.title
+			if document.getElementById('hide').checked
+				movie.style.display = 'none'
+			else
+				movie.style.display = ''
+)
+
 # Run everything on load
 findGenres()
 listMovies()
diff --git a/public/main.sass b/public/main.sass
index 1a0ac7c..ba16441 100644
--- a/public/main.sass
+++ b/public/main.sass
@@ -25,6 +25,7 @@ a
 #count
 	margin: $small-margin auto
 	color: $light-color
+	line-height: 2
 
 .movie
 	background-color: $muted-color
@@ -111,6 +112,15 @@ a
 		visibility: visible
 		opacity: 1
 
+#hide
+	margin-top: 0
+	vertical-align: middle
+label[for="hide"]
+	margin: 0 0 0 3px
+	font-weight: normal
+	font-size: 16px
+	user-select: none
+
 @include media-query($medium-width)
 	#overlay
 		#modal