Options page update

Implemented Options page. Events can now be edited or deleted.
AsifulNobel · Feb 17, 2017 · 2bcf35b · 2bcf35b
1 parent 6f1619d
commit 2bcf35b
Show file tree

Hide file tree

Showing 11 changed files with 2,791 additions and 38 deletions.
diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css
diff --git a/fonts/FontAwesome.otf b/fonts/FontAwesome.otf
diff --git a/fonts/fontawesome-webfont.eot b/fonts/fontawesome-webfont.eot
diff --git a/fonts/fontawesome-webfont.svg b/fonts/fontawesome-webfont.svg
diff --git a/fonts/fontawesome-webfont.ttf b/fonts/fontawesome-webfont.ttf
diff --git a/fonts/fontawesome-webfont.woff b/fonts/fontawesome-webfont.woff
diff --git a/fonts/fontawesome-webfont.woff2 b/fonts/fontawesome-webfont.woff2
diff --git a/html/options.html b/html/options.html
@@ -2,14 +2,15 @@
 <html>
 <head>
 	<title>Countdown Timer Options</title>
+	<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
 	<script type="text/javascript" src="../js/directive.js"></script>
 	<script type="text/javascript" src="../js/options.js"></script>
 </head>
 <body>
 	<div>
 		<input type="text" name="timer-name" placeholder="Type Event Name" autofocus="yes">
-		<input type="datetime-local" name="timer-time">
-		<button id="add-button">Add Countdown</button>
+		<input type="datetime-local" name="timer-time" value="2020-01-01T00:00">
+		<i class="fa fa-plus-circle fa-lg" id="add-button"></i>
 	</div>
 
 	<div>

diff --git a/js/directive.js b/js/directive.js
@@ -1,11 +1,5 @@
 var storage = chrome.storage.local;
 
-function countApp() {	
-	this.eventDict = {};
-	this.restoreCountdowns = restoreCountdowns;
-	this.saveEvents = saveEvents.bind(this);	// For passing object context to callback
-}
-
 function replaceTimezone(timeStr) {
 	return timeStr.replace(/\sGMT.*$/, "");
 }
@@ -18,28 +12,41 @@ function setError(errorMsg) {
 	document.getElementById('errors').innerHTML = errorMsg;
 }
 
-function restoreCountdowns(timersList, divFlag) {
+function addZero(str) {
+	return str > 9 ? str : '0'+str;
+}
 
+function formatTime(timeStr) {
+	return timeStr.getFullYear()+'-'+(addZero(timeStr.getMonth()+1))+
+	'-'+addZero(timeStr.getDate())+'T'+addZero(timeStr.getHours())+':'+addZero(timeStr.getMinutes())
+}
+
+// ToDo: Modularize asynchronous callback functions for storage.get,
+// so that those functions call another function with result of storage call.
+function restoreCountdowns(timersList, divFlag) {
 	storage.get('events', function(items){
 		if (typeof items.events !== "undefined") {
-			this.eventDict = items.events
+			var eventDict = items.events
 
-			if (Object.keys(this.eventDict).length > 0 && timersList) {
-				if (divFlag == 0) {
-					for (var key in this.eventDict) {
+			if (Object.keys(eventDict).length > 0 && timersList) {
+				console.log(Object.keys(eventDict).length)
 
-						if (this.eventDict.hasOwnProperty(key)) {
+				if (divFlag == 0) {
+					for (var key in eventDict) {
+						if (eventDict.hasOwnProperty(key)) {
 							timersList.insertAdjacentHTML('beforeend', 
-									'<li>' + key + ': ' + replaceTimezone(this.eventDict[key]) + '</li>')
+								'<li id="'+ key + '">' + key + ': ' + replaceTimezone(eventDict[key]) + 
+								' <i class="fa fa-pencil-square-o edit-ev"></i> <i class="fa fa-times delete-ev"></i>' 
+								+ '</li>')
 						}
 					}
 				}
 				else if (divFlag == 1) {
-					for (var key in this.eventDict) {
+					for (var key in eventDict) {
 
-						if (this.eventDict.hasOwnProperty(key)) {
+						if (eventDict.hasOwnProperty(key)) {
 							timersList.insertAdjacentHTML('beforeend', 
-									'<div>' + key + ': ' + replaceTimezone(this.eventDict[key]) + '</div>')
+									'<div>' + key + ': ' + replaceTimezone(eventDict[key]) + '</div>')
 						}
 					}
 				}
@@ -48,31 +55,81 @@ function restoreCountdowns(timersList, divFlag) {
 	});
 }
 
-function saveEvents() {
+function saveEvent() {
 	var eventTime = document.getElementsByName('timer-time');
 	var eventName = document.getElementsByName('timer-name');
 	var timersList = document.getElementById('timers');
 
-	console.log("Inside save...")
-	console.log(typeof this.eventDict !== "undefined")
-
 	if(eventTime.length > 0 && eventName.length > 0) {
 		var eventDateObj = new Date(eventTime[0].value);
 
 		if (eventName[0].value.length > 0) {
 			if (eventDateObj - Date.now() > 0) {
 
-				this.eventDict[eventName[0].value] = eventDateObj.toUTCString()
-				storage.set({events: this.eventDict}, function() {
-					timersList.insertAdjacentHTML('beforeend', 
-						'<li>' + eventName[0].value + ': ' + replaceTimezone(eventDateObj.toUTCString()) + '</li>')
+				storage.get('events', function(items) {
+					if (typeof items.events !== "undefined") {
+						var eventDict = items.events					
+
+						eventDict[eventName[0].value] = eventDateObj.toUTCString()
+
+						storage.set({events: eventDict}, function() {
+							timersList.insertAdjacentHTML('beforeend', 
+								'<li id="'+ eventName[0].value + '">' + eventName[0].value + ': ' + 
+								replaceTimezone(eventDateObj.toUTCString()) + 
+								'<i class="fa fa-pencil-square-o edit-ev"></i><i class="fa fa-times delete-ev"></i>' 
+								+ '</li>')
+
+							console.log("Successfully Added Event!");
+						});
 
-					storage.get('events', function(items){
-						if (typeof items.events !== "undefined")
-							console.log(items.events)
-					});
-				});
+						clearError();
+					}
+				})
 			}
+			else {
+				setError("Date must be in future.");
+			}
+		}
+		else {
+			setError("Event must have a name.");
 		}
 	}
+}
+
+function editEvent() {
+	// Gets called from event element adjacent edit button
+	var eventTime = document.getElementsByName('timer-time')[0];
+	var eventName = document.getElementsByName('timer-name')[0];
+
+	// Gets parent element which is the event entry
+	var parent = this.parentElement;
+	var parentText = parent.innerText.split(': ');
+
+	eventName.value = parentText[0];
+	eventTime.value = formatTime(new Date(parentText[1]));
+
+	// passes context to deleteEvent fn
+	deleteEvent.call(this);
+}
+
+function deleteEvent() {
+	var parent = this.parentElement;
+	var eventName = parent.innerText.split(': ')[0];
+
+	storage.get('events', function(items) {
+		if (typeof items.events !== "undefined") {
+			var eventDict = items.events					
+
+			delete eventDict[eventName];
+
+			storage.set({events: eventDict}, function() {
+				console.log("Successfully Deleted Event!");
+			});
+
+			clearError();
+		}
+	})
+
+	parent.innerText = '';
+	parent.parentElement.removeChild(parent);
 }
diff --git a/js/options.js b/js/options.js
@@ -1,9 +1,30 @@
 function masterFn() {
-	var capp = new countApp();
+	restoreCountdowns(document.getElementById('timers'), 0);
+	document.getElementById('add-button').addEventListener('click', saveEvent);
+}
 
-	capp.restoreCountdowns(document.getElementById('timers'), 0);
-	document.getElementById('add-button').addEventListener('click', capp.saveEvents);
+function buttonEventAdder() {
+	var editButtons = document.getElementsByClassName('edit-ev');
+	var deleteButtons = document.getElementsByClassName('delete-ev');
+
+	for(var i=0; i < editButtons.length; i++) {
+		editButtons[i].addEventListener('click', editEvent);
+
+		// Always will be same number of delete & edit buttons
+		deleteButtons[i].addEventListener('click', deleteEvent); 
+	}
 }
 
-// waits until initial document without stylesheet and other resources is load
+var fnList = [buttonEventAdder];
+
+// Checks if document is fully loaded every 0.5 second
+setInterval(function() {
+	if (document.readyState == "complete") {
+		for(var i = 0; i < fnList.length; i++) {
+			fnList[i]();
+		}
+	}
+}, 500);
+
+// waits until initial document with stylesheet and other resources is loaded
 document.addEventListener('DOMContentLoaded', masterFn);
diff --git a/js/timer.js b/js/timer.js
@@ -1,7 +1,6 @@
 function masterFn() {
-	var capp = new countApp();
-
-	capp.restoreCountdowns(document.body, 1);
+	restoreCountdowns(document.body, 1);
 }
 
+// waits until initial document without stylesheet and other resources is load
 document.addEventListener('DOMContentLoaded', masterFn);