From 5d8f1f5a95cdb7c4bef0b205488ef71c5fe0af9d Mon Sep 17 00:00:00 2001
From: Neil Brommer <neil@neilbrommer.com>
Date: Mon, 11 Dec 2017 17:40:07 -0800
Subject: [PATCH] Implement adding bookmarks

---
 index.html |  48 +++++++++----------
 js/main.js | 132 ++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 135 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index 2f6a286..c98aa91 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
 				<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#aboutModal">About</button>
 				<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button>
 				<button id="btnEdit" class="btn btn-light mr-2 my-1 my-sm-0" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button>
-				<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fa fa-exclamation-circle"></span> Add</button>
+				<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-toggle="modal" data-target="#newBookmarkModal">Add</button>
 			</form>
 		</div>
 	</nav>
@@ -48,30 +48,32 @@
 						<span aria-hidden="true">&times;</span>
 					</button>
 				</div>
-				<div class="modal-body">
-					<div class="form-group">
-						<label for="newBookmarkName">Name</label>
-						<input id="newBookmarkName" type="text" class="form-control">
+				<form id="addBookmarkForm">
+					<div class="modal-body">
+						<div class="form-group">
+							<label for="newBookmarkName">Name</label>
+							<input id="newBookmarkName" type="text" class="form-control" required>
+						</div>
+						<div class="form-group">
+							<label for="newBookmarkURL">Address</label>
+							<input id="newBookmarkURL" type="url" class="form-control" required>
+						</div>
+						<div class="form-group">
+							<label for="newBookmarkGroup">Group</label>
+							<select id="newBookmarkGroup" name="Group" class="form-control" onchange="selectGroupChanged(this.value)">
+								<option value="-">New Group</option>
+							</select>
+						</div>
+						<div id="createGroup" class="form-group newGroup">
+							<label for="newBookMarkGroupNew">New Group</label>
+							<input id="newBookMarkGroupNew" type="text" class="form-control">
+						</div>
 					</div>
-					<div class="form-group">
-						<label for="newBookmarkURL">Address</label>
-						<input id="newBookmarkURL" type="url" class="form-control">
+					<div class="modal-footer">
+						<button type="submit" class="btn btn-primary">Add</button>
+						<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 					</div>
-					<div class="form-group">
-						<label for="newBookmarkGroup">Group</label>
-						<select id="newBookmarkGroup" name="Group" class="form-control" onchange="selectGroupChanged(this.value)">
-							<option value="-">New Group</option>
-						</select>
-					</div>
-					<div id="createGroup" class="form-group newGroup">
-						<label for="newBookMarkGroupNew">New Group</label>
-						<input id="newBookMarkGroupNew" type="text" class="form-control">
-					</div>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-primary">Add</button>
-					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-				</div>
+				</form>
 			</div>
 		</div>
 	</div>
diff --git a/js/main.js b/js/main.js
index 8f6adf7..0cb5380 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,6 @@
 // use this when making changes so that there is no need to parse the page
 var bookmarkList;
+var dbVersion;
 
 $(document).ready(function () {
 	calcBackground();
@@ -15,18 +16,20 @@ $(document).ready(function () {
 
 	$("#newBookmarkModal").on("shown.bs.modal", function () {
 		var combo = $("#newBookmarkGroup");
-		var data = getList();
-		for (var i = 0; i < data.length; i++) {
-			combo.append($("<option>").attr({ "value": i })
-				.text(data[i].title));
+		combo.empty();
+		combo.append($("<option>").attr({ "value": "--" })
+			.text("New Group"));
+
+		for (let group of bookmarkList) {
+			combo.append($("<option>").attr({ "value": group.title })
+				.text(group.title));
 		}
 
-
-		// TODO: complete adding bookmarks
-		window.alert("Adding bookmarks is still incomplete");
-		$("#newBookmarkModal").modal("hide");
+		$("#createGroup").prop("required", true);
 	});
 
+	$("#addBookmarkForm").submit(addNewBookmark);
+
 	$("#btnEdit").click(function (e) {
 		// TODO: editing bookmarks
 		window.alert("Editing is currently not implemented");
@@ -38,6 +41,83 @@ $(document).ready(function () {
 	});
 });
 
+function addNewBookmark(e) {
+	e.preventDefault();
+
+	// read in data from the form
+	var bkmkName = $("#newBookmarkName").val();
+	var bkmkAddress = $("#newBookmarkURL").val();
+	var bkmkGroup = $("#newBookmarkGroup").val();
+
+	if (bkmkGroup == "--") { // create a new group
+		var newGroupName = $("#newBookMarkGroupNew").val();
+
+		var newGroup = {
+			"title": newGroupName,
+			"bookmarks": [ { "name": bkmkName, "address": bkmkAddress } ]
+		};
+
+		var openDBRequest = window.indexedDB.open("bookmarks", dbVersion + 1);
+		openDBRequest.onupgradeneeded = function (e) {
+			var db = e.target.result;
+
+			if (db.objectStoreNames.contains(newGroup.title)) {
+				window.alert("The group already exists");
+				return;
+			}
+
+			var objStore = db.createObjectStore(newGroup.title, { autoIncrement: true });
+			objStore.createIndex("name", "name", { unique: false });
+			objStore.createIndex("address", "address", { unique: false });
+
+
+			var bookmarks = newGroup.bookmarks;
+			for (var i = 0; i < bookmarks.length; i++) {
+				var bkmk = bookmarks[i];
+				objStore.add({ "name": bkmk.name, "address": bkmk.address }, i);
+			}
+		}
+		openDBRequest.onsuccess = function (e) {
+			var db = e.target.result;
+
+			db.transaction(["groupIndexes"], "readwrite")
+				.objectStore("groupIndexes")
+				.add({ "title": newGroup.title, "groupIndex": bookmarkList.length });
+
+			bookmarkList.push(newGroup);
+
+			db.close();
+			loadBookmarks();
+			$(".modal").modal("hide");
+		}
+
+		openDBRequest.onerror = function (e) { console.log(e); }
+	} else { // add to existing group
+		var openDBRequest = window.indexedDB.open("bookmarks");
+		openDBRequest.onsuccess = function (e) {
+			var db = e.target.result;
+			var newItem = { "name": bkmkName, "address": bkmkAddress };
+
+			db.transaction([bkmkGroup], "readwrite")
+				.objectStore(bkmkGroup)
+				.add(newItem);
+
+			for (let group of bookmarkList) {
+				if (group.title == bkmkGroup) {
+					group.bookmarks.push(newItem);
+					break;
+				}
+			}
+
+			db.close();
+			loadBookmarks();
+			$(".modal").modal("hide");
+		}
+
+		openDBRequest.onerror = function (e) { console.log(e); }
+	}
+}
+
 function importBookmarks() {
 	try {
 		var newData = $.parseJSON($("#importText").val());
@@ -61,8 +141,8 @@ function loadBookmarks() {
 	var openDBRequest = window.indexedDB.open("bookmarks");
 
 	openDBRequest.onsuccess = function (dbEvt) {
-		console.log("Opened database");
 		db = dbEvt.target.result;
+		dbVersion = db.version;
 		bookmarkList = [];
 
 		db.transaction(["groupIndexes"], "readonly")
@@ -105,7 +185,7 @@ function loadBookmarks() {
 			var groupStore = initDB(db);
 
 			// add example bookmarks
-			var exBookmarks = db.createObjectStore("Examples");
+			var exBookmarks = db.createObjectStore("Examples", { autoIncrement: true });
 			exBookmarks.createIndex("name", "name", { unique: false });
 			exBookmarks.createIndex("address", "address", { unique: false });
 			groupStore.add({ "title": "Examples", "groupIndex": 0 });
@@ -113,19 +193,19 @@ function loadBookmarks() {
 			exBookmarks.add({
 				"name": "Github",
 				"address": "https://github.com/"
-			}, 0);
+			});
 			exBookmarks.add({
 				"name": "This project on Github",
 				"address": "https://github.com/NeilBrommer/NewTabPage"
-			}, 1);
+			});
 			exBookmarks.add({
 				"name": "Hacker News",
 				"address": "https://news.ycombinator.com/"
-			}, 2);
+			});
 			exBookmarks.add({
 				"name": "reddit",
 				"address": "https://www.reddit.com/"
-			}, 3);
+			});
 		}
 	}
 }
@@ -148,7 +228,10 @@ function buildGroup(groupInfo, placeholder) {
 
 function buildCard(title, itemList) {
 	var card = $(document.createElement("div"));
-	card.attr({ "id": "group-" + title, "class": "card bookmarkGroup" });
+	card.attr({
+		"id": "group-" + title,
+		"class": "card bookmarkGroup"
+	});
 
 	var cardHead = $(document.createElement("div"));
 	cardHead.attr({ "class": "card-header" });
@@ -175,10 +258,14 @@ function buildCard(title, itemList) {
 }
 
 function selectGroupChanged(value) {
-	if (value == "-")
-		$("#createGroup").show();
-	else
-		$("#createGroup").hide();
+	var groupText = $("#createGroup");
+	if (value == "--") {
+		groupText.show();
+		groupText.prop("required", true);
+	} else {
+		groupText.hide();
+		groupText.prop("required", false);
+	}
 }
 
 function calcBackground() {
@@ -238,6 +325,7 @@ function setList(data) {
 	var openDBRequest = window.indexedDB.open("bookmarks", 1);
 
 	openDBRequest.onsuccess = function (e) {
+		dbVersion = db.version;
 		db.close();
 		loadBookmarks();
 	}
@@ -252,7 +340,7 @@ function setList(data) {
 
 		// create the object stores
 		for (var i = 0; i < data.length; i++) {
-			addGroup(data[i], groupStore, i);
+			addGroup(data[i], groupStore, db, i);
 		}
 	}
 }
@@ -265,8 +353,8 @@ function initDB(db) {
 	return groupStore;
 }
 
-function addGroup(group, groupStore, index) {
-	var objStore = db.createObjectStore(group.title);
+function addGroup(group, groupStore, db, index) {
+	var objStore = db.createObjectStore(group.title, { autoIncrement: true });
 	objStore.createIndex("name", "name", { unique: false });
 	objStore.createIndex("address", "address", { unique: false });
 	groupStore.add({ "title": group.title, "groupIndex": index });