Fixed issue with idb. Also altered color contrast for accessibility. …

…Working on improving lighthouse scores & implementing gulp next.

client/css/styles.css

@@ -95,7 +95,7 @@ nav h1 a {
 
 /* Add a color to all links inside the list */
 #breadcrumb li a {
-    color: #0275d8;
+    color: #024C92;
     text-decoration: none;
 }
 
@@ -174,7 +174,7 @@ nav h1 a {
   min-width: 100%;
 }
 #restaurants-list li h3 {
-  color: #f18200;
+  color: #8A4600;
   font-family: Arial,sans-serif;
   font-size: 14pt;
   font-weight: 200;
@@ -225,7 +225,7 @@ nav h1 a {
   /*position: absolute;*/
 }
 #restaurant-name {
-  color: #f18200;
+  color: #8A4600;
   font-family: Arial,sans-serif;
   font-size: 22pt;
   font-weight: 200;
@@ -280,7 +280,7 @@ nav h1 a {
   padding: 30px 40px;
 }*/
 #reviews-container h3 {
-  color: #f58500;
+  color: #8A4600;
   font-size: 24pt;
   font-weight: 300;
   text-align: center;

client/index.html

@@ -57,6 +57,7 @@ <h2> Filter Results </h2>
   </footer>
 
   <!-- Scripts (Always after the end of content!)-->
+  <script type="text/javascript" sec="js/idb.js"></script>
   <script type="application/javascript" charset="utf-8" src="js/dbhelper.js"></script>
   <script type="application/javascript" charset="utf-8" src="js/main.js"></script>
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1aTdv0wLnDD_CvnEokElxVicSZxl4IrM&libraries=places&callback=initMap"></script>

client/js/dbhelper.js

@@ -2,7 +2,6 @@
  * Common database helper functions.
  */
 
-
 class DBHelper {
 
   /**

client/restaurant.html

@@ -68,6 +68,7 @@ <h2 id="restaurant-name"></h2>
 
   <!-- Beginning scripts -->
   <!-- Database helpers -->
+  <script type="text/javascript" sec="js/idb.js"></script>
   <script type="text/javascript" src="js/dbhelper.js"></script>
   <!-- Main javascript file -->
   <script type="text/javascript" src="js/restaurant_info.js"></script>

client/sw.js

@@ -1,15 +1,15 @@
 // Service Worker
 
 // Include DBHelper function for fetching restaurants and putting in indexedDB
-self.importScripts('js/dbhelper.js');
+self.importScripts('js/dbhelper.js', 'js/idb.js');
 
 // Data
-var myCache = "restauarantReview_001";
+var myCache = "restaurantReview_050";
 var cacheFiles = [
   '/index.html',
   '/restaurant.html',
   '/css/styles.css',
-  '/data/restaurants.json',
+  //'/data/restaurants.json',
   '/img/',
   '/js/dbhelper.js',
   '/js/main.js',
@@ -21,11 +21,11 @@ var cacheFiles = [
 // Event Listener for install - caching the files
 self.addEventListener("install", function(event) {
 
-  //console.log('In eventListener for install, event: ', event)
+  console.log('In eventListener for install, event: ', event)
   event.waitUntil(caches.open(myCache).then(function(cache) {
 
     return cache.addAll(cacheFiles)
-      //.then( function() { console.log('Cache worked'); } )
+      .then( function() { console.log('Cache worked'); } )
       .catch(function(error) {
 
         console.log("Caching failed, error: ", error);
@@ -55,16 +55,18 @@ self.addEventListener('fetch', function(event) {
 
 // Event Listener for activate - 
 self.addEventListener('activate', event => {
+  console.log("Event trigger - activate");
   DBHelper.fetchRestaurants((error, restaurants) => {
     if (error) {
       callback(error, null);
     } else {
       // Could use switch statement here to update IDB. Curretn Data set is static, needs just one init/.
       idb.open('restaurantReviews', 1, upgradeDB => {
         // If not there already, add restaurant data
-        if(!upgradeDB.objectStroeNAmes.contains('restaurantData')) {
+        if(!upgradeDB.objectStoreNames.contains('restaurantData')) {
           let objStore = upgradeDB.createObjectStore('restaurantData', {keyPath: 'id'});
-          for (restaurant in restaurants) objStore.add(restaurant);
+          console.log(restaurants);
+          restaurants.map(restaurant => objStore.add(restaurant));
         }
       });
     }