feat: Mark restaurant as favorite

feat: Submit offline review when back online.
feat: Cache images.

js/dbhelper.js

@@ -31,7 +31,7 @@ class DBHelper {
 	 * Fetch all restaurants.
 	 */
 	static fetchRestaurants(callback) {
-		DBHelper.dbPromise.then(db => {
+		DBHelper.dbPromise.then(db => {			
 			if (!db) {
 				// Fetch from network
 				let xhr = new XMLHttpRequest();
@@ -98,6 +98,7 @@ class DBHelper {
 	 * Fetch a restaurant by its ID.
 	 */
 	static fetchRestaurantById(id, callback) {
+		//TODO: Refactor, only get a single restaurant by ID from network
 		// fetch all restaurants with proper error handling.
 		DBHelper.fetchRestaurants((error, restaurants) => {
 			if (error) {
@@ -344,4 +345,47 @@ class DBHelper {
 			return;
 		});
 	}
+
+	static submitOfflineReviews() {
+		DBHelper.dbPromise.then(db => {
+			const tx = db.transaction('offline-reviews');
+			const store = tx.objectStore('offline-reviews');
+			store.getAll().then(offlineReviews => {
+				console.log(offlineReviews);
+				offlineReviews.forEach(review => {
+					DBHelper.submitReview(review);
+				})
+				DBHelper.clearOfflineReviews();
+			})
+		})
+	}
+
+	static clearOfflineReviews() {
+		DBHelper.dbPromise.then(db => {
+			const tx = db.transaction('offline-reviews', 'readwrite');
+			const store = tx.objectStore('offline-reviews').clear();
+		})
+		return;
+	}
+
+	static toggleFavorite(restaurantId, isFavorite) {
+		fetch(`${DBHelper.DATABASE_URL}/restaurants/${restaurantId}/?is_favorite=${isFavorite}`, {
+			method: 'PUT'
+		})
+		.then(response => {
+			response.json()
+			.then(data => {
+				this.dbPromise.then(db => {
+					if (!db) return;
+					const tx = db.transaction('all-restaurants', 'readwrite');
+					const store = tx.objectStore('all-restaurants');
+					store.put(data)
+				});
+				return data;
+			})
+		})
+		.catch( error => {
+			console.log(error);
+		});
+	}
 }

js/restaurant_info.js

@@ -59,6 +59,12 @@ fillRestaurantHTML = (restaurant = self.restaurant) => {
 	name.innerHTML = restaurant.name;
 	name.setAttribute('tabindex', 0);
 
+	const favCheck = document.getElementById('favCheck');
+	favCheck.checked = restaurant.is_favorite;
+	favCheck.addEventListener('change', event => {
+		DBHelper.toggleFavorite(restaurant.id, event.target.checked);
+	});
+
 	const address = document.getElementById('restaurant-address');
 	address.innerHTML = restaurant.address;
 	address.setAttribute('tabindex', 0);
@@ -109,7 +115,7 @@ fillRestaurantHoursHTML = (operatingHours = self.restaurant.operating_hours) =>
  */
 fillReviewsHTML = (reviews = self.restaurant.reviews) => {
 	const container = document.getElementById('reviews-container');
-	const title = document.createElement('h2');
+	const title = document.createElement('h3');
 	title.innerHTML = 'Reviews';
 	title.setAttribute('tabindex', 0);
 	container.prepend(title);

js/sw_registration.js

@@ -1,4 +1,3 @@
-// if (!navigator.serviceWorker) return;
 navigator.serviceWorker.register('./sw.js').then(function (reg) {
     console.log('Service worker registered.');
 
@@ -40,4 +39,16 @@ navigator.serviceWorker.addEventListener('controllerchange', function () {
 // Request a one-off sync:
 navigator.serviceWorker.ready.then(function (swRegistration) {    
     return swRegistration.sync.register('myFirstSync');
-});
+});
+
+function onOnline() {
+    console.log('Going online');
+    DBHelper.submitOfflineReviews();
+}
+
+function onOffline() {
+    console.log('Going offline');
+}
+
+window.addEventListener('online', onOnline);
+window.addEventListener('offline', onOffline);

restaurant.html

@@ -43,6 +43,7 @@ <h1>
 		<!-- Beginning restaurant -->
 		<section id="restaurant-container">
 			<h2 id="restaurant-name"></h2>
+			<p><input type="checkbox" id="favCheck"> <label for="favCheck">Favorite</label></p>
 			<img id="restaurant-img">
 			<p id="restaurant-cuisine"></p>
 			<p id="restaurant-address"></p>

sw.js

@@ -15,6 +15,17 @@ self.addEventListener('install', function(event) {
 				'js/sw_registration.js',
 				'node_modules/idb/lib/idb.js',
 				'img/',
+				'img/1.webp',
+				'img/2.webp',
+				'img/3.webp',
+				'img/4.webp',
+				'img/5.webp',
+				'img/6.webp',
+				'img/7.webp',
+				'img/8.webp',
+				'img/9.webp',
+				'img/10.webp',
+				'img/default.webp',
 			]);
 		})
 	);
@@ -82,7 +93,6 @@ self.addEventListener('sync', function (event) {
 			request.onsuccess = function () {
 				// 2. POST offline reviews to network
 				for (let i = 0; i < request.result.length; i++) {
-					console.log(request.result[i]);
 					fetch(`http://localhost:1337/reviews/`, {
 						body: JSON.stringify(request.result[i]),
 						cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
@@ -99,7 +109,6 @@ self.addEventListener('sync', function (event) {
 						return response.json();
 					})
 					.then(data => {
-						console.log(data);
 						let tx = db.transaction('all-reviews', 'readwrite');
 						let store = tx.objectStore('all-reviews');
 						let request = store.add(data);