// Create needed constants Mark Webster wrote all this code
const list = document.querySelector('ul');
const titleInput = document.querySelector('#title');
const bodyInput = document.querySelector('#body');
const form = document.querySelector('form');
const submitBtn = document.querySelector('form button');
//console.log ('script got to line 7');
//create an instance of a db object for storage
let db;
//console.log ('script got to line 10');
window.onload = function(){
//open database if it doesnt already exist
/*open version 1 of notes database*/
let request = window.indexedDB.open('notes', 1);
//console.log ('script got to line 15');
//error handler
request.onerror = function() {
console.log('Database failed to open');
};
//console.log ('script got to line 20');
//onsuccess handler
request.onsuccess = function() {
console.log('Database opened successfully');
//store the opened database object in the db variable
db = request.result;
//console.log ('script got to line 27');
//run the displayData() to show notes already in db
displayData();
};//end request.onsuccess handler
// $$$$$ script can't get here console.log ('script got to line 31');
//onupgradeneeded handler
request.onugradeneeded = function(e) {
//grab a reference to opened db
let db = e.target.result;
/*create an objectStore to store our notes in (single table)
including an auto-incrementing key*/
let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true});
//define what data items objectStore will contain
objectStore.createIndex('title', 'title', { unique: false });
objectStore.createIndex('body', 'body', { unique: false });
console.log('database setup complete');
};
//create an onsubmit handler to run the addData() function
form.onsubmit = addData;
function addData(e) {
//prevent Default, don't want to the form to submit in conventional way - causing refresh
e.preventDefault();
//grab values from form and store them in an object
let newItem = { title: titleInput.value, body: bodyInput.value };
//open a read/write db transaction, ready for adding database
let transaction = db.transaction(['notes'], 'readwrite');
//call an object store that's already been added to db
let objectStore = transaction.objectStore('notes');
//make a request to add our newItem object to the object storage
var request = objectStore.add(newItem);
request.onsuccess = function() {
//clear the form, ready for next entry
titleInput.value = '';
bodyInput.value = '';
};//end request.onsuccess function
//report on sucess of transaction
transaction.oncomplete = function(){
console.log('transaction completed: db mod finished');
//update display of data to show newly added item
displayData();
};
transaction.onerror = function(){
console.log('transaction not opened due to error');
};
}//end function addData;;;;;?
function displayData() {
/*empty the li contents to prevent duplicates
strips out the fistChild's until there are no more*/
while (list.firstChild) {//list = the <ul>
list.removeChild(list.firstChild);// remove <li>'s
}
//open our object store and get a cursor - which iterates
//thru all the different data items in store
let objectStore = db.transaction('notes').objectStore('notes');
objectStore.openCursor().onsuccess = function(e) {
//get a reference to the cursor....cursor????
let cursor = e.target.result;
//if there is still another data item to
//iterate thru keep running this code
if(cursor) {
//create a <li>, h3, p
let listItem = document.createElement('li');
let h3 = document.createElement('h3');
let para = document.createElement('p');
listItem.appendChild(h3);
listItem.appendChild(para);
//add <li> to inside of <ul> at bottom below other <li>'s
list.appendChild(listItem);
//put data from the cursor inside the h3 and para
h3.textContent = cursor.value.title;
para.textContent = cursor.value.body;
//store the ID of the data item inside an atribute
//on the list item so we know which list item.
//Will be useful later when we need to delete items
listItem.setAttribute('data-note-id', cursor.value.id);
//create a button andn place it in each <li>
let deleteBtn = document.createElement('button');
listItem.appendChild(deleteBtn);
deleteBtn.textContent = 'Delete';
//set event handler to
//trigger deleteItem() function to run
deleteBtn.onclick = deleteItem;
//iterate to next item in the cursor
cursor.continue();//this loops the if(true) block
} else {//when all records are looped thru this runs
//again, if list item is empty
if(!list.firstChild) {
let listItem = document.createElement('li');
listItem.textContent = 'No notes stored.';//$$$$they don't have ; here
list.appendChild(listItem);
}
//if there are no more cursor items to iterate through, say so
console.log('Notes all displayed');
}
};//end objectStore open cursor function
}//end function display data
function deleteItem(e) {
//retrieve name of task to delete, which is currently a string
//convert it to Number (IDB key type-sensitive)
let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
///open a db transaction and use above to find and delete
let transaction = db.transaction(['notes'], 'readwrite');
let objectStore = transaction.objectStore('notes');
let request = objectStore.delete(noteId);
//report that it's been deleteBtn
transaction.oncomplete = function() {
//delete the parent of button
//which is the <li>
e.target.parentNode.parentNode.removeChild(e.target.parentNode);
console.log('Note ' + noteId + ' deleted.');
//again, if list item is empty
if(!list.firstChild) {
let listItem = document.createElement('li');
listItem.textContent = 'No notes stored.';
list.appendChild(listItem);
}
};//end transaction.oncomplete function
}//end function deleteItem
};//end window.onload
!
