From 38c94b07bd9cc883d65b9c51b7aa784bb5febc45 Mon Sep 17 00:00:00 2001
From: Neil Brommer <neil@neilbrommer.com>
Date: Mon, 1 Jan 2018 16:55:44 -0800
Subject: [PATCH] Clean up code

---
 js/addBookmarks.js  |  85 ++++++++++++++++++--------------
 js/editBookmarks.js | 115 ++++++++++++++++++++++++--------------------
 js/importExport.js  |  18 ++++---
 js/loadBookmarks.js |  78 +++++++++++++-----------------
 4 files changed, 155 insertions(+), 141 deletions(-)

diff --git a/js/addBookmarks.js b/js/addBookmarks.js
index 6cb7f7d..bb1804f 100644
--- a/js/addBookmarks.js
+++ b/js/addBookmarks.js
@@ -1,24 +1,41 @@
 $(document).ready(function () {
-	$("#newBookmarkModal").on("shown.bs.modal", function () {
-		var combo = $("#newBookmarkGroup");
-		combo.empty();
-		combo.append($("<option>").attr({ "value": "--" })
-			.text("New Group"));
-
-		for (let group of bookmarkList) {
-			if (group != null)
-				combo.append($("<option>").attr({ "value": group.groupIndex })
-					.text(group.title));
-		}
-
-		$("#createGroup").prop("required", true);
-	});
-
+	$("#newBookmarkModal").on("shown.bs.modal", populateGroupList);
 	$("#addBookmarkForm").submit(addNewBookmark);
-
 	$("#newBookmarkGroup").on("change", selectGroupChanged);
 });
 
+function populateGroupList() {
+	var combo = $("#newBookmarkGroup");
+	combo.empty();
+	combo.append($("<option>").attr({ "value": "--" })
+		.text("New Group"));
+
+	var openDBRequest = window.indexedDB.open("bookmarks");
+
+	openDBRequest.onsuccess = function (openEvt) {
+		var db = openEvt.target.result;
+		var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
+
+		groupsStore.getAll().onsuccess = function (getAllEvt) {
+			var groups = getAllEvt.target.result;
+
+			for (let group of groups) {
+				combo.append($("<option>")
+					.attr({ "value": group.groupIndex })
+					.text(group.title));
+			}
+
+			$("#createGroup").prop("required", true);
+			db.close();
+		}
+	}
+
+	openDBRequest.onerror = function (err) {
+		console.error(err);
+		window.alert("Error building groups list");
+	}
+}
+
 function addNewBookmark(e) {
 	e.preventDefault();
 
@@ -31,42 +48,35 @@ function addNewBookmark(e) {
 		var newGroupName = $("#newBookMarkGroupNew").val();
 
 		var openDBRequest = window.indexedDB.open("bookmarks");
-		openDBRequest.onsuccess = function (e) {
-			var db = e.target.result;
+		openDBRequest.onsuccess = function (openEvt) {
+			var db = openEvt.target.result;
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
-			groupsStore.getAll().onsuccess = function (evt) {
-				// find the largest index and use that +1
-				var groups = evt.target.result;
-
-				var largest = -1;
-				for (var group of groups) {
-					if (group.groupIndex > largest)
-						largest = group.groupIndex;
-				}
+			groupsStore.count().onsuccess = function (countEvt) {
+				var numGroups = countEvt.target.result;
 
 				var newGroup = {
-					groupIndex: largest + 1,
+					groupIndex: numGroups,
 					title: newGroupName,
 					bookmarks: [ { name: bkmkName, address: bkmkAddress } ]
 				};
 
 				groupsStore.add(newGroup);
-				// don't need to add to bookmarkList because loadBookmarks is
-				// being called
 
 				db.close();
 				loadBookmarks();
-				$(".modal").modal("hide");
+				$("#newBookmarkModal").modal("hide");
 			}
 		}
 
-		openDBRequest.onerror = function (e) { console.log(e); }
+		openDBRequest.onerror = function (err) {
+			console.log(err);
+			window.alert("There was an error creating the bookmark");
+		}
 	} else { // add to existing group
 		var openDBRequest = window.indexedDB.open("bookmarks");
-		openDBRequest.onsuccess = function (e) {
-			var db = e.target.result;
-
+		openDBRequest.onsuccess = function (openEvt) {
+			var db = openEvt.target.result;
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
 			var groupReq = groupsStore.get(parseInt(bkmkGroup));
@@ -83,7 +93,10 @@ function addNewBookmark(e) {
 			}
 		}
 
-		openDBRequest.onerror = function (e) { console.log(e); }
+		openDBRequest.onerror = function (err) {
+			console.log(err);
+			window.alert("There was an error creating the bookmark");
+		}
 	}
 }
 
diff --git a/js/editBookmarks.js b/js/editBookmarks.js
index 810e771..a9e02df 100644
--- a/js/editBookmarks.js
+++ b/js/editBookmarks.js
@@ -2,7 +2,7 @@ $(document).ready(function () {
 	$("#btnEdit").click(toggleEditing);
 });
 
-function toggleEditing (e) {
+function toggleEditing () {
 	if ($("#btnEdit").hasClass("btn-warning"))
 		disableEditing();
 	else
@@ -15,17 +15,16 @@ function groupMoved(dropEvt) {
 
 	var movedCard = $($(dropEvt.item).children()[0]);
 	var groupName = movedCard.data("group-name");
-	var groupIndex = movedCard.data("group-index");
 
 	if (oldIndex != newIndex) {
 		var openDBRequest = window.indexedDB.open("bookmarks");
 
-		openDBRequest.onsuccess = function (e) {
-			var db = e.target.result;
+		openDBRequest.onsuccess = function (openEvt) {
+			var db = openEvt.target.result;
 
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
-			groupsStore.getAll().onsuccess = function (evt) {
-				var groups = evt.target.result;
+			groupsStore.getAll().onsuccess = function (getAllEvt) {
+				var groups = getAllEvt.target.result;
 
 				if (newIndex > oldIndex) {
 					for (let g of groups) {
@@ -34,11 +33,11 @@ function groupMoved(dropEvt) {
 							groupsStore.put(g);
 
 							// modify the group's card
-							var cardContainer = $("#group-" + (g.groupIndex + 1));
-							cardContainer.attr("id", "group" + g.groupIndex);
+							var cardContainer = $("#group-" + (g.groupIndex + 1))
+								.attr("id", "group" + g.groupIndex);
 
-							var card = $(cardContainer.children()[0]);
-							card.attr("data-group-index", g.groupIndex);
+							var card = $(cardContainer.children()[0])
+								.attr("data-group-index", g.groupIndex);
 						}
 					}
 				} else { // oldIndex > newIndex
@@ -57,23 +56,23 @@ function groupMoved(dropEvt) {
 					}
 				}
 
+				// update the moved group's data
 				var movedGroupData = groups[oldIndex];
-
 				movedGroupData.groupIndex = newIndex;
 				groupsStore.put(movedGroupData);
 
-				// modify the group's card
-				var cardContainer = $("#group-" + oldIndex);
-				cardContainer.attr("id", "group" + newIndex);
-
-				var card = $(cardContainer.children()[0]);
-				card.attr("data-group-index", newIndex);
+				// update the group's card
+				$(dropEvt.item).attr("id", "group" + newIndex);
+				movedCard.attr("data-group-index", newIndex);
 
 				db.close();
 			}
 		}
 
-		openDBRequest.onerror = function (err) { console.log(err); }
+		openDBRequest.onerror = function (err) {
+			console.log(err);
+			window.alert("Error moving group");
+		}
 	}
 }
 
@@ -89,12 +88,13 @@ function bookmarkMoved(dropEvt) {
 		var itemData = {name: item.data("name"), address: item.data("address")};
 
 		var openDBRequest = window.indexedDB.open("bookmarks");
-		openDBRequest.onsuccess = function (dbe) {
-			var db = dbe.target.result;
+
+		openDBRequest.onsuccess = function (openEvt) {
+			var db = openEvt.target.result;
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
-			groupsStore.getAll().onsuccess = function (gete) {
-				var groups = gete.target.result;
+			groupsStore.getAll().onsuccess = function (getAllEvt) {
+				var groups = getAllEvt.target.result;
 
 				var oldGroupData = groups[oldGroupIndex];
 				var newGroupData = groups[newGroupIndex];
@@ -108,17 +108,22 @@ function bookmarkMoved(dropEvt) {
 				db.close();
 			}
 		}
-		openDBRequest.onerror = function (err) { console.error(err); }
+
+		openDBRequest.onerror = function (err) {
+			console.error(err);
+			window.alert("Error moving bookmark");
+		}
 	} else if (oldIndex != newIndex) {
 		var groupIndex = $(dropEvt.from).parent().data("group-index");
 
 		var openDBRequest = window.indexedDB.open("bookmarks");
-		openDBRequest.onsuccess = function (dbe) {
-			var db = dbe.target.result;
+
+		openDBRequest.onsuccess = function (openEvt) {
+			var db = openEvt.target.result;
 			var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
-			groupsStore.get(groupIndex).onsuccess = function (gete) {
-				var groupData = gete.target.result;
+			groupsStore.get(groupIndex).onsuccess = function (getEvt) {
+				var groupData = getEvt.target.result;
 
 				var item = groupData.bookmarks[oldIndex];
 
@@ -129,7 +134,11 @@ function bookmarkMoved(dropEvt) {
 				db.close();
 			}
 		}
-		openDBRequest.onerror = function (err) { console.error(err); }
+
+		openDBRequest.onerror = function (err) {
+			console.error(err);
+			window.alert("Error moving bookmark");
+		}
 	}
 }
 
@@ -142,8 +151,8 @@ function deleteBookmark(e) {
 
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
-	openDBRequest.onsuccess = function (e) {
-		var db = e.target.result;
+	openDBRequest.onsuccess = function (openEvt) {
+		var db = openEvt.target.result;
 		var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
 		groupsStore.get(groupIndex).onsuccess = function (getEvt) {
@@ -153,28 +162,29 @@ function deleteBookmark(e) {
 
 			groupsStore.put(groupData);
 			bookmarkItem.hide(300, "swing", e => bookmarkItem.remove());
+
+			db.close();
 		}
 	}
 
-	openDBRequest.onerror = function (evt) {
-		console.log("Error", evt);
+	openDBRequest.onerror = function (err) {
+		console.log("Error", err);
 		window.alert("There was an error deleting the bookmark");
 	}
 }
 
-function deleteGroup(e) {
+function deleteGroup() {
 	var group = $(this); // the delete group button
 	var groupIndex = group.parent().parent().data("group-index");
 
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
-	openDBRequest.onsuccess = function (dbe) {
-		var db = dbe.target.result;
-
+	openDBRequest.onsuccess = function (openEvt) {
+		var db = openEvt.target.result;
 		var groupsStore = db.transaction("Groups", "readwrite").objectStore("Groups");
 
-		groupsStore.getAll().onsuccess = function (getEvt) {
-			var groups = getEvt.target.result;
+		groupsStore.getAll().onsuccess = function (getAllEvt) {
+			var groups = getAllEvt.target.result;
 
 			for (let item of groups) {
 				if (item.groupIndex > groupIndex) {
@@ -199,8 +209,8 @@ function deleteGroup(e) {
 		}
 	}
 
-	openDBRequest.onerror = function (e) {
-		console.error(e);
+	openDBRequest.onerror = function (err) {
+		console.error(err);
 		window.alert("There was an error deleting the group");
 	}
 }
@@ -210,8 +220,8 @@ function enableEditing() {
 	$("#btnImport").prop("disabled", true);
 	$("#btnAdd").prop("disabled", true);
 
-	$(".bookmarkGroup").each(function (index) {
-		var item = $(this);
+	$(".bookmarkGroup").each(function (index, item) {
+		var item = $(item);
 		item.sortable({
 			group: { name: "bookmarkLists", pull: true, put: true },
 			draggable: ".bookmark",
@@ -239,8 +249,8 @@ function enableEditing() {
 }
 
 function disableEditing() {
-	$(".bookmarkGroup").each(function (index) {
-		$(this).sortable("destroy");
+	$(".bookmarkGroup").each(function (index, item) {
+		$(item).sortable("destroy");
 	});
 	$("#cardList").sortable("destroy");
 
@@ -265,26 +275,27 @@ function disableEditing() {
 
 function removeFromArray(arr, index) {
 	var newArr = [];
-	for (var i = 0; i < arr.length; i++) {
+	arr.forEach(function (item, i) {
 		if (i != index)
-			newArr.push(arr[i]);
-	}
+			newArr.push(item);
+	});
+
 	return newArr;
 }
 
-function addToArray(arr, item, index) {
+function addToArray(arr, itemToAdd, index) {
 	if (index == arr.length) {
 		arr.push(item);
 		return arr;
 	}
 
 	var newArr = [];
-	for (var i = 0; i < arr.length; i++) {
+	arr.forEach(function (item, i) {
 		if (i == index)
-			newArr.push(item);
+			newArr.push(itemToAdd);
 
-		newArr.push(arr[i]);
-	}
+		newArr.push(item);
+	});
 
 	return newArr;
 }
diff --git a/js/importExport.js b/js/importExport.js
index 34bf814..c830225 100644
--- a/js/importExport.js
+++ b/js/importExport.js
@@ -5,7 +5,7 @@ $(document).ready(function () {
 	$("#copyExport").click(copyExport);
 });
 
-function showImportModal(e) {
+function showImportModal() {
 	$("#copyExportTxt").removeClass("text-success text-danger").addClass("text-muted").text("Copy");
 	$("#exportText").val("");
 	$("#importText").val("");
@@ -14,14 +14,16 @@ function showImportModal(e) {
 function showBookmarkData() {
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
-	openDBRequest.onsuccess = function (e) {
-		var db = e.target.result;
+	openDBRequest.onsuccess = function (openEvt) {
+		var db = openEvt.target.result;
 
-		db.transaction("Groups").objectStore("Groups").getAll().onsuccess = function (evt) {
-			var res = evt.target.result;
+		db.transaction("Groups").objectStore("Groups").getAll().onsuccess = function (getAllEvt) {
+			var res = getAllEvt.target.result;
 			var data = JSON.stringify(res, null, 4);
 			$("#exportText").val(data);
 		}
+
+		db.close();
 	}
 }
 
@@ -29,7 +31,7 @@ function importBookmarks() {
 	try {
 		var newData = $.parseJSON($("#importText").val());
 	} catch (err) {
-		console.error("Import failed: " + err.message);
+		console.error(err);
 		window.alert("Invalid Format");
 		return;
 	}
@@ -53,7 +55,7 @@ function setList(data) {
 		groupStore.clear();
 
 		// create the object stores
-		for (group of data) {
+		for (let group of data) {
 			groupStore.add(group);
 		}
 
@@ -108,7 +110,7 @@ function validateBookmarks(bookmarks) {
 }
 
 function arrayContains(array, searchFor) {
-	for (item of array) {
+	for (let item of array) {
 		if (item == searchFor)
 			return true;
 	}
diff --git a/js/loadBookmarks.js b/js/loadBookmarks.js
index e3eb11a..5dbb2bd 100644
--- a/js/loadBookmarks.js
+++ b/js/loadBookmarks.js
@@ -6,46 +6,36 @@ function loadBookmarks() {
 	$("#cardList").empty();
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
-	openDBRequest.onsuccess = function (dbEvt) {
-		db = dbEvt.target.result;
-		dbVersion = db.version;
+	openDBRequest.onsuccess = function (openEvt) {
+		db = openEvt.target.result;
 
-		db.transaction(["Groups"], "readonly").objectStore("Groups").getAll().onsuccess = function (groupsEvt) {
+		db.transaction("Groups", "readonly").objectStore("Groups").getAll().onsuccess = function (groupsEvt) {
 			var groups = groupsEvt.target.result;
 			groups.sort(function (a, b) {
 				return a.groupIndex - b.groupIndex;
 			});
 
-			// use a placholder
+			// use a placholder to prevent problems with sortable
 			var cardList = $("#cardList");
 			for (let groupData of groups) {
-				$("<div>").attr("id", "group-" + groupData.groupIndex)
+				var placeholder = $("<div>").attr("id", "group-" + groupData.groupIndex)
 					.addClass("bookmarkGroupContainer")
 					.appendTo(cardList);
-			}
-
-			bookmarkList = [];
-
-			for (let groupData of groups) {
-				buildGroup(groupData, $("#group-" + groupData.groupIndex));
-				bookmarkList.push(groupData);
+				buildCard(groupData.title, groupData.groupIndex, groupData.bookmarks)
+					.appendTo(placeholder);
 			}
 
 			db.close();
 		};
 	}
 
-	openDBRequest.onerror = function (e) { console.log(e); }
+	openDBRequest.onupgradeneeded = function (openEvt) {
+		db = openEvt.target.result;
 
-	openDBRequest.onupgradeneeded = function (e) {
-		// the database doesn't exist
-		console.log("Creating database");
-		db = e.target.result;
-
-		var groupStore = db.createObjectStore("Groups", {keyPath: "groupIndex"});
-		groupStore.createIndex("groupIndex", "groupIndex", {unique: true});
-		groupStore.createIndex("title", "title", {unique: false});
-		groupStore.createIndex("bookmarks", "bookmarks", {unique: false});
+		var groupStore = db.createObjectStore("Groups", { keyPath: "groupIndex" });
+		groupStore.createIndex("groupIndex", "groupIndex", { unique: true });
+		groupStore.createIndex("title", "title", { unique: false });
+		groupStore.createIndex("bookmarks", "bookmarks", { unique: false });
 
 		var groupData = {
 			groupIndex: 0,
@@ -63,13 +53,15 @@ function loadBookmarks() {
 		};
 
 		groupStore.add(groupData);
+		db.close();
 
 		$("#aboutModal").modal("show");
 	}
-}
 
-function buildGroup(groupInfo, placeholder) {
-	buildCard(groupInfo.title, groupInfo.groupIndex, groupInfo.bookmarks).appendTo(placeholder);
+	openDBRequest.onerror = function (err) {
+		console.log(err);
+		window.alert("Error loading bookmarks");
+	}
 }
 
 function buildCard(title, groupIndex, itemList) {
@@ -81,26 +73,22 @@ function buildCard(title, groupIndex, itemList) {
 		"data-group-index": groupIndex
 	});
 
-	var cardHead = $("<div>");
-	cardHead.addClass("card-header");
-	cardHead.text(title);
-	var btnDrag = $("<span>").addClass("mr-2 start-hidden dragGroupHandle")
-		.append($("<span>").addClass("fas fa-bars"));
-	var btnDel = $("<span>")
-		.addClass("btnDelGroup far fa-trash-alt float-right mt-1 start-hidden text-danger clickable");
-	btnDel.appendTo(cardHead);
-	btnDrag.prependTo(cardHead);
-	card.append(cardHead);
+	var cardHead = $("<div>").addClass("card-header").text(title).appendTo(card);
+	$("<span>") // use wrapper, sortable has issues with <svg> dragHandle
+		.addClass("mr-2 start-hidden dragGroupHandle")
+		.append($("<span>").addClass("fas fa-bars")) // move group icon
+		.prependTo(cardHead);
+	$("<span>") // delete group button
+		.addClass("btnDelGroup far fa-trash-alt float-right mt-1 start-hidden text-danger clickable")
+		.appendTo(cardHead);
 
-	var cardList = $("<div>");
-	cardList.addClass("list-group list-group-flush bookmarkGroup");
-	card.append(cardList);
+	var cardList = $("<div>")
+		.addClass("list-group list-group-flush bookmarkGroup")
+		.appendTo(card);
 
-	for (var i = 0; i < itemList.length; i++) {
-		var item = itemList[i];
-		// the fa span gets replaced with an svg element, which causes problems
-		// with using it as a drag handle, so wrap it in the drag element
-		var handle = $("<span>").addClass("mr-2 start-hidden dragHandle")
+	itemList.forEach(function (item, i) {
+		var handle = $("<span>") // use wrapper, sortable has issues with <svg> dragHandle
+			.addClass("mr-2 start-hidden dragHandle")
 			.append($("<span>").addClass("fas fa-bars"));
 
 		var del = $("<span>")
@@ -119,7 +107,7 @@ function buildCard(title, groupIndex, itemList) {
 			.prepend(handle)
 			.append(del)
 			.appendTo(cardList);
-	}
+	});
 
 	return card;
 }