arackaf · December 2, 2017 19:27
diff --git a/offline.htm b/offline.htm
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <title>Offline Book tracker</title>
    
    <link rel="stylesheet" href="react-redux/static/bootstrap/css/bootstrap-booklist-build.css">
    <link rel="stylesheet" href="react-redux/static/fontawesome/css/font-awesome-booklist-build.css">
 </head>
 <body>
    <div id="home"></div>
    <div style="visibility: hidden">
        <button><i class="fa fa-fw fa-spin fa-spinner"></i></button>
    </div>
    <div style="padding: 15px">
        <h1>Offline</h1>
        <table class="table table-condescend table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Title</th>
                    <th>Author</th>
                </tr>
            </thead>
            <tbody id="booksTarget">

            </tbody>
        </table>
    </div>
    <script>
        let open = indexedDB.open("books");
        open.onsuccess = evt => {
          let db = open.result;
          let transaction = db.transaction("books", "readonly");
          let booksStore = transaction.objectStore("books");

          var request = booksStore.openCursor();
          let rows = ``;
          request.onsuccess = function(event) {
            var cursor = event.target.result;
            if(cursor) {
              let book = cursor.value;

              rows += `
                <tr>
                  <td><img src="${book.smallImage}" /></td>
                  <td>${book.title}</td>
                  <td>${Array.isArray(book.authors) ? book.authors.join("<br/>") : book.authors}</td>
                </tr>`;
              cursor.continue();
            } else {
              document.getElementById("booksTarget").innerHTML = rows;
            }
          };
        }
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Offline Book tracker</title>

	<link rel="stylesheet" href="react-redux/static/bootstrap/css/bootstrap-booklist-build.css">
	<link rel="stylesheet" href="react-redux/static/fontawesome/css/font-awesome-booklist-build.css">
	</head>
	<body>
	<div id="home"></div>
	<div style="visibility: hidden">
	<button><i class="fa fa-fw fa-spin fa-spinner"></i></button>
	</div>
	<div style="padding: 15px">
	<h1>Offline</h1>
	<table class="table table-condescend table-striped">
	<thead>
	<tr>
	<th></th>
	<th>Title</th>
	<th>Author</th>
	</tr>
	</thead>
	<tbody id="booksTarget">

	</tbody>
	</table>
	</div>
	<script>
	let open = indexedDB.open("books");
	open.onsuccess = evt => {
	let db = open.result;
	let transaction = db.transaction("books", "readonly");
	let booksStore = transaction.objectStore("books");

	var request = booksStore.openCursor();
	let rows = ``;
	request.onsuccess = function(event) {
	var cursor = event.target.result;
	if(cursor) {
	let book = cursor.value;

	rows += `
	<tr>
	<td><img src="${book.smallImage}" /></td>
	<td>${book.title}</td>
	<td>${Array.isArray(book.authors) ? book.authors.join("<br/>") : book.authors}</td>
	</tr>`;
	cursor.continue();
	} else {
	document.getElementById("booksTarget").innerHTML = rows;
	}
	};
	}
	</script>
	</body>
	</html>