(checklist) Added proper export, import and opening of checklists (with proper title support)

1 files changed, 36 insertions, 9 deletions

diff --git a/checklist.html b/checklist.html
index d93db49..7b084f3 100644
--- a/checklist.html
+++ b/checklist.html
@@ -79,13 +79,21 @@ input {
 			<hr>
 		</header>
 
-		<div>
+		<p>
 			<input type="button" value="Import" id="import-btn">
 			<input type="button" value="Export" id="export-btn">
-			<input type="text" id="exp-imp-text">
+			<input type="text" id="ei-name">
+			<input type="text" id="ei-value">
+		</p>
+		<p>
+			<input type="button" value="Open" id="open-btn">
 			<select id="db-lists"></select>
-		</div>
+			<input type="button" value="Delete" id="delete-btn">
+		</p>
 		<br>
+		<h3>
+			<input type="text" id="name">
+		</h3>
 		<input type="button" value="Uncheck all" id="uncheck-all">
 		<input type="button" value="Check all" id="check-all">
 		<input type="button" value="Lock" id="lock-items">
@@ -96,7 +104,6 @@ input {
 			const lists = document.getElementById('lists');
 			const stylesheetLocked = document.getElementById('stylesheet-locked');
 			stylesheetLocked.disabled = true;
-			const expImpText = document.getElementById('exp-imp-text');
 
 			/* Item functionality */
 
@@ -228,6 +235,10 @@ input {
 			/* Import-export */
 			
 			const dropdown = document.getElementById('db-lists');
+			const eiName = document.getElementById('ei-name');
+			const eiValue = document.getElementById('ei-value');
+			const name = document.getElementById('name');
+
 			const dbRequest = window.indexedDB.open('checklist', 1);
 			var db = '', store = '';
 
@@ -325,20 +336,36 @@ input {
 					});
 				}
 
-				document.getElementById('import-btn').onclick = function () {
-					const name = dropdown.options[dropdown.selectedIndex].text;
+				document.getElementById('open-btn').onclick = function () {
+					const listName = dropdown.options[dropdown.selectedIndex].text;
+
 					var store = db.transaction('CheckLists', 'readwrite').objectStore('CheckLists');
-					var val = store.get(name);
+					var val = store.get(listName);
 					val.onsuccess = function() {
+						name.value = listName;
 						parse(val.result.value, lists);
 					}
 				}
 
+				document.getElementById('delete-btn').onclick = function () {
+					const listName = dropdown.options[dropdown.selectedIndex].text;
+
+					var store = db.transaction('CheckLists', 'readwrite').objectStore('CheckLists');
+					store.delete(listName);
+					dropdown.remove(dropdown.selectedIndex);
+				}
+
+				document.getElementById('import-btn').onclick = function () {
+					var store = db.transaction('CheckLists', 'readwrite').objectStore('CheckLists');
+					store.put({ name: eiName.value, value: eiValue.value });
+				}
+
 				document.getElementById('export-btn').onclick = function () {
-					expImpText.value = stringify().substring(1);
+					eiName.value = name.value;
+					eiValue.value = stringify().substring(1);
 
 					var store = db.transaction('CheckLists', 'readwrite').objectStore('CheckLists');
-					store.put({ name: 'ListTest', value: expImpText.value });
+					store.put({ name: eiName.value, value: eiValue.value });
 				}
 			}
 		</script>