From 92a37397da61b7a321111d3dea837a7362b14df4 Mon Sep 17 00:00:00 2001 From: et41 Date: Mon, 23 Jul 2018 13:21:44 +0300 Subject: [PATCH] fix: accesibility and progressiveness fixes. --- .tmp/localDiskDb.db | 38 +++++++++++++++++++++------- src/css/main-aux.css | 7 ++++-- src/dist/js/mainRestaurants.js | 2 +- src/dist/js/uglify.js | 2 +- src/dist/sass/main-aux.css | 2 +- src/dist/sass/restaurant.css | 2 +- src/js/all.js | 45 ++++++++++++++++++++++------------ src/js/all_restaurant.js | 3 ++- src/js/intersection.js | 4 ++- src/js/mainRestaurants.js | 41 +++++++++++++++++++------------ src/js/restaurant_info.js | 3 ++- 11 files changed, 100 insertions(+), 49 deletions(-) diff --git a/.tmp/localDiskDb.db b/.tmp/localDiskDb.db index 5782202da..58106cae5 100644 --- a/.tmp/localDiskDb.db +++ b/.tmp/localDiskDb.db @@ -21,7 +21,7 @@ "Sunday": "12:00 pm - 4:00 pm, 5:30 pm - 11:00 pm" }, "createdAt": 1504095563444, - "updatedAt": "2018-07-20T12:13:27.996Z", + "updatedAt": "2018-07-23T10:15:43.025Z", "id": 1, "is_favorite": false }, @@ -45,7 +45,7 @@ "Sunday": "12:00 pm - 3:00 pm, 5:00 pm - 11:00 pm" }, "createdAt": 1504095568414, - "updatedAt": "2018-07-20T11:31:45.616Z", + "updatedAt": "2018-07-23T10:16:51.720Z", "is_favorite": false, "id": 2 }, @@ -69,7 +69,7 @@ "Sunday": "11:30 am - 2:00 am" }, "createdAt": 1504095571434, - "updatedAt": "2018-07-20T12:06:53.639Z", + "updatedAt": "2018-07-23T10:12:02.956Z", "id": 3, "is_favorite": false }, @@ -93,7 +93,7 @@ "Sunday": "Sat - 10:30 pm" }, "createdAt": 1504095567091, - "updatedAt": "2018-07-20T12:00:23.479Z", + "updatedAt": "2018-07-23T10:13:02.379Z", "is_favorite": false, "id": 4 }, @@ -117,7 +117,7 @@ "Sunday": "10:00 am - 12:00 am" }, "createdAt": 1504095567071, - "updatedAt": "2018-07-20T12:13:46.147Z", + "updatedAt": "2018-07-23T10:12:07.582Z", "is_favorite": false, "id": 5 }, @@ -141,7 +141,7 @@ "Sunday": "12:00 pm - 9:00 pm" }, "createdAt": 1504095567071, - "updatedAt": 1504095567071, + "updatedAt": "2018-07-23T10:12:09.432Z", "is_favorite": false, "id": 6 }, @@ -165,7 +165,7 @@ "Sunday": "11:30 am - 10:00 pm" }, "createdAt": 1504095567091, - "updatedAt": 1504095567091, + "updatedAt": "2018-07-23T10:12:12.396Z", "is_favorite": false, "id": 7 }, @@ -189,7 +189,7 @@ "Sunday": "10:00 am - 3:00 pm, 5:30 pm - 11:00 pm" }, "createdAt": 1504095567091, - "updatedAt": "2018-07-17T19:10:49.828Z", + "updatedAt": "2018-07-23T10:12:14.244Z", "is_favorite": false, "id": 8 }, @@ -642,6 +642,26 @@ "rating": "3", "comments": "off", "id": 78 + }, + { + "restaurant_id": "8", + "name": "eren", + "date": 1532096977245, + "createdAt": 1532096977245, + "updatedAt": 1532096977245, + "rating": "3", + "comments": "not bad", + "id": 155 + }, + { + "restaurant_id": "8", + "name": "off", + "date": 1532097018848, + "createdAt": 1532097018848, + "updatedAt": 1532097018848, + "rating": "3", + "comments": "off", + "id": 156 } ] }, @@ -697,7 +717,7 @@ "id": 10 }, "reviews": { - "id": 154 + "id": 156 } } } diff --git a/src/css/main-aux.css b/src/css/main-aux.css index a329b26e0..6ee8fca56 100644 --- a/src/css/main-aux.css +++ b/src/css/main-aux.css @@ -79,7 +79,7 @@ border : none; background-color: inherit; font-size: 45px; - color: #cd9292; + color: #b17878; float: right; box-shadow: none; @@ -138,4 +138,7 @@ strong { } .active, .collapsible:hover { background-color: #ccc; -} \ No newline at end of file +} +/*#restaurants-list li button:focus { + color: #c22c2c; +}*/ \ No newline at end of file diff --git a/src/dist/js/mainRestaurants.js b/src/dist/js/mainRestaurants.js index 226332b70..6e98dc1b7 100644 --- a/src/dist/js/mainRestaurants.js +++ b/src/dist/js/mainRestaurants.js @@ -1 +1 @@ -changeFavRestaurantBorder=((e,t)=>{let a=document.getElementById("restaurant"+t);console.log("favRestaurant,is_fav,listNumber",a,e,t),e?(console.log("fav",a),a.style.borderColor="#c22c2c"):(console.log("else",a),a.style.borderColor="#ccc")}),getRestaurantfavStatus=(e=>fetch(`http://localhost:1337/restaurants/${e}`).then(e=>e.json()).then(e=>e.is_favorite)),createRestaurantHTML=((e,t)=>{const a=document.createElement("li");a.id="restaurant"+e.id,io.observe(a);let s=document.createElement("img");s.className="restaurant-img",s.id="image"+e.id,a.append(s);const n=document.createElement("h2");n.innerHTML=e.name,a.append(n);const o=document.createElement("p");o.innerHTML=e.neighborhood,a.append(o);const r=document.createElement("p");r.innerHTML=e.address,a.append(r);const c=document.createElement("a");c.innerHTML="View Details",c.href=DBHelper.urlForRestaurant(e),a.append(c);const i=document.createElement("button");return i.id="fav"+e.id,i.innerHTML=" ☆",getRestaurantfavStatus(e.id).then(e=>{e?(a.style.borderColor="#c22c2c",i.className="checked"):(a.style.borderColor="#ccc",i.className="")}),a.append(i),loadImage=((e,t)=>{(s=document.getElementById(t)).src=DBHelper.imageUrlForRestaurant(e),s.srcset=`images/${e.id}-300small_low.jpg 480w,images/${e.id}-600medium.jpg 600w`,s.sizes="(max-width: 600px) 20vw,(min-width: 601px) 50vw",s.alt="showing restaurant is "+e.name+" and cuisine type is "+e.cuisine_type}),a}),updateSelectedRestaurants=(()=>{const e=document.getElementById("cuisines-select"),t=document.getElementById("neighborhoods-select"),a=e.selectedIndex,s=t.selectedIndex,n=e[a].value,o=t[s].value;DBHelper.fetchRestaurantByCuisineAndNeighborhood(n,o,(e,t)=>{e?console.error(e):(resetRestaurants(t),fillRestaurantsHTML(),afterUpdate(t))})}),afterUpdate=(e=>{console.log("afterUpdate",e),e.forEach(e=>{t.is_favorite?(li.style.borderColor="#c22c2c",fav.className="checked"):(li.style.borderColor="#ccc",fav.className="");let t=e;image=document.getElementById("image"+e.id),image.src=DBHelper.imageUrlForRestaurant(t),image.alt="showing restaurant is "+t.name+" and cuisine type is "+t.cuisine_type,image.srcset=`images/${t.id}-400small.jpg 480w,images/${t.id}-600medium.jpg 600w`,image.sizes="(max-width: 600px) 60vw,(min-width: 601px) 50vw"})}),addFavorite=(e=>{fetch(`http://localhost:1337/restaurants/${e}/`,{method:"PUT",body:JSON.stringify({is_favorite:!0}),headers:{"Content-Type":"application/json"}}).then(e=>(console.log("response status:",e),e.json())).then(e=>{console.log("response status:",e.is_favorite)})}),removeFavorite=(e=>{fetch(`http://localhost:1337/restaurants/${e}/`,{method:"PUT",body:JSON.stringify({is_favorite:!1}),headers:{"Content-Type":"application/json"}}).then(e=>(console.log("response status:",e),e.json())).then(e=>{console.log("response status:",e.is_favorite)})});let restaurantsList=document.getElementById("restaurants-list");restaurantsList.addEventListener("click",e=>{console.log("click",e);let t=e.target.id,a=e.target,s=t.replace(/^\D+/g,"");t.includes("fav")&&!a.classList.contains("checked")?(console.log("clicked",e),addFavorite(s),a.classList.toggle("checked"),changeFavRestaurantBorder(!0,s)):t.includes("fav")&&a.classList.contains("checked")&&(removeFavorite(s),a.classList.toggle("checked"),changeFavRestaurantBorder(!1,s))}); \ No newline at end of file +changeFavRestaurantBorder=((e,t)=>{let a=document.getElementById("restaurant"+t);a.style.borderColor=e?"#c22c2c":"#ccc"}),getRestaurantfavStatus=(e=>fetch(`http://localhost:1337/restaurants/${e}`).then(e=>e.json()).then(e=>e.is_favorite)),createRestaurantHTML=((e,t)=>{const a=document.createElement("li");a.id="restaurant"+e.id,io.observe(a);let s=document.createElement("img");s.className="restaurant-img",s.id="image"+e.id,a.append(s);const n=document.createElement("h2");n.innerHTML=e.name,a.append(n);const r=document.createElement("p");r.innerHTML=e.neighborhood,a.append(r);const i=document.createElement("p");i.innerHTML=e.address,a.append(i);const c=document.createElement("a");c.innerHTML="View Details",c.href=DBHelper.urlForRestaurant(e),a.append(c);const o=document.createElement("button");return o.id="fav"+e.id,o.innerHTML=" ☆",getRestaurantfavStatus(e.id).then(e=>{e?(a.style.borderColor="#c22c2c",o.className="checked"):(a.style.borderColor="#ccc",o.className="")}),a.append(o),s.alt="showing restaurant is "+e.name+" and cuisine type is "+e.cuisine_type,loadImage=((e,t)=>{(s=document.getElementById(t)).src=DBHelper.imageUrlForRestaurant(e),s.srcset=`images/${e.id}-300small_low.jpg 480w,images/${e.id}-600medium.jpg 600w`,s.sizes="(max-width: 600px) 20vw,(min-width: 601px) 50vw"}),a}),updateSelectedRestaurants=(()=>{const e=document.getElementById("cuisines-select"),t=document.getElementById("neighborhoods-select"),a=e.selectedIndex,s=t.selectedIndex,n=e[a].value,r=t[s].value;DBHelper.fetchRestaurantByCuisineAndNeighborhood(n,r,(e,t)=>{e?console.error(e):(resetRestaurants(t),fillRestaurantsHTML(),afterUpdate(t))})}),afterUpdate=(e=>{e.forEach(e=>{t.is_favorite?(li.style.borderColor="#c22c2c",fav.className="checked"):(li.style.borderColor="#ccc",fav.className="");let t=e;image=document.getElementById("image"+e.id),image.src=DBHelper.imageUrlForRestaurant(t),image.alt="showing restaurant is "+t.name+" and cuisine type is "+t.cuisine_type,image.srcset=`images/${t.id}-400small.jpg 480w,images/${t.id}-600medium.jpg 600w`,image.sizes="(max-width: 600px) 60vw,(min-width: 601px) 50vw"})}),addFavorite=(e=>{fetch(`http://localhost:1337/restaurants/${e}/`,{method:"PUT",body:JSON.stringify({is_favorite:!0}),headers:{"Content-Type":"application/json"}}).then(e=>e.json()).then(e=>{})}),removeFavorite=(e=>{fetch(`http://localhost:1337/restaurants/${e}/`,{method:"PUT",body:JSON.stringify({is_favorite:!1}),headers:{"Content-Type":"application/json"}}).then(e=>e.json()).then(e=>{})});let restaurantsList=document.getElementById("restaurants-list");restaurantsList.addEventListener("click",e=>{let t=e.target.id,a=e.target,s=t.replace(/^\D+/g,"");t.includes("fav")&&!a.classList.contains("checked")?(addFavorite(s),a.classList.toggle("checked"),changeFavRestaurantBorder(!0,s)):t.includes("fav")&&a.classList.contains("checked")&&(removeFavorite(s),a.classList.toggle("checked"),changeFavRestaurantBorder(!1,s))}); \ No newline at end of file diff --git a/src/dist/js/uglify.js b/src/dist/js/uglify.js index 6ae6c958e..59886d237 100644 --- a/src/dist/js/uglify.js +++ b/src/dist/js/uglify.js @@ -1 +1 @@ -initIDB=(()=>("indexedDB"in window||console.log("This browser doesnt support idb"),idb.open("restaurant-app",3,function(e){switch(e.oldVersion){case 0:console.log("Creating the restaurants object store"),e.createObjectStore("restaurants",{keyPath:"id"});case 1:console.log("Creating the reviews object store"),e.createObjectStore("reviews",{keyPath:"id"});case 2:console.log("Creating restaurant id index"),e.transaction.objectStore("reviews").createIndex("restaurant_id","restaurant_id");case 3:console.log("Creating the reviews object store"),e.createObjectStore("reviews_offline",{keyPath:"id"})}})));let restaurants,neighborhoods,cuisines,res={};class DBHelper{static fetchRestaurants(e){initIDB().then(function(t){t&&t.transaction("restaurants","readwrite").objectStore("restaurants").getAll().then(s=>{if(s.length>0){res.restaurants=s;const t=res.restaurants;e(null,t)}else fetch("http://localhost:1337/restaurants").then(e=>e.json()).then(s=>{res.restaurants=s;const a=res.restaurants;var n=t.transaction("restaurants","readwrite").objectStore("restaurants");a.forEach(e=>{n.put(e)}),n.getAll().then(t=>{e(null,a)})}).catch(t=>{e(t,null)})})})}static fetchReviews(e,t){console.log("fetch Reviews",e),initIDB().then(s=>{if(!s)return;let a=Number(e);s.transaction("reviews","readwrite").objectStore("reviews").index("restaurant_id").getAll(a).then(a=>{if(console.log("items",a),!(a.length>0))return fetch(`http://localhost:1337/reviews/?restaurant_id=${e}`).then(e=>e.json()).then(e=>{console.log("response",e),console.log("aftr response",e);var a=s.transaction("reviews","readwrite").objectStore("reviews");e.forEach(e=>{e.restaurant_id=Number(e.restaurant_id),a.put(e)}),self.restaurant.reviews=e,t(null,self.restaurant.reviews)});a.restaurant_id=Number(a.restaurant_id),self.restaurant.reviews=a,t(null,self.restaurant.reviews)})})}static mapMarkerForRestaurant(e,t){return new google.maps.Marker({position:e.latlng,title:e.name,url:DBHelper.urlForRestaurant(e),map:t,animation:google.maps.Animation.DROP})}static fetchRestaurantById(e,t){DBHelper.fetchRestaurants((s,a)=>{if(s)t(s,null);else{const s=a.find(t=>t.id==e);s?t(null,s):t("Restaurant does not exist",null)}})}static controlFav(e){return fetch(`http://localhost:1337/restaurants/${e}/`,{method:"GET",headers:{"Content-Type":"application/json"}}).then(e=>(console.log("response status:",e),e.json())).then(e=>(console.log("response status:",e.is_favorite),e.is_favorite))}static fetchRestaurantByCuisine(e,t){DBHelper.fetchRestaurants((s,a)=>{if(s)t(s,null);else{const s=a.filter(t=>t.cuisine_type==e);t(null,s)}})}static fetchRestaurantByNeighborhood(e,t){DBHelper.fetchRestaurants((s,a)=>{if(s)t(s,null);else{const s=a.filter(t=>t.neighborhood==e);t(null,s)}})}static fetchRestaurantByCuisineAndNeighborhood(e,t,s){DBHelper.fetchRestaurants((a,n)=>{if(a)s(a,null);else{let a=n;"all"!=e&&(a=a.filter(t=>t.cuisine_type==e)),"all"!=t&&(a=a.filter(e=>e.neighborhood==t)),s(null,a)}})}static fetchNeighborhoods(e){DBHelper.fetchRestaurants((t,s)=>{if(t)e(t,null);else{const t=s.map((e,t)=>s[t].neighborhood),a=t.filter((e,s)=>t.indexOf(e)==s);e(null,a)}})}static fetchCuisines(e){DBHelper.fetchRestaurants((t,s)=>{if(t)e(t,null);else{const t=s.map((e,t)=>s[t].cuisine_type),a=t.filter((e,s)=>t.indexOf(e)==s);e(null,a)}})}static urlForRestaurant(e){return`./restaurant.html?id=${e.id}`}static imageUrlForRestaurant(e){return`/img/${e.photograph}`}}var map;"serviceWorker"in navigator||console.log("Service worker not supported"),navigator.serviceWorker.register("/sw.js").then(function(e){}).catch(function(e){console.log("Registration failed:",e)});var markers=[];console.log("main.js"),window.addEventListener("load",e=>{console.log("load"),fetchNeighborhoods(),fetchCuisines()}),fetchNeighborhoods=(()=>{console.log("fetchNeighborhoods"),DBHelper.fetchNeighborhoods((e,t)=>{e?console.error(e):(self.neighborhoods=t,fillNeighborhoodsHTML())})}),fillNeighborhoodsHTML=((e=self.neighborhoods)=>{const t=document.getElementById("neighborhoods-select");e.forEach(e=>{const s=document.createElement("option");s.innerHTML=e,s.value=e,t.append(s)})}),initMap=(()=>{self.map=new google.maps.Map(document.getElementById("map"),{zoom:12,center:{lat:40.722216,lng:-73.987501},scrollwheel:!1})}),fetchCuisines=(()=>{updateRestaurants(),DBHelper.fetchCuisines((e,t)=>{e?console.error(e):(self.cuisines=t,fillCuisinesHTML())})}),fillCuisinesHTML=((e=self.cuisines)=>{const t=document.getElementById("cuisines-select");e.forEach(e=>{const s=document.createElement("option");s.innerHTML=e,s.value=e,t.append(s)})});let selectedRestaurants={};updateRestaurants=(()=>{console.log("updateRestaurants");const e=document.getElementById("cuisines-select"),t=document.getElementById("neighborhoods-select"),s=e.selectedIndex,a=t.selectedIndex,n=e[s].value,r=t[a].value;DBHelper.fetchRestaurantByCuisineAndNeighborhood(n,r,(e,t)=>{e?console.error(e):(resetRestaurants(t),fillRestaurantsHTML())})});var i,coll=document.getElementsByClassName("collapsible");for(i=0;i{initMap(),addMarkersToMap()}),addMarkersToMap=((e=self.restaurants)=>{e.forEach(e=>{const t=DBHelper.mapMarkerForRestaurant(e,self.map);google.maps.event.addListener(t,"click",()=>{window.location.href=t.url}),self.markers.push(t)})}),resetRestaurants=(e=>{self.restaurants=[],document.getElementById("restaurants-list").innerHTML="",self.markers.forEach(e=>e.setMap(null)),self.markers=[],self.restaurants=e}),fillRestaurantsHTML=((e=self.restaurants)=>{const t=document.getElementById("restaurants-list");e.forEach(e=>{t.append(createRestaurantHTML(e))}),addMarkersToMap()});var io=new IntersectionObserver(e=>{console.log("iointersect"),e.forEach(e=>{if(e.isIntersecting){let t=e.target.childNodes[0].id,s=t.replace(/^\D+/g,"");s=Number(s),idIntersectingElement=s,console.log("load image from intersect:",res.restaurants[s-1]),loadImage(res.restaurants[s-1],t),io.unobserve(e.target)}})});changeFavRestaurantBorder=((e,t)=>{let s=document.getElementById("restaurant"+t);console.log("favRestaurant,is_fav,listNumber",s,e,t),e?(console.log("fav",s),s.style.borderColor="#c22c2c"):(console.log("else",s),s.style.borderColor="#ccc")}),getRestaurantfavStatus=(e=>fetch(`http://localhost:1337/restaurants/${e}`).then(e=>e.json()).then(e=>e.is_favorite)),createRestaurantHTML=((e,t)=>{const s=document.createElement("li");s.id="restaurant"+e.id,io.observe(s);let a=document.createElement("img");a.className="restaurant-img",a.id="image"+e.id,s.append(a);const n=document.createElement("h2");n.innerHTML=e.name,s.append(n);const r=document.createElement("p");r.innerHTML=e.neighborhood,s.append(r);const o=document.createElement("p");o.innerHTML=e.address,s.append(o);const l=document.createElement("a");l.innerHTML="View Details",l.href=DBHelper.urlForRestaurant(e),s.append(l);const i=document.createElement("button");return i.id="fav"+e.id,i.innerHTML=" ☆",getRestaurantfavStatus(e.id).then(e=>{e?(s.style.borderColor="#c22c2c",i.className="checked"):(s.style.borderColor="#ccc",i.className="")}),s.append(i),loadImage=((e,t)=>{(a=document.getElementById(t)).src=DBHelper.imageUrlForRestaurant(e),a.srcset=`images/${e.id}-300small_low.jpg 480w,images/${e.id}-600medium.jpg 600w`,a.sizes="(max-width: 600px) 20vw,(min-width: 601px) 50vw",a.alt="showing restaurant is "+e.name+" and cuisine type is "+e.cuisine_type}),s}),updateSelectedRestaurants=(()=>{const e=document.getElementById("cuisines-select"),t=document.getElementById("neighborhoods-select"),s=e.selectedIndex,a=t.selectedIndex,n=e[s].value,r=t[a].value;DBHelper.fetchRestaurantByCuisineAndNeighborhood(n,r,(e,t)=>{e?console.error(e):(resetRestaurants(t),fillRestaurantsHTML(),afterUpdate(t))})}),afterUpdate=(e=>{console.log("afterUpdate",e),e.forEach(e=>{t.is_favorite?(li.style.borderColor="#c22c2c",fav.className="checked"):(li.style.borderColor="#ccc",fav.className="");let t=e;image=document.getElementById("image"+e.id),image.src=DBHelper.imageUrlForRestaurant(t),image.alt="showing restaurant is "+t.name+" and cuisine type is "+t.cuisine_type,image.srcset=`images/${t.id}-400small.jpg 480w,images/${t.id}-600medium.jpg 600w`,image.sizes="(max-width: 600px) 60vw,(min-width: 601px) 50vw"})}),addFavorite=(e=>{fetch(`http://localhost:1337/restaurants/${e}/`,{method:"PUT",body:JSON.stringify({is_favorite:!0}),headers:{"Content-Type":"application/json"}}).then(e=>(console.log("response status:",e),e.json())).then(e=>{console.log("response status:",e.is_favorite)})}),removeFavorite=(e=>{fetch(`http://localhost:1337/restaurants/${e}/`,{method:"PUT",body:JSON.stringify({is_favorite:!1}),headers:{"Content-Type":"application/json"}}).then(e=>(console.log("response status:",e),e.json())).then(e=>{console.log("response status:",e.is_favorite)})});let restaurantsList=document.getElementById("restaurants-list");restaurantsList.addEventListener("click",e=>{console.log("click",e);let t=e.target.id,s=e.target,a=t.replace(/^\D+/g,"");t.includes("fav")&&!s.classList.contains("checked")?(console.log("clicked",e),addFavorite(a),s.classList.toggle("checked"),changeFavRestaurantBorder(!0,a)):t.includes("fav")&&s.classList.contains("checked")&&(removeFavorite(a),s.classList.toggle("checked"),changeFavRestaurantBorder(!1,a))}); \ No newline at end of file +initIDB=(()=>("indexedDB"in window||console.log("This browser doesnt support idb"),idb.open("restaurant-app",3,function(e){switch(e.oldVersion){case 0:console.log("Creating the restaurants object store"),e.createObjectStore("restaurants",{keyPath:"id"});case 1:console.log("Creating the reviews object store"),e.createObjectStore("reviews",{keyPath:"id"});case 2:console.log("Creating restaurant id index"),e.transaction.objectStore("reviews").createIndex("restaurant_id","restaurant_id");case 3:console.log("Creating the reviews object store"),e.createObjectStore("reviews_offline",{keyPath:"id"})}})));let restaurants,neighborhoods,cuisines,res={};class DBHelper{static fetchRestaurants(e){initIDB().then(function(t){t&&t.transaction("restaurants","readwrite").objectStore("restaurants").getAll().then(s=>{if(s.length>0){res.restaurants=s;const t=res.restaurants;e(null,t)}else fetch("http://localhost:1337/restaurants").then(e=>e.json()).then(s=>{res.restaurants=s;const a=res.restaurants;var r=t.transaction("restaurants","readwrite").objectStore("restaurants");a.forEach(e=>{r.put(e)}),r.getAll().then(t=>{e(null,a)})}).catch(t=>{e(t,null)})})})}static fetchReviews(e,t){console.log("fetch Reviews",e),initIDB().then(s=>{if(!s)return;let a=Number(e);s.transaction("reviews","readwrite").objectStore("reviews").index("restaurant_id").getAll(a).then(a=>{if(console.log("items",a),!(a.length>0))return fetch(`http://localhost:1337/reviews/?restaurant_id=${e}`).then(e=>e.json()).then(e=>{console.log("response",e),console.log("aftr response",e);var a=s.transaction("reviews","readwrite").objectStore("reviews");e.forEach(e=>{e.restaurant_id=Number(e.restaurant_id),a.put(e)}),self.restaurant.reviews=e,t(null,self.restaurant.reviews)});a.restaurant_id=Number(a.restaurant_id),self.restaurant.reviews=a,t(null,self.restaurant.reviews)})})}static mapMarkerForRestaurant(e,t){return new google.maps.Marker({position:e.latlng,title:e.name,url:DBHelper.urlForRestaurant(e),map:t,animation:google.maps.Animation.DROP})}static fetchRestaurantById(e,t){DBHelper.fetchRestaurants((s,a)=>{if(s)t(s,null);else{const s=a.find(t=>t.id==e);s?t(null,s):t("Restaurant does not exist",null)}})}static controlFav(e){return fetch(`http://localhost:1337/restaurants/${e}/`,{method:"GET",headers:{"Content-Type":"application/json"}}).then(e=>(console.log("response status:",e),e.json())).then(e=>(console.log("response status:",e.is_favorite),e.is_favorite))}static fetchRestaurantByCuisine(e,t){DBHelper.fetchRestaurants((s,a)=>{if(s)t(s,null);else{const s=a.filter(t=>t.cuisine_type==e);t(null,s)}})}static fetchRestaurantByNeighborhood(e,t){DBHelper.fetchRestaurants((s,a)=>{if(s)t(s,null);else{const s=a.filter(t=>t.neighborhood==e);t(null,s)}})}static fetchRestaurantByCuisineAndNeighborhood(e,t,s){DBHelper.fetchRestaurants((a,r)=>{if(a)s(a,null);else{let a=r;"all"!=e&&(a=a.filter(t=>t.cuisine_type==e)),"all"!=t&&(a=a.filter(e=>e.neighborhood==t)),s(null,a)}})}static fetchNeighborhoods(e){DBHelper.fetchRestaurants((t,s)=>{if(t)e(t,null);else{const t=s.map((e,t)=>s[t].neighborhood),a=t.filter((e,s)=>t.indexOf(e)==s);e(null,a)}})}static fetchCuisines(e){DBHelper.fetchRestaurants((t,s)=>{if(t)e(t,null);else{const t=s.map((e,t)=>s[t].cuisine_type),a=t.filter((e,s)=>t.indexOf(e)==s);e(null,a)}})}static urlForRestaurant(e){return`./restaurant.html?id=${e.id}`}static imageUrlForRestaurant(e){return`/img/${e.photograph}`}}var map;"serviceWorker"in navigator||console.log("Service worker not supported"),navigator.serviceWorker.register("/sw.js").then(function(e){}).catch(function(e){console.log("Registration failed:",e)});var markers=[];console.log("main.js"),window.addEventListener("load",e=>{console.log("load"),fetchNeighborhoods(),fetchCuisines()}),fetchNeighborhoods=(()=>{console.log("fetchNeighborhoods"),DBHelper.fetchNeighborhoods((e,t)=>{e?console.error(e):(self.neighborhoods=t,fillNeighborhoodsHTML())})}),fillNeighborhoodsHTML=((e=self.neighborhoods)=>{const t=document.getElementById("neighborhoods-select");e.forEach(e=>{const s=document.createElement("option");s.innerHTML=e,s.value=e,t.append(s)})}),initMap=(()=>{self.map=new google.maps.Map(document.getElementById("map"),{zoom:12,center:{lat:40.722216,lng:-73.987501},scrollwheel:!1})}),fetchCuisines=(()=>{updateRestaurants(),DBHelper.fetchCuisines((e,t)=>{e?console.error(e):(self.cuisines=t,fillCuisinesHTML())})}),fillCuisinesHTML=((e=self.cuisines)=>{const t=document.getElementById("cuisines-select");e.forEach(e=>{const s=document.createElement("option");s.innerHTML=e,s.value=e,t.append(s)})});let selectedRestaurants={};updateRestaurants=(()=>{console.log("updateRestaurants");const e=document.getElementById("cuisines-select"),t=document.getElementById("neighborhoods-select"),s=e.selectedIndex,a=t.selectedIndex,r=e[s].value,n=t[a].value;DBHelper.fetchRestaurantByCuisineAndNeighborhood(r,n,(e,t)=>{e?console.error(e):(resetRestaurants(t),fillRestaurantsHTML())})});var i,coll=document.getElementsByClassName("collapsible");for(i=0;i{initMap(),addMarkersToMap()}),addMarkersToMap=((e=self.restaurants)=>{e.forEach(e=>{const t=DBHelper.mapMarkerForRestaurant(e,self.map);google.maps.event.addListener(t,"click",()=>{window.location.href=t.url}),self.markers.push(t)})}),resetRestaurants=(e=>{self.restaurants=[],document.getElementById("restaurants-list").innerHTML="",self.markers.forEach(e=>e.setMap(null)),self.markers=[],self.restaurants=e}),fillRestaurantsHTML=((e=self.restaurants)=>{const t=document.getElementById("restaurants-list");e.forEach(e=>{t.append(createRestaurantHTML(e))}),addMarkersToMap()});var io=new IntersectionObserver(e=>{console.log("iointersect"),e.forEach(e=>{if(e.isIntersecting){let t=e.target.childNodes[0].id,s=t.replace(/^\D+/g,"");s=Number(s),idIntersectingElement=s,console.log("load image from intersect:",res.restaurants[s-1]),loadImage(res.restaurants[s-1],t),io.unobserve(e.target)}})});changeFavRestaurantBorder=((e,t)=>{let s=document.getElementById("restaurant"+t);s.style.borderColor=e?"#c22c2c":"#ccc"}),getRestaurantfavStatus=(e=>fetch(`http://localhost:1337/restaurants/${e}`).then(e=>e.json()).then(e=>e.is_favorite)),createRestaurantHTML=((e,t)=>{const s=document.createElement("li");s.id="restaurant"+e.id,io.observe(s);let a=document.createElement("img");a.className="restaurant-img",a.id="image"+e.id,s.append(a);const r=document.createElement("h2");r.innerHTML=e.name,s.append(r);const n=document.createElement("p");n.innerHTML=e.neighborhood,s.append(n);const o=document.createElement("p");o.innerHTML=e.address,s.append(o);const i=document.createElement("a");i.innerHTML="View Details",i.href=DBHelper.urlForRestaurant(e),s.append(i);const l=document.createElement("button");return l.id="fav"+e.id,l.innerHTML=" ☆",getRestaurantfavStatus(e.id).then(e=>{e?(s.style.borderColor="#c22c2c",l.className="checked"):(s.style.borderColor="#ccc",l.className="")}),s.append(l),a.alt="showing restaurant is "+e.name+" and cuisine type is "+e.cuisine_type,loadImage=((e,t)=>{(a=document.getElementById(t)).src=DBHelper.imageUrlForRestaurant(e),a.srcset=`images/${e.id}-300small_low.jpg 480w,images/${e.id}-600medium.jpg 600w`,a.sizes="(max-width: 600px) 20vw,(min-width: 601px) 50vw"}),s}),updateSelectedRestaurants=(()=>{const e=document.getElementById("cuisines-select"),t=document.getElementById("neighborhoods-select"),s=e.selectedIndex,a=t.selectedIndex,r=e[s].value,n=t[a].value;DBHelper.fetchRestaurantByCuisineAndNeighborhood(r,n,(e,t)=>{e?console.error(e):(resetRestaurants(t),fillRestaurantsHTML(),afterUpdate(t))})}),afterUpdate=(e=>{e.forEach(e=>{t.is_favorite?(li.style.borderColor="#c22c2c",fav.className="checked"):(li.style.borderColor="#ccc",fav.className="");let t=e;image=document.getElementById("image"+e.id),image.src=DBHelper.imageUrlForRestaurant(t),image.alt="showing restaurant is "+t.name+" and cuisine type is "+t.cuisine_type,image.srcset=`images/${t.id}-400small.jpg 480w,images/${t.id}-600medium.jpg 600w`,image.sizes="(max-width: 600px) 60vw,(min-width: 601px) 50vw"})}),addFavorite=(e=>{fetch(`http://localhost:1337/restaurants/${e}/`,{method:"PUT",body:JSON.stringify({is_favorite:!0}),headers:{"Content-Type":"application/json"}}).then(e=>e.json()).then(e=>{})}),removeFavorite=(e=>{fetch(`http://localhost:1337/restaurants/${e}/`,{method:"PUT",body:JSON.stringify({is_favorite:!1}),headers:{"Content-Type":"application/json"}}).then(e=>e.json()).then(e=>{})});let restaurantsList=document.getElementById("restaurants-list");restaurantsList.addEventListener("click",e=>{let t=e.target.id,s=e.target,a=t.replace(/^\D+/g,"");t.includes("fav")&&!s.classList.contains("checked")?(addFavorite(a),s.classList.toggle("checked"),changeFavRestaurantBorder(!0,a)):t.includes("fav")&&s.classList.contains("checked")&&(removeFavorite(a),s.classList.toggle("checked"),changeFavRestaurantBorder(!1,a))}); \ No newline at end of file diff --git a/src/dist/sass/main-aux.css b/src/dist/sass/main-aux.css index 8d0274221..2eac26262 100644 --- a/src/dist/sass/main-aux.css +++ b/src/dist/sass/main-aux.css @@ -1 +1 @@ -#restaurants-list{background-color:#f3f3f3;list-style:outside none none;margin:0;padding:30px 0 60px;display:flex;flex-wrap:wrap;width:100%}#restaurants-list li{border:2px solid #ccc;margin:15px auto;padding:0 30px 25px;width:calc((100% - 200px)/2);padding-bottom:50px}.restaurant-img{background-color:#ccc;display:block;margin:auto;width:30vw;min-height:248px;min-width:80%}@media screen and (max-width: 700px){#restaurants-list li{width:70%}.restaurant-img{width:60vw;max-height:350px}}@media screen and (min-width: 1300px){#restaurants-list li{max-width:25%;margin:5px auto 20px auto}#restaurants-list .restaurant-img{max-width:200px;margin:auto}}#map{height:51vh;display:none;overflow:hidden}#restaurants-list li h2{color:#703f0a;font-size:13pt;text-transform:uppercase;text-align:center}#restaurants-list p{font-size:11pt}#restaurants-list li button{border:none;background-color:inherit;font-size:45px;color:#cd9292;float:right;box-shadow:none}#restaurants-list li .checked{color:#c22c2c;border:none;background-color:inherit;outline:none;box-shadow:none}#restaurants-list li a{color:#fff;background:#7d4f00;opacity:1;border-bottom:3px solid #eee;display:inline-block;text-decoration:none;margin:15px 0 0;padding:8px 30px 10px;text-transform:uppercase}*:focus{outline:none;box-shadow:5px 5px 5px #7A4507}#reviews-list [id^=rating]:focus{outline:none;border:2px solid #000000}.filter-options select:focus{outline:none;border:2px solid #000000}*:hover{outline:none}#footer{color:#B1B1B1;background:#444444;opacity:1;font-size:8pt;letter-spacing:1px;padding:25px;margin-bottom:-70px;text-align:center;text-transform:uppercase}strong{color:white}.active,.collapsible:hover{background-color:#ccc} +#restaurants-list{background-color:#f3f3f3;list-style:outside none none;margin:0;padding:30px 0 60px;display:flex;flex-wrap:wrap;width:100%}#restaurants-list li{border:2px solid #ccc;margin:15px auto;padding:0 30px 25px;width:calc((100% - 200px)/2);padding-bottom:50px}.restaurant-img{background-color:#ccc;display:block;margin:auto;width:30vw;min-height:248px;min-width:80%}@media screen and (max-width: 700px){#restaurants-list li{width:70%}.restaurant-img{width:60vw;max-height:350px}}@media screen and (min-width: 1300px){#restaurants-list li{max-width:25%;margin:5px auto 20px auto}#restaurants-list .restaurant-img{max-width:200px;margin:auto}}#map{height:51vh;display:none;overflow:hidden}#restaurants-list li h2{color:#703f0a;font-size:13pt;text-transform:uppercase;text-align:center}#restaurants-list p{font-size:11pt}#restaurants-list li button{border:none;background-color:inherit;font-size:45px;color:#b17878;float:right;box-shadow:none}#restaurants-list li .checked{color:#c22c2c;border:none;background-color:inherit;outline:none;box-shadow:none}#restaurants-list li a{color:#fff;background:#7d4f00;opacity:1;border-bottom:3px solid #eee;display:inline-block;text-decoration:none;margin:15px 0 0;padding:8px 30px 10px;text-transform:uppercase}*:focus{outline:none;box-shadow:5px 5px 5px #7A4507}#reviews-list [id^=rating]:focus{outline:none;border:2px solid #000000}.filter-options select:focus{outline:none;border:2px solid #000000}*:hover{outline:none}#footer{color:#B1B1B1;background:#444444;opacity:1;font-size:8pt;letter-spacing:1px;padding:25px;margin-bottom:-70px;text-align:center;text-transform:uppercase}strong{color:white}.active,.collapsible:hover{background-color:#ccc} diff --git a/src/dist/sass/restaurant.css b/src/dist/sass/restaurant.css index 5b4358096..1bf995e54 100644 --- a/src/dist/sass/restaurant.css +++ b/src/dist/sass/restaurant.css @@ -1 +1 @@ -body,td,th,p{font-family:Arial, Helvetica, sans-serif;font-size:10pt;color:#333;line-height:1.5;margin:0}body{background-color:#fdfdfd}a{color:orange;text-decoration:none}a:hover,a:focus{color:#3397db;text-decoration:none}a img{border:none 0px #fff}h1,h2,h3,h4,h5,h6{font-family:Arial, Helvetica, sans-serif}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}#breadcrumb{list-style:none;background-color:#eee;width:100%;box-shadow:3px 2px 5px #888888;height:7%}#breadcrumb ol li{display:inline}#breadcrumb li+li:before{padding:8px;color:black;content:"/\00a0"}#breadcrumb ol li a{color:#005096;text-decoration:none}#breadcrumb ol{padding-left:10px}#breadcrumb ol li a:hover{color:#01447e;text-decoration:underline}nav{width:100%;height:80px;background-color:#252831}nav h1{margin:auto;padding:20px;text-align:center}nav h1 a{color:#fff;font-size:14pt;font-weight:200;letter-spacing:10px;text-transform:uppercase}.collapsible{background-color:#ccc;color:#444;padding:18px;margin-left:5px;width:100%;border:none;text-align:center;outline:none;font-size:15px}.active,.collapsible:hover{background-color:#eee}.inside{width:100%}.inside #maincontent{background-color:#eee;width:100%;display:flex;flex-wrap:wrap}.inside header nav{position:fixed;width:100%;z-index:1000}.inside #breadcrumb{position:fixed;z-index:1000;margin:80px 0;font-size:10px}.inside #map-container{max-height:400px;width:100%;margin:20vh 8px 0 6px}.inside #map{display:none;border:2px solid #d9d9d9;background-color:#ccc;height:95%;width:100%;box-shadow:3px 2px 10px #888888}.inside #staticmap{position:relative;border:2px solid #d9d9d9;background-color:#ccc;height:95%;width:100%;box-shadow:3px 2px 10px #888888}#restaurant-name{color:#d07000;font-family:Arial,sans-serif;font-size:18pt;font-weight:600;letter-spacing:0;margin:15px 0 30px;text-transform:uppercase;line-height:1.1;text-align:center}#restaurant-img{width:50vw;margin:0 0 0 18%}@media screen and (max-width: 600px){#restaurant-img{width:100%;margin:0}}#restaurant-address{font-size:17pt;margin:auto;text-align:center}#restaurant-cuisine{background-color:#333;color:#ddd;font-size:12pt;font-weight:300;letter-spacing:10px;margin:-5px 0 20px;padding:2px 0;text-align:center;text-transform:uppercase;width:100%}#restaurant-container,#reviews-container{border:3px solid #d9d9d9;width:80%;margin:auto}#reviews-container h3{color:#5e3c10;font-weight:0;letter-spacing:1px;padding-left:3vw;margin:15px;font-size:2em}#form{border:1px solid;padding-top:20px;font-size:15px;font-weight:700;text-align:center;color:black;background-color:#726464;position:fixed;left:-100%;z-index:1000;height:70%;width:80%}#form input{padding-top:5px;font-size:15px;width:70%;height:10%}textarea{font-size:15px;width:70%;height:10%}#Review{font-size:15px;width:70%;height:40%}button{margin:auto;display:block;padding-top:5px;font-size:15px;width:20%}#reviews-list{background-color:#eee;padding:0}#addReview{font-size:13px;box-shadow:3px 3px 10px #888888;background:none;background-color:#333;color:wheat;padding:8px;margin-top:20px;margin-right:4vw;float:right}#reviews-list li{background-color:#eee;border:2px solid #333;border-radius:15px;list-style-type:none;margin:0 auto 2vw auto;overflow:hidden;position:relative;width:90%;display:flex;flex-wrap:wrap}#reviews-list li p:not([id^=name]):not([id^=date]):not([id^=rating]){padding:10px 20px 10px;flex-basis:100%;font-size:1em}#reviews-list [id^=name]{border-top-left-radius:inherit;font-weight:700;font-size:1em;letter-spacing:0.5vw;color:wheat;background-color:#333;width:50%;text-indent:13vw;padding:6px 0 10px 0}#reviews-list [id^=date]{border-top-right-radius:inherit;font-weight:300;font-size:1em;background-color:#333;color:wheat;width:50%;text-indent:10vw;padding:6px 0 10px 0}#reviews-list [id^=rating]{border-radius:5px;color:#F5DEB3;background:#006C8B;opacity:1;margin:10px 0 0 19px;box-shadow:2px 2px #888888;padding:10px 10px 10px 10px}@media screen and (max-width: 724px){#reviews-list [id^=date]{text-indent:0;font-size:0.8em}#reviews-list [id^=name]{transition:width 0.5s;font-weight:300;text-indent:10vw;font-size:0.8em}}#restaurant-hours,#restaurant-hours tr{display:flex;flex-wrap:wrap;width:50%;margin:5px auto 5px auto;box-shadow:2px 6px 8px #888888}#restaurant-hours,#restaurant-hours tr td{width:80%;text-align:center;font-size:11pt}#restaurant-hours tr td:first-child{color:#666;text-align:center;font-weight:700;width:100%;max-height:35%;padding-bottom:0}#restaurant-hours tr td:last-child{color:#666;width:100%;padding-top:0}*:focus{outline:none;box-shadow:5px 5px 5px #7A4507}#reviews-list [id^=rating]:focus{outline:none;border:2px solid #000000}.filter-options select:focus{outline:none;border:2px solid #000000}*:hover{outline:none}#footer{color:#B1B1B1;background:#444444;opacity:1;font-size:8pt;letter-spacing:1px;padding:25px;margin-bottom:-70px;text-align:center;text-transform:uppercase} +body,p,td,th{font-family:Arial,Helvetica,sans-serif;font-size:10pt;color:#333;line-height:1.5;margin:0}body{background-color:#fdfdfd}a{color:orange;text-decoration:none}a:focus,a:hover{color:#3397db;text-decoration:none}a img{border:none 0 #fff}h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,sans-serif}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}#breadcrumb{list-style:none;background-color:#eee;width:100%;box-shadow:3px 2px 5px #888;height:7%}#breadcrumb ol li{display:inline}#breadcrumb li+li:before{padding:8px;color:#000;content:"/\00a0"}#breadcrumb ol li a{color:#005096;text-decoration:none}#breadcrumb ol{padding-left:10px}#breadcrumb ol li a:hover{color:#01447e;text-decoration:underline}nav{width:100%;height:80px;background-color:#252831}nav h1{margin:auto;padding:20px;text-align:center}nav h1 a{color:#fff;font-size:14pt;font-weight:200;letter-spacing:10px;text-transform:uppercase}.collapsible{background-color:#ccc;color:#444;padding:18px;margin-left:5px;width:100%;border:none;text-align:center;outline:0;font-size:15px}.active,.collapsible:hover{background-color:#eee}.inside{width:100%}.inside #maincontent{background-color:#eee;width:100%;display:flex;flex-wrap:wrap}.inside header nav{position:fixed;width:100%;z-index:1000}.inside #breadcrumb{position:fixed;z-index:1000;margin:80px 0;font-size:10px}.inside #map-container{max-height:400px;width:100%;margin:20vh 8px 0 6px}.inside #map{display:none;border:2px solid #d9d9d9;background-color:#ccc;height:95%;width:100%;box-shadow:3px 2px 10px #888}.inside #staticmap{position:relative;border:2px solid #d9d9d9;background-color:#ccc;height:95%;width:100%;box-shadow:3px 2px 10px #888}#restaurant-name{color:#d07000;font-family:Arial,sans-serif;font-size:18pt;font-weight:600;letter-spacing:0;margin:15px 0 30px;text-transform:uppercase;line-height:1.1;text-align:center}#restaurant-img{width:50vw;margin:0 0 0 18%}@media screen and (max-width:600px){#restaurant-img{width:100%;margin:0}}#restaurant-address{font-size:17pt;margin:auto;text-align:center}#restaurant-cuisine{background-color:#333;color:#ddd;font-size:12pt;font-weight:300;letter-spacing:10px;margin:-5px 0 20px;padding:2px 0;text-align:center;text-transform:uppercase;width:100%}#restaurant-container,#reviews-container{border:3px solid #d9d9d9;width:80%;margin:auto}#reviews-container h3{color:#5e3c10;font-weight:0;letter-spacing:1px;padding-left:3vw;margin:15px;font-size:2em}#form{border:1px solid;padding-top:20px;font-size:15px;font-weight:700;text-align:center;color:#000;background-color:#726464;position:fixed;left:-100%;z-index:1000;height:70%;width:80%}#form input{padding-top:5px;font-size:15px;width:70%;height:10%}textarea{font-size:15px;width:70%;height:10%}#Review{font-size:15px;width:70%;height:40%}button{margin:auto;display:block;padding-top:5px;font-size:15px;width:20%}#reviews-list{background-color:#eee;padding:0}#addReview{font-size:13px;box-shadow:3px 3px 10px #888;background:0 0;background-color:#333;color:wheat;padding:8px;margin-top:20px;margin-right:4vw;float:right}#reviews-list li{background-color:#eee;border:2px solid #333;border-radius:15px;list-style-type:none;margin:0 auto 2vw auto;overflow:hidden;position:relative;width:90%;display:flex;flex-wrap:wrap}#reviews-list li p:not([id^=name]):not([id^=date]):not([id^=rating]){padding:10px 20px 10px;flex-basis:100%;font-size:1em}#reviews-list [id^=name]{border-top-left-radius:inherit;font-weight:700;font-size:1em;letter-spacing:.5vw;color:wheat;background-color:#333;width:50%;text-indent:13vw;padding:6px 0 10px 0}#reviews-list [id^=date]{border-top-right-radius:inherit;font-weight:300;font-size:1em;background-color:#333;color:wheat;width:50%;text-indent:10vw;padding:6px 0 10px 0}#reviews-list [id^=rating]{border-radius:5px;color:wheat;background:#006c8b;opacity:1;margin:10px 0 0 19px;box-shadow:2px 2px #888;padding:10px 10px 10px 10px}@media screen and (max-width:724px){#reviews-list [id^=date]{text-indent:0;font-size:.8em}#reviews-list [id^=name]{transition:width .5s;font-weight:300;text-indent:10vw;font-size:.8em}}#restaurant-hours,#restaurant-hours tr{display:flex;flex-wrap:wrap;width:50%;margin:5px auto 5px auto;box-shadow:2px 6px 8px #888}#restaurant-hours,#restaurant-hours tr td{width:80%;text-align:center;font-size:11pt}#restaurant-hours tr td:first-child{color:#666;text-align:center;font-weight:700;width:100%;max-height:35%;padding-bottom:0}#restaurant-hours tr td:last-child{color:#666;width:100%;padding-top:0}:focus{outline:0;box-shadow:5px 5px 5px #7a4507}#reviews-list [id^=rating]:focus{outline:0;border:2px solid #000}.filter-options select:focus{outline:0;border:2px solid #000}:hover{outline:0}#footer{color:#b1b1b1;background:#444;opacity:1;font-size:8pt;letter-spacing:1px;padding:25px;margin-bottom:-70px;text-align:center;text-transform:uppercase}rgin-bottom:-70px;text-align:center;text-transform:uppercase} diff --git a/src/js/all.js b/src/js/all.js index 1ac8cce7a..b81096b58 100644 --- a/src/js/all.js +++ b/src/js/all.js @@ -478,7 +478,9 @@ fillRestaurantsHTML = (restaurants = self.restaurants) => { addMarkersToMap(); } - +/** + *Implement Intersect Feature + */ let idIntersectingElement; var io = new IntersectionObserver(entries => { console.log('iointersect'); @@ -499,27 +501,31 @@ var io = new IntersectionObserver(entries => { -//console.log('mainRestaurants.js'); +/** + * change restaurant border if it is a favorite + */ changeFavRestaurantBorder = (is_fav, listNumber) => { //let favRestaurant = document.querySelectorAll('#restaurants-list li'); let favRestaurant = document.getElementById('restaurant'+listNumber); - console.log('favRestaurant,is_fav,listNumber', favRestaurant,is_fav,listNumber); + //console.log('favRestaurant,is_fav,listNumber', favRestaurant,is_fav,listNumber); if(is_fav) { - console.log('fav', favRestaurant); + /// console.log('fav', favRestaurant); //favRestaurant[listNumber].style.borderColor = '#c22c2c'; favRestaurant.style.borderColor = '#c22c2c'; } else { - console.log('else', favRestaurant); + // console.log('else', favRestaurant); //favRestaurant[listNumber].style.borderColor = '#ccc'; favRestaurant.style.borderColor = '#ccc'; } - } +/** + * get fav status + */ getRestaurantfavStatus = (id) => { return fetch(`http://localhost:1337/restaurants/${id}`).then(response => { return response.json(); @@ -566,7 +572,6 @@ createRestaurantHTML = (restaurant,callback) => { fav.id = 'fav' + restaurant.id; fav.innerHTML =' ☆'; // control favorite status of restaurant - //console.log('createRestaurantHTML',restaurant,getRestaurantfavStatus(restaurant.id)); getRestaurantfavStatus(restaurant.id).then(status => { if(status){ li.style.borderColor = '#c22c2c'; @@ -580,6 +585,7 @@ createRestaurantHTML = (restaurant,callback) => { } }); li.append(fav); + image.alt = "showing restaurant is " + restaurant.name + " and cuisine type is " + restaurant.cuisine_type; loadImage = (restaurant, idStr) => { // console.log('loadImage,restaurant,idStr', restaurant,idStr); @@ -589,7 +595,6 @@ createRestaurantHTML = (restaurant,callback) => { //add srcset and sizes to make responsive images. image.srcset = `images/${restaurant.id}-300small_low.jpg 480w,images/${restaurant.id}-600medium.jpg 600w`; image.sizes = "(max-width: 600px) 20vw,(min-width: 601px) 50vw"; - image.alt = "showing restaurant is " + restaurant.name + " and cuisine type is " + restaurant.cuisine_type; } @@ -620,7 +625,7 @@ updateSelectedRestaurants = () => { } afterUpdate = (x) => { -console.log('afterUpdate',x); +//console.log('afterUpdate',x); x.forEach(a => { let status = restaurant.is_favorite; @@ -646,7 +651,7 @@ console.log('afterUpdate',x); } /** - * Add and remove favorite restaurants. + * Add favorite restaurants. */ addFavorite = (id) => { @@ -660,15 +665,18 @@ addFavorite = (id) => { } }).then(res => { - console.log('response status:', res); + // console.log('response status:', res); return res.json(); }).then(response => { - console.log('response status:', response.is_favorite); + // console.log('response status:', response.is_favorite); }); } +/** + * Remove favorite restaurants. + */ removeFavorite = (id) => { fetch(`http://localhost:1337/restaurants/${id}/`, @@ -681,12 +689,12 @@ removeFavorite = (id) => { } }).then(res => { - console.log('response status:', res); + // console.log('response status:', res); return res.json(); }).then(response => { - console.log('response status:', response.is_favorite); + // console.log('response status:', response.is_favorite); @@ -697,7 +705,7 @@ removeFavorite = (id) => { let restaurantsList = document.getElementById('restaurants-list'); restaurantsList.addEventListener('click', (e) => { - console.log('click', e); + //console.log('click', e); let clickedElementID = e.target.id ; let clickedTarget = e.target; let clickedElementIDNumber = clickedElementID.replace( /^\D+/g, ''); @@ -705,7 +713,7 @@ restaurantsList.addEventListener('click', (e) => { if (clickedElementID.includes('fav') && !clickedTarget.classList.contains('checked') ) { - console.log('clicked', e); + // console.log('clicked', e); addFavorite(clickedElementIDNumber); @@ -728,4 +736,9 @@ restaurantsList.addEventListener('click', (e) => { }); +/* +restaurantsList.addEventListener('onfocus', event => { + +}); +*/ \ No newline at end of file diff --git a/src/js/all_restaurant.js b/src/js/all_restaurant.js index a31ad1a8f..7452e2d36 100644 --- a/src/js/all_restaurant.js +++ b/src/js/all_restaurant.js @@ -519,8 +519,9 @@ addReview = () => { let rev = document.getElementById('form'); rev.style.top = "18vh"; rev.style.left = "10vw"; - + //rev.focus(); let main = document.getElementById('maincontent'); + //main.blur(); main.style.opacity = "0.5"; let breadcrumb = document.getElementById('breadcrumb'); diff --git a/src/js/intersection.js b/src/js/intersection.js index b1a1e858a..c56f8251d 100644 --- a/src/js/intersection.js +++ b/src/js/intersection.js @@ -1,4 +1,6 @@ - +/** + *Implement Intersect Feature + */ let idIntersectingElement; var io = new IntersectionObserver(entries => { console.log('iointersect'); diff --git a/src/js/mainRestaurants.js b/src/js/mainRestaurants.js index 635796a65..2e5f30e35 100644 --- a/src/js/mainRestaurants.js +++ b/src/js/mainRestaurants.js @@ -1,24 +1,28 @@ -//console.log('mainRestaurants.js'); +/** + * change restaurant border if it is a favorite + */ changeFavRestaurantBorder = (is_fav, listNumber) => { //let favRestaurant = document.querySelectorAll('#restaurants-list li'); let favRestaurant = document.getElementById('restaurant'+listNumber); - console.log('favRestaurant,is_fav,listNumber', favRestaurant,is_fav,listNumber); + //console.log('favRestaurant,is_fav,listNumber', favRestaurant,is_fav,listNumber); if(is_fav) { - console.log('fav', favRestaurant); + /// console.log('fav', favRestaurant); //favRestaurant[listNumber].style.borderColor = '#c22c2c'; favRestaurant.style.borderColor = '#c22c2c'; } else { - console.log('else', favRestaurant); + // console.log('else', favRestaurant); //favRestaurant[listNumber].style.borderColor = '#ccc'; favRestaurant.style.borderColor = '#ccc'; } - } +/** + * get fav status + */ getRestaurantfavStatus = (id) => { return fetch(`http://localhost:1337/restaurants/${id}`).then(response => { return response.json(); @@ -65,7 +69,6 @@ createRestaurantHTML = (restaurant,callback) => { fav.id = 'fav' + restaurant.id; fav.innerHTML =' ☆'; // control favorite status of restaurant - //console.log('createRestaurantHTML',restaurant,getRestaurantfavStatus(restaurant.id)); getRestaurantfavStatus(restaurant.id).then(status => { if(status){ li.style.borderColor = '#c22c2c'; @@ -79,6 +82,7 @@ createRestaurantHTML = (restaurant,callback) => { } }); li.append(fav); + image.alt = "showing restaurant is " + restaurant.name + " and cuisine type is " + restaurant.cuisine_type; loadImage = (restaurant, idStr) => { // console.log('loadImage,restaurant,idStr', restaurant,idStr); @@ -88,7 +92,6 @@ createRestaurantHTML = (restaurant,callback) => { //add srcset and sizes to make responsive images. image.srcset = `images/${restaurant.id}-300small_low.jpg 480w,images/${restaurant.id}-600medium.jpg 600w`; image.sizes = "(max-width: 600px) 20vw,(min-width: 601px) 50vw"; - image.alt = "showing restaurant is " + restaurant.name + " and cuisine type is " + restaurant.cuisine_type; } @@ -119,7 +122,7 @@ updateSelectedRestaurants = () => { } afterUpdate = (x) => { -console.log('afterUpdate',x); +//console.log('afterUpdate',x); x.forEach(a => { let status = restaurant.is_favorite; @@ -145,7 +148,7 @@ console.log('afterUpdate',x); } /** - * Add and remove favorite restaurants. + * Add favorite restaurants. */ addFavorite = (id) => { @@ -159,15 +162,18 @@ addFavorite = (id) => { } }).then(res => { - console.log('response status:', res); + // console.log('response status:', res); return res.json(); }).then(response => { - console.log('response status:', response.is_favorite); + // console.log('response status:', response.is_favorite); }); } +/** + * Remove favorite restaurants. + */ removeFavorite = (id) => { fetch(`http://localhost:1337/restaurants/${id}/`, @@ -180,12 +186,12 @@ removeFavorite = (id) => { } }).then(res => { - console.log('response status:', res); + // console.log('response status:', res); return res.json(); }).then(response => { - console.log('response status:', response.is_favorite); + // console.log('response status:', response.is_favorite); @@ -196,7 +202,7 @@ removeFavorite = (id) => { let restaurantsList = document.getElementById('restaurants-list'); restaurantsList.addEventListener('click', (e) => { - console.log('click', e); + //console.log('click', e); let clickedElementID = e.target.id ; let clickedTarget = e.target; let clickedElementIDNumber = clickedElementID.replace( /^\D+/g, ''); @@ -204,7 +210,7 @@ restaurantsList.addEventListener('click', (e) => { if (clickedElementID.includes('fav') && !clickedTarget.classList.contains('checked') ) { - console.log('clicked', e); + // console.log('clicked', e); addFavorite(clickedElementIDNumber); @@ -227,4 +233,9 @@ restaurantsList.addEventListener('click', (e) => { }); +/* +restaurantsList.addEventListener('onfocus', event => { + +}); +*/ \ No newline at end of file diff --git a/src/js/restaurant_info.js b/src/js/restaurant_info.js index a7a3f0f6a..964370dfe 100644 --- a/src/js/restaurant_info.js +++ b/src/js/restaurant_info.js @@ -226,8 +226,9 @@ addReview = () => { let rev = document.getElementById('form'); rev.style.top = "18vh"; rev.style.left = "10vw"; - + //rev.focus(); let main = document.getElementById('maincontent'); + //main.blur(); main.style.opacity = "0.5"; let breadcrumb = document.getElementById('breadcrumb');